Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Wireframing With Mockflow

Sean Yo
February 07, 2012
160

Wireframing With Mockflow

Sean Yo

February 07, 2012
Tweet

Transcript

  1. What Is Wireframing?  Simple diagram of structure and components

    of a web page  Powerful tool for quickly iterating layout and information architecture  Method of focussing clients on “First Things First”
  2. Benefits of Wireframing  Provides evidence‐based data for navigation design

    decisions in a fast and cheap way  Focus early design conversation on  layout, navigation and components  not colours, logos, images and how it “feels”  Acclimatizes clients to the process and flow of change  Learn about your client  Style preferences, communication style, work habits  Very agile. Easy & Cheap to change.
  3. What to do Before Wireframing  Understand the problem the

    site is trying to solve  Intake questionnaire  Audience  Style  Sites to emulate/steer away from  Identify project scope  Features  Time  Budget
  4. Wireframe Tools  Pen & Paper  Post Its 

    Visio  Illustrator  Omnigraffle  Denim  Gliffy  Mockingbird  Lovely Charts  Balsamiq  Pencil: Firefox Plugin  Mockflow
  5. Super‐easy Wireframing. Design & Collaborate on user interface mockups for

    your software and websites MockFlow: Online Wireframing
  6. Why I Love MockFlow  WebApp (Flash)  Super, Super

    Easy  Instant Gratification  Makes Me Look Awesome  Wireframes don’t have to be ugly  Showed me features I didn’t even know I wanted!