59
12TH OF MARCH 2013 Wireframing in Design Processes Andreas Kure Thorngreen, Senior Lecturer, AU Herning, Denmark Mind The Gap, Terrassa February 2013

Mtg prototyping

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Mtg prototyping

12TH OF MARCH 2013

Wireframing in Design Processes

Andreas Kure Thorngreen, Senior Lecturer, AU Herning, DenmarkMind The Gap, Terrassa February 2013

Page 2: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Now what?

1. Idea generation – A note and perhaps a quick and dirty workshop

2. The point of prototyping and wireframing

3. Deciding and organizing contents

4. Sketching ideas for design and layout

5. Wireframing in general

6. User testing

7. The Pencil Application

Page 3: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Books on the subject(s)

› Brown, Dan M.: “Communicating Design: Developing Web Site Documentation for Design and Planning”, Second Edition, New Riders, September 15, 2010.

› Garett, Jesse James: “The Elements of User Experience: User-centered Design for the Web and Beyond”, New Riders, 2010.

› Jesmond, Allen & Chudley, James: “Smashing UX Design: Foundations for Designing Online User Experiences (Smashing Magazine Book Series)”, 18 May 2012.

› Or hey: Go to your library or bookstores and look for books on wireframing and prototyping

Page 4: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

IDEA GENERATIONA short note on the process

Page 5: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Research› Before starting any creative process, you must consider:

› The aim and purpose of what you are doing.› Who are the users? › How would the users use what you are producing?› Why would or should they use it?

Page 6: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Idea Generation & Criticism› Yellow Zone:

› Define the problem to be solved. Or define which desire to create and then fulfill (who knew they needed to play Angry Birds?)

› Green Zone:› Unprejudiced and almost weird brainstorming, provoking as much

output as possible! What would catholics do? What would McDonalds do? Look at a painting and write it all down.

› Red Zone:› Criticizing ideas and determining which ideas, in whole, in part or

even in combination, might actually have chance of solving the problem defined.

Page 7: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Just Checking …› Do you have a problem defined that you want to address?

› Can it be solved with a web app?

› What we will be doing here, you can do on your own too!

Page 8: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

PROTOTYPING, WIREFRAMING AND FEELING SAFE

Introduction:

Page 9: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

The point of prototyping and wireframing› Playing in a band?

› You rehearse before playing a concert.

› Doing Parkour? › Tricks can be practiced on a parking lot, not on stairs or between buildings as

the first thing you do.

› Firefighter or soldier? › You practice in a simulator and in simulated situations in order to react

properly.

› An architect about to make a house?› Plenty of drawings are made and calculations in order to not build the wrong

building.

› Designing a car?› Models are built and tested before putting them into mass production.

Page 10: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

The point of prototyping and wireframing› Designing an application, a website or the like? (that’s you)

› Acquire knowledge about the area

› Draw on paper

› Let ideas flow, create more and more concrete examples

› Pretend your drawing is the real thing when testing on humans, and get real reactions!

› Make detailed colorful and perhaps even interactive models.

› Test, test and test on human subjects! Record them on video! Ha haa!

› Refine your designs when they are still flexible.

Page 11: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Advice:

Work on the right idea!

Keep it flexible! (for as long as possible)

Test it on humans!

Page 12: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Don’ts!

› Don’t start constructing right away! It is often a waste of time OR becomes darlings you must kill!

› Don’t start designing the final product before you are sure you are working on the right thing.

› Don’t squeeze some good ideas or single design pieces into a complete design, if the whole design is suffering (kill your darlings)

› Don’t make it too complex. KISS: Keep It Simple, Stupid!

Page 13: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Flexibility in the process

Beginning: Total flexibility! Lots of ideas! Wee!

As the process moves on:More design choices made narrow in

the flexibility. But still quite some freedom!

Near the end: Almost all choices made and

constructed, expensive to change!

Page 14: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

DECIDING AND ORGANIZING CONTENTS

What’s in it?

Page 15: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Contents and Features: Core contents› What features should the web app have in order to fulfill the

goal?

› What features are outside the scope of the web app?We must avoid that it becomes “bloated”, forcing inconsistent ideas in it.

› There needs to be some coherence in the app.“Who you’re gonna call?”

Page 16: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Exercise: Individual brainstorm on features & contents

› Each group and group member has lots of ideas!Let’s exploit that fact:

› Each group member writes down on paper all ideas she/he can think of relating to what features the web app should have.

› No talking! No criticism! Live and let live!

› Provoke more ideas by thinking:› What would Antoni Gaudi do?› What would McDonalds do?› What would a madman do?› What would the president of the United States do?

