Web Design Considerations

Looking to create a high impact website that increases your credibility

Good design practices will improve your websites performance

When designing and building your website the following web design considerations will help improve a visitors experience and likelihood of taking action.

In previous articles we have looked at web design essentials where some of the technical aspects were considered such as hosting, domains and security.

In this article we will look at some of the softer design elements such as buttons, images, typography, consistency, content and cross browser compatibility.

Choosing the correct Typography

Fonts and typefaces are more important than you might think and it is important to choose them carefully. Using a clearly legible font is fundamental, what’s the point in creating great, informative content if people cant easily read your text.

For website content sans serif fonts are better than serif fonts?

• Serifs are the little “feet” you see on typefaces like Times New Roman. These fonts are best for print-based publications like books,
• Sans serif means “without serifs.” Sans serif fonts such as Raleway don’t have these little feet. It’s much easier to read SANS serif fonts on a screen. The lack of “feet” on these fonts means your brain can process the text much more easily, and results in less eye strain

Font colour is important when it comes to readability, it may seem obvious but there is a reason newspapers are predominantly white paper with black print. Unless you have very niche branding we wouldn’t suggest making your website black with neon pink text. Whilst it might look super funky and of the time it could end up frustrating potential customers.

Be consistent with your fonts

1. Serif – Often associated with authority, respect, pedigree, tradition and grandeur. Serif fonts tend to make customers feel that they’re interacting with a stable, reputable company. Examples include Garamond, Times New Roman, Georgia, Bodoni, and Baskerville.
2. Sans Serif – More modern, straight-forward, and sensible. These fonts look more contemporary while still maintaining professionalism. Examples include Helvetica (which might be the GOAT sans serif font), Verdana, Arial, Calibri, Garet, Open Sans, Spacia
3. Script – The more formal script fonts are typically used to demonstrate creativity and knowledge. Think about where you most often see scripts – in signatures, higher education degrees, formal documents, etc. Examples include Broadley ( this is a bold hand drawn script designed in 2021), Monarda, Rampage Monoline, Edwardian Script, Hope Sans. Famous brands such as Instagram, Cadillac and Coca Cola, Cadillac, use script fonts.
4. Modern – These fonts can be quite intriguing and tend to be stylish and progressive. Examples of modern fonts include Helvetica Now, Proxima Now, TT Norms Pro and Nexa. Facebook is an example of a brand using a modern font

What fonts go well together

Please don’t go crazy when using fonts (and colours) . Just because there are thousands of fonts doesn’t mean that you need to use loads within the site. Just the same as you wouldn’t / shouldn’t be using all the colours within your paint box.

There are a number of online tools that you can use to check font and colour compatibility. here are a selection that might be useful in your website design.

• Font Joy –  an interactive font generator that lets you select how much contrast you want between your font pairings
• Font Combinations Library is a handy library of font combinations using Google fonts and compatible with Adobe XD and Sketch
• Font Pair allows you to pair Google Fonts
• Canva font combination generator – this useful tool allows yo to choose your desired font and then a variety of options are presented
• Google-Type by femmebot – this is an ongoing and collaborative project that allows yo to easily pair  and compare font combinations
• If you are struggling to find fonts for your website there are thousands of free fonts to use on your website at Google Fonts and Da Font – please choose with care

Great Images – Worth A Thousand Words

Just as you need to choose your fonts and colours carefully, the same is true of imagery. The images that you use are part of creating your brand imagery.

A picture or imagery is worth a thousand words and that is especially true with the web. We know that people scan through website content so having imagery that is unique and authentic will encourage a visitor to stay longer and explore your content.

Getting great imagery can be very difficult, as it takes time, the correct circumstances and effort to obtain.

Lets imagine you are a manufacturing company, ideally you would want pictures

•  Of the manufacturing capabilities ( all looking pristine with tidy machines, employees wearing company branded clothing)
• Products going through the various production stages – design, manufacturing,, finishing, quality, dispatch etc
• Finished products – all professionally photographed
• Products in situ – i.e. being used by customers
• Pictures of key staff – but not boring headshots, images of employees in action
• Images showing your brand ( equipment, people, applications etc)

People tend to respond better to real / authentic images and can often spot a stock shot, so it could be worth hiring a professional photographer. Ensure images are of high resolution and optimised for the web.

Read more detailed information on how to optimise images for website design

Helping your site get found

If you want your website to be found through organic search your website must be search-engine friendly. In other words, someone looking for the services / products you offer should be able to easily find you in search engine results. That typically means being found ideally on page one or two for the relevant search term.

For example:

Imagine that  you run a Peterborough based Printed Circuit Board (PCB) assembly company. Through keyword research you identify that potential customers will be searching for the following terms:

• PCB Assembly UK
• PCB Assembly Services
• Prototype PCB Assembly
• PCB Assembly near me
• PCB Assembly Peterborough
• kitchen remodeling contractor

Using proper search engine optimization (SEO) techniques, you will beable to better reach prospective customers. The PCB assembly company can then craft content that is relevant to your audience and utilises the keywords listed above.

It’s important to remember that Google’s rankings are based on much more than keyword utilisation, the days of keyword stuffing are long since gone. Your website content must meet the Google EAT criteria – Expertise, Authoritativeness and Trustworthiness, as well as being relevant and easy to understand. Think about how you can provide high value content that will give them value while still ranking for keywords.

Providing relevant content

Make sure that your website content is relevant, specifically tailored to your buyer persona wants and needs. Is informative, easy to read and understand, ideally being jargon free if that is possible while being keyword optimised.

If you have a WordPress website use a plug in like Yoast to help you optimise your blogs / news for key optimisation elements to help improve your organic capabilities.

Make sure that your website content is consistent if you are a stainless steel fabricator you might want to incorporate content and target keywords that feature terms like

• stainless steel fabrication
• stainless steel fabricator
• stainless steel grades
• stainless steel design criteria

For more information on website search engine optimisation click here

Call To Action Buttons

Whilst a hyper link has impact for example Click Here For Great Website Design 

There are more visually pleasing ways that are more likely to draw customers to click than simple links embedded in text.

It is important to make sure the text on these buttons has a call-to-action statement or phrase.

Examples would be

• “Buy Now” or
• “Download Yours Now” or
• “Request A Demo” or
• “Get a Free Quote!”

In addition, try using bright colours to attract the eye, like green, yellow, or blue. Whilst these may be at odds to brand guidelines, having a high impact colour may actually get noticed ( and importantly clicked)

For more information on web design considerations contact Blue Dolphin Business Development an experienced and established marketing and website design company