Stop designing websites, start designing posters

A new generation of websites are emerging that look less like websites and more like posters. They are easy to use, visually engaging and most of all different.

Sometimes I think I am deeply conflicted. On one side I am always going on about how print is not like the web and web designers need to stick to conventions.

On the other hand I feel inspired to be more creative in my work and take some risks. I am bored with the same old approach to websites.

In one recent post I wrote:

Too many websites look the same as their competition. If you want users to remember your site it needs to stand out from the crowd.

How then can we be different and yet still ensure our websites are usable?

Looking to the poster for inspiration

One way to remain usable and yet be different, is to look for inspiration beyond the web. For example, look at print designs that have to grab people’s attention and communicate a lot of information quickly.

One example of this is printed posters.

Posters have to be:

  • Visually attractive in order to grab attention.
  • Easy to take in at a glance
  • Provide more information to the more interested reader

In other words they need to be…

  • Engaging
  • Usable
  • Scanable
  • Have a clear information hierarchy

Sound familiar? Websites face exactly the same challenges.

Take a look at these posters below. Each is visually striking, provides key information first but has additional information for those interested. This is how we should approach web design.

DJ Andy Smith Poster

Art Attack 2006 Poster

Paris Je Taime Poster

Animals are not clowns

Morgellons Disease

Urban Typography

Using poster design on the web

You maybe looking at these and wondering how this approach can be applied to the web. After all, they don’t have much in the way of content.

Setting aside the fact that most websites have far too much content and need to be simplified, it is not impossible even with more content.

In fact a lot of web designers have already taken inspiration from poster design. Here are just a few from my inspiration library.

Flourish Web Design

Flourish Web Design

Groovy Web Design

Groovy Web Design

Kitschen Sink

Kitschen Sink

Samsung

samsung

Lana Landis

Lana Landis

Finch

FINCH

Carsonified Events

Carsonified Events

Noel Design

Noel Design

Personally I find this new generation of websites encouraging. It demonstrates an advance in the aesthetics of the web without undermining the principles of usability.

These designers should be commended for their desire to push the boundaries of traditional web design and for looking beyond the web for inspiration. They should be commended for rejecting the myth of the fold.

What about you?

