5 web design tips for non-designers

Alongside the numerous web design firms, there’s also plenty of web developers out there that love building websites, but who are not officially trained in web design principles.

If you’re one of those people, this list of tips for non-designers – those who are not formally trained in either web design or general design principles – is for you!

Avoid pre-designed themes

Unless you’ve found a theme that does exactly what you want with only a couple very tiny changes necessary, it’s strongly recommended to not use pre-designed themes. I know, this is hotly contested, but while pre-designed themes save you a bit of time in the short term, you’re going to endlessly run up against walls customizing them because most pre-designed themes don’t provide you with sufficient customization capability to get matching brand elements in place, like colours and fonts.

This results in a website that doesn’t match the company’s overall brand which is a disservice to both you and your client.

Take a quick read over our guide how to select a WordPress theme to better understand the options between pre-designed themes and blank canvas themes that allow for total customization.

Ask for existing sites the client likes

Your goal isn’t to copy those sites, but to draw elements from them. For example if they provide 5 sites they like and 3 of them are all black with white text, then you know you’ve got to start with a dark theme.

Similarly you can draw font likes, colour preferences, and more from this simple exercise.

Use a Complimentary Colour Palette

Rather than just selecting colours out of the blue (no pun intended), or the default colours for a theme, I recommend two possible approaches:

1. Ask the client for promotional material like business cards, flyers, logo, etc., and draw your colours and fonts from those existing materials. This will ensure the website you build is cohesive with their existing branding materials.
2. Ask the client what colours they like.

If you only end up with one or two colours, use a complimentary colour finding tool like Adobe Color. That will help you match colours to create a palette. You’ll likely need at least 2 very different colours, then either one variation on each of those colour tones or a dark grey tone and a light grey.

Font Selection

This ones a bit trickier. If you can pull from a logo or other branding materials, then definitely do that, but otherwise this is more of a manual process.

From a performance perspective, using web safe system fonts in a superior choice as no font files are needed to be loaded. However if you’re unable to do that, you’ll likely find most blank-canvas-style themes automatically integrate with Google Fonts to provide a wider array of fonts to use on the site.

It’s imperative that if you’re using Google Fonts, you pick only one or two of them to use on the site, otherwise it can affect performance and possibly rankings.

Trends as of 2022 tend to be towards lightly serif fonts for headings – the ones without the perfectly clean lines which have the extra bits sticking off them – and sans-serif fonts for body – those with perfectly clean lines.

Use photo backgrounds and/or colour blocks

If you’ve got great photography for the site, or can use stock photos, photo backgrounds for your page’s major rows, you can photo-block and colour-block them. I like to interleave them: photo, colour, photo, colour. If your text isn’t visible enough on the photo background, use colour overlays or just a black semi-opaque overlay to darken the image enough to read the text.

The key to photo backgrounds is simple: the focus is not the image. It’s the text on top. Therefore:

1. Don’t try to get the placement of the image perfect. You’ll notice that when you resize the browser to simulate phone and tablet screens, large amounts of the image are cut off anyway – this is normal. To optimize this, pick images that have their focal point in the centre.
2. Always use the lowest possible size and quality you can for the image – even if it’s a bit grainy or blurry. This ensures optimal performance for the page as the image doesn’t take long to load.