Page 17: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013Exercise:Group similar ideas about feature ideas› Now in the groups, you need to cooperate in organizing the

material.

› Introduce and organize:

1. All ideas are put on the table

2. Group the ideas when they are alike or logically the same

3. Select the best ones and find a coherence in them.

4. If something doesn’t fit, either it must be discarded, reformed or the whole idea rephrased to fit that.

Page 18: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Organizing contents: Sitemap

› Now, the ideas should be divided into pages or sections

› In web design it’s called a sitemap, because it’s a map of the site:

What’s on which page?

Welcome

Events Sign up

Contact

Page 19: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Exercise:Make a sitemap› Make a logical division of the contents into pages or screens

› How should features be grouped?

Page 20: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

SKETCHINGThey may be as ugly as they want to, as long as they communicate!

Page 21: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Sketching: The Purpose› To capitalize on the flexibility of the beginning of the process.

› It’s very easy to change a sketch – but not at all easy to change a whole application!

› To get specific and general ideas for any part of the webapp, and have capture them on paper!

› You can sketch out:› Whole layouts› One part of the design, a header or logo

Page 22: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Exercise: Individual sketching ideas

› Your task: › Individual sketching of ideas for the problem defined from the

top of your head.

› No one talks to each other!

Page 23: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Inspiration: Is it dangerous?› Quick answer: No!

› Everyone imitates each other legally. Rounded corners, colors, music styles - all media products imitate each other a lot!

› Copyrights and plagiarism dictate that we are not to copy a design in its entirety … but we may still use similar ideas to theirs!

Page 24: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Exercise: Inspiration and sketching part I› Look at apps on your phone, and websites online

› Find good looking layouts, logos, top bars, backgrounds etc.

› Make a sketch of the ideas on paper. Just keep drawing.

› (You may talk during this exercise)

› If there are certain colors to use, you can just write what color it is, or perhaps use crayons?

› You can find inspiration for:› Placements of different sections on the site or app (layout)› Logo design, complete with details and colors› Sizes of pictures, amount of text, decorations› Ways it moves, animations› Et cetera!

Page 25: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Exercise: Inspiration and sketching part II:Selecting and Combining the Ideas

› Now combine the sketches you have: The best ideas from both rounds.› Put the sketches in the middle of the table› Select the good ones you can agree are good› Group ideas in logical portions› Keep the rest, but separated.

› Keep it logical! It should be surrounding the same subject.

Page 26: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

WIREFRAMINGFrom bare-bone sketch to higher level of detail

Page 27: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

“Wireframe”

› The word “wireframe” is often used in 3D modeling, where a model without textures can be previewed to see the whole shape:

However for websites and other 2D apps, we work with a 2D grid:

Page 28: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Wireframe Detail Level

› Low-fidelity Wireframes:› Rough sketch or quick mock-up. Quick to

produce, quite abstract, rectangles and labelling.

› High-fidelity Wireframes:› Incorporates higher level of detail, that more

closely matches the actual design of the final webpage.

Source: Wodtke, Christina & Govella, Austin: “Information Architecture: Blueprints for the Web”, Second Edition, New Riders. ISBN 978-0-321-59199-9.

Page 29: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Wireframes: Summary› So:

› Wireframes can be made on paper, on computer screens or wherever you can make a model of the web app or website

› Wireframes can be of low or high detail

› The point of them is to make design decisions before constructing more detailed versions that take longer to edit.

Page 30: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Exercise: Create a paper wireframe

› Spend max. 5 minutes putting together 2 – 3 screens of your app. (Right now, we are just trying this technique out, later you will be more thorough)

› It must have:› Buttons for navigation› Contents with information of some sort

› Use the sketches you have already made

› Keep it lo-fi – No colors, just placement of elements.

Page 31: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

HORIZONTAL AND VERTICAL PROTOTYPES

Going wide or going deep?

Page 32: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Horizontal and Vertical Prototypes› A horizontal prototype is testing a broad palette of features

and gives an overview of what the application might look like in the end. It is not very detailed, but focuses on the broad features.

› A vertical prototype selects a certain area and makes a detailed model of how it would look. It would resemble the final product quality.

Page 33: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Horizontal and Vertical Prototypes› Why is this relevant?

› A prototype is a model to test and show certain aspects of a system, perhaps all.

› When making a prototype, one may choose to show a certain part of the system.

› So, WHY is that relevant here? You may want to decide at some point that you want to go for either a horizontal or vertical prototype, or make a complete prototype.

Page 34: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

WIREFRAMING: USER TESTING

Page 35: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

User Testing

› Why user testing?› A common mistake is forgetting the user!› We tend to make products the way we like them, and then nothing is sold or used

