[vc_row css_animation=”” row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” angled_section=”no” text_align=”left” background_image_as_pattern=”without_pattern”][vc_column width=”1/6″][/vc_column][vc_column width=”2/3″][vc_single_image image=”35926″ img_size=”large” qode_css_animation=””][vc_empty_space][vc_column_text]Updated: 11 July 2022
The world is becoming more visual. People often process visual information based on what they see before making judgements. As such, presenting information on our website that is easy to digest visually is increasingly important.[/vc_column_text][vc_empty_space][vc_column_text]
Good vs Bad Websites
[/vc_column_text][vc_empty_space][vc_column_text]Good websites allow users to take in information easily at one look without much effort. A well-designed website will portray the brand accurately and send appropriate messages for visitors to take action.
On the other hand, bad websites do not have a clear representation of what their brand represents, what special products or services they have to offer. As a result, a lot of effort is required from the visitor to process the information on the site. Unfortunately, as people are known to be lazy creatures in this age of convenience, visitors are unlikely to put in such effort to read any website.
Evidently, good websites are more effective at conveying information more effectively and efficiently. People easily lose interest in bad websites which fail to inform and convince users to get them to take action.[/vc_column_text][vc_empty_space][vc_column_text]
Good Design
[/vc_column_text][vc_empty_space][vc_column_text]‘I want my website to have good design.’
This is easier said than done. Good design is seamless, comfortable and unnoticeable to the untrained eye.
Have you been trying to design a website but can’t seem to get it right because you are not a trained web designer?
This article introduces some basic good design principles that can be applied by anyone on any website to make it better. If you are unsure of where to start, here are top 10 places to look for website design inspiration.[/vc_column_text][vc_empty_space][vc_column_text]
6 Design Guidelines
[/vc_column_text][vc_empty_space][vc_column_text]
1) Choosing Colours
[/vc_column_text][vc_empty_space][vc_column_text]When designing a website, choose a colour scheme with colours that complement each other. A good colour scheme is important in holding the attention of your visitor. It should be easy on the eyes and still be eye catching.
Try matching whites or grey colours with bright colours. This allows for an energetic tone but not in an overwhelming manner. If the colour scheme of your site is not appealing, people would likely go to another website even though yours may have great information, products and services to offer.
For websites with a simplistic, minimalist aesthetic, white creates a perceived opened space.[/vc_column_text][vc_empty_space][vc_column_text]
 2) Contrast
[/vc_column_text][vc_empty_space][vc_row_inner row_type=”row” type=”full_width” text_align=”left” css_animation=””][vc_column_inner width=”1/2″][vc_single_image image=”28202″ img_size=”large” qode_css_animation=””][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”28203″ img_size=”large” qode_css_animation=””][/vc_column_inner][/vc_row_inner][vc_empty_space][vc_column_text]Using contrast involves making design elements appear different from one another. This helps to provide a visual guide for visitors by emphasising what is more important than others. Contrast also helps to create a focal point.
Visitors can easily identify what is most important with just one look rather than having to put in effort and time into processing the information on your site.
A basic rule of thumb is that light fonts are usually used with dark backgrounds and dark fonts are used with light backgrounds. While all different colours contrast with each other, some do not contrast well.
If your eyes hurt or the text is difficult to read, the colours on your site probably does not contrast well.[/vc_column_text][vc_empty_space][vc_column_text]
3) Font Colour & Weight
[/vc_column_text][vc_empty_space][vc_column_text]By changing the font size and weight, we are able to influence our visitor’s attention. For example, people tend to view the biggest fonts first before proceeding to the smaller fonts.
The bigger the font, the more important the message is perceived to be. Similarly, the heavier the font weight, the more important the message is perceived to be.
As such, we can use a mixture of font size and font weight to emphasise the importance of various information.
Additionally, if you want to use different kinds of fonts, try to keep the variations in font to one to three fonts in a given page. For the same given font, variations of it which shows a slight difference can be used, but keep in mind not to overwhelm the viewer.
It is also important to note that certain browsers might not support some fonts. A website with missing fonts would destroy the message you are trying to get out to your audience.
Finally, do keep in mind the kind of image you are trying to portray. If it is a professional website (most likely the case), refrain from using cartoony fonts.[/vc_column_text][vc_empty_space][vc_column_text]
4) Images
[/vc_column_text][vc_empty_space][vc_column_text]A picture speaks a thousand words. As cliché as it sounds, pictures actually have value in websites.
Humans are visual creatures. Images help us to pay attention and grab our attention more easily. As people often associate words with being boring, including images in your website can help to keep your readers attention especially for segment with more text content.
However, the images included should still be relevant to text content and provide users with information.[/vc_column_text][vc_empty_space][vc_column_text]
5) Use Icons
[/vc_column_text][vc_empty_space][vc_row_inner row_type=”row” type=”full_width” text_align=”left” css_animation=””][vc_column_inner width=”1/2″][vc_single_image image=”28204″ img_size=”large” qode_css_animation=””][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”28205″ img_size=”large” qode_css_animation=””][/vc_column_inner][/vc_row_inner][vc_empty_space][vc_column_text]Aside from using images to make your website look less wordy, another tool that can be used are icons. Icons are vector images that could be used represent a section of your website. It categorises the content in your website visually such that visitors require less cognitive effort to process the information presented to them. With icons, visitors can have an idea of what the section is about at one glance.
Commonly associated icons are instinctively recognised by humans effortlessly. For example, the hamburger icon represents menu.[/vc_column_text][vc_empty_space][vc_column_text]
6) Align Images
[/vc_column_text][vc_empty_space][vc_single_image image=”28206″ img_size=”large” qode_css_animation=””][vc_empty_space][vc_column_text]Images are great but when poorly arranged can be disorienting and annoying to visitors. Ensure the pictures on your site fits well together rather than being all jumbled together. Aside from images, it is good to keep in mind the common mistakes of designing a website so that you can avoid them.
When your images are put together well, they will give your website a clean finished look. After which, you may want to consider the use of site elements to enhance the user experience of your website.
With our 6 design guidelines for 2022, your website would be visually appealing for your customers. Unfortunately, not all good websites meet the goals that we desire. In that case, you might consider consulting an agency that offers web design in Singapore to help you develop an effective website that will capture your audience.[/vc_column_text][/vc_column][vc_column width=”1/6″][/vc_column][/vc_row]
