Visual design isn’t just about making something look pretty, yes it has to look appealing to your users, but they have an end goal, and they want to get to that as soon as possible. After all, we are all busy people! We have a few key elements that will form the basis of any interface, this can then be supported with beautiful photography, and fabulous content to give users exactly what they need to take away.
Key elements of visual design
There are 4 basic principles that can effect the way information is organised visually;
- Alignment
- Proximity
- Repetitions
- Contrast
These 4 principles affect everything you see, and do with a website or print collateral, and the underlying core of anything you actually interact with, you just don’t know it. You will never really apply just one principle to a design.
Alignment
Do you ever get fed up of reading? Do you feel fatigued? Users are having to spend more energy to concentrate, so every design element should be aligned with one or more items to build relationships and reduce your user’s concentration levels.
Proximity
Elements that are close together can be perceived as grouped, or related to each other, like footers or contact forms. Elements that are not related tend to be separated by negative space, and have different alignment paths. Increasing negative space will create proximity, space between elements, margins, gutters and columns, allowing the user to focus on critical elements within a design.
Repetition
Creating visual styles is important. Fonts, colours and call to actions that are repeated throughout a site gives a feeling of cohesiveness. When you look across elements on a site, you may not instantly think there is a pattern, but there actually is, someone out there has actually considered the shape, colour and size of the button you are about to click on to create consistency through out that site.
Contrast
Contrast is one of the most mis-used principles use in visual design. Contrast is also the primary way to catch a users attention, and will help the user build relationships between essential components on the interface. So be sure once you have picked your colour palate, you can easily differentiate the colours within it. Text must be easy to read. To ensure this happens use complimentary colours that you can differentiate the foreground and background colours.
A lack of contrast will make the text difficult to read and will contribute to eye strain. Users do not know what to focus on, it is a lot like pointing a camera at a white background.. It keeps zooming in and out right? That’s because it can’t focus on one element. To add to this really bright colours can be challenging for certain audiences. So ensure your colours are chosen purely upon your users that will be interacting with it.
Filtering colour through emotion
Colour is a manipulating but marvellous tool for designers. It is one of the most effective factors of a brand’s perception. There’s so many colours out there, millions in fact, and it can become a huge task to find a palette perfect for your brand so consider how to attract the viewer’s attention and achieve your end goal with the support of colour for example, sleeping apps will tend to be cool, calm relaxing colours to sooth and de-stress the user and support the apps end goal
Put your users in the right mind-set to draw the best out of them. We have all watched food adverts on TV, or driven past the nearest McDonalds and thought, ooh that looks so inviting! Well that may well be down to the use of colour giving you the desire.
Colour psychology
The user builds relationships between essential components on the interface, and that includes the use of colour, to tackle the emotions. This is all started with your brand, but will inevitably effect the collateral and website. This even comes down to men & women’s likes. If you are tailoring your site to a certain audience or gender, then you need to cater for their palette. For example, Building products retailer would mainly target the male market, so it would be wrong to use colours like pink and purple that feel feminine.
Typography
In any agency you will have multiple discussions about Serif & Sans Serif fonts. Research actually shows no difference in preference. Typography choice has to be purposeful. You can use different font weights and styles to indicate differences in the information and content hierarchy to draw attention. Lets face it a page filled with text, but no styling and images would never be read!
Top tip! Create consistent styles by identifying different types of content eg. Headlines, bullets, charts. Make sure this is very clear and ensure you apply those consistently on every screen to improve user experience.
Colour blindness
They say red and green should never be seen but there is actually a reason behind it (like there is everything here at Blue Digital). The most common form of colour blindness is actually red and green and that can make it very difficult for users to distinguish colours like green, red, yellow and blue. With Christmas just around the corner, be sure to remember that while you are adding festive promotions to your site with red and green, approximately 8% of your male audience can not actually read it.
You can test your site for colour blindness compatibility on;
Colour conversion rates ( Ecommerce)
There is no one single colour that can improve conversion, it is totally dependant on the situation. Keeping elements distinct, and making the checkout stick out like a sore thumb from every other element on the page will draw users to it. Using colour highlights is also a great way to help identify important information, it can be used to grab attention or influence the hierarchy of content, but bright colours should only be used as accents in more corporate industries. If you can find out the majority of your audiences preferred colour palette you can use this to your advantage and you sure will be onto a winner!
Key take aways
4 key planes
The surface of your website can actually make or break your site, good visual design leads the eye smoothly through the site. There are four basic principles to consider when creating your websites visual organisation:
- Alignment
- Proximity
- Repetition
- Contrast
Consistency is key – This allows users to build an accurate mental model of the way the site app or system works.
Key questions to ask when evaluating your user interface
- Is colour used sparingly
- Do my colours re-inforce hierarchy of content?
- Have you used the colour scheme consistently?
- Is colour used functionally or decoratively?
- Would your site be functional for someone who is colour blind?
- Does the interface reflect the perspectives and behaviours of intended users.
- Are images and icons relatable?
- Are items (like your menu) logically ordered?
- Are the fonts you have used easy to read?
- Does your font support content hierarchy?
Embrace negative space, it is your friend secretly!