“Great Web Design without functionality, is like a sports car with no engine” – Paul Cookson
Skinny or Full Width?
With Web Design, you have the choice to make the site ‘skinny’ 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.
Skinny Websites can be useful to control the layout more, and if you don’t have large resolution imagery that can be used on a full width Website. These are also useful if your website does not have a lot of content, as there is less space to fill essentially.
Full Width Websites work well 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 Skinny Websites, if you look at most modern-day websites, you will rarely find one where a Skinny layout has been used.
Images can sometimes make or break a website. If you intend on using a lot of imagery on your website, you must bear in mind your page loading speed, as this is something that Google will score your website on.
As long as your images have been optimised, you should be fine to use as many as you desire (this includes images used in Gallery Modules, Background Images / Product Images)
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 .
We urge you to use caution when placing text over images, we would 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 over 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. We recommend you include the following on your header:
Call to Action: for example, "Call us now to discuss your needs"
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.
In terms of colour, this is totally dependent on what colours you use to promote your brand. If you have a logo which uses a lot of colours, we 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 website.
Some colours really don’t work well together, so we would 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 us to use ‘leaf green’ 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 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:
Well written copy
This includes back end SEO. i.e Page Description, Meta Title and Keywords
Your site should be responsive on all platforms i.e 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.