Merge pull request #6 from dwyl/readme-examples

#1 Adds real world example for wireframing flow

README.md

@@ -49,7 +49,20 @@ https://www.google.co.uk/slides/about/
 ### 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)
+
+### 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:
+
+<img src="https://user-images.githubusercontent.com/16775804/53098306-446e9e00-351b-11e9-98dd-e484969c1e90.png" width="200px" alt="wireframe made with MyDraft" />
+
+### 2. draw.io (formerly diagramly)
 A replica of the hand drawn wireframes above made using [draw.io](https://www.draw.io/):
 ![image](https://user-images.githubusercontent.com/16775804/53032806-7de5d180-3467-11e9-95f6-19bde6a79037.png)
 
@@ -63,7 +76,7 @@ Built using the Google Drawings platform so offering the same benefits as the ot
 #### Cons ➖
 - Not open source
 
-#### 2. Google drive Drawings/ Slides
+#### 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 ➕
@@ -73,7 +86,7 @@ While Google Drawings and Google Slides are not wireframing applications, they c
 - 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/
+### 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 ➕
@@ -84,7 +97,7 @@ Wireframe.cc is an online wireframing tool that offers unlimited free use. It's
 - 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
+### 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 ➕
@@ -94,3 +107,17 @@ As the name suggests, this tool is custom built for creating mock ups and wirefr
 #### 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.
+
+![user sign up flow part 1](https://user-images.githubusercontent.com/16775804/54311893-711f4e00-45cd-11e9-9e1b-ca8cb06c070f.png)
+![user sign up flow part 2](https://user-images.githubusercontent.com/16775804/54311899-7aa8b600-45cd-11e9-87c2-21841bc8a2f8.png)