Creating Web Design Wireframes: Tools, Resources and Best Practices
Wireframes can be one extra step in the beginning of any web design project that can save a significant amount of time later on. Besides improving productivity, it also improves the final result of each single webpage, and the website as a whole. A wireframe is a "template" of simple lines, shapes, and labels that can be used to predefine a website's layout before any of the design's details are actually placed.
Editing a simple wireframe in order to change a layout can be a lot simpler than trying to change the layout of a final coded design, or even a PSD. Of course, this is both true for personal and client projects. Showing a client a wireframe at the beginning of the design phase can allow the client and designer to collaborate more efficiently on the final content placement, and come to a set agreement to make the design process smoother, and reduce the number of major revisions.
In this article, we'll cover some of the best practices for using wireframes in web design, and also some tools and resources that can help designers create wireframes.
By Hand, Wireframing Tool, or Graphics Program
There are usually three methods designers choose to wireframe, while some consider it a distinct and elaborate phase of the design process, or just a bit of pre-planning before sorting out the details. One method is sketching out a general layout on paper, and another is doing it screen-based, either using just Photoshop, Illustrator, or a similar graphics program, or using a program made specifically for creating wireframes and diagrams. Let's look at the pros and cons of each of these methods.
By Hand, On Paper
Drawing sketches by hand is the easiest and fastest ways to get initial ideas and specific shapes on paper. There's no need to worry about the capabilities of a set program, or the need to customize or "get creative" with certain tools within a program to obtain the shape or label you need in the wireframe. It's as easy as thinking it up and drawing it out.
Image credit: purecaffeine
However, one major drawback of drawing directly on paper is that things aren't as easily moved. When things need to change places, a lot of erasing or scribbling can happen, and the need to start fresh may have to happen a few times for major layout revisions. In addition to that, if presenting wireframes to a client, the sketched wireframe would have to be redone neatly, or otherwise the final wireframe transferred to a version made neatly by a graphics or diagram program.
Photoshop, Illustrator, Etc.
Many designers will not create complete wireframes within the same graphics program that the design will be built it, but many will set up a general layout ahead of time, and then work around it. Using text labels to set notes where content should go, as well as using the graphics program's rulers can usually be sufficient for a wireframe to get started. As a bonus, the design phase can usually begin within the same document, working on top of the initial wireframe.
Image credit: obelix_1962
These programs are still not intended to be diagraming programs, though, and these tools can sometimes be far too complex and less efficient for creating a detailed wireframe that needs to be presented to a client. Between several layers, groups, features and more, it can also be difficult to move things around easily with more complex website wireframes containing a lot of features and content.
Then, there are tools that are made specifically for the planning stage of a website. Some of these programs or online applications are meant only for creating website wireframes, while others can also create website flowcharts, sitemaps, database models, and more. In terms of easily creating a detailed wireframe and presenting it to a client, this is probably the best choice. It's easy, fast, and the interface is perfect for this phase of the design process.
Depending on the features one wants, though, some wireframing tools are not free, and the free versions may not be what each designer is looking for. Also, for a designer that does not wireframe extensively for many projects, a separate application or program may just be unnecessary.
Organizing Webpage Elements
The first step to creating a complete wireframe is to organize which sections are necessary. Use simple shapes instead of actual graphics, and simple boxes, circles, etc. to represent certain areas. Then, label these areas as needed. Some of the most basic and used elements needed on any web page are:
- Logo, tagline
- Primary navigation (about, contact, etc.)
- Possibly secondary navigation (categories, content pages)
- Search bar, log in form, etc.
- Feature areas (blog, about blurb, Twitter feed)
The best part about wireframing is that one can move around these areas easily to better organize a webpage and create good hierarchy. Feel free to move the main, most important, elements around first, and then begin filling in more details or content features.
Additional features may include:
- RSS/Email icons
- The layout of a blog's content
- Navigation link titles
- Notes on where links should lead according to a sitemap
- Notes on how interactive features should function
Remember, though, that while more details will be filled in, this is still by no means the actual design phase, and the purpose of detailing a wireframe is to focus on the content and layout.
Keeping Design Notes
While wireframing is meant to focus on the layout and organization of a web page, or entire website, design considerations can still be a part of this stage. Especially when collaborating on wireframes, design notes on color, texture, imagery, and otherwise can help clients visualize the final results. If wireframing on paper, written side notes are an option, or sticky notes can be even more helpful as they allow you to move, remove, or alter notes.
Many online and software applications, though, also have additional features for notes. Many times these applications have a section for notes that are easily managed and visually separate from the actual wireframe for easy editing. For collaboration, many also allow clients or other designers/developers to add or edit notes as well onto the wireframe, to discuss design features further.
Adding side notes can be great for discussing or recommending design considerations before the actual implementation of these elements, which can speed up the design phase dramatically, and reduce the number of needed revisions - even minor ones.
Online Wireframing Applications
Online wireframing applications offer a benefit of convenience when it comes to accessing your project's prototypes, wireframes, and notes. Also, many of these applications offer an easy sharing feature that allows designers to easily share with clients and let them add or edit notes and features. Beyond a wireframing tool, these can be great collaboration tools as well and speed up this portion of the design phase.
Mockingbird is an advanced online application (cheapest: $9/mo) that allows you to create detailed wireframes easily, and save them online. All plans offer unlimited collaborators, so Mockingbird is a great option for design teams or for a designer that is looking for a great collaboration tool for this portion of the design phase as well.
Mockflow is a wireframing application that can be used offline, but also offers a desktop version for both Windows and Mac. For the desktop version, wireframes and prototypes can be stored locally on the computer, and also resynced online with an Internet connection. The application also offers real-time collaboration, and a useful Sitemap Visualizer tool.
Pidoco is a completely online wireframing application, but it also offers many more tools and services that can aid in the planning phase of a web design. This application offers collaboration tools, interactive prototypes, usability testing, and the ability to export wireframes and prototypes into working HTML templates.
Protoshare is a wireframing and prototyping tool that allows easy drag and drop access, all completely online. Content can be organized into sitemaps in grid and tree view, and wireframes can be generated from those sitemaps. Then, videos, images, content, and more can be uploaded and inserted to create a working prototype to speed up the design and development phases dramatically.
iPlotz is an online application available for any browser that supports Flash, and is also available for download on Windows and Mac systems. It offers drag and drop wireframing and interactive prototypes based on the wireframe and a corresponding sitemap. This application also allows a project management feature where other designers and developers can be assigned tasks within the application during the prototyping phase.
Hot Gloo offers a clean and friendly wireframing process built on a grid for planning precise design details. This completely online application is great for collaborating with clients or other professionals working on the project. The application is secure and offers backup to all wireframes and prototypes.
Gliffy is a free option and an online application that offers a number of quality interface options when designing wireframes. There is also online collaboration features just like with many other premium applications.
Create layouts easily with this wireframing tool, and also easily add content, images, and HTML markup. Jumpchart's easy to use interface offers everything a designer would need for the planning phase of a website, as well as everything they would need to show a client before moving on to the design details. Wireframes can be published into interactive prototypes, helping clients see a more complete picture before moving on to the next phase of the design process.
Lumzy is completely online, free, and with a number of visual options for creating wireframes. Lumzy also offers real-time collaboration and even a chat section so meetings can be held within the application concerning the wireframes. Everything is stored online, and there is no need to send and receive files separately.
MX Graph is a free wireframing tool that is perfect for quick wireframes and brainstorming. Wireframes can be saved to the online application, printed, or exported. A live visual preview of the wireframe is also always available throughout the wireframing process at the click of a button in image form. This free tool is fast and reliable.
This prototyping and wireframing tool is perfect for web applications that need more than just a simple design. This advanced tool helps both designers and developers plan for the user experience behind a highly functional and interactive website. Collaboration tools, master pages, directory structures and sitemaps are all features of this application.
While online tools may offer more convenience, there is something more secure and perhaps even easier about having files and software directly on your computer. This allows you to work easily without Internet access so you can still work if the connection goes out, or if in a location without WI-FI. As a benefit, many of these applications still offer collaboration and sharing tools easily with a connection to the Internet.
Denim is an offline application available for Windows, Mac, and Linux/Unix. This is one of the only applications that allow designers to work from a writing tablet directly in the application. Widgets and models can be saved and reused as well, speeding up the design time further.
Pencil can be used as a standalone application as well as a Firefox addon. Basic shapes, widgets, and icons are available for wireframing, prototyping, sitemapping, and more. There are also a number of icons available for some of the most popular frameworks and applications.
Omnigraffle is the #1 choice for all Mac users, and is available as an offline application for all Mac systems, as well as iPads. This application features all the basics needed for any wireframing application, as well as tools for organizing sitemaps and more. It also features a lot of additional design techniques for creating more beautiful wireframe mockups.
Mockup Screens is a great tool for wireframing independently as a designer, or for brainstorming in meetings with clients real-time. This application allows one to easily create web elements, drag and drop seamlessly, and populate data in an instant. Productivity is increased as brainstorming ideas can be tested instantly and effortlessly.
Axure software offers wireframing, sitemapping, and other planning tools, as well as a prototyping tool that allows wireframing to come to life in a real working HTML sample. There are also built in templates of some of the most popular layout types, and features that allow designers, or design teams, to share and communicate with clients about the wireframes or prototypes.
Unify is a set of templates, grids, and likewise that one can download to use in programs for the Adobe Creative Suite, with inDesign specifically. This is a great option for those designers who would prefer to work in the programs they're already familiar with and just would like a set of tools, icons, and templates to make the process of wireframing easier.
Wireframe Sketcher is an Eclipse IDE add-on for anyone who likes to use the Eclipse software for web development. Because it is built in with Eclipse, crafting and planning for a complex web application would be ideal for this add-on. The add-on has several useful widgets, templates, interactive prototypes, and custom content inclusion.
Microsoft Visio is a premium option that is for far more than creating wireframes. Create sitemaps, database models, data-driven visuals, wireframes, and prototypes with the advanced tools in Microsoft Visio. What makes Visio so useful is that it is really a complete package for the planning phase of creating a complex website. There are also plenty of downloadable templates and add-ons available.
This application mimics real sketching when creating wireframes so clients don't get caught up in the details, and can rather focus on the layout and structure of a website or application. There are templates available for the web and a number of mobile devices. Created by a small group of dedicated web designers, this tool is lightweight and practical for many other web designers as well.
Justinmind is a program that allows one to create wireframes, export them to interactive and working prototypes, share them among clients, developers, or otherwise, and add in comments or attach documents as necessary for easy collaboration and quick productivity. Notes can be set for visual or interactive techniques through the application's Events and Actions module, simulate animations, conditions, and more for a truly interactive website.
Flair Builder offers the basic abilities for wireframing and prototyping, but with plenty of interactive widgets, templates, iPhone App components, and the ability to create master pages to ensure consistency for larger websites. Easily brainstorm, approve, or just explain to clients some of the most complex and interactive features for a website by showing them instantly via a prototype with this application.
Wireframes can increase productivity and better the outcome of the final website dramatically. It is nearly essential for larger websites with a lot of content, but can also be just as helpful for the smallest websites as well. Wireframing can be considered a separate phase in the website creation process overall, and this added phase can improve communication between the client and designer in order to create a website that better suits what the client needs and what they're looking for. The wireframe stage can also create a better plan for meeting the website's goals, whether it is to gain more customers, get more subscribers, or obtain more signups.
Do you use wireframes for all projects, or just the bigger ones? Feel free to share any tips, practices, or even your favorite tools and resources for the wireframing stage of the web design process.