Meagan Fisher: Here are three banners for a travel agency website laid out several different ways. The information is the same, yet each of these examples has a different feel to them. Which feels easier to read? More interesting, how much importance does different content seem to have?

In this video, I’ll share three tips for leveling up your layouts in web design.

Big Idea: Layout choices can have a big influence on people’s perception of your product or website and greatly enhance or hinder the usability of the experience.

To make matters more complicated, our layouts often need to change across different screen sizes and devices.

For this video, we’ll focus on three key aspects of using layout effectively:

1. Working with grids.
2. Working with whitespace.
3. Creating responsive layouts.

First up, we’ll talk about one of the most useful tools in a designer’s toolkit when creating layouts — grids.

There are several types of grids, but for the purposes of this video, we’ll focus on a column grid, which can be defined as a system of columns and margins used during the design process to align and structure your layout.

Grids give our designs a sense of order and take some of the guesswork out of the process.

So how do we go about creating and using grids for our designs? I’ve been using a tool called Gridulator since 2010, and I still use it today. You simply enter the total width of the screen you’re designing for, the number of columns you’d like to use, and then choose from the grid options that Gridulator generates.

Best Practice: When I’m designing for larger devices such as a desktop computer, I typically use a grid of 12 columns, which are 72 pixels wide with a gutter of 32 pixels.

This is just one way to do it. You can use any setup you’d like.

To work with the grid, lay out elements based out on the content and the priority within the page. For example, in this layout, I might have a full-page banner, two large image-based elements, and three columns of text. Each of these elements has a good amount of space around it to ensure that all the content has room to breathe. Using the columns and margins to guide you, you can decide if an area should be full-width, two-column, three-column, etc.

Speaking of space, this brings us to our next important layout topic, white space. As the name suggests, white space is the amount of empty space between the elements in your design — text, images, videos, and so on.

White space can be used to group sections together. More white space between elements helps to separate them as distinctive elements. It can also make content easier to read and scan.

Tip: To help your designs feel more modern and polished, instead of using visual cues, such as color changes and borders to delineate sections of content, experiment with using white space instead.

For example, here is a dashboard I designed which initially felt a little closed off and cluttered, but by removing certain elements and opening things up, I was able to elevate the feel of the experience.

One big idea to keep in mind is the amount of white space you use will be different depending on what screen size you’re designing for.

80 pixels of padding on a desktop screen may work fine, but as you can see from this example, on a mobile device, this will add up to a poor experience.

Best Practice: In fact, to create the best experience for mobile users, the entire layout will usually need to be simplified for smaller screen sizes.

How do we solve for this? This is where responsive web design comes into play.

At the highest level, responsive design describes the way a layout changes based on the size of the screen or device being used.

For example, a banner with an image and text sitting next to each other may become stacked vertically and a three-column horizontal layout may shift to a single column vertical layout on a mobile device.

I like to start by designing for mobile devices first, then move to tablet devices, and then desktop devices. This usually helps developers to build a responsive experience that will work for the majority of users.

For more information on this workflow, you can explore the term mobile first. There’s an article in the section to get you started.

Working with layout is a huge part of our job and there’s lots to learn. But for more guidance on grids, whitespace, and responsive design, be sure to check out our Resources section. There, you’ll find links to articles and other tutorials that can help you expand on the concepts we’ve covered here.

And there you have it, three tips to help you level up your layouts in web design. Thanks for watching, and be sure to check out our other Take 5 videos, as well as the entire course catalog here at Gymnasium.