The A - Z Of Web Design


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?

I'd recommend including this as part of any branding project you might invest in... enquire about being provided with a set of graphics you can use on your site, so it's not all photography!


H = Hamburger Menu


What is this?? I hear you cry. It's the 3 small lines we've come to know as being "menu" on the mobile. We've been using it on Facebook for years, and now more and more websites are using it to show their menu on their mobile site. It hides it neatly off the screen so that the navigation isn't taking up too much of the real estate on the page.

⚠️ Now I am totally happy with these being used on the mobile, and ideally I like them placed on the right hand side. However what I DON'T like, is them being used on the desktop all of a sudden.

⚠️ You'll find many templates on WIX, Squarespace, Shopify, Showit etc with this little burger menu being used on the desktop site - therefore hiding the menu. But why? Why are you hiding the navigation from your customer when there is no need to do so?

⚠️ I know people are going to say that "everyone knows it on the mobile so they'll just use it on the desktop" but NO.. you're missing out on the fact that people will scan and consume content the second they arrive on your site. Seeing your navigation gives them an immediate idea of what's on offer... they're browsing with their eyes.

⚠️ If you have it hidden, no one knows what is going on until they physically decide to click there. What if they don't? You've lost them!


I = Iterate


When it comes to building your website, iterating is key. You’re never going to get it right first time.

I only did mine a year ago this month, and I’ve already had a complete refresh. Businesses change, times move on - your website can’t get left behind in that process.

Iterate, then iterate again. “The best way to build effective services is to start small and iterate wildly” - GOV.UK

Get something out there - learn from it - iterate - learn some more - iterate some more - and on and on it goes 💁🏻‍♀️


Oh, and if you need more persuading - the more you update and refresh your website, the more Google loves you and rewards you in the search results


J = Joy


To quote the Nielson Norman Group:


“The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother. Next comes simplicity and elegance that produce products that are a joy to own, a joy to use. True user experience goes far beyond giving customers what they say they want, or providing checklist features.”

In short, if you provide your customer with JOY through your website journey, you're going above and beyond just your products or features, you are truly creating an amazing brand experience.


Why not capitalise on this?


K = Keep it simple


A big problem with websites is they become cluttered and out-dated very quickly. In a busy world, you want to make updates quickly and often, but with little time to properly think it through. This just means more and more "stuff" is shoe-horned onto your site, and that nice clean and simple design is left behind. 😖

So, why is a simpler design better? Here are just a FEW reasons:

🌟People scan - so if it's hard for them to do so, then they simply won't. Simple design makes scanning easier.

🌟Faster loading - the simpler the design, the faster the site will load - which is a BIG one for Google.

🌟It improves conversion - it shows people you are serious about your site if it's stunning, simple and easy to use. If it's cluttered, busy and loud - your brand perception goes down.

🌟It's accessible - the simpler the design, the more accessible it is for people with disabilities

🌟It makes a great first impression - People judge your site within seconds. In fact: A study conducted by Google found that visual complexity impacts the appeal of a site within 17 milliseconds of a visit. In other words, people prefer a website with a simple design, and they judge it within 60 seconds of seeing it.


L = Load time


💤With so many websites out there, and so many options - potential customers, these days, don't have to suffer slow websites. There's simply no time. Website or page not loading? No bother, move onto the next. That's how quickly you could be missing out on a customer.

💤When you land on a website that doesn't load quickly, how do YOU feel? Frustrated? Angry? That's how your customers feel.

❗️If irritating your customers isn't enough of a motivation, then think about the fact that Google uses it as ranking signal in their algorithm. If your site is slow to load, then Google will shift you down the Google results.


M = Microcopy


Microcopy is the term for small bits of copy in a website's design that helps users DO things. Some examples might be ❗️error messages, contact form labels, success messages, thank you messages or helpful tips.

They may seem tiny but they have a big impact on conversion. Think about how you're using it when you are updating your website next. A small tweak in copy can have a huge increase in conversion. Just take this as an example:

You want someone to sign up to your newsletter and you're offering a free download in return for their email address. Which of the following is more likely to entice you to sign up:

❗️"Tick here if you agree to our Privacy Policy"

OR

❗️"By downloading this document you agree to our Privacy Policy and are happy for us to email you occasionally with helpful news and tips! We promise, no spam!"

