The Ultimate Cheat Sheet On Wireframes

Saurabh Tiwary | 8th March 2016

The Ultimate Cheat Sheet On Wireframes.

In Web Designing, a wireframe is a skeletal frame for a three-dimensional model in which only lines and vertices are represented. It’s like a blueprint of a website. It consists of several images which display the different functional units of a website, and typically used for planning the design structure and functional parts of a website. It is an important step in website design process as it allows us to define information hierarchy of design. Thus, making it easier to plan the layout and the way one wants the user to look into the information. If you make careful observations to few reputed sites on the web, you will be familiar with various ideas on how a wireframe helps to organize information of the screen. Thus, it is advisable to go through the related websites as it is the very first step towards wireframe design. Let’s put some light on few key factors that you need to keep in mind while designing wireframes.

1.Focus on content management

There are a variety of wireframe options to choose from. The best way to analyse them is to make use of specialized wireframe design tool. A wireframe design of an educational Website cannot be like a news channel’s website which is bound to include too much of dynamic content on their website. Usually, it is all about the functional parts of any application, like how many text boxes, where to place images etc. It’s all about function, not form.

Define Information Hierarchy

After deciding how the boxes are laid out, start dropping in small pieces of your content to get a real feel of whether the information is well-structured or not. The information you want to deliver to your audience has to be very clear even in a black and white wireframe. Simply start using different font sizes to differentiate between the different levels of information.

Follow Layout Balancing

One way to do so is to divide objects into an even number of symmetrical parts. This concept adds beauty, and at the same time is very handy. You can add some content on design page so that you will be left with a lot of white space. Instead of keeping the content on blank space, place it to the right, and utilize the rest of the space to add content. This principle of symmetry can help you communicate in more stable, consistent, and polished way.

Use Wireframes Tools Tactfully

While creating the document, it is advisable to use the tool that comforts you. Developers, for example, may use Microsoft Visio, project managers PowerPoint, Designers Adobe Fireworks and so on. Since a wireframe is a document, one should not try to make it interactive, instead, it should be kept functional. There are so many tools available for wireframing like Balsamiq provides an environment for adding and customizing commonly used interface.

Overdesign should be Avoided

Wireframing is all about the primary functional part in which something operates. There is nothing to do a lot with the look or creative design. Obviously, design counts, but at least not in the case of wireframes. One should avoid anything that is part of the design as it may distract the content visibility. It’s better to add little blue color and try to make it interesting. Designing should be the task of designers.

About Author

Saurabh Tiwary

47 Comments To “The Ultimate Cheat Sheet On Wireframes”

clash of clans hack says:

March 8, 2016 at 11:17 pm

Hello, this weekend is fastidious in support of me, because this occasion i am reading this great informative piece of writing here at my
home.

click here says:

June 18, 2018 at 8:02 pm

It’аs in point of fact a nice and useful piece of info. I’аm happy that you just shared this useful information with us. Please stay us informed like this. Thank you for sharing.