The problem is that users expect to find secondary content in the side columns and so give them less attention. Therefore, if you plan to include something like a call to action in a side column, it needs to be strong enough to draw attention. For example, notice how Smashing Magazine uses a colorful illustration of a cat to draw attention to their newsletter sign up form in the right column.
Not that the content focused layout is appropriate for every page of your site. Websites often pair this layout with a magazine-style design. As the name implies, this layout approach is used extensively in magazines or news sites to show a large number of different stories.
Inspired by print layout, they allow for the combination of headlines and imagery to introduce stories. That can be an engaging way of conveying what is essentially a list of links.
It is also an excellent layout for highlighting content that regularly changes. That is why news websites like The Washington Post so favor it.
However, the layout is not without its drawbacks. A magazine layout can be challenging to make responsive, often requiring a complete change in design for smaller screen devices. This website layout style can also be somewhat overwhelming, with a large number of images and headlines shouting for attention.
The most effective way of addressing this problem is to create a clear visual hierarchy. For example, notice how the Vogue website focuses attention on the left-hand image by making it considerably larger. They are effectively telling the user where to look first. It also helps that the rest of the user interface is straightforward, with clean typography and simple navigation bars. If you are going to use the magazine layout, you will need to work hard to keep things simple.
However, you can mitigate that by taking inspiration from our next layout type. Layouts that appear to break their underlying grid can be visually much more interesting than more traditional approaches.
They are also excellent for drawing attention to particular screen elements that break out of the usual columns. Take, for example, the VR Arles Festival website. Notice how they draw your attention to their navigation bar by having it overlap two columns. Another practical use of the grid breaking layout is to use it to overlay text on an image in such a way to pull attention to the copy.
When a webpage completely overlays text on an image, it can often be lost. However, as you can see from the example below , if the text partially overlaps the picture, it stands out a lot more. The downside of grid-breaking layouts is that they are hard to get right, especially when websites need to be responsive. In truth, most grid-breaking designs are nothing of the sort.
There is still an underlying grid, and all screen elements fit into it. It is just that the grid is much more complex and so it is not so obvious. That makes them hard to design. Their inherent complexity is why you tend to see them used by design-led companies such as design agencies or fashion brands. They demonstrate a degree of design sophistication that appeals to a particular audience. If a grid breaking layout feels too complicated for your situation, but you still want to do something more innovative and unusual, consider a full-screen design.
Full-screen layouts, as the name suggests, fit on a single screen with no need for the user to scroll. That makes them ideal for storytelling or presentations. Take, for example, Species in Pieces.
This rich and interactive presentational experience tells the stories of 30 engaged species. As you can see, full-screen layouts are at their best when accompanied by powerful imagery. That makes them a great choice for websites rich in photography, illustrations, or video.
Not that you have to stick to the single screen approach strictly. At first glance, the Roux at Parliament Square website appears to be a full-screen website in the same sense as Species in Pieces. Their gorgeous imagery fills the entire viewport. However, it is possible to navigate further down the page to see additional content.
Unfortunately, that highlights one potential drawback with this layout approach. Users do not always realize they can scroll and so can miss valuable content. You also need to put careful consideration into how the layout will adapt at various sizes.
For example, will the full-screen approach work on a mobile device? Also, will images crop as the screen size changes or simply shrink?
You can quickly find the focal points of images being crop out of the viewable area at smaller sizes. That said, if you have stunning images to show off, you will struggle to find a better layout design. But, if you want the option to add some description and calls to action alongside those images, you may want to consider an alternating layout. The alternating layout pattern is one of the more commonly found on the web. You will find it is made up of a series of content blocks, each of which has a two-column layout.
The blocks are typically made up of an image on one side and text on the other. What gives it its name is that the image alternates side.
So the first block will have content on the left and the image on the right, while the next block reverses that layout. It is a layout approach particularly favored when explaining the features or benefits of a product. For example, software products like Webydo will use the image to show a feature and then the copy to explain how it works or the benefit it provides. Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code.
Only with Webflow. Content should have logic, flow, and fit into a hierarchy. Your content should guide your audience to an inevitable conclusion, each piece building on what came before it. Header tags should be used to structure content and help web crawlers rank your site for web searches. Visual elements should also be organized.
Define sections with images and graphics that complement the written content. The palette you choose for a design communicates so much.
It can be playful, like a toy company, or more serious for a site offering financial services. Choose colors that communicate your identity and — most importantly — make the content easy to read. With that in mind, always run your color combinations through a color contrast checker to ensure readability. White space, buttons, and other visual design elements help images and content stand out, and keep a layout from being cluttered.
White space, also known as negative space, is an important aspect of any utilitarian design. Without it, messaging can turn into an indistinct blob. Imagine an intersection with 3 street options versus 10 — simplicity makes for a better journey. It does not make a product more innovative, powerful or valuable than it really is.
It does not attempt to manipulate the consumer with promises that cannot be kept. Consumers are savvy. They can see through shallow marketing jargon — they want and expect brands to be real. Position your brand as a voice of authenticity by providing information that has value and communicates the humanity behind your brand. These guiding principles inform almost any website you'll visit.
There are always exceptions, but knowing the rules makes it easier to bend them without breaking your design. What are the principles that shape your work? Tell us in the comments what guides your process and helps you design better. Build your site for free and take as long as you need. Get started now. Search for Jeff Cardello July 21, July 21, July 21, Purpose sets the foundation.
Unleash your creativity on the web. Get started for free. Subscribe to be a Webflow Insider. Organization unifies. Share this. Marketers seeking to dominate their respective niches should be focused on the best website layouts. There are a ton of great website layouts being used now. These are layouts that are easy to navigate, simple in scope, and focused on providing a memorable user experience.
Most importantly, the best layouts for marketing are heavily influenced by conversion science. That makes them perfect for marketers who want more subscribers, leads, and purchases.
Everything the visitor needs to learn more, get enticed, and convert is above the fold, with no scrolling required.
Here, visitors can learn, sign up, or scroll down to learn more. Here, visitors can see why they would need the service, which helps to push the conversion. Customer service leader ZenDesk also provides a static menu as visitors scroll down, ensuring they always have a way to access the content they need.
The beauty of this layout is in its simplicity. Mailchimp has managed to build one of the best website layouts for conversions because it places simple links under clearly-marked headings that make it easy to learn more. And just look at all that white space!
This layout is easy on the eyes, simple to navigate, and a joy to spend time on. All of the information to learn enough to convert is truncated and designed for skimmers, which is great UX best practice for those short on time or attention. Payment processor Stripe has quite a few things going for it in the best website layouts category. The clear navigation, standout call-to-action, and negative space succeed in driving attention, and ultimately conversion.
Instead, they can select from a variety of clearly-marked links. Notice how each link is categorized with bolded headings. Making your website layout responsive is crucial when you consider that Google is now Mobile First. If you want to infuse these best practices into your own website layout, here are a few steps to follow. Think of your navigation bar as a roadmap to the interior of your website.
Each menu item acts as a jumping point to the various pages that may help visitors learn more and convert. A search box can also help visitors find what they need quickly for maximum UX and conversions. All of this information entices visitors to read, learn, and click, thus converting almost instantly upon landing.
With a flat and simple layout design, you can deliver the content in a way your audience expects. For example, many websites follow the tried and true Home, About, Services, and Contact as a basic structure.
Of course, your site may offer a unique menu, like footwear leader Zappos. Keep your menu items simple to understand and you should have an effective website layout to drive more sales. In addition to having one of the best website layouts around, you can often increase conversions with opt-in popups.
Similarly, exit popups can be used to capture bouncing traffic , which can help bring them back into the fold of your website for a second look. Notice how Crazy Egg offers a simple above-the-fold experience that is easily replicated across devices.
0コメント