Visualizing Wireflows: Managing Relationships Between Wireframes
Learn the process of arranging wireframes into wireflow diagrams in this exercise. Use pencils, markers, and sticky notes to visually represent the relationships between different screens in a screen-based application. Follow a design brief or work on your own problem to create an effective wireflow representation. Examples and step-by-step instructions included.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Wireflows Visualising the relationships between wireframes TURN TO: Page 172 Image Attribution: UX Indonesia, https://unsplash.com/photosqC2n6RQU4Vw
Wireflows Example: Image Attribution: Lorum ipsum dolor
PAGE 172 Wireflows YOU WILL NEED Pencil, marker, highlighters, scissors, paper, sticky notes, A3 or A2 paper, Blu-tack In this exercise, you will arrange a set of wireframes for a screen-based application into a wireflow diagram that represents their relationships. You can focus on your own design problem, or follow the Autonomous Vehicles brief (p.181). See p.185 for an example of a wireflow diagram. 1 2 3 4 5 6 [flexible] [10 mins] [15 mins] [15 min] [10 min] [15 min] Lorum ipsum dolor sit amet Image Attribution: UX Indonesia, https://unsplash.com/photosqC2n6RQU4Vw
PAGE 172 Wireflows YOU WILL NEED Pencil, marker, highlighters, scissors, paper, sticky notes, A3 or A2 paper, Blu-tack In this exercise, you will arrange a set of wireframes for a screen-based application into a wireflow diagram that represents their relationships. You can focus on your own design problem, or follow the Autonomous Vehicles brief (p.181). See p.185 for an example of a wireflow diagram. 1 2 3 4 5 6 [flexible] [10 mins] [15 mins] [15 min] [10 min] [15 min] Lorum ipsum dolor sit amet Image Attribution: UX Indonesia, https://unsplash.com/photosqC2n6RQU4Vw
PAGE 172 Wireflows YOU WILL NEED Pencil, marker, highlighters, scissors, paper, sticky notes, A3 or A2 paper, Blu-tack In this exercise, you will arrange a set of wireframes for a screen-based application into a wireflow diagram that represents their relationships. You can focus on your own design problem, or follow the Autonomous Vehicles brief (p.181). See p.185 for an example of a wireflow diagram. 1 2 3 4 5 6 [flexible] [10 mins] [15 mins] [15 min] [10 min] [15 min] Lorum ipsum dolor sit amet Image Attribution: UX Indonesia, https://unsplash.com/photosqC2n6RQU4Vw
PAGE 172 Wireflows YOU WILL NEED Pencil, marker, highlighters, scissors, paper, sticky notes, A3 or A2 paper, Blu-tack In this exercise, you will arrange a set of wireframes for a screen-based application into a wireflow diagram that represents their relationships. You can focus on your own design problem, or follow the Autonomous Vehicles brief (p.181). See p.185 for an example of a wireflow diagram. 1 2 3 4 5 6 [flexible] [10 mins] [15 mins] [15 min] [10 min] [15 min] Lorum ipsum dolor sit amet Image Attribution: UX Indonesia, https://unsplash.com/photosqC2n6RQU4Vw
PAGE 172 Wireflows YOU WILL NEED Pencil, marker, highlighters, scissors, paper, sticky notes, A3 or A2 paper, Blu-tack In this exercise, you will arrange a set of wireframes for a screen-based application into a wireflow diagram that represents their relationships. You can focus on your own design problem, or follow the Autonomous Vehicles brief (p.181). See p.185 for an example of a wireflow diagram. 1 2 3 4 5 6 [flexible] [10 mins] [15 mins] [15 min] [10 min] [15 min] Lorum ipsum dolor sit amet Image Attribution: UX Indonesia, https://unsplash.com/photosqC2n6RQU4Vw
PAGE 172 Wireflows YOU WILL NEED Pencil, marker, highlighters, scissors, paper, sticky notes, A3 or A2 paper, Blu-tack In this exercise, you will arrange a set of wireframes for a screen-based application into a wireflow diagram that represents their relationships. You can focus on your own design problem, or follow the Autonomous Vehicles brief (p.181). See p.185 for an example of a wireflow diagram. 1 2 3 4 5 6 [flexible] [10 mins] [15 mins] [15 min] [10 min] [15 min] Lorum ipsum dolor sit amet Image Attribution: UX Indonesia, https://unsplash.com/photosqC2n6RQU4Vw
Share your work! Upload photos of your work: 1) Go to: add URL here 2) Enter the password: password 3) Upload a photo and caption of your work 4) Wait for moderation 5) View others ideas A note to facilitators: Use this slide to give instructions for post-exercise sharing activities. These could take the form of facilitator-guided discussions, mini-presentations, or digital sharing via existing platforms (e.g. padlet) - as described here. Delete this paragraph when ready.
Design. Think Make. Break. Repeat. This work is licensed under a Creative Commons Attribution- NonCommercial-ShareAlike 4.0 International License. Designed by the authors of Design. Think. Make. Break. Repeat. A Handbook of Methods (BIS Publishers). www.designthinkmakebreakrepeat.com How to use these slides These companion slides for the published book Design Think Make Break Repeat: A Handbook of Methods , support facilitation of the published exercises during workshops, tutorials or other guided design sessions. Slide 1: Title. Introduce the method, using the description from the book. Slide 2: Examples. Use this slide to add your own images/examples of the method in use, or extra information. Slide 3+: Steps. Use one slide for each step of the method, to track timing and progress. The tip boxes can be used to offer extra guidance for specific steps, where needed. Slide 4: Sharing. Results of the exercise are shared and discussed, in an appropriate format. Slide design by: Hamish Henderson, Madeleine Borthwick
