What is visual design?
Visual design is the look and feel of a website. It communicates a company’s brand, identity and voice.
Visual design involves research, iteration and collaboration with the client.
The more the client is part of this process, the better the chance you’ll have of designing something they are happy with.
From my experiences websites that are designed in the dark, without client participation, will miss the mark, frustrate you and the client and force you to go back to the drawing board and design again from scratch.
Visual design follows the discovery phase where we complete wireframes based on user needs and business objectives.
‘Visual design focuses on the aesthetics of a site and its related materials by strategically implementing fonts, images, colors and other elements. A successful visual design does not take away from the content on the page or function.’
usability.gov
Visual design is hard!
It requires an understanding of both UX (understanding the business goals and user needs) and UI (understanding typography, layout, colour, imagery and iconography) to create an environment in which a user can accomplish their goals.
Motion is also another facet of design and can be used to great effect to improve the usability of a website. We will discuss the part motion has to play in a future article.
A website that is poorly designed will give the wrong impression of a company, damaging the brand and creating a negative impression with its users.
Why would anyone do business with a company whose website is badly designed and as a result untrustworthy?
A website must seek to show authority by understanding its clients’ problems. As a result, clients will trust in the company to solve their problems and do business with you.
Let’s now ask ourselves what can be done to make sure the visual design is nailed from the get go…
1. Brand guidelines
Ask your client if they have any brand guidelines.
Are they strict and written in stone or is their flexibility whereby you can exert some creative freedom?
Perhaps a more pleasing colour palette can be used with a few adjustments to the brand colours or a web safe font that looks similar to the company typeface?
If the client doesn’t have a brand guide or logo then you will need to design a logo.
The logo will set the theme for the website but you’ll need to revisit the business strategy to give you insights into what the direction should be for the brand.
The logo should be designed first because:
- It is the theme for the brand.
- It is the focal point.
- It sets the colour palette.
- It determines the web safe font that is used in the page design.
Depending on your client’s budget a logo can be designed relatively quickly. That being said, the logo design can take much longer if the client wants to invest more money and turn it into a complete branding exercise. It also depends on the perceived value that a client puts into their logo that will also determine time spent and cost.
The Futur have an excellent video on ‘Pricing design work and creativity’.
2. Research the hell out of this…
Research will help you to implement your design vision.
Remember the questions we asked our client after our proposal was accepted?
We can now use the information that we gathered from the client such as:
- Examples of 3 of their competitors’ websites.
What do they like/don’t like?
What would you like to do differently/better than them? - Write down 3 other non-competitor websites you like in terms of style/look/functionality.
We can start compiling website ideas and pin them to a board within Pinterest.
Pin ideas from websites that you like and which will compliment your client’s brand.
It’s worth stating here that we are not copying!
We are looking for inspiration and gathering ideas for our website in terms of typography, image usage, layouts, iconography, colour schemes and animation.
Other websites that you can use for sources of inspiration include Behance, Dribble, thefwa.com and awwwards.com to name a few.
The Design Gut Check
Another exercise in gauging your client’s taste in web design is the Design Gut check.
The idea here is to gather 20 websites with different styles.
The client will be asked to review each website and give that website a score of 1 to 5 based on their immediate impression; 1 being did not like it, 5 being loved it.
This will give you an idea of what websites your client likes at a visceral, gut feeling level.
This exercise should take no longer than 10 minutes but is an excellent way to discover what websites excite and inspire your client.
3. Create a moodboard
Once our research is complete, we can start creating a moodboard which combines logos, colour palette, imagery and slogans.
Moodboard’s are an essential tool for helping everyone to understand a company’s branding guidelines, communication style and personality.
They help communicate visually what can be difficult to describe.
Before you start putting the moodboard together ask your client to describe their brand with simple key words.
What sentiments and emotions do these words bring to mind? Try and incorporate these findings in the moodboard.
Budget depending, we aim to create 3 moodboards.
This is known as bracketing.
Create a moodboard that shows a design path that you think the final website should take.
Then create your second moodboard with something completely different, perhaps an illustrative style over a more image based style.
Your third and final moodboard should be outlandish there that you know your client won’t like it.
This is simply to gauge if your client’s design tastes are as you expected.
If they go with this moodboard at least you know the route you should take is more quirky and unconventional and you can cater for this diversion…
Perhaps, your client has a circle in their logo.
You could echo this theme in your design and mask images with circles or include circle shapes?
Perhaps, the logo has a more handwritten style so incorporate this in the choice of selected typefaces.
Use squiggly lines rather than straight lines to give your design personality and a human touch…
When designing look for a concept or pattern and give design a reason to exist.
4. Create a style tile from your moodboard
The next stage is to take the chosen moodboard and create visual components that will be used in the design mockups.
We refine what we discovered in our moodboards into usable building blocks for our final design.
Our style tile will be used as a visual guide for us and includes buttons, web safe typography, example imagery, icons, colour palette, forms, carousels…
We are using components to communicate the essence of our client’s brand.
Word’s that our client used to inspire us in the creation of the moodboard should be revisited and used to convey a mood within our style tile using tools such as typography, colour, iconography, buttons, navigation etc.
5. Design your mockups
When the style tile has been approved we can start the design!
There will be no surprises for the client here because they are already familiar with the design.
We apply the style tile to the actual design to see if the style elements work on a web page layout.
I start by revisiting the sitemap and design the homepage navigation.
This can be horizontal, designed on the left, minimal, whatever you like just make it useable!
Add a hero image if you are going to use one, add icons, colours and good typography using contrast and hierarchy to add interest and ease of reading.
When laying out your webpage with images, text and content, make sure that the content and design work together.
I use the squint test to see if what is on the page makes sense and is readable.
Squint to see if sections are laid out in a readable format and do not blend into each other.
I use this test for my motion design projects to check colour levels but this is equally applicable in web design.
Once the homepage is complete, create a content page and one other page.
These can be used as design templates and can be handed over to developers for the build.
Upload your designs, prototype and start collaborating with your client.
Figma is my tool of choice for website design and with its improved prototyping capabilities has improved my workflow and productivity.
Other tools that I have used are Sketch, Adobe XD and Photoshop.
6. Prototype
Create prototypes of the website before designs are handed over to the developers. Use animation capabilities in Figma and Sketch.
If you need to animate anything more complex you may have to use a high-fidelity tool such as After Effects or another software tool such as Framer or Principle.
Once the prototype and designs have been handed over to the developers it’s easy to think that you job is now done.
It’s not…
Do not leave it to the devs, they will 9 times out of 10 incorrectly implement your design.
Make sure you check inconsistencies in font sizes, correct typefaces and weights, imagery, optimisation, colour palettes, tracking, leading, etc before launch.
Furthermore, does the website reflect the prototypes that you painstakingly created?
How does the motion feel?
Do the buttons animate correctly?
Do the pages have correct easing?
We are almost ready to push the website live but the client may have further amends.
You can push back if you think the additional amends won’t improve the site’s usability or visual appeal.
Otherwise, budget depending, accommodate the client, make the final amends then push the go live button. 🙂
Go to websites for visual design
Inspiration
Dribbble
Behance
Thefwa.com
theawwards.com
Colour selection
Color.adobe.com
Cooolors.co
Materialpalette.com
colorhunt
Typefaces
Fontpair.co
Material.io (Font stack sizes)
Iconography
Geticonjar
Streamlineicons.com
Iconmonstr.com
Fontawesome.com
Grid layouts
You can download My Sketch grid layouts that are based on the Material design responsive grid layouts guidelines.
http://gridcalculator.dk/#/1920/12/30/400
https://grid.kkuistore.com
Free photography
Pexels.com
Unsplash.com
DO YOU HAVE A PROJECT WE CAN HELP YOU WITH?
Need a consultation? We can advise
Whatever your business needs, we’ll create a great looking website that works for you.
