7 Ways Web Graphics Can Make or Break Your “Look”

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:

 

Web-Graphics-Bad-Design

 

What do you think? Is this a design that would make you want to look any further? Maybe not.

Guess what?

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:

 

Bad-Website-Graphics

 

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 day care centres that are currently using the product. The problem is, there is just 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 you site or employ someone else to develop it.

 

Looking for a Professional Graphic Designer?

 

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 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.

Related Article:  Milton Glaser

• 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 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 feel of begin yelled at.

• Size of type: While this is an extreme example,

 

Website-Graphic-Design

 

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.

 

Web-Graphics-Design

 

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 an example of how text conveys hierarchy:

Typography-Web-Graphic-Design
Here is a case of good visual hierarchy from a Coca-Cola ad:

 

Web-Graphics-Design-Coke

 

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 hierarchy.

3 – Design for Your Audience

Look at the two examples of the announcement of a children’s concert.

 

Website-Graphics-Design

 

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.

Related Article:  Top 10 Mobile Apps to Boost Productivity

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.

 

Websites-Graphics-Colours

 

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.”

Rolex-Luxury-Web-Graphics

 

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.

 

Childrens-website-graphics-lego

 

 

5 – The Psychology of Eye Movement

While this science in relatively new, it is nonetheless important regarding graphic design. Eye movement tracking is a branch of neuroscience called neurolinguistics programming. There is a “rule of thirds” that relates 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:

 

Rule-of-thirds-Web-Graphic-Design-

 

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.

Web-Graphics-Design-Negative-Space

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.

Related Article:  Graphic Design Resources September 2015

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.

 

Web-Visual-for-Advert

 

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.

Website-Graphics-effects
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. The operative words for any design must be the following: brand consistency, demographic of the target audience, and ease of user experience. Visitors want a visual appeal, but they also want enough simplicity to determine the value of what they are viewing.

 

Looking for a Professional Graphic Designer?

 

Learn More about web graphics

Related Posts
16 Web Design Trends in 2017 to Refresh Your Website 2017 is already here. This means that it's high time to think about updating our websites with style.Every year, new technologies and innovations ...
Where to Find the Best Graphic Design Jobs If you trying to find the best web or graphic design jobs available, there are more opportunities than ever before online. It doesn’t matter if you ar...
Flat Design & Skeuomorphism Software, apps and user interfaces have recently focused on a flat design and minimal approach, in a significant departure from the 3D and skeuomorphi...

Leave a Reply

3 Comments on "7 Ways Web Graphics Can Make or Break Your “Look”"

Notify of
avatar
Sort by:   newest | oldest
Zomby Poet

The curse of business strikes again for some sites I have seen

Laurie Greene

Very informative post!! Interesting to learn about hierarchy and eye movement. Cheers!!

Scott Barker

thanks Stuart this is really informative

wpDiscuz