Billboard Web Design: How To Win Your Audience’s Attention

Advertisement

Let’s say you’re driving down the freeway at 65mph and you see the roadside plastered with advertising posters on both sides. Some small, some large, all meant in some measure to cause you to remember a brand or identity, to keep that company name in your mind. The more saturated the roadside becomes with advertisements, the more the brand has to be distinctively creative, unique and memorable.

Generally, the eye-catching ads are mostly the ones with witty taglines that are easy and fun to remember. As much as the colors of the images and fonts being used are important to make it easy on the eyes, the idea actually has to be unique and simple enough to be separated from other commercials.

billboard_mainimage
Photo credit: Randy Harris

The same principle applies to any website. Though a user won’t necessarily be passing by your site at 65 mph, there is a certain bounce rate — visitors who leave your site shortly after entering it. For many websites, these rates are much too high. This poses a very similar challenge to those who design billboards. You have a very short amount of time to capture your audience’s attention and to keep it for long. With that in mind, here are some principles for developing billboard-style Web designs.

Creative And Unique

An important piece to the billboard website puzzle is creative and unique design. This can be intertwined within the other principles, and when done effectively, can be the sole reason for viewers to dig deeper into your site.

Hey Indy
Creative and fun, heyindy.com breaks the mold of an ordinary, plain and boring website. Complete with customized illustrations, drawings and playful typography, each page engages users, making them feel comfortable on the site. Notice how well the illustration on the top fits with the tagline of the site. Hey Indy creates websites, illustrations and animations and uses the “mixtape” metaphor to attract client’s attention. The site is not obtrusive, but inviting instead. A very personal, attractive design.

hey indy

Dropr
This online service uses a nice typographic poster with playful typography on the front page to explain what it does. The design is attractive and inviting, although a plain simple text message could have worked just as well to deliver the message to the visitors. The interesting part are the animated clouds on the left side with colorful water drops. Very nice use of metaphor contained in the title of the service. An original and unique design.

ndesign_studio

TVLCORPs
Interested yet? Though the tagline shown on the web design below does not really say what this company does, the layout is creative and compelling; the strong, vivid contrast is more than enough to turn some heads. Notice how “UX/UI” stands out on the site, focusing the visitor’s attention on the ‘services’ section of the page.

{ ro:newmedia }
Sometimes it’s a good idea to risk an unusual design approach — be it exaggerated typography, striking color combinations or unusual design layouts. The latter is the case in point for ro:newmedia’s website. The layout is very unusual and original, and therefore memorable. Colorful large spinning circles look like an overlay of the site layout and appear vividly against the dark background. A downside: the font size of the text on the page could be a bit larger.

ndesign_studio

Pixelmator
Much different than the standard, pasted screenshot, Pixelmator works the sleek, elegant interface of their application directly into the design of their page.

pixelmator

Relogik
What makes this particular site effective is its ability to draw the eye to the name of the product or service they are showcasing. In this case, it works well to give the company name an afterthought as well as making the product more prominent.

relogik

Made My Day
One more test to run is to assume how much impact a particular site has on a reader, if they were to take a quick glance and look away. Ask yourself: If you were to carry out your day from that point, what were you to still remember about that particular site? The large orange circle elegantly integrated into this composition does an excellent job of leaving a style for returning visitors to remember.

mademyday

Compelling Headlines

A good design only goes as far as the content it contains. For this reason, it’s vital to go beyond average with your copy text. If you’ve seen a billboard advertisement or two, you may remember the tag lines featured on them. Short and to the point, they’re meant to get you to remember a certain brand.

Many large corporations don’t even use ad copy, but rely solely on their logo and identity to remain effective. One has even gone as far as making their billboard a working sundial in this respect. Though we should all aspire to having a brand of our own this influential, it’s recommended that you stick to clear and powerful copy text along with your design to help capture your readers. Here are some examples of compelling headlines:

Ryan & Sofia
Ryan and Sofia combine hand-drawn design elements with a compelling headline, all supported by a very informal, emotional language and choice of layout. The message is strong and clear, and therefore very appealing.

Wedding

Comwerks Interactive
This design agency uses a clear and simple language to communicate the purpose of the website. Cute illustrations make a website look less formal and much more engaging. The purpose is clear and the client list immediately proves that the design agency indeed builds cool stuff. A downside: the text on the images in the slideshow would benefit from not being embedded in the images.

