Your website design can determine your success.
If you get the design wrong, people will get confused, disoriented and destroy the user experience. You're likely missing important content or not seeing a call to action.
so in front of youbuild a website, make sure you have the right design idea.
But the significance of its design goes further. The design must adapt to the content of your site. With the right layout, your content can shine, but with the wrong content, it can become cluttered, difficult to read, and uninspiring.
Ultimately, all locations have a grid system that sits underneathdesign of websites. These columns and rows keep your content organized and direct the user's view of the page. Within these grids, you can create a variety of different approaches. Every website has an underlying grid on which the designer built the layout.
However, when it comes to choosing the right layout design for your website, there are several general starting points you can use to get started.
It's worth noting that you don't have to stick to just one approach. You can easily have multiple layouts on your website or even on a single page e.g. B. a landing page.
Let's take a look at the most common layout options available to you.
1. Single column layout
Although it's the simplest layout you'll find, its popularity has increased significantly since the rise of mobile internet. This is because the website can use the same design on mobile, tablet and desktop, which reduces development time.
Also, single-column layouts work well to create a great reading experience as they keep the user focused on the content without distracting anywhere. Hence the blog siteMiddleadopts it for all its articles.
Finally, a single-column layout combined with images can make an impact because you can display those images as large as possible.The Ocean Complexis a great example of this in action.
With these factors in mind, you should use a single column layout if you want people to spend a lot of time reading your site, or if you have images that need space to shine.
Because of its simplicity, there are few challenges with a single-column layout. However, you must carefully consider the flow of information. In what order does the user need to view your content?
For example, giving users a summary of the page's content at the top is helpful to entice them and offer a clear call-to-action towards the end.
Also think about how to make the user scroll down the page. Single column layouts tend to be longer and it is not always obvious to the user that there is more content below the page. A visual indicator, e.g. B. an arrow, can be helpful.
If a one-column layout seems a bit restrictive but you still have a lot of content to communicate, consider using a content-aware layout.
2. Design focuses on the content
Web designers often use content-oriented layout on news sites or blogs, and it usually has a main column for content and one or more side columns for additional information.
The benefit of this layout is that it can help you manage the line length of the middle content by varying the width of the side columns. that's important becauseIf the line length of the text is too long or too short, it becomes more difficult to read, reducing the understanding and retention of information.
Done right, however, content-centric design is ideal for any copy-centric website. The secret is to break down the content within this layout into small, easily digestible chunks.
For example, on my blog, you'll notice that my average post is characterized by headlines, lists, images, and drawn quotes. These are all techniques to help the user scan the item and find parts of interest.
Particular attention should also be paid to the side pillars. It is essential that the web designer places the correct content in these columns and receives the correct visual weighting.
The problem is that users expect to find secondary content in the sidebars and therefore pay less attention to them. So if you plan to include something like a call to action in a sidebar, it needs to be strong enough to grab attention.
For example, note howMagazine smasheduses a colorful illustration of a cat to draw attention to its newsletter signup form in the right column.
Not that content-centric design works for every page on your site. Websites often combine this layout with a magazine layout.
3. Magazinlayout
As the name suggests, this design approach is commonly used in magazines or news sites to display a large number of different stories.
Inspired by print design, they allow headlines and images to be combined to present stories. This can be an attractive way to convey what is essentially a list of links.
It's also a great layout for highlighting content that changes regularly. That's why news websites likeDie Washington Postso prefer him.
However, the design is not without its drawbacks. Designing a magazine to make it responsive can be difficult and often requires a complete change of layout for devices with smaller screens.
This type of website design can also be a bit overwhelming, with lots of attention-grabbing images and headlines.
The most effective way to tackle this problem is to create a clear visual hierarchy. In other words, make some of the "stories" bigger than others.
For example, notice how theModaThe website draws attention to the image on the left by significantly enlarging it. In fact, they tell the user where to look first.
It also helps that the rest of the interface is simple, with clean typography and simple navigation bars. When using a magazine layout, you have to work hard to keep things simple.
Another potential downside to the magazine layout is that it can appear "boxy" since the underlying grid is clearly visible. However, you can tone that down by taking inspiration from our next type of design.
4. Grid-Break-Design
Layouts that appear to break their underlying grid can be far more visually interesting than more traditional approaches. They're also great for drawing attention to specific elements on the screen that fall outside of the usual columns.
Take this for exampleArlés VR Festival-Website. Notice how they draw your attention to your navigation bar by overlaying two columns.
Another handy use of the grid-split layout is to overlay text over an image in a way that draws attention to the copy. When a web page completely covers the text of an image, it can often be lost. However, how can yousee example belowIf the text partially overlaps the image, it will stand out much more.
The downside of groundbreaking layouts is that it's difficult to get it right, especially when websites need to be responsive. In truth, most innovative designs are nothing like that. There is still a grid underneath and all screen elements fit into it. It's just that the grid is much more complex and therefore not that obvious. This makes them difficult to design.
Due to their inherent complexity, they are often used by design-oriented companies such as design agencies or fashion brands. They demonstrate a level of design sophistication that appeals to a specific audience.
If a groundbreaking layout seems overly complicated for your situation, but you still want to do something more innovative and unusual, consider an all-screen layout.
5. Full screen layout
Full screen layouts, as the name suggests, fit on a single screen without requiring the user to scroll. This makes them ideal for storytelling or presentations.
Take as an example,species in pieces. This rich and interactive presentation experience tells the stories of 30 endangered species.
As you can see, full-screen layouts are best when accompanied by eye-catching images. This makes them a great choice for sites rich in photos, illustrations, or videos.
Not that you have to strictly stick to the single-screen approach. At first glance theRoux en el Parliament Square-WebsiteIt appears to be a full-screen website in the same vein as Species in Pieces. Its magnificent images fill the entire viewport.
However, it is possible to navigate further down the page to view additional content. Unfortunately, this shows a potential downside with this design approach. Users don't always realize that they may be scrolling and as a result may miss out on valuable content.
You should also carefully consider how the design can accommodate different sizes. For example, does full screen mode work on a mobile device? Are the images also cropped when the screen size changes, or are they just downsized? You can quickly find the focal points of images that are cropped outside of the visible area at smaller sizes.
However, if you have impressive images to present, you will have a hard time finding a better layout design. However, if you want the ability to add description and calls-to-action to these images, consider an alternative design.
6. Alternatives Design
The alternate design pattern is one of the most common on the web. You'll notice that it's made up of a number of content blocks, each with a two-column layout. The blocks usually consist of an image on one side and text on the other side.
The name comes from the fact that the image changes on the page. So the first block has the content on the left and the image on the right, while the next block reverses this layout.
It is a design approach that is particularly favored when explaining a product's features or benefits. For example software products likeCinchThey use the image to show a feature and then the copy to explain how it works or what the benefits are.
It's not like these content blocks are limited to images and text. Sometimes websites replace the image with a video. Similarly, the element's content page could contain anything from icons to testimonials to calls-to-action.
For example,conversion kitInclude a testimonial and call to action along with your copy in each content block.
Part of the reason alternate blocks are so common is that they're a simple design approach with few downsides. When you need multiple outlets to communicate, this is almost always a reliable design choice.
Of course, your needs may vary, so another option to consider is the card-based layout.
7. Card based layouts
Card-based page layouts are another common design approach you'll see all over the web.
Card-based layouts are a great way to give users a range of options to choose from and present them with enough information about each option to make a decision.
This makes them a popular choice for the product listing pages of ecommerce websites. Allows the site to display a product image, description, and price. You can even add features like "save for later" as you can see in theAsos-Website.
However, you'll find sites with card-based layouts anywhere that require users to choose from a list. Another typical use would be to display a list of articles on a blog or news site.
A card-based layout allows you to display an image of the story, the title and description, and any additional details about the post you want to include.awardsBlog is a prime example of this usage in action.
Best of all, the card-based layouts are responsive, with the number of cards in a row slowly decreasing as the available width decreases.
However, there are a few minor downsides to the approach. First, the cards work best when you include the image. That means if you're having trouble finding suitable photos for each of your list items, you might be better off with a different layout.
The other small issue is with varying amounts of content. If one card has more content than another, you can leave blank space within the card or between each row.
One way to mitigate this problem is to not try to hold cards in the same rank, as shown in the example below.
This is a minor issue, however, which explains the widespread adoption of this design approach.
Another equally popular theme is the hero image theme.
8. Hero disposition
The Hero layout is named after hero images, those large images with text overlays that dominate the home pages of so many websites. Apple takes advantage of the classic hero image.
Pixave for macOS takes the hero theme even further by dominating your homepage layout.
What makes featured images so prevalent is that they allow you to style yoursvalue propositioneffectively right at the entry point of your website.
As you can see from thePixavejAppleThe sites listed above usually consist of a large background image, a title or slogan, and a description. Hero skins often include a prominent call-to-action as well.
If you want to clearly explain what you offer on your homepage or landing page in an attention-grabbing way, a hero image might be the way to go. However, this is probably the scope of its use.
From time to time you will see the Hero theme on the following pages. But in most cases, the hero image simply draws attention away from the more valuable content. So please use it carefully.
That being said, there is a small downside to using a hero skin. Yes, they are common, but users are familiar with them and they are effective.
A much rarer layout option is the split-screen layout.
9. Split-Screen-Layout
Like the full screen layout, a split screen is a great way to grab attention when users first land on your site, as you can see inWeb design company landing pageunder.
What makes the example above so effective is that there is a clear reason for the split screen layout. The website makes it clear that their business has two sides: design and development.
A similar example is when you want to give users a clear binary option. A split screen makes a lot of sense in this situation as it splits the screen evenly between the two options.
For example the model agency.62 administrationuses a split screen to encourage users to identify whether they are looking for a male or female model.
Unfortunately, aside from this limited number of apps, there's little reason to go for a split-screen layout. It's a relatively limiting design choice, and there just aren't many scenarios where it's appropriate. However, in those cases where this is the case, this is by far the best option.
A similar option that would offer a bit more flexibility is the asymmetric layout.
10. Asymmetrisches Design
While the split screen layout forces an even split down the center of the viewport, an asymmetric layout allows you to split the screen however you see fit.
The benefit of this layout over split screen is that it allows you to emphasize a specific side of the page. The more properties a site has, the more attention you pay to it. This in turn allows you to identify primary and secondary content.
With the premise of parent and child columns, you can use the approach in a variety of ways. For example,Felix Lesouefuses the method on your website to separate between content and navigation.
On the contrary, themaintain eatThe website uses the second column to allow you to view the next section of their website.
In many ways, the asymmetrical design is an excellent option. It's flexible, relatively easy to implement, and less commonly used. It's a convenient way to make your site look different without the headaches of some of the other options.
How to choose a theme
By reading this article, you've taken the first step in choosing the right theme for your website. You have learned what options are available to you.
Next, you should have an idea of what options might work for your site. One way to do this is to look at your competitors. However, I would recommend not stopping there. The danger is that you copy them and thereby always fall behind.
Instead, look at sites in other industries whose content types are related to yours. If you have a brochure website that caters to a B2B audience, take a look at other similar websites. Similarly, if you have an ecommerce website, look at ecommerce in other sectors.
From there, work with your designer to experiment with a few different approaches. Ask them to come up with some ideas based on different layouts and see which one suits your content best.
If you can't make a decision or lack confidence in the right direction, try showing the options to a few users and getting their reactions. Don't just ask them what they prefer, but also ask if they've seen critical content or understand what the company is about.
In truth, you'll probably have to choose between different design approaches for different parts of your site, and that's okay. When it comes to website design, using the right layout at the right time is crucial.