Another example would be, where you're asking for someone's age or perhaps their child's age - provide a little tooltip - "Why do I need to provide my birthday?" It helps to build trust and reassurance and means that people nervous of their privacy are more likely to convert!


N = Navigation


There’s so much I could say about this. But I want to focus on one thing I notice small businesses doing....


Packing the main navigation full of links. So much so that the template is forced to add a “more” link at the edge. The customer is then expected to click on the “more” link to see even more navigation links.


This isn’t usable.


Your customers aren’t going to click it, and also YOU’RE OVERWHELMING THEM!!


Up to 7 links max in that top spot on your website. If you really need more then consider using the footer!


O = Objectivity


One thing many people forget is that your website isn't necessarily for you. You may not actually be your customer. Your friends and family are not necessarily your customer either.


Therefore, your web design should always be produced without the outside influence of you or your friends' personal opinions. What one person likes, another won't like. Feelings and personal taste should always be put aside so that the true purpose of the website can be fulfilled.


If you do want to ask opinions, ask your customer :)


P = People


People are at the centre of everything we do with our website design and experience. We, the business owners, are people and have our own set of requirements and objectives. And our customers are people - the most important people, who will be interacting with our website the most.


Considering People are at the centre of everything, here are some tip tips on how you can use them:


  • Base what you design on the actual pain points and needs of your customers.

  • Think of ways you could include people as part of your website design process. Testing, asking opinions, sharing and researching.

  • Remember that people aren't always necessarily sat at their computer in a calm and focused environment focusing on your site. People are messy and busy, and as i've said before - distracted.


Q = Quality


Your customers appreciate quality.


And you'll be rewarded for it if you provide your customers with a quality website design, quality content, quality imagery and quality copy. If you have a high quality website, you will gain credibility, people will stay on your website for longer and you are more likely to convert those leads and sales.


R = Research


When launching a new website or business idea, everyone is likely to run it past their friends and family. Whilst this will be great for initial ideas and areas that hadn't been thought of, it must be remembered that these ideas are BIASED. No one is going to be as open and honest as you truly need them to be.


These people are almost always unlikely to be your actual customer. They're also not using your website with a real goal in mind. They are just giving opinions on the look and feel of it.


True research, that will really benefit you, is to ask one of your customers to USE your site for real. Sit with them, look over the shoulder, and research the real life problems they come up against whilst using it. Give them some tasks, and if they trip up, you'll know exactly where to make some updates and changes!


S = SEO


Search Engine Optimisation (SEO) is "the process of improving the quality and quantity of website traffic to a website or a web page from search engines." It's often something that gets forgotten about during a website design project.


I personally include basic on-page SEO, using keywords provided by the client, as part of all of my website projects, but many many web designers don't do this. And there's so much more that can be optimised and worked on continuously after you launch your website.


Here are some basic tips i've picked up along the way:


🔵 A website that is updated regularly is crawled more often by Google and therefore has more opportunities to boost SEO. Even if you don't have time for a blog, make sure you're logging in continuously and making small updates and keeping it refreshed.

🔵 Do some research - Find out what your customers are searching for and the terms they're using, and ensure they are sprinkled throughout your copy and content.

🔵 Ensure page titles and meta descriptions have been optimised. If you don't know what that means and you've designed the site yourself then do a tutorial. WIX & Shopify for example have great tutorials.

🔵 Make sure images have "alt tags" - it basically means label your images, Whichever platform you're using there will be an "alt tag" field you can label them. We might love images but Google can't read them unless they are tagged up!

🔵 Make sure your website loads quickly - Google hates websites that are slow

🔵 Don’t flash up a “sign up to my newsletter” box the second your users arrive on your site. Google penalises you! (And they rarely work - unless you’re Hush or Sweaty Betty and you’re me, and they offer a discount)


T = Text


I'm probably repeating myself, but I'm throwing this one in here again because I find it SO important.


Don't load your website with wall-to-wall text. It overwhelms people.


People scan websites and don't read through pages and pages of text, so please keep it to a minimum - enough that you're describing what you need to and helping your SEO, but not too much that your website is practically just text. It needs to be a fine balance.


I find this image useful to visualise what people see:




U = User Experience


UX is the internal experience that a person has as they interact with your website. The "journey" they experience and the feelings they get from it. It will affect the way your customers view your site, how they interact with it and most importantly how they behave on it. It's the overall experience.


There is a lot of psychology behind a website, and where things are placed and how things are laid out.