jeroenhoman

Camera+
Clear, contrasting colors only add to the effectiveness of the headline given on this website. In a clear and elegant manner, a reader is quickly able to glance at this website and know its purpose.

camera+

Just Dot
Sticking to the billboard clarity, Just Dot provides a clever design and tagline to attract readers. Along with a creative chalkboard theme, this site features neat and clean navigation to help guide readers through the site.

Jeroen Homan
In clear and impacting typography, this site screams out its purpose distinctly. In today’s fast-lane crowd of web-surfers, such clear and impacting titles are a must-have for a captivating and inviting website. This of course, is the case as long as the amount of content allows for this.

jeroenhoman

DBA Products
An important part of capturing your reader’s attention is in engaging in a conversation. When one reads, “Think before you write” a first reaction is to wonder about what is actually meant by that phrase. Firstly, attention is captured. Secondly, a reader eye is lead to the bottom left corner where they can view a video to learn more.

dba_products

Clever And Poignant

Not every billboard is meant to be humorous, however, almost all strive in some way to get a point across in a not-so-ordinary fashion. Consider the last few advertisements you’ve seen. If they were selling toothpaste, did the ad simply state “Buy this Toothpaste” or was there something creative and direct to get you to remember that particular brand?

In Web design, the same principle can be applied. With the hundreds, if not thousands, of websites we’re exposed to overall, trends can be seen which are all too often followed. But because the Web is ever changing, simply following trends can lead to a site becoming outdated the moment it’s published.

How can this be avoided? Once again, we can look back at billboard advertisements. What makes many of them effective is their ability to deliver something creative, or other than what the average person was expecting to see.

Tea Round
Complete with high-quality images, Tea Round’s website captures attention, while incorporating a creative tagline.

tea_round

Spring: Supporting Biodiversity
This particular tagline is effective because it engages you with a question. Notice how the question is not “Do you support biodiversity?” but rather “What will you do to support biodiversity?” which places the reader in a position to feel as though they need to take action!

spring

Tapbots
Another element to creating memorable billboard-style web designs, is the product or service itself. Short and snappy names are just as, if not more important, than the tagline. “Calcbot” is much easier to say and much more memorable than something like “Calculator Application for iPhone.”

tapbots

Pointy
Featuring a vibrant color scheme and typestyle, Pointy successfully merges creative typography with a compelling and challenging headline. Along with the headline is a clear next action for the reader to take: “Let’s talk”.

Powerfully Branded

Though it’s already been touched a bit thus far, branding is another important piece to powerful Web design which deserves further attention. As with the toothpaste example, a billboard’s purpose may in the end be to generate sales, but just as important is the building of the brand the company is advertising. After all, you can get dozens of different brands of toothpaste, just as there are a multitude of of websites out there, so how is one among the crowd to be remembered? Building a brand through a Web design is the very mark or entity visitors remember you by.

Nike®
Showing the importance of subtle repetition, Nike® combines a creative display of their shoes, while giving viewers multiple views of their logo.

nike

McCafé®
With every cup featuring the McDonald’s® and McCafé® logo, a viewer can be grabbed by the quality of the product, while remembering the brand correlating to it.

mccafe

Coca-Cola®
The Coca-Cola&reg website is a billboard in action. Complete with the clean logo and bottle, with the clear and simple tagline, the brand is very easy to remember.

cocacola

What Does a Brand Have to do with a Website Anyway?

Even if the website you’re developing doesn’t have the sole purpose of making money, a brand is still very important. Brands are essential for goading visitors to come back time and time again. Consider some of the recent advertisements you’ve seen. If there is a company you know and love, would you say you’re much more apt to spend time looking at that advertisement, as oppose to the dozens of others you’ve never seen before, or the ones that don’t interest you? The same applies for websites.

Eye-Catching, Yet Tactful

There are countless sites on the web that will undoubtedly catch your attention, but only for the worse. Poor, outdated design, or a heap of flashing animated gifs will only increase your bounce-rate. Appealing sites achieve a balance between capturing reader’s attention and providing an adequate amount of useful information. Something to keep in mind: the design is a key piece of your website, but if it distracts away from the aimed content, it no longer serves its purpose!

