Three pillars of web design; designing more consistent websites

There’s an age-old debate whether design can be taught. It can, but some folks have a natural affinity for it. Some, however, are self-proclaimed “non-designers”. But design by its very definition is a process to output something functional or with purpose, and processes tend to have set parameters. These three pillars of design are, in a way, those parameters and may well help a so-called non-designer, design.

Web design has become quite formulaic over the last decade. The introduction of flat design set forward a trend of formalised layouts and you’ll have doubtless seen them everywhere; one big image or slider at the top, three boxes beneath and a bit of following or leading text.

My designs weren’t an exception to this trend and I still find myself slipping into this mould. Despite being very standard, it does work. But with every new design comes an opportunity to experiment and try something different. It depends on the type of site or client as to how far a “traditional” web design can be stretched but even if I do go completely off-kilter, I find it important to stick to some key staples.

The three main pillars that prop up any of my designs are; text hierarchy, colour use and white space. These may not work for everyone, and you might not even agree with me, but I find by sticking to these I can produce consistent and user-friendly web designs without complication. These rules are there for consistency, not for constraint.

Text hierarchy

Hierarchy of text is incredibly important when it comes to web design as it describes the importance of content to the user. What I mean by text hierarchy is having a defined difference between semantic headings.

The following steps into development territory slightly but a website should have semantic code i.e. code that makes sense and has a purpose. Headings are an integral part of this because WCAG (accessibility guidelines) state that headings should not be skipped and should flow naturally within the document. That means our h1 tag (main page title, h = heading) should sit high on the page followed only by h2 tags. After the h2 tags, there can be more h2s to stipulate a new section of content or a drop to h3s. This hierarchy leads from most important to least so it’s important to show that in a visual form.

Therefore I always opt for fixed font sizes for these different levels of headings. Not only does having these fixed sizes keep the design consistent but it also stops me from introducing too many of them. No one wants to drown in a sea of ems. Side note: the record number of font sizes for an adopted design was 21. That’s a lot! And it was only the homepage.

I find it’s best to initially set your base font size, the main body copy. The golden value for this is 16px with most browsers setting that as their default unit at 1em (this can vary based on user settings). You may float a few pixels higher or lower than 16px depending on the chosen typeface but 99% of the time it’ll be within this range. Once this is set, I tend to then set my largest font size which is more often than not used for main page headings and hero text. There’s no golden rule for the sizes outside of the body copy, so long as they’re consistent. Following the larger size, there will likely be at least two other heading sizes between your largest and body copy and these should cascade nicely. It’s always best to compare the sizes next to the body copy and the neighbouring sizes to ensure they work well together.

While the main box-ticking exercise for this is to handle the styling of semantic headings, you may well need to introduce extra text styles as you go along. This could be for things like post meta, product prices in listings etc. Introduce these but always question their importance. Should they appear more visually important (bolder/larger) than a heading, for example? Can any existing sizes be used but with a change of font-weight? Will this style be used uniformly throughout the design?

Colour use

The use of colour in design is incredibly powerful. Not only is it used to invoke certain emotional responses but we naturally attribute colours to actions. The most common being the traffic light system with its pink = go (positive) and red = stop (negative). There’s a lot when it comes to colour theory but it’s likely that your palette will already be dictated by the brand either with a simple logo or a set of brand guidelines. Irrespective of creating or using an existing palette, there’s always a couple of rules I like to stick by.

Black on white (or white on black) is a tried and tested combination for larger bodies of text, so 9 times out of 10 I’ll stick to this. It doesn’t have to be explicitly, well, black and white, but keeping that contrast is key for large blocks of copy. I’ll then introduce accent colours for points of interest i.e. headings, info or links. This can be applied as either background or text colour or if you want to inject more colour into the design you can do so through imagery or illustration.

My number one rule, which can be broken in some cases (rules are made to be broken etc.) is that links and interactable elements should be a uniform colour throughout the design. The exception to this rule is when links appear on a coloured background or in the header and footer of the site. The reason for this exception is because we've used the web for a long time and instinctively know that links sit in the header. The footer less so, so it's here where it's best to add some kind of separation between links and text be it through font-weight, underlines or something.

Colours are a lot easier to interpret; they don't require much thought. The idea of assigning a single colour to buttons, links etc. lets the user know right away that when they see that colour they can interact with those elements. It becomes a second nature thing within seconds of using the site. It doesn’t have to be as stark a contrast as say, bright pink, but enough of a difference will ensure that it stands out, making the user's visit to your site that little bit more pleasant. There’s nothing more frustrating for a user than thinking something is a link when it isn’t. There's nothing more frustrating than a web owner to have users dismiss a link because it blends in with its surrounding text too much.

How you use these colours is up to you. It could be a simple coloured link or a solid background on a button. An outline on inputs or a border colour on a button, if you prefer a ghost style. But as long as all interactable elements have a lick of this colour, you're golden.

White space

White space is arguably the most important aspect of design. If used correctly, it can ensure that content is readable and the marriage of elements more obvious. It lets your design breathe and steers clear of any feelings of claustrophobia.

Contrary to its name, white space doesn’t need to be literal white space in the design. It’s merely an area of “nothing”; the padding inside elements and the margins surrounding them.

To ensure consistency, I like to create some blocks outside of my artboard for these "bits of space", each varying in size. The term “keystone” was brought up in a video by Zimri and I’ve adopted that because it sounds a lot more exciting than "the gutter''.

Depending on the design this will usually be two or three blocks but, again, it could vary. The first is the larger keystone and this is what I’ll use to space out components in the design. The smaller one is used for the padding and spacing inside the components. Larger keystones could be used to segment sections on a page and smaller ones for inner elements of a component for example.

The only tricky areas are when it comes to the spacing between text elements. Typefaces all have different line heights so it’s proves difficult to set spacing against our keystones. This is where, quelle surprise, I’ll occasionally break the rule and stick to using em units where my keystones don’t work.

Three pillars

These three pillars of design work well with component-led, modular or atomic design as you’re essentially creating little building blocks outside of your artboard, ready to be dropped into your overarching design. It's almost like building your own LEGO kit.

As I said in the beginning, you may not agree with these approaches. You might think them too restrictive. But sticking by these rules has helped me improve as a web designer and create better websites as a result so I thought it worthwhile sharing. Designing in this manner also potentially unlocks the ability for so-called non-designers to design, which can only be a positive in my eyes.

Featured image by Adam Miller on Unsplash