The concept of blueprint has existed for hundreds of years. It is defined as a technical and/or mechanical drawing of a detail structural plan. It is most often used by architects and engineers that are working on building any kind of infrastructure. However, Blueprint has a sister called Wireframe. Wireframe is essentially the same as Blueprint, only for Web Design. Almost all web designers use wireframing before jumping into the actual design for a number of reasons that we will discuss hereafter.
Before jumping into color, design and content, wireframing enables designers to form and understand throughly the functionality of the website they are building. This is important because it creates the structure and flow of the site before even putting the aesthetic elements. Some designers do it by hand, with a blank piece of paper and a (neutral-color) pen. Others prefer to do it on the screen. Both options are completely valid and work just as well. However, it is usually advised to create a finish product on the computer, as it makes it easier for the designer to start building the webpage.
Once the wireframing is set, it enables the designers to understand where each element should be placed all throughout the site. This does not only make the overall process easier, more organized, and faster. But it also applies something that is incredibly essential for any type of branding out there: consistency and cohesion. These two result on a stable and balanced design that is easy to grasp, read and navigate. In other words: a win-win situation.
Wireframing is not only simple and easy to learn, but it is also functional and effortlessly accessible. Below is a list of my top 5 free Wireframe websites that make it even easier to start your wireframing adventure.