7 Ways Web Graphics Can Make or Break Your “Look”
In this article, we are going to look at how web graphics can make or break your ‘look', so have a look at this:
What do you think? Is this a design that would make you want to look any further? Maybe not.
This is the landing page for Yale University’s School of Art.
That is right. Yale University.
Going to the other end of the spectrum, here is a page from the website “Penny Juice,” a retailer that sells juices primarily to child daycare centres:
It does not take a graphic design expert to figure out what is wrong with these two pages.
It only takes an everyday visitor who will bounce immediately and never want to come back.
The first one is confusing, and what is with the same photo being shown multiple times?
Of all the schools that should have an outstanding and beautifully designed page, it should be an art school.
The second example is reduced, but these are testimonials from daycare centres that are currently using the product.
The problem is, there is just a visual “overload.”
Web graphics on a page are truly the one thing that can “make or break” your online business.
If you get the website graphics wrong, it will not matter how exceptional your product or service is.
No one will ever get far enough into your site to learn about it, much less purchase it.
So, here are seven ways that web graphics can make your site a winner or loser.
Think about them as you design your site or employ someone else to develop it.
1 – Kerning/Readability
If you are not a professional graphic designer, you may not know the term, “kerning.”
It refers to the space that exists between the lettering.
While this may seem like a minor detail, it is not.
If visitors have to struggle to read your text, they will not fight for long – they’ll just leave.
Having enough space between lettering and words allows the eye to rest as it moves over the text.
It is irritating when the eye does not get that rest. Here are other important considerations for text/type and readability.
• The contrast between your text and background is important. Contrast should be high but not extreme. Take a look at Penny Juice again – that is garish.
• Using all capital letters make the text harder to read. Why? BECAUSE THEY ARE ALL THE SAME SIZE AND HAVE A BLOCK LOOK. Lower case letters are all a bit unique and much easier to read. Plus, when you use all caps, readers have a psychological feeling of being yelled at.
• Size of type: While this is an extreme example,
It points out how frustrated anyone would feel trying to read this.
Each of these blocks of text could have its own page rather than all be crammed onto the home page.
Moreover, this is a “zoomed” version which then clouds up the text.
The blue on grey text is even harder to read because there is not enough contrast.
White background for different colours of text is the best. It is simple, but it is readable.
Test prints should be conducted on any page with text.
You do not always have to settle for simple – there are great new fonts available now that are unique – just be certain that the font fits your message and your brand and is readable.
Here is an example of a newer font design that combines cursive and print writing – it is easily read and yet gives a nice flair.
2 – Hierarchy – Get it Right
Some design elements are more important than others, and there should be an arrangement that features the essential elements and downplays the least important.
Here is an example of how text conveys hierarchy:
Here is a case of good visual hierarchy from a Coca-Cola ad:
In both of these, the eye is drawn to either the largest type or to the most significant image element on the page and then moves to the other items in descending order of importance.
Good visual design always uses a hierarchy.
3 – Design for Your Audience
Look at the two examples of the announcement of a children’s concert.
The big question every designer and business owner must ask is for whom the website, the page, etc. is being designed.
The design on the left would be far better for a symphony concert announcement or a Rolex watch page – sleek and sophisticated, especially with the black background and the scripted title.
While children probably won’t be reading the announcement of their concert, parents will, and the design, colour and type should be playful, just as the activities that await the kids.
To advertise “live musical acts, shows, and activities for kids of all ages” using the design on the left destroys the “brand” of the organisation sponsoring the event.
4 – Colour Palette
There are a couple of considerations here.
First, the choice of colours must appeal psychologically to the viewer.
There is an entire body of research related to the colour appeal, and good design should take that into account.
Here is an infographic that reviews the types of colour best used for a particular mood and tone of a design.
Look at the colours used in the two following web pages – they are perfect for the audiences and the mood/tone of the products being offered.
They fit the “brand personality.”
Rolex wants to appeal to a sophisticated, upper-class audience – after all, their watches are expensive, and having one makes a statement that the wearer has “made it.”
This site is visited by kids – the wide array of colours portrays energy, excitement, and fun – just like the audience who will convince mum and dad to buy the items.
5 – The Psychology of Eye Movement
While this science is relatively new, it is nonetheless important regarding graphic design.
Eye movement tracking is a branch of neuroscience called neurolinguistic programming.
There is a “rule of thirds” that relates the design to this science.
When a person sees a visual, his or her eyes are drawn to 4 points of that visual.
These points are the intersects of a grid that looks like a tic tac toe design.
The eyes do not hit the centre of the graphic at the onset, but, rather one of those four points.
Many designers now believe that the most important element of your design should be off-centre, at one of those four points. Here is how that looks:
There are many other grid patterns that will provide pleasing visual design – choose what works best for you and according to the amount of visual content you need to display.
If you want a fully symmetrical page, then you can choose the grid pattern above and just place things accordingly into the nine boxes.
Other patterns may have fewer boxes.
6 – White Space is Your Friend
When too much is crammed into a design, viewers become confused and distracted – they do not know what to look at or to read first.
Keeping it simple with white space allows viewers to relax and soak in what you have that is relevant and of value to them.
There are only three messages on this page – “make a positive impact,” “tread lightly,” and “reduce your carbon footprint.
Each of them relates to pages further into the leaflet that provides “how-to” information.
Moreover, the colour green is internationally symbolic of environmental health.
Here is an example of a web page for the Land Rover – What could be more compelling? White space can make a huge statement all on its own.
7 – Using “Special Effects” – Moderation is the Key
Experimenting with effects is fun.
However, it is not a good idea to be carried away with them.
Too much animation, too many banners, too much parallax, too many different textures can “busy” a page too much.
Often, simple is so much better. Here is an example of two bar graphs, one that is replete with “effects” – colours, texture, etc. that are distracting.
The one on the left has a “busy” background, which makes it harder to read.
Given that the bars are already labelled with alphabet letters, there is no need for different colours.
On the right, the numbers are clear because they are in increments of 10 and the bars all land on one of those increments.
If you want to use a particular effect, choose just one.
In the bar graph above, taking out the texture would help, even if you want to keep the colours of the bars.
Graphic design is about artistic creation through your web graphics, but it is also very much about using the basic rules of design.
Sometimes, tweaking them a bit for originality, but in the end to have a model that works for the goal of the message.
Visitors want a visual appeal, but they also want enough simplicity to determine the value of what they are viewing.