So have I inspired you? Do you think that we can learn from the print design world or are the two worlds too different? Post your thoughts in the comments.

  • http://www.pixelflips.com Phillip Lovelace

    Really enjoyed this post. Those sites are awesome for inspiration and boy they do look like posters when you shrink them down so you can see the entire site a once.

    Nice one Paul, great read!

  • http://www.houseofcat.net Cat Johnson

    I love it. What a great connection to make, and so very true. There is a place for grid layouts and info-deep home pages, but for a lot of web users, a nice, eye-catching design, a spacious layout (to rest your eyes from all those horrible sites) and some easy to find information is a jewel in the rough.

    Thanks for the thought-provoking, visually inspiring post!

    • http://jeffbridgforth.com Jeff Bridgforth

      I have been thinking about drawing inspiration from poster design as I see more and more of Mike Kus’ work. I really like that he brings in an aesthetic quality from print that can often times be lacking in design for the Web.

      Thanks for the inspiring examples of Web designers who are taking away ideas from poster design and making beautiful and usable Web sites.

      • http://www.replete.nu Phil Ricketts

        Yeah, Mike has a nice style! At the pub last night (after he decided to give me a pair of 3D glasses) I asked him about his process, and was quite intrigued by his different (than typical web design) ideas. Inspired me to go back to the roots of graphic design, and forget those rules we often design around.

  • http://www.rappsodystudios.co.cc Joshua Rapp

    I couldn’t agree with you more on the subject. I believe that if you design in the mindset of a poster like design, the end result will be that much more amazing.

  • Drew

    I would say the only caveat is that posters are meant to be taken in as a unified whole by the eye, whereas a web page is most often seen in horizontal strips and rarely all at once. Posters have the luxury if large open areas without any content, which on a website would leave the user to scroll around looking for the info.

    • http://headscape.co.uk/people/boag.html Paul Boag

      Absolutely agree Drew. I wasn’t suggesting there was no differences.

  • http://swbates.com Steve

    Paul, this blew my mind. Excellent article, and I think its a concept that allows for a lot of creativity while still keeping an orderly and usable layout

  • http://inteldesigner.com Kevin Dees

    I recently posted on the same thing. I feel that the web design is slowly moving away from innovation and creativity. I also watched Adaptive Path talk some about creativity on Vimeo recently too. Soon after a read Purple Cow and it inspired me to write my post… we need more innovators and we need to explore new ideas.

    http://www.adaptivepath.com/blog/2009/11/20/the-wonderful-world-of-make-believe/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+adaptivepath+%28Adaptive+Path+Blog%29

  • http://www.edgarleijs.nl Edgar Leijs

    Hi Paul,

    This post really writes my thoughts! Poster design got me recently and it’s truly useful for webdesign.

    If there will be a 2010 webdesign trend, this will be definitely a big one!

  • http://www.claudia-klinger.de/digididary Claudia / Berlin

    The Websites look reeally nice! But Blogs which I visit for reading the content would loose me as a frequent surfer. Such webdesign binds to much attention to itself, it appeals to the emotions allways in the same way. It soon gets overwelming and boring for people which comes for concentrating on a certain content.

    And if it should be “poster like” only on startpage: Didn’t we throw away the so called INTRO PAGE few years ago for more usability and fewer clicks?

  • http://www.designbyadmiral.com/ Doug S.

    There is a part of me that loves the aesthetic quality of these website that buck the fold and just design a beautiful, clean layout but there are some problems with the approach.

    (1) Yes, there is no fold. But there is a window. Users can only see a certain amount of the website at a time. While your website might look great if you look at it as one big piece, as you would a poster, when you come in and only view what can actually be seen on a monitor it loses some of that. A common problem I ran into when I tried to make a design like that was everything looked great when I zoomed out but when I zoomed in everything was too big and instead of being elegantly balanced it was all over-powering.

    (2) Sometimes it’s impossible to simplify and drop content. When you can, great! But it can’t always be done and a lot of the designs you’ve shown are content light. They’re great for business-card style web sites and sites that aren’t as content-heavy but sometimes it’s impossible to do in the real world.

    Besides, I still maintain that people still keep equating web work to past mediums (not just print) far too often. It draws from those old mediums but it also transcends them.

    For example, I’m redoing my resume and instead of giving people a PDF I’m going to make a more interactive resume that feels more like a web page and less like a printed document. (Of course, there will be a printable version.)

    • http://headscape.co.uk/people/boag.html Paul Boag

      Totally agree Doug. I wouldn’t disagree with any of your points. However, there is still a lesson to be learnt here. I believe it is a direction we should be moving in, not one we should adopt blindly.

  • Ben

    Great post Paul!

    I’m in a similar situation – I’m all for usability and content-is-king, etc, but I’m finding myself increasingly attracted to sites that do things creatively like this.

    Have you seen thebolditalic.com? It’s a magazine style site that designs each article differently. I find it much much easier to absorb the content of an article in that format than if it was in the traditional “web” article format – a slab of text on a white background.

    If we do it carefully, there’s a lot we can learn from print design.

  • http://www.dualbrain.net Benny

    Amazing designs! I didn’t know there was a trend using poster design techniques for websites. An eye opener for me.

  • http://jonasdiego.com Jonas Diego

    Very interesting poster designs. Inspiring indeed. Your coder is going to hate you but your audience will most probably love you to bits. :D

  • http://www.amdzines.com/ Abhilash AM

    Liked the post very much. It is really very inspirational. But do this designs help much when people prefer good SEO results? I mean the designs which are mainle design oriented and have less contents?

  • http://twitter.com/freewara Te Freewara
  • http://microbizmadesimple.com Ed Martin

    I loved tne poster sites from a creative point of view, but from the common usability site, not so much. A site that intends to dazzle with its creative approach will work if that is what the message is or it’s what the users expect. But they fail for sites where people come looking for information or to purchase something. Posters work will for concerts and exhibitions, but not for grocery store ads.
    Thanks for interesting article.

  • T

    Good article! Finally someone is writing about it. I’ve been fighting my bosses & programmers forever to make sites like this. Now it’s officially coming to a website near you. Haha! Thanks.

  • http://www.thethingswemake.co.uk Mike Kus

    Inspired thinking indeed, Paul ;)

  • Robin

    Nice read, Paul. I didn’t realize until I saw your tweet that this is exactly the move I’ve been making with my last couple of designs – adapting some poster styling into how I put the main design together. It’s been a really useful way for me to re-think usability and IA rather than just do the same-ole-same-ole just because it’s easy and that’s “just how it’s done.” It’s really opened up some fun new directions for me.

    • http://tr.im/mewC Rahul – Web Guru

      Lovely… just too good for inspiration :)

  • Miles Fidelman

    I disagree completely. Posters are static – intended to present information without interaction. Web sites, by contrast, are collections of interactive information – the goal is to make it easy to find what you’re looking for. NONE of the examples given make it easy to figure out a next step.

    The classic Google interface, by contrast epitomizes functional web design.

    • http://www.well.com/user/hendrix PunkToad

      What everyone has been waiting for, the interactive poster.

  • http://mikeycampling.co.uk Mikey Campling

    Yes – an excellent article. We should feel free to take inspiration from any medium, art form, product or aspect of the natural world.
    If the end result is a successful solution to a problem, then that’s good design.

  • Vittorio

    What tools do you use to create websites like this one?

  • http://www.amyhaywood.com Amy

    Lately, I’ve been struggling to find sites that inspire me, because you’re right, too many sites look like their competitors.

    I love the practical application of pulling in print.

    @Ben other examples of magazine style layouts are: http://jasonsantamaria.com/
    http://gregorywood.co.uk/journal/lets-drink-to-the-death-of-regret/

    In fact, Smashing Magazine wrote a blog post (The Death of the Blog Post) earlier this week about this trend:
    http://www.smashingmagazine.com/the-death-of-the-blog-post/

  • http://www.instinctmedia.in Rushabh Vasa

    this is amazing concept for all the designers and also it could be a great business generating tool too.
    and this is emerging trend and the right time to get into.

  • http://www.squiders.com Website Design Maidstone

    Some great examples and certainly food for thought… I shall wait for the right client!

  • YonYonson

    This is so refreshing to read. Pared down content and an emphasis on the visual can convey the message just as well if not better than pages of dry text. Could this provoke a resurgence in Flash sites I wonder?

  • http://www.rockcreeksm.com Dharma

    Great post!

    We just completed a recent project where we tried to incorporate the idea of a poster metaphor:

    http://guardfitchallenge.com/

    Hoping to see more of these!

  • http://www.riverhunt.org River Hunt

    Thanks for a really inspiring article, it makes me want to start designing some posters right away! Great examples too, there are some wonderfully designed posters on show there, and love the integration into the websites. good job.

  • http://www.intelligaia.com cheena

    It is very interesting to know that so many people have similar ideas at almost the same time…across countries…

    Just a few days back I mentioned this to my hub, we both are designers and operate out of India. It is a small world after all :)

  • http://www.xxxxxxxx.co.uk Rik Hopkinson

    Great article… Been thinking about these kind of ideas for a while. I find great inspiration in flyers and even museum/theatre booklets too. Why can’t we push the fold and make it our own??!! After all where is the fold on a 30″ monitor at 2500 k Rez Haha

  • http://www.srconcept.co.uk Stevie Reeves

    I LOVE THIS POST!!! I have been saying this for years, not really about poster designs but more about how loads and loads of websites are starting to look the exact same, in my own view “web 2.0″ started it all and along with 960 grid designing, creativity is restricted on the web… not everybody is… some folks are lucky enough to get a client who allows them to flow. With smaller SME companies they are more focused on being like someone else just because they have a successful website.

    I’v designed well over 300 web concepts now and more often than not, the big image, sexy poster based design gets put a side for the “i want every thing above the fold” design.

  • http://www.jannis-gerlinger.de Jannis Gerlinger

    The first Poster with DJ Andy Smith is very impressive. I like this style.

  • http://www.code.my dev

    i think the most catch eye design will be “Groovy Web Design”

  • http://www.tambourinecreative.com Rafael Cardozo

    Amen. Here is our approach with real world application.

    http://www.vacationstmaarten.com

  • Allan

    Splash pages are soooo 2001.
    These are interesting portfolio sites, but most websites need to accommodate users that have actual goals; we need to design for those goals.
    None of the cited designs (with the exception of Flourish) say “here’s what you want to do, now go do it!” They are all exercises in Photoshop, apparently without thought given to why the user is there and what they might want to accomplish in being there. They’re like fashion-conscious people who look pretty, but can’t hold up an intelligent conversation about anything but their clothes.

  • http://www.darrenmcpherson.co.uk Darren McPherson

    You are always conflicted because it depends on the client and how they want to express themselves on the web.

    Poster designs are great if the client wants it.

    and

    Simple clean structured UI design if the client wants it.

    The problem that I face when print meets web, is that print designers still try and design a poster for an ecommerce site, where page heights have to be exact and the design doesnt allow for expanding content. And also (a project I’ve dealt with recently) every page has to look slightly different… lol

    Rant over.

    Like I always say, it depends on the client and the project. :)

    Great post, being more creative makes the job worthwhile.

  • http://www.liammaskelldesign.co.uk Liam Maskell

    Great Post extremely useful! Even tho web and print design are different you can benefit from being able to do both. I have came from a Print background although I am still very young age. This post has inspired me to make websites more like poster design well take elements from them anyway.

  • Sebastian Green

    Great Post, very useful.

    Im definitely going to try and look for an opportunity to design a site like this with a future client, or maybe even just make up a dummy design for my portfolio.

    I think this style of site would only for for certain clients though and only on certain types of websites. I cant image this being useful for a client that sells curtains and wants an e-commerce site. Or maybe just certain ideas and concepts could be brought across. The bold colours, big artistic fonts etc. What do you think?

  • http://meta-blogger.com Michael Hall

    i love the post and the inspiration, i suppose i need to go look up some tutorials on poster design now though lol.

    one thing do hate that seems to be a growing problem and just happened to me on this site is when you click on a link and get one of those dhtml pop-ins with more info but they ae so big you can get to the close button. worse if you scroll up and down they stay in the same place, and you have to full screen your browser just to close it. some site keep em small or they are pinned to the page so you can scroll up or down to get to the close button, and some will close the automatically if you click behind them.

    just saying.

    • http://www.linksforlunch.com Fransgaard

      That was a really nice and refreshing read.

      In many ways you could also refer to PPC/Banner/Campaign landing pages which often have this more poster-like feel as they have much less content to convey.

      Thanks

  • http://www.linksforlunch.com Fransgaard

    That was a really nice and refreshing read.

    In many ways you could also refer to PPC/Banner/Campaign landing pages which often have this more poster-like feel as they have much less content to convey.

    Thanks

  • http://twitter.com/Markdb_sem Mark Barrett

    Great post, I love your website examples and found myself looking at the posters and could clearly see the potential for a web translation.

    I have recently been trying to simplify my designs and try to make them pop, but hadn’t considered looking at posters for inspiration…I will now.

    Thanks

  • http://digitalscientists.com Bob Klein

    What’s old is new again?

    Great looking ‘poster-like’ sites, but I can’t resist asking about conversion. Argh.

    Can I have my cake and eat it, too?

  • http://isean.co.za Sean Nieuwoudt

    Very cool post Paul! I was thinking of web design in a similar light just a few days ago.

    Thanks

  • http://www.stevieblackcreative.com Socialamigo

    I love the poster designs and the site used for demo are good ones to inspect the creative plus and minus. The problem with the “poster-style” interactive design is that their reductivist & achieve their great visual results by leaving out the content. Samsung landing pages won’t have an issue with this, but the local piano teacher or a nearby real estate brokerage will – because they live on search – and organic search needs content.

    Still, there is a middle ground and application that are better for this kind of approach than others. Certainly, the “poster-style” sites point to clear, efficient communication and easy navigation which is supposed to be the point of interactive-design anyway, no?

    Cheers – great post!

  • Pumpador

    I’ve decided to jump into designing (web and graphic) and left my work (last week) just to start new. This really gives me an inspiration to continue what I really wanted. The problem is that there are too may tutorials to see on the web that makes me confused where to begin. I didn’t went to any school related to design. Any idea where should I begin with?

  • http://www.well.com/user/hendrix PunkToad

    Deep posters with content and experiences behind them.

  • http://www.webdesignnet.co.uk Helmuts

    :) mostly very nice collection of different posters… just some seem to be unreadable in poster terms (you need more than 5 sec to understand the basic message), especially the Urban poster with those thin fonts…
    for me – design of a poster has always been one of the most challenging and interesting things in a graphic design.
    Tx

  • http://www.modakiyafetler.com Moda

    Maybe I have to do that, I just read an article right now and I think we do that, we use different things for a inspiration.

  • Dom

    what’s the font used for the “urban” poster?

Headscape

Boagworld