because the users didn’t like it or couldn’t figure out how to use it.

› Why aren’t designers and technology developers doing it?› Sometimes, I think it’s because they’re LAZY!› Other times they are ARROGANT!› It could also be because they don’t have money or the time to do it.› Or, maybe they don’t know about the option, or aware of the importance.

› How user testing?› We use our prototype / wireframe!› We perform a little game, where one acts as the user, the other as the machine!

Page 36: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Exercise: User Testing

› You need: A wireframe for each page or screen in the application, possibly with buttons to switch between them.

› You can choose to use a wireframe on paper or one made in Pencil

› Work in pairs

› One has the role of the user. (S)he must think aloud and try to use the application.

› The other is the machine and switches the pages when the user asks for it.

› You can also record the session on video for later scrutiny.

Page 37: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

WIREFRAMING: “PENCIL”And now to something more concrete: Wireframing applications!

Page 38: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Examples of wireframing applications› Balsamiq Mockups

› MockFlow

› Axure

› Hotgloo

› Mockingbird

› Pencil Project (we’ll try this one!)

› For more results:› http://webdesignledger.com/tools/10-excellent-tools-for-creating-web-design-wireframes

Page 39: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

What is Pencil?› Pencil is a wireframing application!

› It can be used to:› Create a sketch like you would on paper› Create more detailed sketches, or prototypes, of the site you are

designing› Create a (or an almost) complete design of the website› Export images of the design› Test link structure

Page 40: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Downloading Pencil

http://pencil.evolus.vn/

Page 41: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Pencil InterfaceToolbox Canvas

Page 42: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Pencil Tool Groups

Page 43: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Adding shapes

Drag and drop shapes from the Toolbox, move and resize them afterwards.

Page 44: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Arh… We can’t avoid looking at the app!

› So let’s do that!› There are some NICE options waiting.

Page 45: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Exercise: Play Around!

› Familiarize yourself with dragging elements to the canvas, move and resize them.

Page 46: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Page PropertiesDouble-click “Untitled Page” to see options for the page, including size.

Set page title.Set size to the page size you are designing for!

Set a background color:

Page 47: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Links between pages

› You can make several pages in the site, and then make a menu with links to the different pages.

› First, of course, there should be more than one page:

Create a new page with the button in the upper right part of the screen:

The same options are available as for the Page Properties earlier. Choose the same size as the previous page!

Page 48: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Links between pages

You can now switch between pages:

Each page can be organized the way you want. However, each page in a site always has the same basic layout, where only the arrangement of the content changes.

Page 49: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Links between pages

1. Drag a Hyperlink to the work area:2. Double-click to rename.

3. Right-click and select “Link to” and choose the page you

want the link to link to.

Page 50: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Exercise: Links

› Make two pages and link them together.

Page 51: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Exporting the wireframe

Your options for export are:

Export to images in PNG format

Export as Document, including HTML files as one of the options.

Go to:“Document > Export Page as

PNG” or“Document > Export Document”

Page 52: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Exporting the wireframe

In “Export to Document” you can choose different options.

“Single web page” exports an interactive version.

Page 53: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Exporting the wireframe

You can then choose to export all the pages:

Page 54: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Exporting the wireframe

Choose a destination and leave the rest as it is.

The result is one html document, where the links actually work!

Page 55: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Exporting the wireframeThe resulting files include “index.html” which is the first page opened by the browser. Double-click to open the page in your default browser.

The folder “pages” contains pictures of the pages you have made. These pictures are inserted one after the other in the webpage. When you click a link, it simply jumps down to that picture in the same page.

The “Resources” folder contains a so-called Stylesheet. This decides the layout, colors and fonts of a website.

Page 56: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

Exercise: Export wireframe› Export the wireframe as HTML and study the result.

› To export it:› Document > Export Document

› Choose:› Single Web Page› All Pages in Document› Choose a destination – Your desktop or the like

› Open the exported wireframe:› Double-click “index.html”

Page 57: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

User testing again! Horray!› Now we can go on to do the same thing again, this time with a

wireframe of higher fidelity.

› Maybe this time, we should let someone else use our app?

› Remember:› Let the user think aloud› Do not interrupt or help!› Record the session on video

Page 58: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

THE ENDThis is …

Page 59: Mtg prototyping

WIREFRAMING IN DESIGN PROCESSESAndreas Kure Thorngreen

Senior Lecturer, Master of Multimedia

12th of March 2013

This is the end …

Thank you for participating, I am looking forward to coaching you!

“Farvel og på gensyn” – Thank you, see you again!

Best wishes from Andreas Kure Thorngreen, AU Herning, Denmark.