The Framework of Wireframing
Category : Practices
Wireframes are skeletal blueprints or schematics of a page. They generally depict page layouts and establish how navigational and interface elements work together. They can range from simple sketches to high quality artwork.
However, most wireframes lack complex details since the main focus is to create a basic skeleton of the conceptual structure and visual design of a site or application. In this article we’ll discuss the framework of wireframing including the elements, usage, process and tools.
Wireframes generally define the hierarchy of information and help to determine how that information will be processed. According to Jesse James Garrett (highly acclaimed user experience guru), wireframes should depict the relationship between 3 components:
- Information Design – communicates the presentation and placement of elements in a way that facilitates understanding.
- Navigation Design – communicates the relationship between local, global, supplementary, contextual, courtesy, and remote navigational options in a way that facilitates wayfinding.
- Interface Design – communicates the arrangement of page elements, buttons, search bars, menus, etc. in a way that facilitates usability and interaction efficiency.
Wireframes are used when developing websites, computer applications, or other screen based products that include human computer interaction (HCI). They are typically developed by UX designers, interaction designers, and information architects.
However, in smaller design circles, graphic designers and developers could also create them. Keep in mind that even though wireframes are typically created by designers, their development is normally a collaborative effort between design and strategy teams.
Because of this, it is debatable how detailed wireframes should be as well as how authentic they should be to the actual page design. In addition, wireframes are generally not needed for every page of a site. However, if there will be varying or complex page layouts, it might be helpful to have a wireframe for each.
Regardless, the ultimate goal should be to use wireframes as a foundation or template for developing prototypes and eventually the actual website or application.
Wireframes are normally created after content/functional requirements and information architecture have been established (deliverables include sitemaps and content inventories).
The process after wireframe development may vary in each design circle. However, the deliverables will generally include a functional prototype, the actual visual design, and finally coding.
Since wireframes are created early in the design process, they can be used to provide clients with a minimalistic view of the interface. This minimalistic view can be used for brainstorming and ultimately help to introduce new ideas.
Wireframes are also cost effective since they could bring to light potential problems that would not have been discovered until later in the design process.
Wireframes can be created in a variety of ways using a variety of tools. For example, rough sketches can be done using, yes, pencil and paper. Just keep in mind, methods such as this can produce lower quality results than the array of digital options available.
Of course, higher quality wireframes can also be created which typically reflect the level of detail of the actual page design. In addition to the bare bones requirements, higher quality wireframes usually include basic visual elements such as graphics and logos.
There are many options available to help you wireframe, some of which are free (bonus points). Some of these options are simply popular design software and some are geared specifically for wireframing such as web-based, desktop, and hybrid applications.
What you ultimately use will depend on your preferences as a designer and the needs of the team and project.
PENCIL AND PAPER
For some designers, pencil and paper are still the standard for prototyping. While this includes the use of sticky notes and plain white paper, the reality is that paper wireframes can also be quite detailed if proper techniques are used.
For example, you can use grid paper for accurate placement and line creation. In addition, using colored pencils can help tremendously when making distinctions between different page elements.
POPULAR DESIGN SOFTWARE
Adobe design software has been around for what seems like eternity so most designers are familiar with one or more of their products. Software like Illustrator, Fireworks, Photoshop, and Indesign can all be used to create both low and high quality wireframes.
One noteworthy piece of advice is to create templates which can be re-used and eventually save you valuable design time in the future. There are several noteworthy templates and kits available online including GUI Toolkits, Jankoa Wireframing Kit, EightShapes Unify, and Yahoo! Developer Network Design Stencils.
WEB AND DESKTOP APPLICATIONS
Web-based tools offer the advantage of allowing you to share your designs with anyone over the Web in addition to being cross platform compatible. There are many web-based tools available including Mockingbird, Cacoo, Lumzy, JustProto, and Gliffy.
Desktop applications allow you to share wireframes; however, they normally require that everyone have special software. One of the most popular desktop applications is OmniGraffle. There is also wireframing software that is available in both online and desktop versions such as Balsamiq Mockups, Creately, and Lovely Charts.
Hybrid applications generally offer the best of both the online and desktop worlds by having both online and offline modes. A good example of this is MockFlow.
For those of you who wear multiple hats in a design team (designers/developers), you can give yourself a head-start on coding your actual pages by creating your wireframes using HTML.
The drawback is that, if you’re anything like me, it’s easy to get caught up in actually designing and coding the site rather than just creating a simple wireframe.
Below are resources that have helped me throughout my wireframing process. Enjoy!