Get Wireframing: The All-In-One Guide
Wireframing is a great tool to incorporate into your projects as it allows for rapid prototyping and helps to pinpoint any potential problems. I personally find it invaluable on projects to have a visual representation of content, hierarchy and layout. Overall it’s an excellent step to incorporate into your project before the design process begins for both you and your clients.
I am continually intrigued about how other firms and individuals incorporate the wireframing stage into their process. I know i’m not the only one, so this list aims to group together some of the best techniques, tools and resources to help you create effective wireframes.
Techniques
- Building a Wireframe in Illustrator – From AiBurn – a step by step tutorial.
- Grey Box Method from Jason Santa Maria (the method i personally use).
- The 960 Grid System – Streamlines web development workflow and allows for rapid prototyping.
- The ‘Boxing Glove’ Wireframing Technique – Very basic, quick sketches that force you to draw only the most crucial parts of the user interface.
——————————
Tools
- Omnigraffle – Create diagrams, process charts, quick page layouts and website mockups
- Visio – Visualize, explore, and communicate complex information.
- Protoshare – Collaborate online wireframe tool with real time communication and clickable wireframes.
- Balsamiq – Easily and quickly created rough mockups with predefined elements
- iPlotz – Quickly sketch wireframes of Web sites and demonstrate navigation between pages
- Lovely Charts – Diagraming app that allows you to create site maps, flowcharts, wireframes and more
- Jumpchart – Online collaborative wireframe
- Axure – Rapidly create wireframes, prototypes and specifications for applications and web sites.
- Gliffy – Create website wireframes and share web mockups with anyone.
- MockupScreens – For the Non-Designers, allows you to sketch and organise screen mockups.
- EasyPrototype – Works with your existing techniques such as paper sketches, Photoshop mockups etc.
- Justinmind – Design a wireframe and test their web usability
- OverSite – Provides a menu of widgets to create wireframes, or mockups with drag and drop features.
- Fluid IA – Agile UI Prototyping
- Pencil – Free sketching & GUI prototyping tool, can be installed as a Firefox add-on or as a standalone application.
——————————
Wireframe Examples
- Wireframes Magazine (A must Bookmark)
- Jesse Bennett-Chamberlain – EPC Interface
- WordPress 2.7 Interface Wireframes
- Redesigning the ExpressionEngine Site
- Sketches, Wireframes & CSS
- DoTheRightThing.com – Version 2 Wireframes
——————————
Wireframing Articles of Interest
- The what, when and why of wireframes
- The Importance of Wireframing
- Wireframes, Blueprints of the Web
- The How and Why of Website Wireframes
- Wireframes: An Indispensible Part of the Web Design Toolkit
- Quick and Dirty Wireframes
- 20 Steps to Better Wireframing
- A Focus On Wireframes & Layout
- 5 Reasons Why Wireframes Are Critical to Your Site’s Success
- Wireframes – illustrating design strategy
- Wireframes: Struggles and Solutions, Part 1 and Part 2
- Deliverables That Work: Design Description Documents
- Design with Wire-frames – expand your creativity by restricting it!
- Working with Wireframes for the Web
- Improving Your Process: How Wireframes Can Help
- Wireframing Guide for WordPress Theme Designers
- Real Wireframes Get Real Results
- Tutorial: Functional Specification: Wireframes & Mockups
- Design before you build with wire frames (For Web Apps)
- Using Wireframe Prototypes to Improve Visual Flow & Web Page Layout
- Presenting Information Architecture
- Interactive Wireframes and Polypage
——————————
Paper Prototyping
- The Paper Version of the Web
- Sketchboards: Discover Better + Faster UX Solutions
- Paper Prototyping (A List Apart)
- Lo-fi Prototypes Yield High Returns (The sketching process)
- Graph Paper – Paper grid for wireframing user interfaces
- Improving the transition from paper to Photoshop
——————————
Useful Wireframing Resources
- Wireframe Works – Practical Tips & Resources
- Creating an Effective Wireframe (Video)
- Information Architecture Flickr Set
- Wireframes for the Wicked (Slideshare)
——————————
Kick Ass Books
- Sketching User Experiences
- Communicating Design: Site Documentation for Design & Planning
- Paper Prototyping: Fast & Easy Way to Design & Refine User Interfaces
- Information Architecture for the World Wide Web
- Information Architecture for Designers
- Web ReDesign 2.0: Workflow that Works
Advertisements
