COLOUR & WHITE SPACE
Back in December I blogged briefly about the importance of colour, and lately in my design tips blog I mentioned white space.
Today I want to explore these topics further. The use of colour on your site is key and goes hand in hand with the positioning of the elements on your site. The space between the elements is the white space (or whatever site colour you have chosen). Artists will use white space to define a shape, and good web design uses white space to draw the eye to key elements on your website.
WHITE SPACE
There are two elements to white space. The first is micro space - the tiny between lines, paragraphs and characters in your text, the width of your gridlines in tables or the spaces between menu items or pictures in a gallery. All of these are customisable within Wix.
The second is the macro space - the larger spaces between design elements I've already mentioned.
Micro white space has a direct impact on legibility. For example, marginal white space surrounding paragraphs affects the user’s reading speed and comprehension. Cramped text is difficult to read.
Macro white space is easier to see and has more impact. For an example just look at Google.com - the most simple looking website on the internet, with the most white space.
Remember to consider the following three things:
Content
If you have a lot of information on your page, there will be less area of macro space available. In this case you need to ensure you use micro white space wisely, setting out your text clearly and legibly to increase reading comfort and avoid solid blocks of text. Think about the way you naturally read, starting from left to right and top to bottom, and manage the flow of content accordingly.
Design
The overall design of your site will influence how you use macro space. You may choose to have more pages in order to maximise macro space for a better visual effect, or use anchors, strips, columns and side menus to move your visitors around your site, guiding them to the content.
Users
Do your research and check with a group of your target users. Go outside your immediate circle if possible, as this allows people unfamiliar with your concept to critique your design.
USING COLOUR
You may have noticed that I have only three colours on my site - orange, white and grey. When I was thinking about my brand identity, I wanted to come across as smart and professional. Grey is a great colour to reflect that. I didn't want to use black, as I felt it would be too dark. I didn't want to use a grey that was based on black either, as I wanted a colour with some depth and warmth. Look carefully and you will see my grey has a blue element.
Grey can appear dull and boring too, and I'm offering a creative service, so I wanted to choose a contrasting colour that was creative, dynamic, fresh and exciting. It needed to be a good contrast for the blue tone in the overall grey too, and so I chose orange. It's a warm colour, it shows up well on the grey and it's easy to read.
Finally, I settled on white as the final colour. I needed a light colour for the smaller text, and I wanted to lighten some of the site pages by using macro areas of - literally - white space.
Your colour journey will probably start with an existing logo or brand identity. That's fine. Base your site colours on something that matches your logo by all means, in fact I would encourage it. However don't go overboard. Three colours are plenty. If you don't feel the colour of your logo is working for you then why not change it? You can change the colour without changing the design.
Here's a little colour psycholgy:
RED Red is a powerful, dynamic colour. It can reflect love and strength, but can also be demanding and show aggression. If you want a powerful presence or to get someone’s attention fast, red is your go-to colour.
YELLOW
Yellow is the epitome of joy, happiness, cheerfulness and optimism. It's also the easiest colour to see. Whenever you need to lift someone’s spirits, increase their confidence, or provide inspiration, use yellow.
BLUE
Blue is known for its trust and dependability. It’s reliable, responsible, and mentally soothing. Blue allows us to destress and calm down, but can also be perceived as cold. It does bring a sense of calmness and trust when building relationships.
GREEN
Green is a colour of balance and harmony. It reflects nature, health, rest, and the environment. It can be calming or vibrant depending on what you are trying to portray.
PURPLE
Purple known for its imagination and spirituality. It is often used to show luxury, loyalty, courage, mystery, and magic. Creativity is most often associated with the colour purple.
PINK
Pink is a softer, less intense version of red that soothes rather than stimulates, making it a perfect colour for showing caring, understanding, and nurturing. It's also a sign of hope and romance.
ORANGE
Orange combines red’s power and energy with yellow’s friendliness and fun.
Orange is also known to be a colour of motivation, lends a positive attitude, and general enthusiasm for life.
BROWN
Brown is a great sign of structure, security, and protection. It’s also a very serious, down to earth colour you can use where black might be too intense.
GOLD
Gold consistently represents charm, confidence, luxury, treasure, abundance and prosperity that is naturally attractive. Too much gold, however, can seem egotistical, proud, and self-righteous.
BLACK
Black is a colour of sophistication, seriousness, control, and independence. It can also be used to show evil, mystery, depression, and even death. It's great for high contrast and easy legibility. Use it sparingly and in your text more so than the visuals itself.
WHITE
White is the perfect example of purity, innocence, cleanliness, and peace. White can also represent new beginnings, providing a blank slate, and gives refreshment for new ideas. White is a great color for simplicity and cleanliness.