Take advantage of Wireframes as an Early Stage of Web Design

In the process of creating a website there are several stages that will be passed in the process. In the early stages of this development, we will meet many clients discussing what the client wants with the web. Discussing features, content, images, appearance and so on. After the client explains what they want with the web and we accommodate it, then it’s our turn to pour what the client wants into the layout of the web page. Is it at this stage that we immediately put it in the form of a visual design? Open Photoshop and create a complete design with colors, textures, fonts, images and other design elements. Of course not, before entering the visual design stage, we need to put what the client wants into wireframes as an initial stage.

Wireframes
Wireframe Example

What are Wireframes?
Wireframe is the basic framework / blueprint of the web page that we will build. Broadly speaking, in this wireframe we place the important elements of the web page in their respective positions such as banners, body content, menu links, columns, footers and other features that will be on the web later. Visually the appearance of this wireframe only consists of boxes and lines that indicate the position of each element of the web page layout.

Wireframe Utilization Considerations

By creating a wireframe we help the client to focus on the main framework of the web page builder.
With wireframes we can lead clients to focus on features, elements and their position on the web without being distracted by color, typography or other design elements.
With wireframes that are just black-and-white boxes it will be easier for us to detect what is not working from the usability, functionality side. Like a wireframe house, it presents the layout of the house in the form of a draft where the position of the guest room, bedroom, bathroom, terrace, kitchen. So it will be easy for the client to see the functionality and usability side.
wireframe_sample2

Wireframe Making Tool

There are many tools that we can use to create wireframes including Cacoo, Jumpchart, Gliffy, Mockflow which have good toolset and features. There are also some who use Adobe Illustrator, can also manually use a pencil by sketching on paper.

Ease of Revision
With the wireframe, of course, it will be easy for us to fulfill revision requests from clients. We only shrink the banner box if the client feels that the existing banner is too wide. We only move positions from certain features to other positions if the client wishes to do so. If the client considers a certain button too small, it will be easy for us to revise it. Wireframe is very easy for us to make revisions without taking a long time.

Just because the color of the button that the client doesn’t like from the layout we design in the form of a complete mockup, the client may ask for a complete redesign, even though the layout is not problematic. We can face this if we are reluctant to go through the wireframe stage.

Save Time and Energy
By isolating the revision requested by the client only at the wireframe stage, it will certainly save time and effort. We can imagine that if we have to remodel the layout when the layout is ready in the form of a full color Photoshop mockup complete with colors, textures, typography, design elements or already in the form of an HTML/CSS page, it certainly becomes more complicated. Wireframes help us solve revision problems that allow us to focus on the next stage without being distracted by meaningful revisions.