Introduction

Creating an wireframe or low fidelity mockup is the first thing we do when we create an website or just visualizing the website idea and sharing with others.

Pen and paper is still the most popular choice to do this because of everybody knows how to use pen and paper. So no time wasted on learning the tool, straight to the work.

The professionals who can use Figma or Photoshop can do the same work so much faster.

What if we could take most of the functionality of the those advanced tools with very minimum learning curve/effort ? Let me introduce you to the free online tool Excalidraw.

It’s so easy to use, not only I use it to create an wireframe it has become my default mockup app. I use this frequently to share my idea to others.

Introduction to Excalidraw

Here’s the site link and when you will click on this it will look like this :

Yellow Marked 1 :

This where you export your drawings to PNG and save your Excalidraw format file for later use. There are also other things like change the color of the background, live collaboration.

I just take a screenshot in windows with windows key + shift + s and paste the image with control + v . Convenient for most of the use case.

Yellow Marked 2 :

 This is everything you could create with this app. This may not look much but you can do everything with just these tools.

Number 7 marked tool with the pencil emoji : This is a free hand tool which works like a normal pencil. And the next one, emoji letter A, is used for writing a text. Without that everything else is a default shape which you can shape up and add color.

For example look at this to understand how this works. Taken from the official website :

Yellow Marked 3 :

This is where you can zoom in or out your drawings. Also manual button for control + c / control + v

Yellow Marked 4 :

You can also change the language to your likings.

Example of an wireframe with existing library

The best thing about this tool is there is a existing library which you could import components and create your design very quickly.

For example, I have used the following library (Lo-Fi Wireframing Kit) :

To create this :