PSDFan Extra

Wireframes: A Beginner’s Guide

Today we’re going to take a look at an essential piece of any serious web designer’s skill-set: wireframes.

You’ll learn why wireframes are so important, how to use them correctly, and the differences between wireframes and mockups/prototypes.

By the end of this article you should be persuaded to use wireframes in your next web design projects, and understand the benefits of doing so.

Let’s get started!

What are Wireframes?

Wireframes are black and white layouts that web designers use to outline the specific site features, size and page elements placement, navigation, and conversion areas of a web site.

In layman’s terms, we can say that a wireframe is more or less like a blueprint of the site which enables you to view the structured placement of components without any design treatments.

Today, the majority of web designers are using wireframes in their designs in differing ways. Wireframing plays an important role in the website design process, especially if the project is more complex. Web design freelancers usually find wireframes to be very useful, especially when communicating with their clients as they enable them to view their ideas more easily.

Not all wireframes have to be super neat! Just get your layouts down on paper. (Image source: schhen – Deviantart)

Importance of Wireframes in Web Design

Any web design process relies heavily on Wireframing.

Creating a more complex web site requires wireframes to help in clarifying the exact requirements of each page type of the site. Wireframes form an important part of a designer’s documentation to provide visual conceptualization to the client that can never be captured in a text-only document.

The following are some of the most important reasons why web designers need to use wireframes:

Wireframes show the web site architecture visually

A site map is more theoretical, especially a larger one, compared to wireframes.

Using wireframes instead of site maps is seen as the best way to start the real concrete visual process of a web design project.

With wireframes, the web designer is able to turn the abstract flow chart into something more tangible and real without distractions.

Wireframes enable the clarification of web site elements

Many clients find it hard to understand what designers mean when they say “light boxes”, ”product filtering”, ”Google map integration”, ”news feeds”, ”dynamic slide show”, among other features. Wireframes allows you to communicate clearly with your client, showing him/her where these site features will be on the specific pages, how they will function, and their usefulness to the site. This will enable the client to focus on other useful elements of the project.

Wireframes identify ease of updates

Wireframes are considered to be very useful to clients who may want to purchase a content-managed site. They normally enable the client to find out how well their sites will handle content growth. For instance, if right now you have only 20 products being offered but you want to offer over 100 in the next six months, you will require your website to have the ability to accommodate such growth without leading to some deformities in the site design and usability.

Wireframes save time on the project process

Wireframing plays a big role when it comes to saving time in the web design process. With wireframes, the designer’s designs are well-calculated and the team knows exactly what they are building. As a result, creating site content becomes much clearer and easier.

Additionally, the designer avoids hacks in the later stages of the process.

Experience shows wireframes work

Since designing and creating a web site is a complex process, Wireframing is one of the most important parts of the web design that should not be overlooked.

Wireframes are very cost-effective as they enable you to save a lot of time that might have been lost as a result of revising a high-fidelity comp; they are easily revised or discarded. Wireframes serve to give your page layouts a wonderful starting point, as well as a concrete foundation.

This search engine web site wireframe shows a more traditional approach to wireframing. (Image credit: Blazeeboy – Deviantart)

The differences between Wireframes, Prototypes, and Mockups

Although wireframes, prototypes, and mockups are totally different things, they are often used interchangeably. The reason why many people think that they are one thing is that there sometimes exists some overlap between them. They basically serve a slightly different purpose when it comes to the web site design process.

What are wireframes?

Wireframes refer to the fundamental illustrations of the components and the structure of a web page; this basically defines the first stage in the web design process.

What are mockups?

Mockups basically define the visual design components of the web site; they closely resemble the actually final web site design. They generally include all the page elements such as the graphics, and typography, among others. Simply put, mockups are image files.

What are prototypes?

Prototypes are generally semi-functional page layouts of the comp/mockup that provides a higher fidelity foretaste of the actual website being created. This phase follows the programming business logic of the web site. They are usually used to enable the clients to click around and get an idea of how the site will work in the end.

So what order are these used in?

In web design, the wireframes come first, followed by either the prototypes or mockup models; what actually follows after wireframes will wholly depend on the type of website the designer is working on.

