Introduction
There are many aspects of website design, and design in general, that make something look and feel more appealing. Some of the tips below could also be applied to print design.
I have chosen a selection of things to keep in mind while designing your website. These tips should assist you with your creative process by breaking down the core aspects of website content.
Tips
In this website design article I will be covering Colours, Fonts, Images, Videos, Text and White Space. I also include external links to additional information, examples and tools.
Colours
Colour says a lot about your brand. Make sure to emphasise your brand by using your corporate colours throughout the website design.
Be careful to not go overboard because it could cause users to become confused when navigating through your website.
You should use a simple palette of colours for different elements of your website design. This is usually done using general, primary and secondary colours.
General colours should be used for most of the website layout when creating sections of content. Primary colours are usually for buttons and/or links. Secondary colours are for highlighting backgrounds, titles and/or icons.
Make sure that your buttons or links are distinguishable from a title or icon. For example, if your button is blue and your title is blue, then the user might think the title is clickable when it is not. I would suggest using a darker blue colour for a title in this case.
You can create your own or view colour combination trends here:
Fonts
Generally, you should only use one font for all of your text content. You can achieve a variety of layouts just by changing the size, weight, style and spacing of your text.
Select a font which is easy to read and suits your brand. Do not use quirky fonts as they are usually not suitable for paragraph text and will only slow down your website.
Make sure to select a common fallback font in case something goes wrong. This is done by adding “body {font-family: primary-font, secondary-font;}” in your CSS (cascading style sheets).
Additional CSS info: https://www.w3schools.com/css/css_font.asp
Many websites use an additional icon font to add vector icons to buttons, links and various other elements. This is totally fine. The alternative would be to use SVG (Scalable Vector Graphics) icons to manually add where needed.
Additional SVG info: https://www.w3schools.com/graphics/svg_intro.asp
Links to font libraries:
Images
As the saying goes, “an image is worth a thousand words”. This does not mean that you need to use a bucket load of images if you have lots to say. Everything in moderation.
Use images sparingly to emphasise your brand, to separate sections of text or to illustrate a concept. Even if you are a photographer with a million great photos, only include a dozen or so cherry-picked images in your gallery.
Do not use overpowering images as a background. This will defer focus away from reading the text or following a link. (I will create an article with tips on how to use background images)
Videos
You might be thinking of adding a video as a background because it would be cool. Don’t do it. Consider the amount of memory, extra code and load time, all for a brief moment before a user moves on. I would suggest using a suitable image instead.
You can add movement to images and other elements by using CSS or JavaScript.
Here are a couple links to get you started:
A video can be used to introduce a company, to demonstrate an action or to showcase a product. Keep the videos as small as possible. You can always add a download link or direct the user to YouTube or another service to view the full-size version.
Do not auto play videos on page load. This will make many visitors leave your website instantly. The video should be paused or even hidden in some situations where GDPR rules apply.
GDPR info: https://eugdpr.org/
The computer hardware company, Logitech G, use a variety of short videos and interactive animations to engage the user.
Visit website: https://www.logitechg.com/
Text
Text is the main content of any website design. Having strong headings, simple to read paragraphs and clear CTA (call to actions) are key to any good website.
Keep your headings as small as possible with wording that is catchy. If your heading seems like a sentence or you have a better idea after you published your content, don’t be afraid to change it.
You do not need to write lengthy chunks of text with multi-sentence paragraphs. Keep it light, friendly and to the point. Make it relatable to your brand.
I would suggest keeping your text either left or right aligned. In some cases, you can centre important content to make it stand out. Avoid using justified text as it is very hard to use in responsive website design.
White space
Give elements room to breathe. This is done by giving adequate padding between sections of content and between various elements within those sections.
A person needs time to digest information. By adding white space between elements provides the user an indication of content relationships. In turn, this makes it easier to view and process information.
The tech company Xiaomi use plenty of white space throughout their website.
Visit website: https://www.mi.com/global/pb10000pro
Speed (Bonus tip)
If your website is not optimised and takes a long time to load, you will most likely lose your visitors. Keep your website as light as possible by minimising the number of plugins, fonts, images, videos and any unnecessary code.
This is not part of website design per se, but the web hosting and file caching aspects play a major role when creating a website.
I suggest to firstly purchase an average hosting plan and optimise your website as much as possible. When you have done all you can, only then upgrade to a faster hosting plan if needed.
Conclusion
The main things to remember are, make the website relate to your brand and keep clutter to a minimum. Less is more and to the point.
The tips are more like guidelines which you can augment in certain scenarios. In most cases you should keep them in mind while designing your next website.