I have to keep reminding myself that just because you buy an iPad Pro and Apple Pencil, it doesn’t automatically make you as talented a graphic artist as the people featured in Apple’s marketing. It’s as if they’re saying “LOOK at all this amazing stuff you’ll be able to do when you have one of THESE!!” The thing is, if you’re not an amazing artist already, there’s going to be a bit of a learning curve ahead!
It’s the same with DIY website builders. We’re sold this idea that being able to design our own websites is somehow going to result in an amazing website that looks exactly as we want it to look, just as if a professional had borrowed our brain and been able to recreate our exact vision. The truth is, most people who are designing their own website will inevitably not be web designers, and the end result can either look awful or take a huge amount of time to get right.
Never-the-less, DIY website builders are here to stay, so let’s look at 10 common mistakes people make when using them, and what you can do to get things right.
1. Using too many / non-complimentary fonts
We understand, you see all those lovely shiny fonts available to you and you want to USE THEM ALL! But don’t! Choosing fonts for a designer is often a time consuming process. Sure, sometimes there are ‘go-to’ combinations that you grab, but often, we need to pore over fonts and ensure that we have a heading font, a body font and possibly one other sub-heading font, and that’s usually it. More fonts does not equal good design. The font choices you make are also important to make in consideration of any fonts used in your logo. Colour cues for a website are often taken from a logo too.
Choose serif or sans serif for your headings based on whether you need a formal or clean and modern feel respectively. Body fonts should not be fancy and are often chosen from a stock of basic fonts that most people have on their computers, but now increasingly are taken from Google’s set of stock fonts such as Lato, PT Sans, Roboto or Open Sans.
2. Not using white space effectively
One of the most frequent DIY mistakes made by non-webdesigners is with the use of white-space. White space, also known as negative space, is the space around text, images and layout elements. It helps to give balance to everything, and allow the eye to be drawn to key pieces of content. Not using white space correctly results in a claustrophobic feeling of clutter or an imbalance in the layout which just feels and looks wrong. Using white space correctly is tricky and takes a lot of experience. Basic advice would be to provide equal amounts of space around elements, and pay attention to how images and text are aligned within a section. More space around things is better than less.
3. Poor choice of images
Images are often the thing that make or break a website. Too frequently, people creating their own sites don’t give enough thought to the images they use. Consider the following when choosing images:
- Image subject – is it relevant to the content around it?
- Image content – how modern is the image – does it look out of place because of fashion, colour or style?
- Colours – do the colours in the image work with the colours in the design?
- Aspect – do the dimensions of the image work with it’s placement? For example, in some spaces, a landscape oriented image might work better than portrait. Or a square image may work better.
- Size – Size the photo to fit in it’s space appropriately and work with text or other content heights and widths.
- Composition – lots of times, people take photos of their business themselves and results are less than professional. Considering the importance of images to a website, it pays to get a professional to take shots of your team, business premises or products.
4. Using heading tags incorrectly
Website headings are numbered in HTML code from 1 (largest) to 6 (smallest), and correspond to size and therefore importance. This is also relevant for search engines, because they will also attach more importance to the larger headings. Headings on a page should be structured in a way that the first major heading should be a H1 and subsequent headings should be smaller. This allows a search engine to understand what your page is about more clearly. Heading tags are often used incorrectly by assigning the same tag to multiple headings, which creates confusion for poor little search engines.
5. Not using ALT tags for images
Screen readers for those with visual impairments can’t see what an image contains, so they look for ALT tags to describe what the image is. It’s also good for search engines since they can’t look at the content of images either. So for good accessibility, and for Search Engine Optimisation, it’s worth giving each of your images a description. But don’t stuff them with keywords – Google and others may view it as trying to spam them. Just describe what the image is about in a few words.
6. Too much clutter on the page
It’s sometimes tempting to cram your homepage with as much content as humanly possible to ensure that no-one misses your all-important information. And these days, there are plenty of websites that are very long but still look great, so don’t confuse page length for clutter. Clutter is too much going on in a small space. It’s not using white space effectively, or allowing each content element room to breathe. Apple’s website is a good example of a de-cluttered approach. They don’t cram text in – they use choice words rather than waffling on. If you need to provide more text for a section, it can always have its own page.
7. Poor navigational structure and use of links
Professional web designers create a site-map with their clients before the site is even built so they know exactly what pages the site will contain and how they are organised hierarchically. You should do the same when building your own site; don’t do it as you go. It’s important to think about the logical progression for content that you want your site visitors to follow. If there’s too much content on a page, or too many different subjects, you may need to create subpages to break it down a little. Good use of links means ensuring that where it’s appropriate, body text is linked to other pages in your site to allow users to connect to natural follow-on content. These are called contextual links. Don’t use too many of these in your body text as it can become confusing and distracting. Likewise, it’s good practice not to include too many links in your main navigation. 8 is a good maximum. After that, you’ll need to think about how you name your main links and how subpages can be used under them.
8. Poor use of font sizes and colours
One of the things professional designers hear from their clients over and over again is “Make it Bigger and BOLDER!!”. This request is received with such alarming regularity and for so much content, that it has become something of a joke for pro web designers. It’s the desire for everything to jump out at the site visitor. Of course if everything is jumping out, nothing is jumping out! Subtlety is effective with web design. The average user has only so much time to spare for reading your website, so emphasise the most important point and keep the rest low key. Good practice says you shouldn’t have more than one call-to-action on your page. It should be simple, obvious and distraction free. So resist the temptation to make every other word bold or italic or huge or bright red! Try and use headings consistently throughout your site. H1 for page titles, H2 for main sub-heading and then H3 for section headings, H4 for sub-sections and so on. Use emphasis only where absolutely necessary and definitely leave the colours alone – the colours defined by your site’s theme should be perfectly sufficient for pretty much all your content.
9. Poorly thought out layout
Layout on a page should follow a logical progression in the same way that navigation should. Start with the most important thing you need your site visitors to know about, and then drill down from there. Homepages can be thought of as a kind of contents page for your website, highlighting your most popular products or services, informing the visitor of what it is you do and offering social proof in the form of testimonials or certifications and awards. You may also have a call to action – that’s the thing you want your visitors to do more than anything else, whether it’s subscribe to a newsletter, contact you through a form or buy. Make sure that the flow of content on your homepage in particular, is logical and flows nicely. Don’t overdo the text. Keep everything inviting and readable. Use images effectively and appropriately. Remember that in the West we read from left to right, so our eyes are naturally drawn in that direction. This is good to remember when positioning call-to-action elements like forms or buttons. Laying out a page is difficult and can be time consuming even for professionals, so plan your content up front and then work out your layout based on your content. Take your time and get others to critique your page.
10. Bad choice of colours
We’ve said above that often a design will take it’s colour cues from your logo or branding. That is often the case, but a site won’t usually use more than 3 main colours in its design. Sometimes, your brand or logo colours just don’t look good when implemented in your website and may need tweaking to make them more appealing by lowering or raising saturation or brightness, or simply to provide enough contrast for text to be legible etc. On the subject of body text, it’s usually best to leave that as a grey with sufficient contrast to be visible. Coloured body text rarely looks good or more importantly, is easy to read.
Yep, this web design thing is more complex than it first appears. Fortunately, there are some amazing tools available now to help you, and choosing a good theme to begin with is half the battle – get this right, and the rest is a lot easier. Deluxe Web uses one of the world’s most popular theme frameworks: Divi by Elegant Themes. It features an incredibly intuitive visual builder that allows you to design your page as you browse your site. We also have a great range of exclusive designs built on Divi to get you off to a head start. Not only that, but Deluxe Web designers will help customise your site to your preferences so you have the best of both worlds, all for a highly affordable monthly payment. Check our our services for more information and get started with your new website today!