In order to better help users navigate and interact with your pages, let's check out some website layouts and best practices that you could use to arrange the elements on your site's homepage. Remember, homepages are the entryway to the contents of a website. They're usually the first page users land on when they arrive at your site. Homepages also provide a central point for user navigation. So how do you lay out a website homepage? As I'm sure you can imagine, there are multiple ways a website homepage can be laid out. So let's check out some of the more common layouts. First up, let's discuss single- column website layouts. As the name implies, single-column layouts have only one column for content. Take a peek at this blog post on Medium; the entire article is in one single vertical column. In this layout, elements tend to be stacked in a logical order, with a navigation at the top, the content next, and maybe a footer just to round things off. As you can imagine, single column layouts are probably one of the simplest layouts. One more thing to keep in mind, you may notice single-column website layouts frequently on mobile websites. It's a straightforward approach to presenting information to users, especially when you're creating a mobile layout for a website. Second, let's check out websites with multi-column layouts. Multicolumn layouts generally have two or more columns for content. You've probably encountered this layout on many desktop websites. If the multicolumn layout has two columns, there's usually a clear focal point. A focal point is a specific and distinct area of the website that captures users' attention. In this example, the Grow with Google website uses images as focal points. Content that supports the focal point takes up anywhere between 25 to 45% of the page. Here the supporting content is the text to the right of each image. If the multicolumn layout has many columns, designers use visual weight to create a good user experience. Or check out this Vietnamese home cooking recipe website that uses three columns. Having three columns of content means more recipes can be displayed above the fold. Remember, "above the fold" refers to the content on a webpage that doesn't require scrolling to experience. The box layout is a layout that consists of boxes or squares of various sizes and proportions. Box layouts are often found at the main starting point or homepage of a website. In this example, Nordstrom uses boxes to organize different categories of gifts for the holiday season. The box layout allows users to quickly navigate to gifts of varying price points and item types. Using a box layout allows e-commerce websites to easily swap out items that are relevant depending on the season, or a sale they want to draw users' attention to. The box layout is often used in UX design portfolios as well. Next up is the featured image layout, which is sometimes referred to as a single image layout. A featured image layout places the user's focus on a single image or video that often takes up the entirety of the page. A featured image layout is popular on many product pages, because it's based on the idea that using images and the design is the fastest way to sell a product. The featured image is big and bold, which creates an emotional connection with users and makes a strong first impression. If you choose to use this layout, make sure your featured image is relevant to the message you want to deliver and is high quality. The featured image is often accompanied by a menu bar on the side or top of the page. This menu is often sticky or fixed, which means that the menu stays in place as the users scroll down the page. In this example, Caledon Build, a project management and construction company, uses a featured image that takes up the whole top of their homepage website. Alright, let's explore some more popular website layouts. Up next, asymmetrical layouts. Asymmetrical layouts have purposeful imbalance between different sides of a page. You may use an asymmetrical layout to place emphasis on certain parts of the page, such as images or headlines. Two common types of asymmetrical layouts are F-shape and Z-shape. These layouts get their names from the path that the user's eyes usually follow across the page. F-shape layouts mean that the pattern users will likely browse content on the page follows the shape of an F. An F-shape layout is commonly used present a lot of material on a single page. The F-shape layout allows users to scan the information quickly. This layout is often used on search result pages like this one. The user follows the shape of the F as they explore the page. On the other hand, the Z-shape is where users skim information starting left to right, then move diagonally to the left, before scanning to the right again, like the letter Z. It also imitates the natural scanning pattern of Western users, who read left to right and top to bottom. Z-shape layouts are typically used for sites with less content, like this. Keep in mind, anyone with a visual impairment would need accessibility support to navigate the page, but they would follow the same Z or F-shape pattern through the information. Last but not least, let's talk about one more kind of website layout: a grid of cards. A grid of cards layout features a series of cards that provide previews of more detailed content. Each card can vary in size, but the cards are often a uniform size. Also keep in mind that the size of the cards you use may vary depending on the size of the screen you're designing for. You may recognize this website layout from your favorite recipe blog, streaming service, or other content heavy websites. Here's an example from Dribbble; the cards are all the same size and preview lots of different content. Other popular websites that use a grid of cards layout are YouTube and Pinterest. And last but not least, let's check out a tiered layer cake. A tiered layer cake is just what it sounds like: It looks like a layered cake, with individual rows or layers stacked on top of one another. Within each row there can be different numbers of columns, and they don't have to be consistent. The tiered layer cake layout is often used in responsive website design, as layers can easily be swapped out or moved around. The tiered layer cake layout differs from a regular multi-column layout in that there is no all encompassing container or long running sidebars. There can be multiple columns within a layer though. How does the tiered layer cake layout show up on a real website? Let's check out the Strider Bikes website here. There are clear breaks between each layer, and each layer has a different number of columns, allowing for different combinations of textboxes, icons, and images. Using familiar website design layouts like these makes it easier for users to navigate your website, since they've likely encountered the layout before. You'll need to find the layout that works best for your project. Keep in mind that the internet and the UX design industry are constantly changing, and you may notice that common website layouts change too. What's trending right now doesn't necessarily reflect a high level of usability or address accessibility needs. Instead, you should always pick the layout that's best for your users and the project, rather than simply following what's popular at the time. And that's a wrap! Now it's your turn to go and explore some of your favorite websites. What layouts do they use? What do you notice about the user experience when certain layouts are used? Have fun and stay curious.