Megumi
With jaw-dropping elegance and simplicity, this web design effectively brands their name, gives a brief tour, all while keeping the design clean and clear.

MailChimp
MailChimp’s website design is bold and clean, and it sticks to a consistent color scheme. Bright, complimenting colors are used while making the main content readable.

mailchimp

Row to the Pole
Still retaining a subdued and clean typestyle and color scheme, this site is still able to feature a commanding headline. Communication, clarity, and balanced design are all utilized exceptionally on this layout.

Clean, Simple And Straight To The Point

Of course, one of the options is also as simple as simplicity. Not to say we cannot be creative in our delivery, but a saturation of text and images, especially on a home page, can motivate our viewers to click that back button! Here we’ll take a look at some good billboard-style websites that have captured the essence of simplicity to attract readers:

Less
Less has a clean and well-designed interface. Complete with a clever tagline, this application shows you a screenshot of exactly what they’re offering to you. It doesn’t get much clearer than this.

less

Courier Mac App
Complete with a well crafted icon, Courier clearly depicts their application with cool, soft colors, yet elegantly displaying the showcased application. The catchy subtitle also assists with remembering the name. Something to take note of as well is the fact that the “download” and “purchase” buttons are clearly displayed at the top of the page.

courier

We Are Omazing
With a simplistic approach, this site integrates the imagery and style into the tagline. Branding is in effect as a memorable name is complimented with readable design.

Clarity And Contrast

Pivotal to any design, good contrast is a must. While subtle typefaces and graphics have their place in design, strong contrast is important to quickly direct a reader’s attention or get them to remember something particular. If viewers have to hunt around for what you do or what you offer – more than likely they will not stick around for long. Make it easy for your readers to know what you’re about from the very beginning.

Charles Elena
Don’t be afraid to go big with your text. This site sports an effectively large Sans-Serif font to grab the attention of its readers and to get them to remember what they do. The design isn’t necessarily strong and vivid, but the message is communicated very clearly.

Charles Elena

Live Books
There are many different features listed on Live Book’s website, but one thing that’s executed exceptionally well is its clarity. There’s no mystery here, you know exactly what they offer.

Screenshot

Conclusion

In an age where advertisements saturate our market, it becomes all the more visible of the need for creative and effective design. As we’ve explored here, good design goes beyond making things look nice, or following trends, but rather effectively capturing the audience of those whom we wish to view the site. In the end, what action viewers do, or do not take, can come down to the finest details of the decisions made by the Web developer.

Feel free to share your opinions or experiences in the comment section below!

Bonus Billboard Template Download

In addition to the concepts explored here, you can download your free billboard website/image template for displaying your billboard-style design. Place any 440px wide image into the code provided, or modify it yourself for a great way to display your images. See some samples below:

billboard_temp
smashing_billboard
smashinglogo_billboard

Download the Template for Free

(ik) (vf)

↑ Back to top

