Web Layout Best Practices: 12 Timeless UI Patterns Analyzed
UI design trends may come and go on the web, but several UI patterns have stood the test of time. What makes a UI pattern timeless? Adherence to web layout best practices that result in a combination of user-friendliness and an adaptability to changing trends and technology.
There are a few criteria that make UI patterns endure. User-friendliness is one of them. A UI pattern that “looks amazing” but doesn’t facilitate great usability is not one that will last for long.
The most useful UI patterns are also adaptable to changing trends. Card-style and grid-based layouts, for example, can be implemented by UI designers in a variety of ways. Adaptability makes it possible for them to continue looking modern and on-trend, even though they may have been around for years. The same is true for the other UI patterns included here.
Card-style Web Layout Patterns
Card-style layouts were popularized by sites like Pinterest, Facebook, and Twitter. They have become standard on news sites and blogs, as they’re well suited to placing a lot of content on a page while keeping each piece distinct.
As the name suggests, these layouts use content blocks that resemble physical cards of various shapes and sizes. There are two primary layout formats. One layout arranges cards with equal dimensions on a grid (as seen on the Toptal design blog homepage), while the other uses a fluid layout with different size cards arranged into orderly columns but without distinct rows (like Pinterest’s layout).
Card-style layouts work well because they allow different content to be arranged in an orderly way while keeping all the pieces separate. Cards are also familiar to people because they recognize card-shaped items from the real world. They make sense psychologically and are easy for people to use even if they’re new to a website.
Dribbble uses cards to display projects from designers.
The Deck template takes a different approach to cards, with nearly full-screen cards navigated with parallax scrolling
Split-screen Layouts
Technically, split-screen layouts date back to 1903, to the film Life of an American Firefighter by Edwin S. Porter. But in web UI design, split-screen layouts started gaining popularity in 2013 and really started picking up steam in 2016.
Split-screen layouts are a popular design choice when two elements need to have equal weight on a page and are often used in designs where text and an image both need to be featured prominently. Placing them side by side instead of vertically or with a text overlaying the image is a conscious design choice that can lend a sophisticated, minimalist quality. Two images placed side by side are also commonly seen, sometimes with text overlays.
Most split-screen designs are divided fairly evenly, though some are split at different ratios. (33:66 or 40:60 seem to be the most popular ratios; when a screen is divided into a smaller size than ⅓, it’s more like a sidebar than a true split-screen design.)
Split-screen designs are particularly well suited to product pages on eCommerce sites. Product images need to be prominent on these pages, but so does essential information like price, specifications, add-to-cart buttons, and product options.
Split screens don’t necessarily need to have a visual divider between the halves.
Text on one side and an image on the other are a popular split-screen design pattern
Big Typography
Big typography has been around since the advent of the web but gained popularity when mobile design became prevalent.
Large type is especially popular in headings and titles, but it’s also seen in body copy on some sites. When the right font is chosen, larger text is more readable and improves the user experience. Plus, it makes a powerful visual statement. It’s particularly popular in minimalist design, where other visual elements are mostly absent.
Big typography is popular in header design
Personalization
Personalization algorithms have been around for years, tailoring digital experiences to each person’s preferences. AI has made these algorithms even more useful, with features like suggestion algorithms that can now accurately predict what a person will want to watch, read, learn, or purchase next.
With membership sites, people want to see content that meets their wants and needs. Based on subscribers’ previous choices, Netflix has superior predictive algorithms that offer the movies and shows they’re most likely to watch. Sites like Medium show people articles they’re likely to enjoy when they log in, based both on what they’ve read and enjoyed previously.
But personalization can go too far. Ad network algorithms have become so advanced they can sometimes predict what people may be interested in purchasing even when they haven’t searched for a product online or otherwise mentioned it. This level of prediction can sometimes make people feel as if they’re being spied on. For this reason, it’s wise for UI designers to use personalization with care
Medium personalizes each user’s home screen with articles they might like to read based on previous reading habits and new content from users and publications to which they subscribe
Grids
Grids have long been part of UI design, starting with table-based layouts in the late 1990s (though they were used in print layout for things like books and newspapers long before that). When CSS gained popularity for creating layouts, more elegant grid systems were developed, the earliest notable example being the 960.gs grid.
Grids provide visual balance and order to a design, which makes content easier for people to consume. At the same time, grids can offer a lot of flexibility in a web layout. The majority of grid systems use either 12 or 16 columns with gutters in between. Some websites that use grid-based layouts make the grids a prominent feature of the design. In contrast, others are more subtle, with the grid only becoming apparent upon close inspection (and sometimes only when an actual grid is overlaid onto the design).
In addition to column-based layout grids, baseline grids are commonly used in web design to space elements horizontally in a logical way. It’s most apparent in typography when examining the spacing between lines of body copy and headlines, for example. Baseline horizontal grid spacing is closely related to the vertical grid spacing used in web design.
Using different size content within a grid design adds visual interest while keeping the content orderly.
Magazine-style Web Layouts
News and periodical industries heavily influenced magazine-style layouts on the web. In the early days, they were mostly seen on news websites and online magazines. With time, their popularity grew in other sectors, and they are now seen on different types of sites, including eCommerce sites and blogs.
Magazine-style layouts include a featured article (or sometimes multiple featured articles in a carousel or similar format), as well as secondary and tertiary articles on the homepage. They also tend to have multiple columns for content, sometimes divided into sections. These web layouts work well for sites with a great deal of content, particularly those with fresh content added daily.
Single-page Layouts
Single-page layouts put all of the primary content for a site on a single web page. Navigation is done through scrolling, often with shortcuts to jump to particular sections and sometimes with parallax scrolling effects. Occasionally, they may use secondary pages for terms and conditions, privacy policies, or other information that isn’t part of the main content, but this shouldn’t prevent the layout from being considered single-page.
Single-page website layouts are an excellent solution for sites with sparse content. They’re also a perfect choice for narrative content, such as interactive children’s books.
Single-page layouts are ideal for narratives like children’s stories.
F- and Z-Patterns
F- and Z-patterns refer to how a person’s eye moves over the page—how people scan the content. An F-pattern has prominent content across the top of the page, with additional content aligned under it along the page’s left side (in roughly an “F” shape). A Z-pattern has prominent content along the top, with additional valuable content further down. The eye is drawn diagonally from the upper right to the lower left of the page (in roughly a “Z” shape).
F-patterns are suited to pages with more content than Z-patterns, where there’s a very defined visual hierarchy. Z-patterns are more useful when there are two pieces of equally (or near equally) relevant content that the visitor should see.
Asymmetry
In the simplest terms, asymmetry is the absence of symmetry. In design, asymmetry creates a more dynamic and organic visual impact. In most cases, asymmetry is created using images and text that do not perfectly balance each other. Asymmetry can also be created or reinforced via background elements, such as using a different pattern between various page sections.
Since asymmetry creates a dynamic, energetic visual impression, it’s useful for brands that want to communicate that kind of image. Asymmetry can also be unexpected, making designs more memorable, and has practical uses when the content included wouldn’t work well in a symmetrical layout
Clean and Simple Web Layouts
Clean and simple layouts have gone in and out of fashion in UI design for decades, though they’ve been in more often than not. The beauty of these layouts is that they focus squarely on the content, without visual clutter.
Clean and simple layouts are suitable for virtually any kind of website. Many of the other UI patterns here work well alongside clean layouts. There are clean versions of grids, magazine-style layouts, asymmetrical designs, and split-screen layouts. Many of the most elegant websites could be considered “clean,” regardless of what other design features they may incorporate.
Navigation Tabs
Navigation tabs were originally a mainstay of skeuomorphic design, resembling tabs on file folders or binder dividers. As it’s matured, however, tab-style navigation doesn’t always resemble a realistic tab. Instead, a hallmark of navigation tabs is that each item in a menu has a visual separation from other menu items. Sometimes, this is subtle, and sometimes, it only appears when a menu item is selected or hovered over.
Navigation tabs are best suited to smaller menus with only a handful of items. Otherwise, they can look cluttered. However, they can be combined with dropdowns for submenus to add to their functionality. They’re also generally seen in horizontal navigation, though vertical examples do exist.
Navigation tabs work well with dropdowns for submenu items.
Carousels
Content carousels are commonly found in the header or hero section of a website. They often contain images in conjunction with text, though some may only include one or the other. They’re used to display multiple content pieces within a single section of a website when space is at a premium.
Carousels work really well for a few uses. Featured content on a blog or news site is well suited for carousels. Products, promotions, and sales are also commonly featured in carousels on eCommerce sites. While carousels generally appear near the top of a web page, they can also be used within subsections to highlight related content. They’re a popular choice for both homepage content and individual pages for specific categories of content or products.
Carousels are great for showcasing featured products on an eCommerce site.
Timeless Web Layout Best Practices
Timeless UI design is adaptable and user-friendly. It works for various use cases and looks as good today as it did 10 years ago (and will look just as good in another 10 years) with only minor modifications.
Following web layout best practices while incorporating timeless UI design elements will produce a website that doesn’t look or feel dated in a short timespan. It allows UI designers to create digital experiences that delight users and accomplish brand goals
source:Web Layout Best Practices – 12 Timeless UI Patterns | Toptal