Design Guide

The prose of a design has everything to do with text (copy). It’s basically typography, but you don’t need to go as in-depth as that.

First, there’s font. It’s simple.

Just pick two fonts. The most legible fonts too. You want to make the text easy for anyone to read.

The fancy cursive font that looks like a doctor wrote it is no good to any but the pharmacist who has to read it.

There are many other opportunities to be fancy, but the text is different. Make it easy to read and more people can understand it then more people will convert. Simple.

Next, font size.

You need a size for your headings from H1 to H4. I don’t go beyond this level of depth in my writing any more headings; it may as well be a new article. Your content will determine the structure.

My heading sizes;

Then, you need a font size for your body text. The smaller the information the less important it is for the reader to see but still merits being on the page. If it doesn’t need to be read it shouldn’t be on the page.

My body text sizes;

There are three dimensions for images.

I use 1200px by 900px and orient it either vertically or horizontally.

I use square images for smaller vector shapes, logos, and testimonial images

With a size range from 60px to 250px.

I export images in webp format and I export based on resolution ranging from 72ppi to 200ppi.

If you use Canva you may only have PNG format and no control over the resolution.

Now you have all your copy and images correctly formatted you need to lay them out on the page.

Every group of data, text and images goes into a single row. This makes it easier to move around and to copy if I want to reuse it.

Any rows with more columns are used to place the ‘cards’ on the page based on a design.

Every larger group of data goes into a single section on a page.

Each section must have a title with a regular text element after it. This goes into a row as a related group of data making the heading.

Each section should have a bottom and top padding of 80px minimum.

All headers must be followed by a regular text element.

No headings can be skipped.

This is in Google’s design guide. Read it here.

For example;

Just like fonts, this is dead simple.

Links in the text will be your brand colour.

CTAs are the contrasting colour.