As a graphic designer at WinePress Publishing, Thomas enjoys helping authors publish their book with the finest quality. Aside from designing for WinePress, he writes regularly for WinePress of Words, an online magazine dedicated to writers. Feel free to connect with him on Twitter: @ThomasDesign

  1. 1

    Make it scream and be the FIRST! Thanks for the article.

    -26
  2. 2

    Very nice collection and download! Thanks for sharing!

    3
  3. 3

    good article …. thanx :)

    0
  4. 4

    How fitting — I’m a web designer who also happens to be responsible for designing a large outdoor ad campaign (billboards, etc) :)

    It can be a beautiful thing when these two approaches mesh well — and in my experience, very difficult to pull off! Kudos to those in these examples who have managed to do such a great job of it.

    1
  5. 5

    Plaudit Design (Minneapolis, MN)

    October 28, 2010 6:29 am

    Thanks for the inspiration. Its always good to be reminded of the importance of clear design. … And I absolutely love the relogik site. Very cool. The simplicity and slightly unique spotlight made me click through to it immediately. Very cool stuff.

    0
  6. 6

    Really AWESOME and USEFUL article! Thank you!!!

    2
  7. 7

    Interesting links as always: the DBA site navigation is fascinating and I really like the downloadable billboard. Now if you could just all of the “its” and “it’s” usages correct we’d be off and running.

    2
  8. 9

    Yeah ah. Say it Loud and simple.

    0
  9. 10

    Actually, I’m astonished by the similarity of WinePress website and SM website… Seems like the same template was used as a start… Is there any partnership between both sites ?

    0
    • 11

      Hi Charles,
      No partnership between the two, just a similar style. WinePress of Words is a site more for writers whereas Smashing Magazine is for designers and developers.

      0
  10. 12

    Awesome collection! I’ve always been amazed by the endless possibilities that can be accomplished on a 2D medium like a piece of paper, and also a website.

    1
  11. 13

    Good article, many good points!

    And I discovered that http://www.emprivo.com has used our graphics from http://www.maksimer.no thx for the link ;)

    0
  12. 14

    Ryan and Sofia

    A website designed by Ryan Northway himself, the graphic designer for Fluxar Studios Inc. Ryan decided to take a different approach to raising the money for his wedding. These were the results. Fluxar Studios has been working hard at getting worldwide recognition and we’re hoping this allows others to see what we are capable of. We take pride in what we do and we appreciate Smashing Magazine taking the time to review Ryan’s website.

    A special thanks to anyone that has contributed to Ryan’s cause and thank you again Smashing Magazine from the team over here at Fluxar Studios.

    We <3 Smashing Magazine and it is a daily read here in the office.

    Silas Sao
    Web Developer, Fluxar Studios

    0
  13. 15

    Hmmm. These leave me cold I have to say. Here’s why.

    They feel like a parade of printed art boards. They don’t seem, to me any of them, to be made for folks who want to use a website.

    I feel they are using an old paradigm of size based, even now, ll on print media (it just happens that screen size has caught up approximately with paper sizes.) But none of the designs are scalable to smaller (or larger) devices, nor can one imagine how the design extends beyond the front page.

    In summary, I think this style is as dated now as the old flashing text and patterned background was only ten years ago. Let’s move on!

    1
    • 16

      “In summary, I think this style is as dated now as the old flashing text and patterned background was only ten years ago. Let’s move on!”

      — Well said, Let’s move on!

      -5
  14. 17

    Thomas,
    Your article is as impressive as your Winepress Website. All the best for your ventures.

    2
  15. 18

    YEAH! Great article. I’ve been a proponent of this approach for a while!

    Sure, it’s not applicable to every design situation, but a site visitor simply cannot ignore the message – they’re forced to contemplate it, whether or not it resonates with them on an emotional level.

    Another good example: http://onestopmobileapps.com

    1
  16. 19

    Love these informative design articles, keep them coming.!

    1
  17. 20

    Thank you so much for including RoNewMedia in this collection. I’m so happy to have my work here. Great article, btw.

    Regards,
    Adrian Rus
    creative director at Braintuitive

    2
  18. 21

    Indeed; nice collection.

    3
  19. 22

    Laura Christianson

    October 28, 2010 4:39 pm

    Nice work, Thomas! Lots of ideas to inspire here.

    2
  20. 23

    Jon Ivee Hernandez

    October 28, 2010 5:25 pm

    Nice designs.

    2
  21. 24

    All posts are nice but “We Are Omazing” this site is gr8…. :)

    0
  22. 25

    A nice collection of visually well-designed sites.

    Even better, by checking out the {less} site, I discovered .less – a great new tool for working with css that I hadn’t previously heard of! Fantastic!

    Thanks for putting this collection together.

    1
  23. 26

    Dreams. Done. Thanks to smashing magazine.
    -TVLCorps team (www.tvlcorp.com)

    2
  24. 27

    Great Post! :))

    I did a billboard design a few months ago – works a treat for the right client – check it – http://designerscouch.org/view-design/Marketing-Design-Idea-and-Concept-18387

    0
  25. 28

    Houston Web Designer

    October 29, 2010 12:23 am

    hey the tacts mentioned here are eye opener. the headlines should be simple yet tactful. as well as the design and the colors should be eye catching.
    The text written should be very simple and straight forward.

    I learnt a lot from this article. Thanks for sharing!!!

    Web Designer Houston

    0
  26. 29

    Very good collection. I like ‘TVLCops’and ‘Dropr’ under creative and unique! :)

    0
  27. 30

    Excellent Work. Thanks for sharing.

    0
  28. 31

    Here is an eye-catching portfolio site: http://crackpixels.com. We recently hired this company and loved the outcome.

    -4
  29. 32

    Genial el artículo, muchas gracias!!!

    0
  30. 33

    Some awesome ideas here! The people are highly creative and it really shows in their work. Would definitely buy some of it if they’d put code etc up for sale on DubLi!

    0
  31. 34

    Satish Chathanath

    October 29, 2010 9:23 am

    Search engines wants to make the searcher happy. Searcher wants clutter-free, easy to navigate and relevant info in digestible form. Smart search engines with smarter algorithms can spot cluttered sites easily and probably penalize them (allot lower rankings).

    1
  32. 35

    This is great…keep more on these creative resources coming!

    0
  33. 36

    *“Calcbot” is much easier to say and much more memorable than something like “Calculator Application for iPhone.”*

    I disagree. The “lcb” is not very easy to pronounce and therefore won’t be travelling very well…

    0
  34. 37

    Great. Thank you Mr.

    0
  35. 38

    Great article. I’d not framed these type of websites as such.

    Given the rapid pace web browsing can take, billboard imagery viewed when whipping by in the fast lane is an apt comparison. Give’m something arresting immediately; before leading them into the more subtle nuances and deeper content…

    Wonderful examples provided to back-up your thesis, too. (I’m enamoured with the Row to the Pole and the Hey, Indy sites).

    You’ve given me some valuable tools for future projects, here. Thank you for this!

    0
  36. 39

    All these big and bold websites look great, but it seems to me that the best way to go would be a design that can adapt to different resolutions / devices without too many drastic layout changes.
    these seem to be in the fixed width, centered category that is starting to be outdated in today’s environment.

    0
  37. 40

    Thanks for the resources and the great article. Love your attention to detail. Nice work.

    0
  38. 41

    The one that is missing is the one from a commenter:

    Rik Hopkinson ……..your design gives what the title of this article say’s.

    Exelent work.

    0
  39. 42

    hey smashingmagazine, i’d pull you’re emprivo.com praise from this article considering they ripped off those illustrations from another site… http://www.theplant.jp/en/ …whoops!

    0
  40. 43

    I actually love these types of useful posts and really glad I found it and read it! Thanks for the time and effort put into this!

    0
  41. 44

    Well, no one will probably see this advice since it is buried, but a couple of decades ago I learned that a billboard should be 5-words of less. 7-words if you absolutely have to but it is considered a fail if it is.

    I commend the article for merging these two ideas together – Of course! It’s so obvious and I feel I learned something very important.

    0
    • 45

      Hi Tony,

      These principles still hold true today. Some are able to break this rule, while others rely on nothing but imagery, their logo, and brand. There’s much to learn from the billboards and advertisements which have been used over the years. Glad you enjoyed the article!

      Thanks so much,
      Thomas

      0
  42. 46

    Just Dot!!! simply loved it!! :) GREAT ARTICLE!! KEEP ROCKING!!

    0
  43. 47

    What is the font face used in the title picture “Billboard Web Design”?
    Thanks

    0
  44. 49

    This billboard template lacks a shadow on the “legs” from the billboard itself. A petit fail :)

    0
  45. 50

    I would like to may be seen you some of my websites that can swap you is honestly appealing. These are novel things on the network and so have show with us with their assessment. It is jargon upright compelling to me, so I hanker after you to be forgiving. The excel of these is definitely the implanty, implanty I goal that you reason like it there too much like me. Best wishes!

    Jeamnerma

    0
  46. 51

    Mmmm Courier is new to me! Like the style of the webdesign and the application is great! Easy and fast!

    0
  47. 52

    i really love the article….(i read it all over again)
    keep it good…
    more power…
    all the solutions of my unanswered question is right here..
    thanks much…. :)

    0
  48. 53

    These are great tips! I love the additional resources as well!

    0
  49. 54

    I did enjoy reading this thanks a lot. I liked these three subjects more :
    Creative and Unique
    Compelling Headlines
    Clarity and Contrast

    0
  50. 55

    Do you think that CMS is better to use these days as opposed to html or even php?

    0
  51. 56

    thanks

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top