Sunday, Aug. 20, 2017

What Traffic Signs Can Teach Us About Design, Web Design and Marketing

Written By:

|

October 21, 2016

|

Posted In:

What Traffic Signs Can Teach Us About Design, Web Design and Marketing

Traffic signs and billboards are something that we notice without thinking about. They are right there delivering their message and yet invisible. Hence it’s not conventional to draw marketing and web design insights from them.

Billboards are boring, bland, they’re eyesores—that’s why it’s ludicrous to use these as a source of inspiration…

But let’s consider the areas where traffic signs get it right. They’re hugely succesful in the following design areas:

  • delivering information quickly. At 120km/h (75mi/h), a traffic sign can still convey the message “Speed limit: 120km/h” to passing traffic.
  • brevity. Traffic signs don’t contain extraneous information. They have one single clear message.
  • eye-catching but not distracting. They catch your attention but don’t hold it.

There are ways where each of these attributes can apply positively to web design and marketing. Here are some of the things yours truly has learned from signs from being one of the people who actually looks at them for more than just a second because he is a nerd who is into design………

Have Few Extraneous Details

One of the reasons why minimalism is so popular in real life (money-driven) design and not just hipster Tumblr’s is that it makes the message stronger, clearer, more attention-catching and more ‘gettable’.

Consider old-fashioned advertisements like the one below. What is the advertisement trying to say? What the heck is actually going on? Imagine driving down the freeway at 120km/h and seeing that on a billboard. You wouldn’t even notice the brand name. To really get the message (messages) of this advertisement, you have to stand there and read it, maybe twice.

old-fashioned-advertisement-maximalism-detail

This is an area where advertisements have come a long way, and modern day advertisements like this one are much better:

billboard-advertisement-modern-minimalism

The message is just two words (verging on one). The brand name isn’t even stated in the large text, only the image. Images are more rapidly processed by the brain. There is no background. What a difference.

Advertisements like these have evidently been designed for billboards, and its a positive effect of our car culture that even non-billboard advertisements have simplified to such an extent.

Life is faster now, and the advertising-space is more saturated, so advertising should be designed to be more like traffic signs in this regard.

Likewise, websites should be designed to be more minimalistic. Considering the vast rapidly growing network of websites—many of them just like yours, web users are becoming increasingly less patient with websites that waste their time getting to the point. They are also getting more superficial with their Judgments and more likely to click away just based on your website’s appearance.

Guide The Eye

By now you should be realising that despite their simplicity, traffic signs have been meticulously designed for easy, quick, unconfused viewing at the speed of the highway. This is why they are a good source of inspiration. And one way that they do this is by guiding the eye directly to the message.

Traffic signs understand where people look when they look at a sign or any visual composition. This is knowledge that originated in the art world, and is based on very basic human psychology.

Vector Lines

The eye follows lines. It likes to be guided places rather than take random routes from one thing to another. Why? It looks for ways that things are connected in order to piece the world together.

This sign used the vector lines of the arrow diagram to guide the eye to the labels:

traffic-sign-vector-lines-composition-design

In advertising and web design, vector lines can be created quite easily in the following ways:

  • background images. If an image background is used, vector lines on the background can be positioned to point to important parts of the foreground. E.g. a tree canopy vector line in the background can line up with the tagline of the advertisement.
  • text orientation. For instance, centered text orientation can create a vector line that guides the viewer’s eyes down the webpage to the call-to-action down the bottom. Right-orientation of an object at the bottom of a webpage can point to the ‘Next page’ button.
  • table formatting. (‘Table’ is used metaphorically. Tabular CSS3 formatting has the same effect.) When objects line up, it guides people’s eyes across to their inline counterparts.
  • left-to-right reading direction. The ‘default’ eye movement you could say (for most people in the world) is left-to-right. Vector lines that follow this will meet less resistance.

 

Framing

But how does one use vectors to guide the eye to the middle of a piece? If lines from all over the sign pointed inward to a central point surely that would look too busy, over-the-top and distracting. The answer is framing. Framing involves the far less psychedelic technique of blocking out the area around your subject (the message, brand logo or product usually). This makes the subject seem to ‘pop out’.

Here is an extreme example of framing in a painting:

framing-composition-painting-design-art

Framing isn’t always this obvious. In fact it’s used so often that you’ve probably never noticed it. (Framing with trees, framing with light, etc.)

Here is a typical traffic sign. Can you see how it uses framing?

traffic-sign-framing-design-tips-speed-limit

The “60” message is surrounded in whitespace and also a red circle. These direct the eye to the “60” at the center and indicate that it is clearly the subject of the sign.

You may wonder: why have a red circle? Isn’t it just extraneous detail? Why not just use all whitespace? There are three reasons why the circle is a positive and not negative addition:

  • it visually centers the “60”. It works as a visual guide, making it very obvious that the number is in the center.
  • it doesn’t distract from the subject. It is an extra detail, but not one that competes for attention with the subject. The effect of framing creates a visual hierarchy where the subject is far superior to the object that frames it.
  • the colour red catches attention. This will be addressed in the next section.

 

But firstly, how can framing be used in websites, design and advertisements? The two obvious answers that go for all design mediums are: margins and borders. Margins from the edge of screen to container, from container to content, from etc. to etc. everywhere are almost always a good idea. Borders are more powerful but for the same reason sometimes too distracting or unattractive. They look good when used like on the “60” speed sign, not on the Christmas invitation your boss sent you with a Word 2003 holly image border.

Purposeful Use Of Colour

If there’s one word to describe traffic signs, it’s ‘purposeful’. Every part of them has been designed in mind of the fact that a small shortcoming will cost lives. So of course, the colours were chosen very precisely.

Take a road sign like this:

road-sign-colours-design

All major countries have road signs like this. Some differ in certain colours, but all have a colour scheme of the following format:

  • background colour. Non-distracting from the road or the content of the sign. Often colour-coded to indicate the type of sign. E.g. Australian speed signs have a white background whereas the direction signs have a eucalypt green background.
  • content colour. For the text and arrows of the sign. Usually white or black. Noticeable but not emphasised.
  • highlight colours. Most colour schemes have two degrees of highlight: yellow and red. Both emphasise their content above that of the rest of the content to really draw attention.

 

This kind of colour scheme is not just a traffic sign innovation. It is a format that can be applied to many advertising schemes and websites. Say you have a tri-coloured brand of purple, orange and white (FedEx). When designing your website and/or advertisements you have the decision as to how to use those colours. White is the obvious background colour. Then you could use orange for one type of courier service you offer and purple for the other (and use bold or other techniques for emphasis). Or Orange for content, purple for highlights, etc.

Your websites, advertisements and other designs don’t have to be as meticulous, purposeful and functional as road signs, but they can certainly take something from them. The precision and near-perfection of the road sign in its single-minded simplicity is something that hopefully you can appreciate next time you see one (as a pedestrian not on the freeway we emphasise).

Share This Article

Related News

When The Robots Take Over, They Can Just Have My Job
Animals That Have Done Bad Things In Their Lives
10 Weirdest Jelly Recipes

About Author

Leave A Reply

Leave a Reply

Your email address will not be published. Required fields are marked *