• Like
  • Save
Introduction to Building Wireframes
Upcoming SlideShare
Loading in...5
×
 

Introduction to Building Wireframes

on

  • 9,230 views

This is the support deck for an introductory class I made for Junior Designers, Developers, Product and Project Managers to introduce them to the proper way to use wireframes. ...

This is the support deck for an introductory class I made for Junior Designers, Developers, Product and Project Managers to introduce them to the proper way to use wireframes.

I did this class already multiple times at General Assembly (London, UK), TechLab (Santa Clara, CA) and internally in my consulting job.

It's updated to OmniGraffle 6.

Statistics

Views

Total Views
9,230
Views on SlideShare
8,929
Embed Views
301

Actions

Likes
70
Downloads
327
Comments
2

26 Embeds 301

http://iv4productionsr 138
http://www.conseilsmarketing.com 42
http://uptdigital.com 35
https://twitter.com 26
http://www.scoop.it 17
http://tweetedtimes.com 6
http://www.comtel.in 4
http://localhost 4
http://www.pinterest.com 3
http://kred.com 3
http://truongdaynghe.net 3
http://awesomepitch.co 2
http://www.linkedin.com 2
http://bibblio.org 2
http://pinterest.com 2
http://metodoselectronicosdeaprendizaje.blogspot.com 2
http://www.modernisation-industrielle.courrier.intra.laposte.fr 1
http://musikagintza.blogspot.ru 1
http://flashattackcrew.blogspot.mx 1
http://nationbuilding.buntt.us 1
http://buildingreviews.buntt.us 1
http://buildingarchive.buntt.us 1
http://symbolicbuilding.buntt.us 1
http://comtel.in 1
http://www.onlydoo.com 1
http://fr.slideshare.net 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2

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

    Introduction to Building Wireframes Introduction to Building Wireframes Presentation Transcript

    • INTRODUCTION TO BUILDING WIREFRAMES Davide ‘Folletto’ Casali
    • NIGHT.EU UX Designer Advisor
    • What do you do?
    • TODAY 1 / Wireframes · how to work with them 2 / Wireframes management · how to use them effectively 3 / OmniGraffle Pro · introduction 90’ Junior/Mid
    • PART 1 Wireframes
    • THE IDEA OF WIREFRAME COMES FROM 3D MODELLING @hjmediastudios
    • Wikipedia: “A website wireframe 
 is a visual guide 
 that represents 
 the skeletal framework 
 of a website”
    • Nielsen/Norman Group: “Wireframing is a low-cost, rapid iterative design technique that offers one of the best methods for gaining design insight early” http://www.nngroup.com/courses/wireframing-and-prototyping/
    • THERE ARE DIFFERENT QUALITIES OF WIREFRAMES
    • Even if wireframes display a single interface/page they are less like photos and more like movie stills
    • WIREFRAMES AS STORIES © Ivor Beddoes @awfulshot
    • WIREFRAMES AS STORYBOARDS FOR INTERFACES © Ivor Beddoes
    • DIFFERENT WAYS TO TELL A STORY frame by frame, drawings key frames, textual descriptions key frames, spoken narrative
    • Even if the storyboard is not visible it’s still the foundation of wireframes
    • Wireframes are a static representation of a dynamic non-linear flow of activity
    • The wireframe represents also the very first moment when the project team sees everything coming together.
    • Box The minimal visual building block of a wireframe is the box.
    • Box Boxes usually contain a uniform kind of content, not the individual elements. However, it’s important to choose the right level of breakdown to support the discussion.
    • Logo Navigation Box Box Content Box
    • Let’s wireframe Twitter. Boxes only.
    • Global Navigation User Page
 Navigation User profile Multimedia 
 Content of the User User Stats Who to follow suggestions Tweets Trends Messages
    • This high level box view is implicit most of the time, but it’s incredibly useful when applied on a number of pages to ensure consistency and reusability. N C N Box N Box C S Box Box Box Box Box Box S
    • TEXT BUTTONS Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella. Button Box IMAGES MORE... ···
    • Box
    • Thomas Talker:! Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella. Expand
    • OFTEN EACH HIGH-LEVEL BOX CONTAINS A REPEATING PATTERN Thomas Talker:! Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella. Expand Thomas Talker:! Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella. Expand Thomas Talker:! Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella. Expand Thomas Talker:! Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella. Expand Thomas Talker:!
    • TRY WORKING WITH PATTERNS AS MUCH AS POSSIBLE TO SUPPORT MEMORY AND LEARNING, MAKING THE INTERFACE TRUSTWORTHY
    • Let’s build a journey. Imagine Twitter’s registration process.
    • LOGIN PROCESS The main steps of the journey Home Reg. Form Confirmation
    • LOGIN PROCESS How do we guide the user to the value? ? Home Reg. Form Confirmation Your Page
    • LOGIN PROCESS An e-mail based approach Home Reg. Form Confirmation Email Your Page
    • LOGIN PROCESS A more direct way to engage the user Home Reg. Form Confirmation Email Your Page
    • LOGIN PROCESS Review journeys for the edge cases: errors, problems, etc ! Home Reg. Form Confirmation ! Email Your Page
    • LOGIN PROCESS The story is even bigger in reality Tweet Third party Home Reg. Form Confirmation Email Your Page Third party
    • 1 / Wireframes as stories 2 / From boxes to elements
    • PART 2 Wireframes management
    • AGILE APPROACH TO WIREFRAMING Ask yourself: What’s the level of detail I need to communicate effectively? HD DETAILED HIGH LEVEL PAPER SKETCH WHITEBOARDS NAPKINS
    • Wireframes are made to be thrown away. They are steps in the process of design. Only the final one stays... until it gets developed.
    • In other words: they can be delivered as documentation but they are not for most of the process
    • THE INTERMEDIATE STEPS ARE VALUABLE: THEY SUPPORT COMMUNICATION AND CONSENSUS
    • AT EACH STEP YOU CAN · test the journey · discuss with management · discuss with technical team · share with other parties
    • observe dot LOOP do think WORK IN ITERATIONS
    • This works from startups to big enterprises
    • WEEKLY ITERATION Helps with project activities scoping, clarifies expectations, supports continuos progress review. WEEKLY MEETING Sets formal progress steps to help the client keeping the pace while being in touch with the project progress
    • Let’s see an example PREPARE The first iteration is about understanding the problem.
    • Let’s see an example WORKSHOP First wireframes made collaboratively by the stakeholders in a workshop, in groups. WHITEBOARD
    • Let’s see an example TEST WITH USERS Take the whiteboards and formalize them in individual proposals to be tested.
    • Let’s see an example REVIEW ALTERNATIVES In this review propose a few alternatives refining the solutions from the workshop. PAPER SKETCH
    • Let’s see an example TEST WITH USERS Yup, again, if it’s possible. Try a more guerrilla approach maybe.
    • Let’s see an example REVIEW FIRST DRAFT Ask explicitly to involve developers if it didn’t happen before the review. HIGH LEVEL
    • 1 ITERATION = No review* * or review in a different next step (visual design? development?)
    • 2 ITERATIONS = Draft, then feedback, then refine
    • 3 / Wireframes as steps 4 / Iterative approach
    • PART 3 OmniGraffle Pro
    • OmniGraffle Professional
    • Why Pro?
    • OmniGraffle is a powerhouse Wireframes Interactive PDFs From sketches to HD prototypes IA HTML export Presentations Diagrams Build any PDF Pixel perfect
    • ...even if it lacks some pieces No built-in collaboration No motion design
    • OMNIGRAFFLE CAN EXPORT INTERACTIVE PDFS THAT CAN BE USED AS PROTOTYPES · · · · You can send them via email You can use them as prototypes You can use them for testing They show flows, not stills
    • FUNDAMENTALS
    • select shape lines text freeform
    • Let’s try!
    • Let’s sketch Twitter’s wireframe Global Navigation User Page
 Navigation User profile Multimedia 
 Content of the User User Stats Who to follow suggestions Tweets Messages
    • Let’s sketch a single tweet wireframe Thomas Talker:! Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella. Expand
    • Let’s sketch Google’s homepage
    • Let’s sketch Twitter’s homepage
    • Let’s sketch Dropbox’s homepage
    • Let’s sketch Wordpress.com homepage
    • Lots of actions... SIGN UP VIDEO LOGIN MORE INFO
    • PROPERTIES: ACTION 1. 2. 3. 4. 5. Properties panel Action Jump elsewhere Switch to a Specific Canvas Select canvas
    • INTERACTIVE PDF 1. File → Export… 2. PDF vector image 3. Entire Document
    • TIPS
    • Grouping Shared Layers Smart Objects
    • Grouping
    • Shared Layers
    • Smart Objects
    • SET THE PAGE SIZE IN PX BY SPECIFYING THE “PX” (OR “PT”) UNIT BY HAND
    • IT’S A GOOD IDEA TO KEEP THE ZOOM AT 100%, TO DESIGN AT THE RIGHT SCALE. KEEP ALSO THE HEIGHT SHORT TO FEEL THE SCROLL POSITION.
    • REVIEW THE KEYBOARD SHORTCUTS FROM PREFERENCES TO ADAPT THEM TO YOUR STYLE. REVIEW ALSO “KEEP TOOL ACTIVE”.
    • 5 / Basics of OmniGraffle Pro 6 / Grouping, masters, smart objs
    • “ To complicate is easy, to simplify is hard. To complicate, just add, everyone is able to complicate. Few are able to simplify. Bruno Munari ”
    • Thanks. @Folletto