This wireframe shows how all wireframes don’t need to look identical. As long as the elements on the page are clear then the wireframe is effective! (Image source: Llendowyn – Deviantart)

Creating Wireframes

Before creating a wireframe, you should find out what elements your client wants to include on the web page. Such information is usually obtained during the project interview. The most common elements that are normally included on a web page are the navigation, banner, blog feature, as well as a news section.

After determining the web page elements, sketch the potential layouts of the site. It is highly recommended to try a variety of placements for each element. Come up with the best and optimal decision on what will effectively present the information in a user-friendly way, as well as being aesthetically pleasing.

Scan the sketched layouts into the computer. Even though this step is optional and can be left out, it actually provides you with a great idea from which to start.

Choose and open the best graphic design program that interests you. A majority of web designers use Adobe Illustrator or Photoshop, although any other drawing programs are sufficient to place and label the shapes.

It is good to keep saving the file with explanatory names every few minutes to limit the chances of loss should something happen to the folder while you are working on the wireframe.

Draw boxes equivalent to the size as well as the shape of the boxes in your sketch; in the majority of programs, web designers use the rectangle tool for this step.

Let each box have its own solid fill color. It is recommended that you use monochromatic or neutral colors to ensure that the wireframe is simple with some lighter and darker values to help in illustrating the layout. Move each box to its proposed place in the layout. Before moving the box, remember to select the arrow tool; this will help you avoid drawing a different box over the already existing one.

Label each box the name of the layout’s section that it represents. Ensure that each label has the size in pixels. You may want to add a small description of the section’s function within the label.

Finally, save the wireframe in a format that will enable you to share it with the client. The most commonly used formats are the JPEG or PDF format.

Create Wireframes Easier Using These Web Tools

Web wireframe tools are meant to help the web site designer with the wireframe construction process. The most common web wireframe tools include the following:

Axure

Axure is one the most excellent web wireframe tools and is frequently used by industry professionals such as web designers. It works well on both Windows and Mac operating systems. This tool enables you to create the user interface for an online app. It also allows you to collaboratively create web site designs with other team members. It uses a drag-and-drop interface; this simply means that you only need to select the element you want to use and move it to the correct location. Other useful features of this program include the capability to generate the HTML prototypes from your site wireframe design. Additionally, this tool helps you to save the site documentation in a Microsoft Word document. Although this software program has a free trial download, you will be required to buy its full version for more functionality.

Visit Site

iPlotz

This tool has the ability to enable you to generate completely functional wireframes that will allow you to test how the web site will function when launched. iPlotz offers ways to create prototypes for the software application, as well as the web site. With this software program, you are allowed to create up to 5 frames for free though you must buy it in order to create more web wireframes; it costs $15 per month. Among other features of iPlotz is the ability to invite people to view and leave comments on a wireframe components library and your wireframes. With this tool, you can include commonly used elements without creating them yourself. In addition, it enables you to manage the website development team even after the project is done. This software program is basically meant for industry professionals such as the web designers.

Visit Site

MockupScreens

This software program is meant for industry professionals such as web designers as well as for beginners. It enables you to generate the mockups of the applications, as well as the web site. It uses a graphic user interface (GUI) which enables you to create web sites even if you have no knowledge about coding or programming. It allows you to use simple checkboxes and radio buttons to create the web site. It also enables you to create presentations that you can share with your clients and team members. MockupSceens have the ability to help you determine how well your apps will function in specific scenarios. You can purchase the full version of this program for about $99.95 and there is a one month free trial version.

Visit Site

To wrap up

Wireframing is a widely known process amongst web designers, though only a few of them use it. Although it seems to take a lot of time, it is very helpful in the long run. Wireframing is highly recommended by the most successful web designers and should never be overlooked in the design process to ensure its success.

What’s your opinion? Do you use wireframes for your web design projects? If not why not?

Related Posts

• The Released: Create a Dark and Surreal Photo Manipulation
• Members Area Tutorial: Create a Realistic Eye Shadow Case From Scratch in Photoshop
• Photo Manipulate a Beautiful Fantasy Nature Scene