The layout of a great website is a conundrum: it works best when it’s not paid attention to. If the designer has done their website design job right, the user will be able to find product details, the shopping cart, promotional offers, and most importantly, the buy button without having to think. In general, the more time you spend figuring out how to use a website’s tools, the less attention you’ll pay to the actual content. Website layout design is about striking a balance between aesthetics and practicality. The site definitely needs to look good, but more importantly, it needs to give users what they came for in an efficient way. Users have little patience for difficult web pages, which is why the highest bounce rate occurs in the first 10 seconds of a website visit. It’s true that a good website design won’t always make a user stay (especially if the content isn’t impressive), but you definitely don’t want it to be a reason for users to leave. To make sure you have a website that visitors don’t leave, we’ve put together this guide to the basics of website layout design. We’ve outlined the basics of what you need to do for a good design, key techniques for effective website design, and many common types of website layouts.
The Purpose of a Website Layout
Simply stated, the sole purpose of a website layout is to support the goals of the website, whether that be conversion, brand awareness, entertainment, or some other purpose. But the goals of a website are expressed through its content, and the design framework describes how to effectively present the content. Here are some common functions for a website layout that can be used:
- Information Display: A good website layout organizes information well so that it fits together in a clear sequence, is easy to review, emphasizes the most important elements, and makes the tools for the user to find and use intuitive (easy to see).
- User Interaction: A good website layout makes the page visually appealing, directs the user’s eye to items of interest, and encourages them to continue exploring through the site.
- Branding: A good website layout also plays an important role in branding, using spacing, alignment, and scale in ways that are consistent with the company’s brand. These high-level goals are what guide the design of a website’s layout, but before we look at the layout of specific websites, let’s discuss in more detail how to achieve these goals.
Website Layout Design Process
The process of mapping out a website’s layout should be done early in the development of a website, often after you’ve determined your website strategy but before you start working on a graphical application to create the interface. The website’s layout is represented through a wireframe, which is a basic skeletal map that shows how content fits together. It’s important to distinguish wireframing from web design. Website layout design is a large part of website design, and it starts with wireframing. Ideally, the website design should follow a wireframe format, with graphic elements strategically placed, not just based on aesthetic preferences.
Then, here are the steps to creating a website layout:
- Identify all content areas. Wireframes usually represent content with simple squares and rectangles, whether it’s an image or a block of text. It’s important to know in advance how much content we have and at what approximate size (or word count), so you can place the elements together with the right precision.
- Create a series of wireframes and prototypes. A design can be as simple as drawing with pen and paper, but there are many apps (like Whimsical) dedicated to simplifying the process. Because wireframes aren’t detailed works of art, you can only scrape a few at a time. Even if you love your initial idea, you should design more wireframes to stretch your imagination and give yourself options to choose from. Without any fancy graphics to distract you, you can freely focus on the user experience and research which layout is most intuitive for them. Make sure you calculate the size of all pages, it’s recommended to start with a design for mobile devices and build from there.
- Test, gather feedback, and iterate. When you have options, make sure to gather feedback from your colleagues. Programs like Invision and Figma allow you to create interactive prototypes to easily test buttons and navigation without building an actual web page. Have your test users film your page as they navigate through the prototype so you can uncover UX stumbling blocks. Once you have some writing, move on to step two and repeat until it’s complete.
While these are the actual steps to creating a website design, it can be hard to know what makes a design effective and what doesn’t when you’re just starting out. In the next section, we’ll explore specific techniques you can use to guide your design decisions.
