Why? What? Who? How?

# _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.

# _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.

+ [x] Insert an example of a **stick-person** to show what the most elemental drawing looks like.

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_?

+ [x] insert picture of a person drawing a wireframe.

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!
+ [x] Give 3 examples of wireframes starting with the most simple one you can think of and working your way up to a "UX Flow" where you illustrate "progression" from one "screen" to the next.

2. **Sharing/Showing** your sketch to people.
+ [ ] What is the most effective way to share your sketch with others?
+ [ ] 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. I will have a decent example of a Google Slides based wireframe to share with you at this point in the Tutorial. So don't spend too much time thinking about an _example_. Just move on to the "basics" of Google Slides.

3. **Basic Tools: Google Slides**: https://www.google.co.uk/slides/about/
+ [ ] If you find good _official_ docs/videos for learning Google Slides UI, link to them!

4. More "**advanced**" (_than Google Slides but still **_free_) wireframing tools**
+ [ ] Research required: what is the best ***free*** online wireframing tool?
+ [x] Prepare a shortlist of the best _free_ wrireframing tools that exist.
+ [x] Explain the pros and cons of each tool.
+ [x] Give prominence to the Open Source, but at this stage prioritise ease-of-use to the person creating the sketch as opposed to the philosophy of code openness.
+ [ ] Reach a conclusive recommendation for the

If we can write this is in our "traditional" (_self-contained_) `README.md` style, it will be a _really_ good start.

## Part 2: Professional Tools

5. What are the "Top 5" paid-for wireframe tools/services that professionals use to capture their ideas, share them with their teams and collect collaborative feedback?
+ [ ] Research required: what are the "Top 5" (_or however many you chose to look at & compare_) "Pro" level Wireframing Tools/Apps that allow for low/medium (_or even high_) fidelity wireframes to be drawn, shared and collaboratively improved, e.g: Figma
+ [ ] Write this in a _separate_ `advanced-wrireframing-tools.md` doc so that be published as a _separate_ "Part 2 Blog Post".

> Note: this post will cross-link to our (_as yet unwritten_) post on Open Source. Crucially, it will link to the fact that that _most_ SaaS products are _closed_ source because significant value is being captured which in turn leads to more investment ... I will elaborate on this later; for now focus on this task: How to do Wireframing! 👍