What is a website layout

After you have done a competitor analysis and collected all the necessary information on the site structure, compiled a site map and an interaction diagram, you can proceed to the site layout.

A layout, otherwise known as a wireframe, is a rough prototype of a web page or application screen. It defines what elements will be displayed on the page or screen:

• navigation elements;
• content sections (text, photo, video);
• graphics and/or multimedia materials;
• elements of feedback forms;
• calls to action (Call To Action, CTA)

Always layouts are usually created in black and white or in shades of gray. This helps not to be distracted by the design, but to focus on the logic of placing content and material for quick and easy user perception.

Instead of graphics, they use placeholders, and fonts are chosen conditionally. Layouts are very different – from the simplest to very complex, almost completely reproducing screen design.

Also, an important advantage of layouts is that with their help of them, you can quickly make adjustments and achieve the desired result.

Layouts evolve every year, improving details and important elements. Gone are the days when they served solely as working reference points for designers and developers.

These days, mockups are needed to present a site or application to clients, designers, developers, and other team members who are deeply interested in it. It is a common practice to show mockups to clients in order to check the implementation of design solutions before the development and creation of the graphic design.

The people who create the mockups often work hand in hand with those who define the business requirements.

It should be noted that the best-annotated layouts often come from direct interaction and collaboration between different professionals – from business analysts to developers and designers. Some companies are gradually moving to use annotated layouts instead of business requirements documents.

Often layouts are shown to users in order to receive feedback, on the basis of which the page design is either approved or returned for revision. A different term is usually used for such layouts: prototypes.

Always create mockups, as they are useful in developing any project and complexity, and help save time and money before creating a website design.