Learn Wireframing
Why?
In many cases sketching a wireframe of an idea is the fastest way to share that idea with other people. A wireframe is also one of the best ways of developing/expanding your own thinking/understanding 💭 of the idea at minimal cost (without having to write any code 👩💻).
What?
Wireframing is fancy way of saying "rough sketching" 🎨✏️. The objective is not to have a pixel-perfect rendering of the idea but rather to draw the minimum necessary to communicate. A wireframe should be as simple as possible to convey the concept to the observer without clutter or confusion.
If you know how to draw a stick-person (and most 5 year olds can do this very well!) then you already know how to draw a wireframe.
Who?
This skill is for anyone who has an idea that they need/want to communicate with others. It's for everyone from primary school children wanting to share their first idea to budding Entrepreneurs hoping to change the world! If you have a spark ✨in your mind and want to capture it, keep reading! By the end of this 25 minute block you will be well on your way to creating wireframes for your ideas!
How?
Our goal is to take people through "5 stages of wireframing" by dividing this tutorial/guide into two parts:
Part 1: The Fundamentals
1. Paper-based sketch for the absolute minimum idea capture!
An example of a basic 'About Page' wireframe for desktop view:
An example of hand drawn login flow wireframes for mobile:
- The first two screens of A and B show the same part of the journey. They are illustrating the contrast in 'high fidelity' (A) and 'low fidelity' (B) mock ups. Screen A has lots of detail and colour in the image section, it also has use of font styles in the text. Whilst not a rule, generally speaking wireframes are low fidelity. They typically don't include colours/specific fonts or photos. Rather, they simply map out the spaces for where these things will be. If you do choose to use colour or detailed elements in your wireframe do so considerately. Why is that particular detail necessary to show at this stage? Will it confuse team members/ stakeholders who see these designs and then think the quality of the rest of the wireframe is intended as high fidelity?
- The flow demonstrates what a user would experience from clicking on a button to the next page.
2. Sharing/Showing your sketch to people.
- If the sketch is paper-based, you already have a piece of paper (or page in your notebook) that you can share with people IRL! Or you can take a snap of the paper-sketch and share that with people who are not physically co-located with you.
- If the sketch is done using a digital tool, your first step is seeing if the tool has "sharing" built-in.
- Google Slides has sharing/co-editing built-in, that's why we recommend it for beginners.
3. Basic Tools: Google Drawings/Slides
https://www.google.co.uk/slides/about/
- Here's a 5min tutorial on drawing a wireframe using 'Google Drawings' however the same tools/symbols can be used for Google Slides which may be easier for longer wireframe flows: https://www.youtube.com/watch?v=aq56F3_DYXQ
4. Weighing up the best free wireframing tool for you
The order of these tools is a personal preference but feel free to open an issue to let us know about better tools or your thoughts on any of the tools listed below.
1. MyDraft https://mydraft.cc/, https://github.com/mydraft-cc/ui
MyDraft comes top of our list because it is both free and open-source. This is the only platform available online and still being maintained that we have come across (although please open an issue if you know of others :heart:). It is written in typescript, react and redux and uses the font awesome library for icons. It's available to use online. It has the basics of what's needed for building simple wireframes and being open source, you can create a PR if there are any new features you want to add! Here's a version of the first wireframe screen from above that was made with MyDraft:
2. draw.io (formerly diagramly)
A replica of the hand drawn wireframes above made using draw.io:
(A note on hand drawing vs. wireframing tools: hand drawing or using wireframing tools comes down to personal preference in terms of creative expression. However even if you choose to start with hand drawn notes, you can see that mocking things up using a computer programme can make your designs easier for other people to read.)
Built using the Google Drawings platform so offering the same benefits as the other tools (see below).
Pros ➕
- Benefiting from the extra features added by draw.io such as readily available iOS icons 📱 and shapes 🔴 ⬛️.
Cons ➖
- Not open source
3. Google drive Drawings/ Slides
While Google Drawings and Google Slides are not wireframing applications, they can be used for simple screen mock-ups. The tools are fast, offer collaboration and are easy to use. Diagrams can be output to a range of file types and embedded within other Google Drive documents.
Pros ➕
- There is no limit to how many screens you can create (slides works best for creating long flows), there is no limitation due to pricing and you are not restricted with how many people you share your work with.
Cons ➖
- Not specifically designed for wireframing so may lack some design specific shapes that other platforms provide
- Not open source
4. Wireframe.cc - https://wireframe.cc/
Wireframe.cc is an online wireframing tool that offers unlimited free use. It's a great option for people who want a simple, uncluttered user interface. Instead of toolbars, Wireframe.cc offers options that pop up when you need them and stay hidden when you don’t.
Pros ➕
- No sign up needed, instant wireframing
- Nice docs to help you learn about how to use it, including shortcut keys: https://wireframe.cc/docs/
Cons ➖
- Only single page wireframes available on the free version, you can make more than one but they'll each be on separate urls.
- Work can't be saved privately on the free version, your work is publicly viewable by the unique url for your wireframe
- Not open source
5. Moqups - https://moqups.com
As the name suggests, this tool is custom built for creating mock ups and wireframe. It’s fast, easy to use and works without a browser plug-in. Screens and buttons can be linked so you can publish a demonstration for your clients to view and use. Images can also be exported for specification diagrams.
Pros ➕
- Easy to use
- Good selection of icons
- Premium tier is free to NGOs and students
Cons ➖
- Free Plan only offers 1 project (limited to 250 objects) and 5MB of storage
- Not open source
Example
Here's an example of a user sign up flow for https://www.clubsodaguide.com/ it made using draw.io. In this example a venue manager e.g. Pub landlord wants to have their venue listed on the Club Soda Guide. To do this they first go to 'List A Venue', they then add their email address along with the other details of their venue and then once they've finished adding details about the venue they must verify their email. Once they've clicked the link in the verification email they are then asked to create a password. Once this process is complete a user can then login again as they have successfully set up an account to add new details or edit existing ones about their venue.
