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
——————————
I recommend reading the Complete Beginner’s Guide to Information Architecture at the UX Booth as a great introduction.
Are there any resources i haven’t listed that you recommend? If so, drop a comment with any useful links or resources for others to check out.
This comment has been removed by the author.
ReplyDeleteVery resourceful list, I would like to recommend Creately Wireframe Software to your list as it is to draw UI mockups and wireframes online with real-time collaboration. There are 100s of examples of wireframes and mockups in the diagram community as well.
ReplyDeleteThanks for sharing very much useful. There are different templates which is available in online platforms which will help you to draw your preferred wireframes based on the facts you have mentioned in your above provided list. I think you must check into those online platforms in order to easily draw your preferred Wireframe tools.
ReplyDelete