Wireframing with Mockflow Sean Yo @seanyo Guelph Web Makers Meetup 

Wireframing For The Web Start With Simple and Build From There 

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” 

No content

No content

No content

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. 

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 

Wireframe Tools  Pen & Paper  Post Its  Visio  Illustrator  Omnigraffle  Denim  Gliffy  Mockingbird  Lovely Charts  Balsamiq  Pencil: Firefox Plugin  Mockflow 

Wireframe Proccess Validate Design Develop Wireframe Get Client Feedback Revise 

Super‐easy Wireframing. Design & Collaborate on user interface mockups for your software and websites MockFlow: Online Wireframing 

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! 

MockFlow’s Killer Features Real‐Time Chat Real‐Time Collaboration Version Control Baked In Just Works 

What Does MockFlow Look Like? 

Taking MockFlow for a Spin