So, that's what I do and that's my niche in web design. I bring that experience and I use it to build all of my websites. The most important way for me to do this is by knowing your customers, and figuring out what is right for THEM.


V = Visitors


For this I'm going to focus on Google Analytics. Do you use it to learn enough about your visitors? It offers an absolute wealth of information on how users are interacting with your website. Here are some of the top things I like to take a look at, to help me with future website updates / improvements:


❗️Device - what device are the majority of your users on? You may spend hours pouring everything into your desktop site, but 95% of people are using their mobile?! Along with this, what "type" of mobile are they on? They may all be on Android and you've never even seen your site on that style of phone?!


❗️Demographics - what do the people who visit your site look like? Are they male / female? How old are they?


❗️Most popular pages - which pages are people visiting? And then where do they go from then? Is is the journey you want people to be taking? Are these the pages you WANT people to be visiting? Or, do you need to do some more work on your site to draw them elsewhere? It can also help you see which of your products are the most popular!


❗️Time of the day they're on your site - when are most people visiting? Which days? This could help feed into your marketing plan.


❗️How did people get to your site? Was it from the link in your bio? Or are they using specific search terms and finding you on Google?!


W = White Space


😫 Don't be afraid of white space. White space is good, white space is your friend. There is no need to squash all of your content together. If you're adding a new section to your site or some new text - make sure it's well away from anything else around it - there's no need for it to be touching!

One of my biggest pet hates (yes I have a lot) is when I design a new site for a client, and then they start playing around, adding new bits (which is fine, I want them to be able to update themselves!), but they add them all squashed up together!

Buttons - If you add a new button - don't automatically make the text inside the button HUGE, so that it touches the edges of the button!! Why? Give it some space, make the text smaller or the button bigger - but stop squashing things!


X = Xmas


Yep, I'm stumped on "X". I could put something really geeky and codey like "XHTML" but to be totally honest i'm not actually a techy and I have no clue what that even is (I googled it).


Instead I'm just going to say the dreaded X-word - XMAS. The only way I can relate this to website design is that Google loves a website that is fresh and constantly updated. One way of forcing / reminding yourself to do this is the seasons.


Update or add to your website whenever we enter a new season. Got a product-based business? Introduce a xmas / halloween / easter range. If you're like me and have a service-based business, then write a useful seasonal blog post for your customers or even update some of your graphics to give them a little seasonal theme!


Y = Yell


You've got this far! You've launched your site! Now go and YELL about it. There's no use having a shiny new website and no one knowing about it. They won't find it by themselves unless you put some real elbow grease in. Some very obvious and basic top tips are:


  • Put the link in all of your social media bios

  • Work on your SEO

  • Join Facebook groups and communities and when the moment is right, let people know about your website (No spam! It needs to be relevant and requested!)

  • Word of mouth

  • Ensure it's on all of your marketing materials - business cards, flyers, invoices, quotes etc.

  • Keep your blog posts and "Linktree" equivalents on your own website so you're not sending traffic elsewhere!


Z = Zen


Am I repeating myself about white space, no clutter and no wall-to-wall text again? Have I mentioned it enough?!


The last last letter represents Zen, because who wants to feel overwhelmed and stressed when they visit a website? And this doesn't mean your branding needs to be pastels and whites. Your website can still be zen even if you have a bright, bold and playful brand. It's all about creating space for your design to breath. Space for your content to flow easily and make sense, and space to make it a pleasurable experience.



Be more Zen with your website design

If you've read to the end. Bravo and please share if you found this useful or use the below graphics to pin to Pinterest!





17 views

Do you need some help?

If you have any questions or would like to discuss a website design, audit or refresh project with me then please contact me  or alternatively, book a FREE 15 minute discovery call straight into my diary using the button below.

CAN I HELP YOU?

I HAVE AN EXISTING WEBSITE THAT NEEDS IMPROVING 

I AM A NEW BUSINESS AND NEED A NEW WEBSITE

  • instagram-sketched (2)
  • facebook (1)
  • linkedin (1)
  • pinterest-social-logo

At Dare to Dream, I build websites for small business entrepreneurs that work. My mission is to provide both the customer and the business with the results they desire by designing & building effective websites to increase sales leads and drive conversions.

Copyright © 2020 | Tjoeng Ltd t/a Dare to Dream Digital. All rights reserved. Photography by Alison Burrows