The most useful UI patterns are also adaptable to changing trends.<\/strong>\u00a0Card-style and grid-based layouts, for example, can be implemented by\u00a0UI designers<\/a>\u00a0in 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.<\/p>\n Card-style layouts were popularized by sites like Pinterest, Facebook, and Twitter. They have become standard on news sites and blogs, as they\u2019re well suited to placing a lot of content on a page while keeping each piece distinct.<\/p>\n 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\u00a0Toptal design blog homepage<\/a>), while the other uses a fluid layout with different size cards arranged into orderly columns but without distinct rows (like\u00a0Pinterest<\/a>\u2019s layout).<\/p>\n Card-style layouts work well because they allow different content to be arranged in an orderly way<\/strong>\u00a0while 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\u2019re new to a website.<\/p>\n Dribbble<\/a>\u00a0uses cards to display projects from designers.<\/p>\n Technically, split-screen layouts date back to\u00a01903<\/a>, to the film\u00a0Life of an American Firefighter<\/em>\u00a0by Edwin S. Porter. But in web UI design, split-screen layouts started gaining popularity in 2013 and really started picking up steam in 2016.<\/p>\n Split-screen layouts are a popular design choice when two elements need to have equal weight on a page<\/strong>\u00a0and 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.<\/p>\n 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 \u2153, it\u2019s more like a sidebar than a true split-screen design.)<\/p>\n Split-screen designs are particularly well suited to product pages on eCommerce sites.<\/strong>\u00a0Product images need to be prominent on these pages, but so does essential information like price, specifications, add-to-cart buttons, and product options.<\/p>\n Text on one side and an image on the other are a popular split-screen design pattern<\/p>\n Big typography has been around since the advent of the web but gained popularity when mobile design became prevalent.<\/p>\n Large type<\/a>\u00a0is especially popular in headings and titles, but it\u2019s also seen in body copy on some sites. When the right font is chosen, larger text is more\u00a0readable<\/a>\u00a0and improves the user experience. Plus, it makes a powerful visual statement. It\u2019s particularly popular in minimalist design, where other visual elements are mostly absent.<\/p>\n Personalization<\/a>\u00a0algorithms have been around for years, tailoring digital experiences to each person\u2019s 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.<\/p>\n With membership sites, people want to see content that meets their wants and needs. Based on subscribers\u2019 previous choices, Netflix has superior predictive algorithms that offer the movies and shows they\u2019re most likely to watch. Sites like\u00a0Medium<\/em><\/a>\u00a0show people articles they\u2019re likely to enjoy when they log in, based both on what they\u2019ve read and enjoyed previously.<\/p>\n 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\u2019t searched for a product online or otherwise mentioned it. This level of prediction can sometimes make people feel as if they\u2019re being spied on. For this reason, it\u2019s wise for\u00a0UI designers<\/a>\u00a0to use personalization with care<\/p>\n Medium<\/em>\u00a0personalizes each user\u2019s 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<\/p>\n 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\u00a0960.gs grid<\/a>.<\/p>\n Grids provide visual balance and order to a design, which makes content easier for people to consume.<\/strong>\u00a0At 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).<\/p>\n In addition to column-based layout grids,\u00a0baseline grids<\/a>\u00a0are commonly used in web design to space elements horizontally in a logical way. It\u2019s 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.<\/p>\n Using different size content within a grid design adds visual interest while keeping the content orderly.<\/p>\n 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.<\/p>\n 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.\u00a0These web layouts work well for sites with a great deal of content, particularly those with fresh content added daily.<\/strong><\/p>\n 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\u2019t part of the main content, but this shouldn\u2019t prevent the layout from being considered single-page.<\/p>\n Single-page<\/a>\u00a0website layouts are an excellent solution for sites with sparse content. They\u2019re also a perfect choice for narrative content, such as interactive children\u2019s books.<\/p>\n F- and Z-patterns refer to how a person\u2019s eye moves over the page\u2014how people scan the content. An\u00a0F-pattern<\/a>\u00a0has prominent content across the top of the page, with additional content aligned under it along the page\u2019s left side (in roughly an \u201cF\u201d shape). A\u00a0Z-pattern<\/a>\u00a0has 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 \u201cZ\u201d shape).<\/p>\n F-patterns are suited to pages with more content than Z-patterns, where there\u2019s 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.<\/p>\n In the simplest terms, asymmetry is the absence of symmetry. In design,\u00a0asymmetry<\/a>\u00a0creates 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.<\/p>\n Since asymmetry creates a dynamic, energetic visual impression, it\u2019s useful for brands that want to communicate that kind of image.<\/strong>\u00a0Asymmetry can also be unexpected, making designs more memorable, and has practical uses when the content included wouldn\u2019t work well in a symmetrical layout<\/p>\n Clean and simple layouts have gone in and out of fashion in UI design for decades, though they\u2019ve been in more often than not. The beauty of these layouts is that they\u00a0focus squarely on the content, without visual clutter<\/strong>.<\/p>\n 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 \u201cclean,\u201d regardless of what other design features they may incorporate.<\/p>\n Navigation tabs were originally a mainstay of skeuomorphic design, resembling tabs on file folders or binder dividers. As it\u2019s matured, however, tab-style navigation doesn\u2019t 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.<\/p>\n Navigation tabs are best suited to smaller menus with only a handful of items.<\/strong>\u00a0Otherwise, they can look cluttered. However, they can be combined with dropdowns for submenus to add to their functionality. They\u2019re also generally seen in horizontal navigation, though vertical examples do exist.<\/p>\n Navigation tabs work well with dropdowns for submenu items.<\/p>\n 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\u2019re used to display multiple content pieces within a single section of a website when space is at a premium.<\/p>\n Carousels work really well for a few uses.<\/strong>\u00a0Featured 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\u2019re a popular choice for both homepage content and individual pages for specific categories of content or products.<\/p>\n Carousels are great for showcasing featured products on an eCommerce site.<\/p>\n Timeless UI design is adaptable and user-friendly.<\/strong>\u00a0It 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.<\/p>\n Following web layout best practices while incorporating timeless UI design elements will produce a website that doesn\u2019t look or\u00a0feel<\/em>\u00a0dated in a short timespan. It allows\u00a0UI designers<\/a> to create digital experiences that delight users and accomplish brand goals<\/p>\n <\/p>\n<\/figcaption><\/figure>\n<\/figcaption><\/figure>\n<\/figcaption><\/figure>\n<\/figcaption><\/figure>\n<\/figcaption><\/figure>\nCard-style Web Layout Patterns<\/h2>\n
![\"Web](\"https:\/\/bs-uploads.toptal.io\/blackfish-uploads\/uploaded_file\/file\/407489\/image-1602273378900-8519f497c81e4ee5d073fe2731e67568.jpg\")
<\/p>\n![\"Good](\"https:\/\/bs-uploads.toptal.io\/blackfish-uploads\/uploaded_file\/file\/407490\/image-1602273393422-6d60cd7e212ff53c1765572cf5f18de5.jpg\")
\nThe\u00a0Deck<\/a>\u00a0template takes a different approach to cards, with nearly full-screen cards navigated with parallax scrolling<\/p>\nSplit-screen Layouts<\/h2>\n
![\"Basic](\"https:\/\/bs-uploads.toptal.io\/blackfish-uploads\/uploaded_file\/file\/407491\/image-1602273406341-b3a40c8dc88ad87c34e4bd91e4d91ae0.jpg\")
\nSplit screens don\u2019t necessarily need to have a visual divider between the halves.<\/p>\n![\"Web](\"https:\/\/bs-uploads.toptal.io\/blackfish-uploads\/uploaded_file\/file\/407492\/image-1602273417637-e23384385095d6e5911b41cb2ea12d78.jpg\")
<\/p>\nBig Typography<\/h2>\n
![\"Website](\"https:\/\/bs-uploads.toptal.io\/blackfish-uploads\/uploaded_file\/file\/407493\/image-1602273430051-241601eb29508dca06cca6c2d8cba535.jpg\")
<\/p>\n
\n![\"Website](\"https:\/\/bs-uploads.toptal.io\/blackfish-uploads\/uploaded_file\/file\/407494\/image-1602273455151-a2c1c3d69a538c1cd089e5c596cfcc5c.jpg\")
\nBig typography is popular in header design<\/p>\nPersonalization<\/h2>\n
![\"US-based](\"https:\/\/bs-uploads.toptal.io\/blackfish-uploads\/uploaded_file\/file\/415132\/image-1602764993081-ffc03c183954195dedf182e2d72279db.png\")
<\/p>\n![\"Website](\"https:\/\/bs-uploads.toptal.io\/blackfish-uploads\/uploaded_file\/file\/407495\/image-1602273469771-ddcb41ded654f2f12e297c1e1c9cf47e.jpg\")
<\/p>\n![\"Personalization](\"https:\/\/bs-uploads.toptal.io\/blackfish-uploads\/uploaded_file\/file\/407496\/image-1602273486027-615076edaf9f37f9e8e61ab00f8e4c98.jpg\")
<\/p>\nGrids<\/h2>\n
![\"The](\"https:\/\/bs-uploads.toptal.io\/blackfish-uploads\/uploaded_file\/file\/407498\/image-1602273510963-a772e64d4903b34186febdf4caf663ad.jpg\")
<\/p>\n<\/figcaption><\/figure>\nMagazine-style Web Layouts<\/h2>\n
![\"Magazine-style](\"https:\/\/bs-uploads.toptal.io\/blackfish-uploads\/uploaded_file\/file\/407499\/image-1602273549708-a653a225eaaf79d48031708624043b29.jpg\")
<\/p>\nSingle-page Layouts<\/h2>\n
![\"Single](\"https:\/\/bs-uploads.toptal.io\/blackfish-uploads\/uploaded_file\/file\/407502\/image-1602273587993-fe8bfec46e45aff31a7791184e0a4ba1.jpg\")
\nSingle-page layouts are ideal for narratives like children\u2019s stories.<\/p>\nF- and Z-Patterns<\/h2>\n
![\"F-shaped](\"https:\/\/bs-uploads.toptal.io\/blackfish-uploads\/uploaded_file\/file\/407503\/image-1602273600929-b4a578e7873c8ed2ff361b18879d38aa.jpg\")
<\/p>\nAsymmetry<\/h2>\n
![\"Web](\"https:\/\/bs-uploads.toptal.io\/blackfish-uploads\/uploaded_file\/file\/407505\/image-1602273653953-cb1ae34e3e82a46b6a4616cb09b8e5e2.jpg\")
<\/p>\nClean and Simple Web Layouts<\/h2>\n
![\"Clean](\"https:\/\/bs-uploads.toptal.io\/blackfish-uploads\/uploaded_file\/file\/407507\/image-1602273676439-f8ddbf34efa9be93062e40ef36f03532.png\")
<\/p>\nNavigation Tabs<\/h2>\n
![\"Tabbed](\"https:\/\/bs-uploads.toptal.io\/blackfish-uploads\/uploaded_file\/file\/407509\/image-1602273724900-c1788742664b65d7717f8493fa894eb2.jpg\")
<\/p>\nCarousels<\/h2>\n
![\"Web](\"https:\/\/bs-uploads.toptal.io\/blackfish-uploads\/uploaded_file\/file\/407512\/image-1602273757184-3534710e19ff01f0268a606318051bbf.jpg\")
<\/p>\nTimeless Web Layout Best Practices<\/h2>\n