Are you struggling to get your website looking fabulous? Professional? Stylish? Designing a good-looking website is as much an art as it is a science. But if you don’t consider yourself to be the next Wassily Kandinsky or Henri Matisse, fear not, there are many good web design companies out there who can help you. If you are based in Liverpool, there are many web designers from Liverpool who can help you.
If you want to design your website yourself, with a few helpful clues, such as you will find in this article, anyone can get in touch with the artistic eye it takes to design a stunning site. We will discuss some general rules, hints, and tips, and also look at some model examples to inspire you in your website building. Let’s begin!
“Colours speak all languages.” – Joseph Addison
Addison wasn’t wrong. Colours are powerful messengers and are often the first thing to stand out about a website. The colours you choose for your site are critical to its visual and emotive success. The palette you select needs to be in harmony with the message of your business. For example, the website of the Royal Horticultural Society uses a white background with green text and graphics to synchronise with the green-fingered focus of the society and harmonise with the floral pictures on the site. Alternatively, if your site is promoting a small pub or restaurant, you may want to use cosier fireside reds. Or if your business is a cutting-edge technology firm you might think about opting for steely greys and blues.
Not only is it important to think about the type of colours that you’ll be using, but also the number of colours. Less is more in this case. A site usually has more visual harmony if you pick two to three different colours. If you want further differentiation you can use tints and shades within the two or three colours you have chosen. When deciding which tint to use for each element, remember that a stronger colour contrast e.g. a darker blue against a white background, or using a unique colour such as a splash of red in your blue and white site, will make that feature stand out more. Think about the visual hierarchy of your page and ensure that the most important elements such as your company logo and mission statement have a more significant colour contrast than other less important features.
“But why are we attracted to symmetry?” – Alan Lightman
American scientist Alan Lightman theorises that “symmetry represents order, and we crave order in this strange universe we find ourselves in.” There’s no doubt that symmetry is aesthetically pleasing and appeals to our pattern-seeking nature. Symmetry is something we can easily apply to website design. It is perhaps the element most crucial to a visually successful website.
The Shard’s website is a great example of the use of symmetry in creating a website that looks high-end, precise, and classy. The centralisation of their logo at the top of the page, beneath which the entire page’s width is used for the horizontal menu, as well as the picture banner, creates a sense of balance. Beneath the picture
slideshow, the page is effectively divided into four equal columns, in each of these columns a picture is placed with a textual accompaniment. This precise division of the page and organisation of the page’s elements ensures complete visual sharpness and clarity. It fits in with the modern and professional message of the Business.
Another approach to creating symmetrical site pages is using the rule of thirds. Dividing the page into thirds and using each third for a different picture or paragraph is an effective way of organising a good-looking page. If your site is a blog or journal you may prefer to divide your page into three columns and use the central column for text and leave the two bordering columns as white space, or margins. Websites that use the rule of thirds effectively include, New Writing South, The Broke Backpacker, and CSS Design Awards.
“The photographic image is a message without a code.” – Roland Barthes
Good old Roland Barthes is – I think – suggesting that a photograph is an instantly interpretable method of communication. A picture can have an immediate emotional or intellectual impact on us in a way that few other forms of communication can. The most stunning, striking, or emotive websites use photography to enhance the vibrancy and visual appeal of their site. A popular and effective method of incorporating imagery into your homepage is to use a slideshow banner or film footage beneath your menu bar. This allows your business to express itself visually. Using pictures of ecstatic customers enjoying a day out at your theme park, or a luxurious hotel suite with plump cushions and sparkling wine, or some tempting pictures of gourmet food at a glamorous restaurant table, can quickly evoke an emotive response from the site user. However, if your business isn’t a theme park, hotel, or restaurant, you may not want to use the above examples. For instance, if your business offers funeral services, then pictures of ecstatic customers or clinking champagne glasses are probably inappropriate.
Whatever succulent, majestic, or enticing photos you use to bring your homepage to life, always ensure they are high-resolution images to create a high-quality aesthetic. Avoid using stock photos if you can. Personalised and specific photos taken by a professional (or keen amateur) photographer enhance the visual specificity of your site and contribute to the overall impression and strength of your brand image. Remember to choose photos that compliment your chosen colour scheme. This will create visual unity.
Some sites that demonstrate an excellent use of photography in their design include, the i-to-i TEFL site which uses a photograph of Macchu Picchu as a banner across their homepage, instantly creating visual appeal. Shakespeare’s Globe uses a banner of film footage across its homepage. The footage captures the iconic historical structure of the globe theatre, which creates a stunning impact upon entering the website. And lastly, Cote Brasserie restaurant uses a film of luxury food and drink on their homepage, centralising three action buttons in the middle of this footage, to create a symmetrical effect.
In conclusion…
Look at your favourite websites for inspiration. Notice how they organised their sites. Do they use thirds? Four columns? A grid structure? Notice the colour scheme and use of imagery. All the best sites ensure each element on each page unites to create one visual impression. Now get designing! Henri Matisse will be asking for your number in no time.
