Website Visual Design

Website Visual Design

10 Jul 2017


Renji 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.

Wireframe Handover
Wireframe Handover
  • 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?


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.


Renji is always striving for the best at any given moment, both in and outside of work. Her constantly inspires and motivates her teams so that they grow and improve both professionally and personally.

Read more Articles by this Author
Contact us Today

Beautiful Websites For Better Business

  • star
  • star
  • star
  • star
  • star

“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!”

Alison Brandon MondialVGL
Alison Brandon

— Marketing Manager at Mondial VGL