The A - Z Of Web Design


The A - Z Of Web Design | Website Design | Website Designer Hertfordshire

A = Accessibility


A website should be accessible and inclusive to everyone - including those with disabilities. So are you doing all you can to make sure everyone is included? Here’s some top tips:


  • Text Alternatives - wherever you have content that isn’t text - an image or graphic for example - ensure there is an accompanying text description so that it can be translated for screen readers / braille readers / symbols / large format.

  • Contrast - ensure there’s enough of it - for example with text over images - so people with visual difficulties or colour blindness can understand it.

  • Time - give people enough to read things - for example with banners or carousels that change quickly - make sure each screen is visible for at least 8-10 seconds.

  • Don’t show flashy bright videos that could cause seizures.

  • Make it easy to understand and provide a clear navigation.


B = Basic


Don’t over complicate your websites. Don’t try and be “different” or “original” if it’s just adding complication, as your users won’t thank you for it.

If you need to think about doing something on your site or if you feel you need to ask someone else if something is confusing, then chances are it’s too complicated!


C = CMS


C - CMS (Content Management System)

If you've read this somewhere before, had no clue what it meant, so buried your head in the sand, then i'll simplify it for you - It's where the website and all of its content is created and updated.

There are many out there, but i've chosen to become an "expert" in WIX. Its biggest competitors are Wordpress and Squarespace, and they all have their pros and cons.

I, personally, find WIX the easiest CMS to teach clients to use and update themselves. It also gives you a lot of flexibility design-wise. One of my biggest issues with a lot of the CMS systems out there is that their "templates" are often not fully "usable" and they don't add to your customer experience or aid you in converting leads.


My advice if you’re building your own? Do a few free trials before you fully get started and make sure there’s a template that works for YOUR business.


D = Design

It's a pretty obvious one to be honest. But it's so important to remember that a great design for a website builds trust, it builds value and it builds confidence. I've said time and time again that you really don't have very long at all to capture someone's attention.


If your design isn't on point, it's not attractive, it's messy or it doesn't make sense then people are going to get an unprofessional view of you and your brand.


If you're designing your website yourself, with no design experience, then my advice is to keep it basic, keep it clean and simple and don't go over the top with colours! Your customers won't thank you for it.


E = Errors


Make sure you’re highlighting when a customer has made an error on your website.

Error messages are normally found around forms. Platforms such as Wix, Shopify, Squarespace etc allow you to design how these look. Make sure you’re not trying to be subtle and blend in with the rest of your page design. They need to STAND OUT.

Think Red and obvious. And if possible explain what the error is. A lot of the time people don’t realise the error they’ve made, so make it obvious.


F = Forms


These are the things I hate doing the MOST when designing a new website. Wix and Shopify just haven’t got these right so all of their standard “templates” are quite frankly awful.

The mistakes I see with small business self-done websites are...

  1. The forms being stretched across the whole width of the page. Like, why? The user only needs to put in their name which hardly warrants such a big use of space on the page! It’s overwhelming!

  2. Using all kind of whacky colours for the form fields. Why? Forms need to just be clear and simple and easy to use. They’re not a “design” branding element. Keep them simple and white people.

  3. When the form label I.e. “Date of Birth xx/xx/xxxx” is placed WITHIN the field so when you click in there it disappears and you’ve forgotten what date format is needed!! Place your label OUTSIDE of the field, then the label is always there.

  4. Not highlighting errors - if someone makes an error THEN you can make the field bright and wacky to draw attention to the fact there is an error there. Remember: make sure you describe the error.

  5. Clear messaging - if it’s a confusing field, make sure you explain what you want from the user.

  6. If you’re asking for sensitive info like mobile number, date of birth, gender - In brackets explain why you’ve asked for it (I.e “to send you updates”)

  7. DON’T FORGET MOBILE - whatever you’re building your site in, don’t forget to check the forms on mobile and make sure the field are big enough for fat fingers!


G = Graphics


In order to make a website interesting and engaging enough, it's vital to include a good combination of text, photography, content, forms and GRAPHICS.

You'll quickly realise that you can't always use photography because it becomes either a bit photo-heavy or a bit me me me me me-heavy, so instead when you're about to embark on a new website project, make sure you have an idea of the kinds of graphics you might want to include...

Do you want to use a set of icons? Do you want to use illustrations? Or, do you want to use a set of Vector Graphics?