Today “Web” is very different from what it was few years ago. It is better, but far more challenging – you can no longer ignore things like usability, information architecture and design. That’s why wireframing has received so much attention lately.
Wireframing allows you to visually illustrate layout of fundamental elements in the user interface. It also acts as a way to communicate with clients and other stakeholders (content creators, designers, developers, etc). Furthermore, wireframing enables you to consider changes, user paths, and new requirements.
Wireframing is not one of those ritual that you can perform without thinking. You have to exactly identify your objectives and stay focused during the process. You can use wireframing to assist you in any or all of the following processes:
- Planning & Analysis
- Communication With Client and/or Team
Depending on your personal preference, work environment and most importantly scope / complexity of your project; you can use one of the following general techniques to develop wireframes:
This technique requires you to develop wireframes for your pages in HTML and CSS. It provides added benefit of planning and communicating interactive aspect of your UI design. Furthermore, you don’t need any special tools – your favorite set of web development tools will be more than sufficient.
Following is a list of useful resources; providing more details about HTML/CSS wireframing technique:
You will feel really comfortable with this technique if you have strong background in HTML/CSS. If you are primarily a graphic designer who outsource or depend on others for developing markup, you may want to consider other wireframing techniques.
Using Graphics / Wireframing Software
Lots of designers prefer to create complete design in Photoshop (or similar software) before converting it into HTML/CSS. It is important to note that this is not wireframing; although it can provide similar benefits – at comparatively high cost in terms of time. Wireframing is a step before actual visual design.
If you are more comfortable with traditional graphics software like InDesign, Illustrator, or Photoshop; you can consider creating wireframes using your favorite graphics tool. However it is important to note that this technique will not allow you to communicate interactive aspects of your UI design.
If you are working on a large projects and/or more complex working environment, traditional graphics tools may not be able to provide ideal solution. Luckily several wireframing tools are available to assist you with such challenges.
Following is a list of useful desktop and online wireframing tools you can consider (Free desktop tools are highlighted in bold):
- Balsamiq Mockups
- GUI Design Studio
- Microsoft Visio
- Justinmind Prototyper
Hand Drawings / Sketching
This is probably the easiest wireframing technique. If you are not using any other method – you must try this one before anything else. This technique is ideally suited when you need to quickly convert your ideas into wireframes.
Following is a list of useful resources; providing further details about this wireframing technique:
If you are new to wireframing, you should also look at the following articles, providing general overview, guidelines and best practices:
- The what, when and why of wireframes
- 20 Steps to Better Wireframing
- Using Wireframes to Streamline Your Development Process
- Wire Frame Your Site
- How to Create Website Wireframes
- How wireframing makes your website designs better
- The Importance of Wireframing
- 5 Reasons Why Wireframes Are Critical to Your Site’s Success
- Better Perspective in WireFraming
- The Ancient Art of Wireframing
- Complete Beginner’s Guide to Information Architecture
- A Guide to Wireframing
- Slideshow: Wireframes for the Wicked
Additional Tools & Services
Following is a small list of related tools/services that you may find useful:
Helps analyze how people navigate around your applications and websites.
Allow project team members to discuss system functionality, design, and requirements directly on the prototype by adding sticky notes.
Enable you to easily deliver static mockups as linked-up and clickable website.
Helps designers and their clients communicate visually.
Lets you to export Balsamiq Mockups to HTML/CSS/JS and Adobe Flex 3.
Design collaboration tool to manage feedback and review on creative content built for designers and their clients.
There are numerous online resources where you can find free downloads for wireframing. This is a small list of comparatively more popular destinations:
- Yahoo! Design Stencil Kit
A very comprehensive collection of UI elements for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG).
- Wireframe Magnets (DIY Kit)
This DIY magnet template is based on the Konigi wireframe stencils and includes 3 sheets of elements that might be useful in whiteboard prototyping. These sheets are made to print on magnetic sheets. (More Downloads from Konigi)
Large collection of User Interface stencils for OmniGraffle.
- EightShapes Unify
Collection of templates, libraries, and other assets fore Adobe Creative Suite of products, primarily Adobe InDesign.
- Mockups To Go
A user-contributed collection of ready-to-use UI components and design patterns built using Balsamiq Mockups.
In order to keep this article short, only a limited number of resources have been provided; but feel free to search for better alternatives and share with rest of us in your comments.