Mtg prototyping
Upcoming SlideShare
Loading in...5
×
 

Mtg prototyping

on

  • 303 views

 

Statistics

Views

Total Views
303
Views on SlideShare
154
Embed Views
149

Actions

Likes
0
Downloads
3
Comments
0

1 Embed 149

http://www.praxisnetwork.eu 149

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mtg prototyping Mtg prototyping Presentation Transcript

    • 12TH OF MARCH 2013Wireframing in Design ProcessesAndreas Kure Thorngreen, Senior Lecturer, AU Herning, DenmarkMind The Gap, Terrassa February 2013
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaNow what?1. Idea generation – A note and perhaps a quick and dirty workshop2. The point of prototyping and wireframing3. Deciding and organizing contents4. Sketching ideas for design and layout5. Wireframing in general6. User testing7. The Pencil Application
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaBooks 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaA short note on the processIDEA GENERATION
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaResearch› 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaIdea 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaJust 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaIntroduction:PROTOTYPING, WIREFRAMINGAND FEELING SAFE
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaThe 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaThe 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaAdvice:Work on the right idea!Keep it flexible! (for as long as possible)Test it on humans!
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaDon’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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaFlexibility 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaWhat’s in it?DECIDING AND ORGANIZINGCONTENTS
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaContents 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaExercise: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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaExercise: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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaOrganizing 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaExercise:Make a sitemap› Make a logical division of the contents into pages or screens› How should features be grouped?
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaThey may be as ugly as they want to, as long as they communicate!SKETCHING
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaSketching: 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaExercise: 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaInspiration: 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaExercise: 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaExercise: 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaFrom bare-bone sketch to higher level of detailWIREFRAMING
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of Multimedia“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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaWireframe 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaWireframes: 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaExercise: 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaGoing wide or going deep?HORIZONTAL AND VERTICALPROTOTYPES
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaHorizontal 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaHorizontal 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaWIREFRAMING: USER TESTING
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaUser 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaExercise: 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaAnd now to something more concrete: Wireframing applications!WIREFRAMING: “PENCIL”
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaExamples 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaWhat 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaDownloading Pencil http://pencil.evolus.vn/
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaPencil Interface Toolbox Canvas
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaPencil Tool Groups
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaAdding shapes Drag and drop shapes from the Toolbox, move and resize them afterwards.
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaArh… We can’t avoid looking at the app!› So let’s do that!› There are some NICE options waiting.
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaExercise: Play Around!› Familiarize yourself with dragging elements to the canvas, move and resize them.
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaPage 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of Multimedia 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 The same options are available as for the Page upper right part of the screen: Properties earlier. Choose the same size as the previous page!
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaLinks 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaLinks between pages 2. Double-click to rename.1. Drag a Hyperlink to the work area: 3. Right-click and select “Link to” and choose the page you want the link to link to.
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaExercise: Links› Make two pages and link them together.
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaExporting 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaExporting the wireframe In “Export to Document” you can choose different options. “Single web page” exports an interactive version.
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaExporting the wireframe You can then choose to export all the pages:
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaExporting 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaExporting the wireframeThe resulting files include“index.html” which is the first pageopened by the browser. Double-click to open the page in yourdefault browser. The folder “pages” contains pictures of the pages you have made. TheseThe “Resources” folder contains a pictures are inserted one after theso-called Stylesheet. This decides other in the webpage. When you clickthe layout, colors and fonts of a a link, it simply jumps down to thatwebsite. picture in the same page.
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaExercise: 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaUser 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 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaThis is …THE END
    • WIREFRAMING IN DESIGN PROCESSES 12th of March 2013 Andreas Kure Thorngreen Senior Lecturer, Master of MultimediaThis 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.