The past few years I’ve seen many websites, some great and some not so great, one thing I’ve noticed is that most sites are created to appeal to the visitors visual needs but lack the functionality, user friendly navigation, load speed & responsiveness with different screen sizes. Ultimately this leads to an inferior site which Google’s algorithm will most probably rank low on its search engine. With that in mind here’s my tips to get it right first time…
Standard or Full Width
With web design, you have the choice to make the site standard width, so that it is a fixed size with a background, or full width, which is a fluid layout. It is important that you know the benefits of each before deciding how you want your website to look.
Standard width websites can be useful to control the layout more easily, and especially ideal choice if you don’t have large resolution imagery. Standard width is also useful if your website does not have a lot of content, as there is less space to fill essentially.
Full width websites look great on high resolution monitors, and if you have high resolution imagery to use, it is a great way to showcase these and really make your website stand out. Full width websites are also a lot more modern than standard width sites, if you look at most modern-day websites, you will rarely find one where a standard layout has been used.
Images can make or break a website. If you intend on using lots of imagery on your site, you must bear in mind your page load speed, as this is something that Google will score your website on and if your site takes too long to load then Google will list your site lower on search results, possibly on page 2, where nobody bothers navigating to.
As long as your images have been optimised & you use a caching feature, you should be fine to use as many as you desire (this includes images used in galleries, background, product images etc.)
You should also ensure you’re using images in a way that the visitor can make out what the image is meant to be, but also images that tell your customers what you are offering.
I urge you to use caution when placing text over images, I suggest you choose images that have no focal point in them that are more of ‘mood’ photos, as the content over the image will cover the focal point. You can also use techniques such as a slight blur or opacity over the image to make the text stand out more – The content needs to be legible over the background and it needs to not get in the way of the user being able to navigate the page. The font for the content should also be easy to read, and not too long winded, so that you can adjust this for other view ports (tablet / mobile).
The header on your website is your first opportunity for your client to identify your brand. You should keep your header clutter free and only have the important information in this section of the website. I recommend you include the following on your header:
Call to Action: for example, “CONTACT US”
You should ensure that your header is not too large / taking up too much room above the fold of the website and is easy to read. Ensure the chosen font is clear and your navigation bar has hover effects to let the visitor know which page they are currently viewing.
When it comes to colour, it is totally dependent on what colours you use to promote your brand. If you have a logo which uses a lot of colours, I would suggest only using these colours on certain aspects of the website, such as headers, subtitles, buttons / links – Rather than having block colours on the background behind text, as it can make it difficult for visitors to read the content on your site.
Some colours really don’t work well together, so I suggest using colour pallets to try and match colours up to make the site look the best it possibly can.
For example, the website below wanted me to use ‘light grey’ and ‘burgundy’ as their colour scheme – These colours don’t look great together, and having these colours plastered across the site, would make it look too busy and in your face. So, I used the main colours only in the header and footer and for the subtitles across the site, the rest I have broken up with white and different shades of black.
The Technical Stuff!
Stepping away from the visual side of your site, you also need to remember that it’s not just about how the site looks which makes it a good site, it needs to function correctly too. Here is a list of the most important aspects to ensure your site performs as it should:
This includes back end SEO. I.e page description, meta title and keywords
Your site should be responsive on all platforms (mobile, tablet and all sized desktop PCs)
Your website should use internal links for visitors to navigate the site easily. For example, having a “Quick Links” section in the footer which leads through to product/service pages on the website/ using a site map in the footer.
I hope you found my article useful and I hope it will enable you to design your site not only visually pleasing but also fully functional. Nowadays it’s vital for any business of any calibre to have a website. And luckily you have many choices; either hire an experienced web designer or do it yourself using web builder platforms such as Wix, Squarespace, Shopify & many other DIY platforms out there. But bear in mind the running costs of these DIY platforms can be high over the long term (as you will need to pay pay monthly and pay more for each add-on features such as domain email accounts).
When using the service of an experienced web designer you’d usually pay a one-off premium but in the long term it could cost you much less. And also an experienced web designer would optimise the site for Search Engine Optimisation (SEO), boosting your site to appear higher on Google’s search engine so your target customers are more likely to find you.
Nazrul Hoque – 01 June 2019