Page Layout
PAGE LAYOUT
Visual Weight through Negative Space
Visual weight is perceived by people when some objects in the website carry a stronger visual force. This visual force can be induced in specific elements through different techniques. Amongst them, negative space is the one which interests us directly here.
Negative space (space that is devoid of any elements) drives the attention towards elements outweighing the rest through visual force concentrated on them.
The space between the black square and the white squares directs the eyes to the left-hand element. But the left-hand element is outweighed by the 4 smaller white squares, with carry a stronger visual force.
Balance in a Silhouette View
The silhouette view is the simplest representation of a website layout, the bare structure of a website. Without color or any adjustments, with no additional elements or specific content, the silhouette view gives an objective rendering of the overall website structure.
Either in designing a website layout, or in browsing through available website layouts, you should study the balance of elements in a silhouette view.
There should be a coherent balance of power among different visual elements making up a website layout.
The elements that make up the layout are supporting one another, so that the user sees the text content with equal importance. In addition, the elements are easily scannable in a layout that efficiently presents them all.
Sections for specific audiences or features
Arrangements of elements that can be changed mean that users can easily switch to other website sections. To help you figure out how this is possible, we suggest you think about fashion websites addressing both men and women.
The layout supports 2 distinctive sections within the website, one dedicated to apparel for men, the other dedicated to apparel for women. The layout split serves functional content, highly useful for the 2 distinctive target audiences.
Go outside the standard layouts
Whereas some layouts follow the traditional path, with an aim at serving functionality at its best, other layouts use daring designs and structures, with the purpose of making an impact on the user. Breaking the mold means unexpected arrangements of the elements within the web page, and the experiences it triggers stand out in a sea of standard website, that a user can’t help but remember your website.
Create Visual Tension for Eye-Catching Stimulating Layouts
In web design, visual tension strains the users’ attention by focusing it on key points of the website. Visual tension comes out by contrasts of space, color or luminosity, and it is easily noticeable if interwoven in a perfect overall balance of elements.
Its role is to visually stimulate the users to break off the web surfer routine and process the information on the website in a brand-new light.
Visual tension in a website layout, through unexpected placement of some elements
Use focal points to draw attention to certain elements
A call-to-action button can be a focal point. An image can be a focal point. Headings can also be focal points. It all depends on how they integrate into the website layout, so they become the biggest points of interest on a website, that capture a user’s attention.
Due to focal points, you’ll have your users half-way to conversion (whatever “conversion” might be for your particular website) – users will concentrate their attention on those focal points and are more inclined to take the action you want them to take.
The images areas in the menu are focal points stirring up interest
Design layouts that accomplish website goals
It’s best practice that, before starting to design a layout/to browse through layout templates, you should define what the website goals are. They might be to sell products, gather traffic, or simply enchant users with some piece of art. The website layout should be chosen based on the website goals. It will trigger certain users’ behaviors that lead to completing those goals.
Layouts that tell a story
Design the layout/search for a layout so that it molds onto the message you have to transmit. Section areas should come together to tell a complete story. Each element in this chain is another chapter in your story.
Layout made up of features sections, saying much about the app’s value
Best Website Layouts with Proven Success
Below you’ll find the most popular and effective website layouts that designers the world over use to make their websites.
1. The Zig-Zag Layout
This layout is based on a widely-known pattern users got used to scan a webpage content: the eyes move along the page following a Z-letter direction.
- First, eye goes from left to right
- Next, eye goes down and to the left
- Last, their eyes move back across to the right again
As it is intricately connected to some common web surfer behavior, the zig-zag layout is applicable to a wide range of websites, in different activity areas.
Restaurant Website Demo – created with Mesmerize Theme
2. The F Layout
The F-shape layout follows another widely-known scanning behavior, where the eyes move across a page in an F-letter pattern.
Due to its connection with a widely known user behavior, this layout is suitable for a wide range of websites, from business websites to portfolio websites.
3. Full Screen Photo
In this case, the layout implies spreading up content upon a full screen photo/image. Thus, text sections or menu sections are there to support the “living” image. Good to use for websites that want to immediately anchor the subject of a site in the mind of a visitor.
Fashion Website Demo – created with Mesmerize Theme
4. Grid Layout
Information is organized into grids, making it easy to browse., and people can stop to specific topics of interest. Grids allow for an equal distribution of text, photos, videos onto the webpages, letting users decide upon the importance of each unit. Good to use for newspapers, vlogs, etc.
5. One-Column Layout
This layout organizes information into one single column, and it’s one of the simplest layouts to put in place. The content (text, photos, videos) is easy to follow, and the need to scan is nothing more than identifying key points of interest into that single column. Good to use for research papers and long-form articles.
6. Featured Image Layout
One of the most frequent layouts nowadays implies setting up a featured image representative of each page in the website. The image serves to concentrate attention and interest to a focal point expressive of the page topic. Also, the image stands as the source of meaning that radiates from this very focal point. Good to use for niche blogs, freelancers and professionals.
Designer Portfolio Website Demo – created with Mesmerize Theme
7. Asymmetrical Layout
The asymmetrical layout plays with the rules of symmetry to the point of bending them in favour of a unique promise: there is more we have to offer than perfection. The trick is to create active space, and to make white space livelier.
Good to use for this very category of web design websites, for unusual portfolio presentations, and innovative businesses websites.
8. Split Screen Layout
This type of layout refers both to vertical split screen, and to horizontal split screen. Generally, a vertical split-screen plays a major role in conveying dual importance to 2 or more distinct areas. The purpose here is to favour quick choices, for better engagement with the website right off the bat.
The example below is somehow different, in that it contains both vertical split and horizontal split, in one and the same page. Looking only at the vertical split, it does not invite to making a choice, but rather to enhance one experience through the other.
The split-screen layout is recommended for online stores (e.g. selling to men & women), or creative websites “selling wellness” all through the web presentations (like in the case below).
9. Headline and Thumbnails Gallery Layout
In a more and more visually-focused online world, this layout may work wonders. It is made up of image miniatures leading to full descriptions of those topics, and headlines (+ short presentations) that serve as a guide though the image album.
Suitable for travel websites, usual blogs and magazines.
Financial Website Demo – created with Mesmerize Theme
10. Modular Layout (also known as Card Layout / Block Layout)
This layout is tightly related to Material Design, the design protocol launched by Google. It’s becoming increasingly popular, due to its flexibility and responsiveness. The modular layout means each unit of content (text, images, videos, buttons) is included in a card, or module, having its own dedicated space.
When applying modular layouts to websites, the effect is a streamlined look and a highly coherent composition of items in a webpage.
Good to use for business websites, where clear and coherent presentations are fundamental to a professional online presence.
11. Magazine Layout
The magazine layout, as it is encountered nowadays, tends to be a mishmash of some other layouts, all serving to give a splendour aura to the news.
The example below combines headline + thumbnail gallery layout, and featured image layout, plus a solid F-shaped layout, to keep the glamour of the magazine up to par.
Such combinations are good for, but not limited to, online magazines.
12. Single Page Layout
Although not so widely spread among common website layouts, we wanted to list this layout here due to its fairly interesting characteristics. It combines multiple actions into one page (e.g. Gmail). Content is loaded dynamically, using JavaScript. And it is built so that it generates unique URLs for each viewpoint.
13. Radial Symmetry Layout
Another less common layout type refers to radial symmetry. There’s a central point from which radiate correlated items, in a rounded form:
It’s a wrap
Now, that you’ve got familiarized with the different website layouts, it’s time you consider what particular layout is the best fit for your website. Is it a multi-purpose layout, or a layout adapted to a certain niche?
To do this, you should know your audience, their behavior, needs and expectancies, and built the appropriate message that molds perfectly on a layout. The layout will have the role to let the message shine and be so convincing for the users, that they cannot but accept it.