Website Visual Design
10 Jul 2017
ContentRenji Yonjan
Table of Contents
Want pixel perfect design to nail your users’ first impression? In this phase, we make the your website much more lively and start breathing some colour into it. This is where the user interface design comes into play.
Design preparation
As with the wireframing phase, your involvement in this design phase is crucial to delivering the best results. With some direction, your web designer will be able to craft a website that is aesthetically pleasing and user friendly.
-
Wireframe handover
The first step is to make sure your designer has the approved wireframe from your UX designer, so they understand how the site will be structured. If you haven’t already, you should also provide your designer with the items detailed in the ‘Wireframing Preparation’ reconfirming the site is aligned with the website’s purpose. These details will also be very beneficial in understanding the project in more detail.
-
Design assets
Your website’s design will need to reflect your existing branding. Therefore, your web designer will need to receive your logo and any branding guidelines you might have. Providing some sample images and/or graphics you want to feature on your site will also assist in the visual composition of the pages.
-
Design feedback
As with all phases, your comments are invaluable to creating the perfect end product. When providing your feedback, here’s some things to look out for:
-
Prioritise legibility and functionality
It is tempting to put more emphasis on the aesthetics of the website, but you should always ensure that you prioritise the user’s ability to navigate the site. First and foremost, there should be clarity in what is being presented and prompts to encourage user interaction. In order make sure the design has this legibility, you can conduct the ‘eye-squint’ test which has you squinting your eyes and assessing:
– Do the elements you want to stand out, actually stand out?
– Is the content clearly divided in logical sections?
-
White space
Intuitively, spacing between elements clearly divides content, so that users can distinguish between them. White space also allows your website to ‘breathe’. By doing so, you reduce the visual tension that may occur from elements being too close to each other. All in all, the user experience is much more pleasurable if white space is utilised properly.
-
Colours and font
It is a good rule of thumb to only have 3 to 4 colours in your main colour palette and a maximum of 3 fonts on your site. Of course, there are exceptions to the rule, but generally the aim is to make sure that users experience consistency and are not overly distracted by a carnival of colours. Additionally, to ensure legibility, it is also worthwhile to ensure that the font chosen for paragraph text is readable.
-
Correct tone
It is important to ensure that the overall look and feel of the site is aligned with how you want to present your brand. Again, it is important to think about this from the perspective of a user, how will they feel after visiting your site? What first impression does your site exude?
Detail
Now you will begin to see what the pages of your website will look like in more detail, with more personality, and with a complimentary blend of aesthetic efficiency. To continue the growth of your website continue reading about how to build your website.
See more articles like this
See all“During the entire project, what I witnessed was an unwavering determination to keep forging ahead and readily adapting to every new challenge that came our way. The performance was outstanding, and we owe our success to you. Without your contributions, this wouldn’t have been possible. Great job!”
— Marketing Manager at Mondial VGL