-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
95 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,95 @@ | ||
| # learn-wireframing | ||
| Learn how to share your UX ideas with your team and the world so you can test hypotheses fast! | ||
| ### WIP - Editing this version | ||
| # _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](https://www.zerotothree.org/resources/305-learning-to-write-and-draw) 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. draw.io (formerly diagramly) | ||
| A replica of the hand drawn wireframes above made using [draw.io](https://www.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 | ||
|
|
||
| #### 2. 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 | ||
|
|
||
| ### 3. 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 | ||
|
|
||
| ### 4. 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 |