Wireframing With Mockflow

Transcript

1. Wireframing with Mockflow Sean Yo @seanyo Guelph Web Makers Meetup
2. Wireframing For The Web Start With Simple and Build From There
3. 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”
7. 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.
8. 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
9. Wireframe Tools  Pen & Paper  Post Its  Visio  Illustrator  Omnigraffle  Denim  Gliffy  Mockingbird  Lovely Charts  Balsamiq  Pencil: Firefox Plugin  Mockflow
10. Wireframe Proccess Validate Design Develop Wireframe Get Client Feedback Revise
11. Super‐easy Wireframing. Design & Collaborate on user interface mockups for your software and websites MockFlow: Online Wireframing
12. 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!
13. MockFlow’s Killer Features Real‐Time Chat Real‐Time Collaboration Version Control Baked In Just Works
14. What Does MockFlow Look Like?
15. Taking MockFlow for a Spin