Deconstructing a Minimal Landing Page: Part 2

In the first part, I took a closer look at the landing page of Radial and why it works well while being minimal. In this part, I am going to show you how such a page is designed and what kind of systems can be used to create a simple, yet good-looking site like that.

The Wireframe

To start, I created a wireframe for the whole page:

We can see that the individual sections of the site are visible. There's the hero or intro section with the big visual, the block of large text, the three features, and the footer.

Even though there are no real images used, it already looks good. That's because everything in the wireframe is laid out using a consistent spacing system: the 8-point grid system.

The 8-Point Grid System

To provide a visual hierarchy to elements in a design, some sort of system is often used for layout, dimensions, margin, and padding of elements.

The 8-point grid system uses multiples of 8 and that's what has been done here in the wireframe. Looking at the margins of the elements, we can see that they are all multiples of 8:

The same is true for the padding, for example for the placeholder text in the input field or the button label. Using a consistent spacing system like this makes it easy to maintain vertical rhythm.

In case you were wondering why it is called 8-point grid, that is because point is a measurement unit that depends on screen resolution. This is especially useful when designing for multiple resolutions and scaling the design. You can design for the smallest size (where 1 point translates into 1 pixel) and then scale your design and your assets to larger resolutions (where 1 point translates into 2 or 4 pixels). In this case, the wireframe was designed with 1 point being translated to 1 pixel.

Here is the full wireframe with spacing annotations:

Typography

We can use the same approach to set our font sizes:

Almost all font sizes are multiples of 8, the only place where I deviated from that rule was the input field placeholder text and the button label. Using a 16-pixel font size felt a bit too small compared to the rest, so I increased that slightly to 18 pixels.

Again, here is the full wireframe with sizing annotations:

Wrapping Up

As you can see, using a system to define spacing and sizes can already improve a design significantly. It also serves as a great starting point to further fine-tune the design. At the early stage of the design process, a simple system like the 8-point grid system also allows you to design faster, since you do not need to make so many decisions about sizes.

If you want to learn more about the 8-point grid system, I recommend reading this article from Spec.

By focussing on the content of the page (see part 1) and using the 8-point grid system, we quickly created a minimal, effective landing page design.

From this point, you could start to play around with fonts, colors, and images to turn the wireframe into a fully fleshed-out design. I used the same wireframe to quickly create a conceptual landing page design for a side project I did last year, a budget app called “Frugal”. It uses the same 8-point grid system, just with a different font, different colors, and real images.