Transcript
12TH OF MARCH 2013
Wireframing in Design Processes
Andreas Kure Thorngreen, Senior Lecturer, AU Herning, Denmark Mind The Gap, Terrassa February 2013
WIREFRAMING IN DESIGN PROCESSES Andreas 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
WIREFRAMING IN DESIGN PROCESSES Andreas 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
WIREFRAMING IN DESIGN PROCESSES Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
12th of March 2013
IDEA GENERATION A short note on the process
WIREFRAMING IN DESIGN PROCESSES Andreas 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?
WIREFRAMING IN DESIGN PROCESSES Andreas 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.
WIREFRAMING IN DESIGN PROCESSES Andreas 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!
WIREFRAMING IN DESIGN PROCESSES Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
12th of March 2013
PROTOTYPING, WIREFRAMING AND FEELING SAFE
Introduction:
WIREFRAMING IN DESIGN PROCESSES Andreas 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.
WIREFRAMING IN DESIGN PROCESSES Andreas 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.
WIREFRAMING IN DESIGN PROCESSES Andreas 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!
WIREFRAMING IN DESIGN PROCESSES Andreas 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!
WIREFRAMING IN DESIGN PROCESSES Andreas 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!
WIREFRAMING IN DESIGN PROCESSES Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
12th of March 2013
DECIDING AND ORGANIZING CONTENTS
What’s in it?
WIREFRAMING IN DESIGN PROCESSES Andreas 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?”
WIREFRAMING IN DESIGN PROCESSES Andreas 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?
WIREFRAMING IN DESIGN PROCESSES Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
12th of March 2013
Exercise: 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.
WIREFRAMING IN DESIGN PROCESSES Andreas 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
WIREFRAMING IN DESIGN PROCESSES Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
12th of March 2013
Exercise: Make a sitemap (or clusters) › Make a logical division of the contents into pages or screens
› How should features be grouped?
WIREFRAMING IN DESIGN PROCESSES Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
12th of March 2013
SKETCHING They may be as ugly as they want to, as long as they communicate!
WIREFRAMING IN DESIGN PROCESSES Andreas 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
WIREFRAMING IN DESIGN PROCESSES Andreas 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.
WIREFRAMING IN DESIGN PROCESSES Andreas 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!
WIREFRAMING IN DESIGN PROCESSES Andreas 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!
WIREFRAMING IN DESIGN PROCESSES Andreas 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.
WIREFRAMING IN DESIGN PROCESSES Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
12th of March 2013
WIREFRAMING From bare-bone sketch to higher level of detail
WIREFRAMING IN DESIGN PROCESSES Andreas 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:
WIREFRAMING IN DESIGN PROCESSES Andreas 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.
WIREFRAMING IN DESIGN PROCESSES Andreas 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.
WIREFRAMING IN DESIGN PROCESSES Andreas 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.
WIREFRAMING IN DESIGN PROCESSES Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
12th of March 2013
HORIZONTAL AND VERTICAL PROTOTYPES
Going wide or going deep?
WIREFRAMING IN DESIGN PROCESSES Andreas 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.
WIREFRAMING IN DESIGN PROCESSES Andreas 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.
WIREFRAMING IN DESIGN PROCESSES Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
12th of March 2013
WIREFRAMING: USER TESTING
WIREFRAMING IN DESIGN PROCESSES Andreas 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!
WIREFRAMING IN DESIGN PROCESSES Andreas 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.
WIREFRAMING IN DESIGN PROCESSES Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
12th of March 2013
WIREFRAMING: “PENCIL” And now to something more concrete: Wireframing applications!
WIREFRAMING IN DESIGN PROCESSES Andreas 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
WIREFRAMING IN DESIGN PROCESSES Andreas 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
WIREFRAMING IN DESIGN PROCESSES Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
12th of March 2013
Downloading Pencil
http://pencil.evolus.vn/
WIREFRAMING IN DESIGN PROCESSES Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
12th of March 2013
Pencil Interface Toolbox Canvas
WIREFRAMING IN DESIGN PROCESSES Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
12th of March 2013
Pencil Tool Groups
WIREFRAMING IN DESIGN PROCESSES Andreas 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.
WIREFRAMING IN DESIGN PROCESSES Andreas 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.
WIREFRAMING IN DESIGN PROCESSES Andreas 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.
WIREFRAMING IN DESIGN PROCESSES Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
12th of March 2013
Page Properties Double-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:
WIREFRAMING IN DESIGN PROCESSES Andreas 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!
WIREFRAMING IN DESIGN PROCESSES Andreas 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.
WIREFRAMING IN DESIGN PROCESSES Andreas 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.
WIREFRAMING IN DESIGN PROCESSES Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
12th of March 2013
Exercise: Links › Make two pages and link them together.
WIREFRAMING IN DESIGN PROCESSES Andreas 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”
WIREFRAMING IN DESIGN PROCESSES Andreas 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.
WIREFRAMING IN DESIGN PROCESSES Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
12th of March 2013
Exporting the wireframe
You can then choose to export all the pages:
WIREFRAMING IN DESIGN PROCESSES Andreas 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!
WIREFRAMING IN DESIGN PROCESSES Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
12th of March 2013
Exporting the wireframe The 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.
WIREFRAMING IN DESIGN PROCESSES Andreas 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”
WIREFRAMING IN DESIGN PROCESSES Andreas 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
WIREFRAMING IN DESIGN PROCESSES Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
12th of March 2013
THE END This is …
WIREFRAMING IN DESIGN PROCESSES Andreas 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.
top related