search

dwyl / learn-wireframing

💡 📰 Learn how to share your UX ideas with your team and the world so you can test hypotheses fast!
GNU General Public License v2.0
24 stars 3 forks source link

Why? What? Who? How? #1

Open nelsonic opened 5 years ago

nelsonic commented 5 years ago

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.

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!

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

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

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 commented 5 years ago

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

Cleop commented 5 years ago

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

nelsonic commented 5 years ago

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

nelsonic commented 5 years ago

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

Cleop commented 5 years ago

@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 commented 5 years ago

@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

Cleop commented 5 years ago
  • 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 commented 5 years ago

@Cleop good clarifying question. 👍 What I had in mind with regards to "progression" in the context above: image 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: ux-progression

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, image Hand-sketching is perfect for quickly discussing an idea in-person or via remote collaboration.

image 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. sitemap-flow source: https://speckyboy.com/collection-inspiring-sitemaps-user-flow-maps

Cleop commented 5 years ago

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.

stick person

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?

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

An example of a basic 'About Page' wireframe for desktop view: wireframe 1

An example of hand drawn login flow wireframes for mobile: wireframes

2. Sharing/Showing your sketch to people.

3. Basic Tools: Google Drawings/Slides

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)

A replica of the hand drawn wireframes above made using draw.io: image

(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 ➕

Cons ➖

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 ➕

Cons ➖

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 ➕

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 ➕

Cleop commented 5 years ago

I have not found open source wireframing tools aside from:

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 ➕

Cons ➖

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 ➕

Cons ➖

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 ➕

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 ➕

Cleop commented 5 years ago

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?
nelsonic commented 5 years ago

"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 commented 5 years ago

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:

wireframe made with MyDraft
Cleop commented 5 years ago

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

Reading sources for paid tools:

  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.

nelsonic commented 5 years ago

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