Web page Layout Design TemplateWebsite Layout Design Template
The main cause of every visitor in most cases is the contents. Contents are of utmost importance and every designee wants to present them in the most useful and intuitively way. So it' not strange that choosing a layout for your contents is one of the first things design professionals do when they launch a new work.
A lot of designer believe that the layout for each website they work on should be totally one-of-a-kind to achieve the objectives of the design - far from the reality. Visiting some of the world' s most visited sites, you will find that many of them use similar layout. It is not a matter of chance or idleness, but because these layout have three main advantages:
Popular layout have become so popular because they have proved that the user can work with them. The visitor feels a pleasant feeling of déjà-vu when they see trusted characteristics arranged as they would like. Consequently, instead of concentrating on the site's original design, rather than on the contents, you' re going to be spending your valuable resources processing them.
The reuse of already created layout saves a lot of work. Authors will be spending less experimentation with the layout and more attention on the design tree and other design issues that have a significant influence on usability. Although each and every one of these projects is different and needs an own personal touch, it is useful to be acquainted with popular layout.
Here we take a look at 11 very popular layout styles that you can find on innumerable pages today. Einspaltig. Monocolumn layout presents the primary contents in a singular, perpendicular colum. Probably this kind of layout is the most simple of this lists and the most simple navigation for the user.
Users just need to move down to see more of it. In spite of its ease, single-column layout is very much in demand on many sites. However, the advent of the portable layout also had an effect on the appeal of this kind of layout - single-column layout fits seamlessly with portable workstations. The layout is used in many face-to-face blog posts using minimalist design principals.
It is a popular layout for a microblog like Tumblr. Suggestions. It is important to always have the navigator in view because the single-column layout is often used for long scrolling pages. The ' Locky Navigation' will help you prevent your users from having to go all the way back to the top of the page to browse.
Splitting a layout (or a monitor in two) is ideal for a page that has two major contents of the same meaning. This allows the designer to present both elements at the same time and take them into account at the same time. Splitscreen layout is ideal if your website provides two dramatically different variants of usability, such as two different kinds of statements as seen in the dropbox example below.
Splitscreen layout is also perfect for contrasting, so a designer often uses this layout to replace two elements. Suggestions. Do not use too much contents in divided parts. Shared display themes don't grow well as your contents grow, so it's better to skip this kind of layout if you need to deliver a large amount of information, whether in text or vision, in shared parts.
For a more vibrant viewing environment, integrate motion graphics and more. Asymmetric layout. Symmetry is the absence of parity between two sides of the layout. Asymetry is a long established and beloved technology in the arts community, it has recently established itself with web design professionals. A lot of folks mistake symmetry for disequilibrium, but in fact the aim of symmetry is to establish a equilibrium when it is either not possible or not desired to use the same mass for two slices.
Imbalance allows voltage and dynamics to be generated, and symmetry allows better scan performance by drawing the user's focus to single items. Change the width, scope, and colour of any asymmetric contents by prompting the design engineer to remain active visibly. You can use this kind of layout when you want your design to produce interesting and unanticipated designs without altering direction.
Correctly used, symmetry can generate an energetic room that leads the human gaze from one item to another, even across the void. Suggestions. Ensure that your contents can be presented in an asymmetric layout. Asymmetric layout does not make sense for every location. Probably works best for minimalistic layout. These asymmetries are based on the notion that an item with more visible gravity will first attract the viewer's interest.
They can use high colour contrasting panels to give certain parts of the design visible accents. Maps are great boxes for information that can be clicked on - they allow a designer to present a large amount of information in a manageable way. Large thumbnails ( usually a picture and a brief description) help the visitor to find the desired contents and to get into detail by click or tap on the map.
One of the most important things about a map grating is that this kind of layout is almost endlessly manipulable. The rasters can differ in sizes, distances and number of column, and the map styles can differ depending on your monitor sizes (maps can be reordered for each monitor). That' s why map gratings work so well with fast reacting design.
Map layout grids are good for content-intensive websites that show many elements with the same hierarchical structure. Suggestions. Interacting with a map is much more convenient when you don't have to click exactly on the heading or picture of a map to get detailed information. Be aware of the empty spaces between the maps, as they influence the navigation of your guests.
Greater spaces between the maps make surfing slow, but the visitor will focus more on each map. Minimum footprint allows quick scans, but also raises the risk of visitor overlooking some contents. Perhaps this is the most complicated layout discussed in this article. This layout, as the name implies, was first made popular by papers and journals that had difficulty presenting large quantities of information to the readers in a simple way.
Graphic artists used the gridsystem. Layout is structured according to a flexible raster that allows multiple columns of information to be prioritized visually. Just like stationery journals, e-journals use a multi-column raster to help you build a rich hierarchical structure and incorporate text and illustration.
Main objective is the same - visitor must be able to quickly scroll, browse and navigate a page. Designer aspire to creating a visually evocative rythm. Trying to make it easy for the eyes to scroll the side parts and allow the eyes to move in a natural way from one cluster to another.
Simultaneously, the designers try to keep the different blocs from fighting for awareness. Journals layout is a good option for publishing that has a complicated hierarchical structure with large volumes of contents on one page. It is likely that without the efficient use of a grids, all contents on the homepage would appear clearer and less organised.
Suggestions. The layout accentuates headings and pictures. Heading size/image is directly related to the amount of awareness it attracts. For example, the New York Times - the main page contents have large thumbnail views, large headings and more detail text. Placing a grating demands careful consideration of both the horizontally and vertically rhythm, and they are just as important if you want to make a good layout.
The first example shows the grating matching the width of the columns and the distance horizontally, but the different distance vertically produces visible hiss. The second case is where the distance between columns and elements is constant, making the overall layout clean and convenient for the users who consume the contents optically.
The layout has a large width of headers and a few smaller speakers, each occupying part of the surface of the bigger speaker. Any of the boxed pages can be a hyperlink leading to a bigger, more complicated page. It is a fairly diverse layout that can be used for both single portfolio-like web pages and enterprise e-commerce web pages.
It is desirable that all selections are visible when a visitor visits the site. Suggestions. Side bars can also contain contents other than or in conjunction with a meal, such as e.g. search able link, contacts or anything else that a visitor might want to find easy. The layout is inspired by the notion that using pictures in design is the quickest way to market a given part.
Pictures have the ability to establish an emotive link to the visitor - a large, fat photo or illustrated image of an item makes a powerful message and makes a breathtaking first impact. The layout is ideal if you only need to display one product/service and direct all a user's attention to it.
With this kind of layout it is possible to create a truly vivid, emotionally charged event. Suggestions. Font sizes, fonts and colors are all characteristics of a font that must be used to enhance the design. Form layout. The layout was designed on the basis of the way the user reads webpages.
NNGroup's original F-shaped scanner design states that a user should usually be able to create severe block scans in a design similar to the F or E character. Our view starts at the top right of the page, scans horizontal, then falls to the next line and does the same until we find something that attracts our interest (interesting content).
Not only is this sample important for desktops but also for mobiles. The layout is good for pages that need to present many different choices and allow the user to quickly scroll through them. The visitor will react better to the layout of the F design, which imitates the original sampling design.
It is useful for a home page of a message page or a page that contains results of searches. Suggestions. Adapt the contents according to the way you want to perform the scans. It' s a good idea to place the main contents on the right and right side of the page where the operator starts and ends his horizontally scanned page. At the end of the series, the visitor pauses for a fraction of a second before proceeding to the next series, and this break gives you the chance to present them.
You can use verbal hints to lead the viewer. It is possible to draw the user's eye to a particular item by giving it more visible clout. You can, for example, emphasize key words within a text to draw the user's eye. C-shaped layout. Also, the layout of the Zen patterns imitates your own scan patterns. Website users (from occidental cultures) begin in the upper right hand part.
Next however, instead of falling straight down, like in the F-shaped design, their eye moves down and to the leftside of the page, producing a slant. Whilst the F Patterns are more suitable for scans of a large amount of contents, the W Patterns are more suitable for websites with a single target and less contents.
These patterns are efficient for drawing the user's focus to certain points by using well-placed pictures, text and a CTA. Suggestions. It is possible to involve scan participants by changing text and pictures several at a time to make a Zig Zag. At the heart of this layout is a large photograph that serves as the backdrop for the page.
It is used to bring the contents of the website closer to the visitor. The layout allows you to make a powerful first impact and encourage users to interact. If you want to say less and show more, this layout is great. Suggestions. As the layout is built on a unique picture, it is important to choose the right one.
Its main objective is still the publishing of easy to digest contents. From the many varieties of contents, it is important to choose the one that makes your contents sparkle.