Layout

What is Layout?

Source: Envato Tuts+

Layout is the structure of the website; it’s the way that we arrange information on a page and how we position our elements.

It ultimately designs the path that a user takes throughout your website. A good website has a layout that is easy to navigate and intuitive to use. For the layout to accomplish this, it should take into account the type of content the website houses (Beauty products? News articles? Courses?) and the objectives of the user (Shop? Read? Learn?).

Choosing a Layout

You’ll want to choose a layout that makes sense for your content and makes it easy for the user to do what they went to your website to do.

For example, if you’re designing a website for a fashion store, then you’ll want to choose a layout that allows for a smoother shopping experience. You may need lots of room for large pictures, shopping features like a shopping cart, and a navigation system so the user can browse by accessories, tops, bottoms, etc…

Source: Yireh

On the other hand, if you’re designing a blogging website, your users will have different goals which means you’ll need a different setup. In this case, your users will primarily be reading others’ written content as well as publishing their own blogs. That means you’ll probably need a layout that puts more emphasis on text than images.

Source: Medium

You may include a section to scroll through articles, with relevant information like their titles, authors, excerpts, and their thumbnails. You may also eliminate distractions on the page and opt for more whitespace to keep the reader’s focus on the main content (whereas Yireh’s homepage is a lot more decorative and less rigid).

If you’re interested in diving deeper into layouts, take a look at this blog of recommended website layouts to get started.

Grids

One tip to improve your layouts is to apply a grid system.

A grid is essentially a structure of invisible lines or columns that serves as a guide for aligning elements and organizing content.

They are a great tool for many things like organizing content, maintaining consistent spacing, and making your website look neater and easier to follow.

In web design, 12-column grids are frequently used. And that’s simply because 12 is divisible by a lot of numbers, which means you can easily create a layout with 2 sections that take up the space of 6 columns in your grid, or 3 sections that take up 4 columns, 4 sections that take up 3 columns – you get the point.

Source: Pinterest

Note that the content in each column doesn’t have to be equal in scale. Say you want to establish a hierarchy and highlight a specific piece of content, maybe a featured article that you really want to draw attention to. You can create a layout with a 12-column grid, give your featured article more space (8 columns) and the secondary articles less space (4 columns).

Source: Hawaiʻi Magazine

Here’s another example:

Source: Salesforce

When you align your elements to a grid, you can establish hierarchy, give your website some structure, and create a clean, organized design.