Why? What? Who? How?

[nelsonic]

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.

• 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 do this very well!) then you already know how to draw a wireframe.

Who?

• 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!

• 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?
  • Prepare a shortlist of the best free wrireframing tools that exist.
  • Explain the pros and cons of each tool.
  • 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! 👍

[nelsonic]

@Cleop how do you feel about taking the lead on this?

[Cleop]

Sounds good @nelsonic, I'll start by creating some images for the places you've suggested. Thanks for involving me!

[nelsonic]

@Cleop as soon as you wrap up your current task on Club Soda please take a look at this. Thanks! ✨

[nelsonic]

Possible shortlist: https://zapier.com/blog/best-wireframe-tools/ ?

[Cleop]

@nelsonic, having reread your comment above:

as soon as you wrap up your current task on Club Soda please take a look at this

Are you happy for me to look at this with other CS issues still in the sprint column? Previously I thought I'd move on to this after I'd cleared the sprint column but I realised you said 'your current task on CS'.

[nelsonic]

@Cleop good question.
apologies, "current" isn't clear, I should have been more specific to avoid doubt.

On the basis that there are still a few priority-2 (high priority) items in the "Sprint 4" column: https://github.com/club-soda/club-soda-guide/projects/1 I suggest that you pick off a couple more of those CS issues/tasks so that we can "wrap up" CS as much as possible to delight the CS users/PO.

When you get to the "UX" issue ("Improving the UX of uploading pictures" which is P4),
and provided there are no priority-1 issues demanding your attention,
The "UX of Uploading Images" is a really good example where a Wireframe/UX flow
(that most people can relate to) would be a good fit for explaining wireframing (i.e. this task).

So there is a symbiosis between creating a generic/re-useable learning resource + code
that applies to the client project and will be immediately relevant to Time/Activity Tracking
(the ability to upload images is a feature people "don't know they need/want",
until they see it's applicability/usefulness and won't want to live without it!)

Next Action

• Focus on finishing CS so that the PO/users does not have to wait for features that are easily implemented. (or "bugs" that are simple - albeit time-consuming - to fix) 🚧
• Check-in with @iteles during standup and/or retro to confirm how many more of the issues in the backlog we are going to pick off before considering the MVP "ready" for extended UX testing. 📱
• Once Inês/PO confirms that they are "happy" with the state of the CS App/Site,
  check you own personal backlog (assigned issues & pull requests) to confirm that there is nothing "important" or "urgent" that should take precedence over writing a tutorial/how-to/example. 📥
• With your "inbox" cleared, go for a walk/run in the fresh air to clear your mind. ☀️
• .then start work on this task with all your creative energy. ✅

[Cleop]

• 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.

@nelsonic - for this point, what do you mean in terms of 'progression'? Do you mean progressing from low fidelity to high fidelity or from an initial idea and then getting user feedback so the design/feature is refined more. Or something totally different?

[nelsonic]

@Cleop good clarifying question. 👍
What I had in mind with regards to "progression" in the context above:

is literally showing how a user "progresses" through the application.
i.e. how they go from one "screen" (or "view") to the next one. e.g:

In the first ("Fundamentals") part of this quest, just use the simplest tool you can find and show a "flow" through your chosen "user story".

Try to avoid hand-drawing the screens in a tutorial unless the tutorial is about hand-sketching.
Sketching absolutely has it's "place" when "brainstorming" ideas in a collaborative session,

Hand-sketching is perfect for quickly discussing an idea in-person or via remote collaboration.

but when it comes to communicating with the rest of the team, realistic (but low-fidelity) straight lines and legible fonts are much more effective because people are less likely to "misinterpret" things.

source: https://speckyboy.com/collection-inspiring-sitemaps-user-flow-maps

[Cleop]

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 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:

(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

[Cleop]

I have not found open source wireframing tools aside from:

• Pencil https://pencil.evolus.vn/ which is a desktop app that was last released in 2017.

Non open source but free:

1. draw.io (formerly diagramly)

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

[Cleop]

WIP -

Part 2: Professional Tools

1. 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".

[nelsonic]

"I have not found open source wireframing tools" ...

@Cleop could it be worth opening a question similar to this one:
https://stackoverflow.com/questions/3432665/open-source-or-free-wireframe-tools
but on the appropriate forum e.g: https://ux.stackexchange.com

?

[Cleop]

Yeah, I tried that SO article, I should have mentioned that in my comment, apologies.

I didn't know UX stack exchange existed so thanks, I've made a question:
https://ux.stackexchange.com/questions/123919/what-open-source-and-free-wireframing-tools-are-there

So far... no suggestions although I have been told:

Asking for tool recommendations is off topic

@SimonLab suggested I search using github's search functionality 💪🐱 and it turns out that there are a couple of repos with a lot of stars:

• Wirefy - 750 stars -https://github.com/cjdsie/wirefy, http://getwirefy.com/ - not an online tool, requires downloading and some command line knowledge
• MyDraft - 65 stars- https://mydraft.cc/, https://github.com/mydraft-cc/ui - can be used online, written in typescript, react and redux, uses font awesome library for icons. A bit basic but seems usable. Made this version of my wireframe above with it:

[Cleop]

• add MyDraft to the readme

WIP --------------

Reading sources for paid tools:

• https://zapier.com/blog/best-wireframe-tools/
• https://blog.templatetoaster.com/best-wireframe-tools/
• https://designseer.com/best-free-wireframe-tools/
• https://blog.placeit.net/best-wireframing-tools/
• https://www.creativebloq.com/wireframes/top-wireframing-tools-11121302

1. Sketch - (mac only) - $99 /year, free after the first year but with no new software updates

• InVision Studio
• Adobe XD

Sketch, Invision Studio, Adobe XD have some strong similarities such as the layout of their interface and vector graphic creation.

• Figma - (web, mac, windows, linux) - free up to 3 projects, $12 per user/month (billed annually)
• Balsamiq -

[nelsonic]

@Cleop is this the question: https://ux.stackexchange.com/questions/123919/what-open-source-and-free-wireframing-tools-are-there ?