Introduction to wireframes

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    30 Favorites

    Introduction to wireframes - Presentation Transcript

    1. Wireframes Communication & Multimedia Design Rotterdam University of Applied Sciences Joel Laumans CMD Rotterdam | Interaction Design - Wireframes 1
    2. Today’s agenda What are wireframes? Why use them? Examples CMD Rotterdam | Interaction Design - Wireframes 2
    3. A lot is happening At times the design process can seem very complicated, a lot of things are happening at the same time. Many people from different disciplines are all working together (and often simultaneously) on the same project. Everyone has their own role, and to make a truly good product, the communication between the different parties involved has to be good. CMD Rotterdam | Interaction Design - Wireframes 3
    4. CMD Rotterdam | Interaction Design - Wireframes 4
    5. Jesse James Garret | The Elements of User Experience CMD Rotterdam | Interaction Design - Wireframes 5
    6. Interaction design? The task of an interaction designer will be to primarily focus on the structure and skeleton of an interface. There are many tools that can be used in this part of the design process, one of the most important being wireframes. Jesse James Garret | The Elements of User Experience CMD Rotterdam | Interaction Design - Wireframes 6
    7. Wireframes are: A visual representation of an interface; used to communicate the structure, content, information hierarchy, functionality, and behavior of an interface. CMD Rotterdam | Interaction Design - Wireframes 7
    8. Wireframes are: A visual representation of an interface; used to communicate the structure, content, information hierarchy, functionality, and behavior of an interface. CMD Rotterdam | Interaction Design - Wireframes 8
    9. Why use wireframes? Before making the visual design, you first make decisions about the structure, content, layout, etc. Wireframes are a tool to communicate these ideas. “Blueprint for design” Get everyone on the same page Prototype for usability tests Easier to change a wireframe, than a design! CMD Rotterdam | Interaction Design - Wireframes 9
    10. Before the design... you need wireframes CMD Rotterdam | Interaction Design - Wireframes 10
    11. Structure How will the pieces of this site be put together? Content What will be displayed on this site? Information Hierarchy How is this information organized and displayed? Functionality How will this interface work? Behavior How does it interact with the user? How does it behave? CMD Rotterdam | Interaction Design - Wireframes 11
    12. Types of wireframes CMD Rotterdam | Interaction Design - Wireframes 12
    13. Types of wireframes Sketches Quick / experiment Good for feedback CMD Rotterdam | Interaction Design - Wireframes 13
    14. Types of wireframes Sketches Quick / experiment Good for feedback Lo-fidelity Block diagrams Good for testing flows CMD Rotterdam | Interaction Design - Wireframes 14
    15. Types of wireframes Sketches Quick / experiment Good for feedback Lo-fi / Content only Block diagrams Good for testing flows Hi-fidelity Detailed wireframes Including comments Describe content & behavior “Blueprint for final design” Should be understood without explanation CMD Rotterdam | Interaction Design - Wireframes 15
    16. Wireframes do not: represent the visual design contact graphic elements convey the brand or identity CMD Rotterdam | Interaction Design - Wireframes 16
    17. This is a bad wireframe! Forget visual design Avoid using color / gradients Adding unnecessary elements makes the wireframe less powerful, remember: Wireframes focus only on the content and interaction of the interface! CMD Rotterdam | Interaction Design - Wireframes 17
    18. Looks good, right? CMD Rotterdam | Interaction Design - Wireframes 18
    19. Yes, but: Don’t use “Lorem ipsum!” Be realistic as possible, think about the content that will really be in the interface. Many clients don’t know what “lorem ipsum” is. Try and add content that will best represent content that will be placed in the final interface. Fake text can be very distracting. CMD Rotterdam | Interaction Design - Wireframes 19
    20. Example 1: This is an example of a hi-fidelity wireframe for an NOS.nl concept. On the left site of the page is the wireframe. The blue circles are numbered to refer to the comments on the right half of the page. Note: The comments can also be placed below the wireframe, it is up to you. CMD Rotterdam | Interaction Design - Wireframes 20
    21. Example 2: Instead of using dots to refer to the comments, another option is to use arrows to link the interface elements to the comments. CMD Rotterdam | Interaction Design - Wireframes 21
    22. How to start? Start big! Start with the largest parts of the interface, the frame, header, footer, etc. Then work you way through the smaller elements of the interface. The following slides will show a quick wireframe build-up. Final tip! Remember, your wireframe will be used by lots of different people for different purposes: Designers Developers Project leaders Usability testers Clients So be as clear as you can! CMD Rotterdam | Interaction Design - Wireframes 22
    23. CMD Rotterdam | Interaction Design - Wireframes 23
    24. CMD Rotterdam | Interaction Design - Wireframes 24
    25. CMD Rotterdam | Interaction Design - Wireframes 25
    26. CMD Rotterdam | Interaction Design - Wireframes 26
    27. CMD Rotterdam | Interaction Design - Wireframes 27
    28. CMD Rotterdam | Interaction Design - Wireframes 28
    29. CMD Rotterdam | Interaction Design - Wireframes 29
    30. CMD Rotterdam | Interaction Design - Wireframes 30
    31. Questions? CMD Rotterdam | Interaction Design - Wireframes 31
    32. Further Reading... Recommended tools Wireframes Crossplatform http://userpathways.com/2008/06/26/the-what-when-and- Adobe InDesign why-of-wireframes/ How to wireframe using InDesign (PDF) Wireframes - The how and the why http://vakgroep.cmd.hro.nl/iad/wp-content/uploads/ http://vakgroep.cmd.hro.nl/iad/wp-content/uploads/ 2008/12/wireframing_using_indesign.zip 2008/12/wireframes_thehowandthewhy_v10.pdf Mac OSX Designing for Interaction by Dan Saffer Omnigraffle pgs 109 - 113 Windows About Face 3.0 by Alan Cooper Microsoft Visio chapter 7 Other possibilities Adobe Fireworks Axure Whichever tool you choose, look online for some tutorials or resources to help you out! CMD Rotterdam | Interaction Design - Wireframes 32

    + pikselspiksels, 11 months ago

    custom

    4210 views, 30 favs, 16 embeds more stats

    Presentation I made as an introduction to wireframe more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 4210
      • 3851 on SlideShare
      • 359 from embeds
    • Comments 0
    • Favorites 30
    • Downloads 245
    Most viewed embeds
    • 218 views on http://www.dymecki.pl
    • 72 views on http://wireframes.tumblr.com
    • 14 views on http://www.future-proof.jp
    • 13 views on http://redux
    • 11 views on http://www.hanrss.com

    more

    All embeds
    • 218 views on http://www.dymecki.pl
    • 72 views on http://wireframes.tumblr.com
    • 14 views on http://www.future-proof.jp
    • 13 views on http://redux
    • 11 views on http://www.hanrss.com
    • 7 views on http://ejang.net
    • 7 views on http://safe.tumblr.com
    • 6 views on http://www.usercentered.de
    • 3 views on http://claytonborah.tumblr.com
    • 2 views on http://209.85.129.132
    • 1 views on http://hannerl.blogspot.com
    • 1 views on http://tequilarapido.blogspot.com
    • 1 views on http://www.hannerl.blogspot.com
    • 1 views on http://afschar.com
    • 1 views on http://www.ejang.net
    • 1 views on https://semanta.cz

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories