FOCUS ON SPACING UI ELEMENTS DRAWN PLACEHOLDERS WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIR
Wireframe for a Conference website
Wireframe for an iPhone app
Wireframe : Framebench Website
PROTOTYPE PROTOT
PROTOTYPE PROTOT A plan for how it WORKS, NOT how it looks
Think about MENUS and ANIMATION PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP
Think about use CASES and user FLOW PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP
Think about MOST FREQUENT actions : reduce clicks PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP
Visualize all possibilities save redesigns and headaches later Framebench App Prototypes PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP
MOCKUP MOCKUP M
MOCKUP MOCKUP M 2 types
MOCKUP MOCKUP M 2 types Low fidelity High fidelity
And yes This mockup is HIGH FIDELITY! MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
LEAN
Conceptualize it
Categorize everything you need on your application. Post-its are great for this! Create multiple drawings and placements for various elements.
Theres nothing better than the pen, paper and post its for this. Try out Behances Action sheets http://www.creativesoutfitter.com/products/100/action-method
Wireframe it
Now that you have a basic idea in your mind, youre ready to put it on a digital pad. AND.. There are a variety of tools available today!
I personally love Balsamiq..
And Moqups.
Wireframe.cc is super lightweight!
Prototype it
You have various wireframes ready, its time to quickly create proof of concepts. Lean Prototyping = Test Quickly = Fail Faster
Interactive Wireframes This is all about determining flow
Twitter Bootstrap Prototype in the browser UI Packs Todays UI packs allow for you to get started right in the browser! Chrome Developer tools!
Mock it
Mockups generally are medium to high fidelity prototypes made in software like Theres nothing lean about a mock and in fact should be done once youve tested everything else.
Collaborate?
Will your team and designer always be together? How can you collect feedback and test these wireframes & mockups?
Meet GIFs Images Prototypes Have live discussions on your [ Wireframes Mockups Videos PDFs ] with anyone, anywhere
Scribble over mockups. Track versions. Get them approved faster. Use TableTop Sync
Your cases?
Im fairly active on twitter: @jumbld & extra good karma for you if you try out www.FrameBench.com and give us feedback
