Design A Successful Coming Soon Page

A few years ago, the web was filled with “Under Construction” pages, usually with small graphics of construction signs and traffic cones. The web has moved on and designs have improved dramatically. Designers are using these pages to make an impact and to provide more relevant and interesting information about what’s coming.

A Coming Soon/Teaser page is used to get the attention, and ideally the email address of your visitors, and let them know that pretty soon you are going to be launching your fantastic new web site, product, game or application. It’s similar to putting up a poster, where you have a very short period of time to engage your visitors, give some information and let them know they’ll be missing out on the next big thing if they don’t sign up with you. And teaser pages are not just for new sites either. If you’re going through a re-design of your site you can use them to let your visitors know “I’m still here, just re-decorating” and will be back with something beautiful.

So what are the main characteristics of a successful teaser page?

1. A pretty obvious one, it should show your branding. Start as you mean to go on, with a high quality logo and attractive colour scheme.

2. It should include a form where visitors can sign up to get notified when your new baby is ready. Most people will forget about it otherwise.

3. It should give a brief overview of what’s coming or at the very least a hint of what’s coming.

4. In lieu of point 3, above, it should create a level of intrigue. Why should I as a visitor come back to this page if you have nothing to show me now?

One of the best examples of a successful teaser page was for Clearleft’s Silverback Application which appeared online last year. Unfortunately the page is gone now, but it had a parallax scrolling effect in the background which was very unusual and a very cute gorilla illustration. It got a lot of people talking, and importantly a lot of people signed up for the mailing list.

comingsoon_clip_image002

To conclude, the main focus when designing your teaser page is to engage your audience and have them talking about you before you even launch!

Here are eight examples of Coming Soon pages that adhere to these guidelines. (At the time of writing these sites were all showing Teaser pages, this may have changed by the time you read this).

Vetrinas

comingsoon_clip_image004

Feed A Fever

comingsoon_clip_image006

Dialed Tone

comingsoon_clip_image008

Share Their Day

comingsoon_clip_image010

Chkchkboom

comingsoon_clip_image012

Silent Tale

comingsoon_clip_image014

Chirp Tracker

comingsoon_clip_image016

Vevo

comingsoon_clip_image018

Have you signed up on any pages like this recently? What was it that compelled you to sign up?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Anonymous

    I really enjoy your posts – keep ‘em coming.

  • Dave Child

    The Silverback holding page is still up at:

    http://silverbackapp.com/holding/

  • Adron

    You can still see the parallax scrolling effect at http://silverbackapp.com/, and read about how it was designed here: http://thinkvitamin.com/features/how-to-recreate-silverbacks-parallax-effect/

  • rumblestrut

    This is so timely for me. Thanks for the post.

    It’s funny how even “coming soon” pages can get the Web 2.0 treatment. Don’t just tell them, interact! Great stuff.

  • stickysteph

    I need to put up a coming soon page for a client this week. Thanks for the inspiration!

  • Elizabeth

    Hello

    We have a “coming soon” page for our site for a while now but I read that these pages are a turn off for your customers?

    Our page is just a simple login page for us with some text just to say what we are doing, so maybe I should have a word with our web designer to add an invite option – does that actually help?

    We are on twitter now too, so I’ll definitely see our designer about putting that on our page.

    Thanks.

  • Shufflemoomin

    I hate ‘under construction’ pages. If there’s nothing of value to a visitor in the section, why publish the section at all? I’m sure I’m not the only one who gets disappointed or annoyed to see a link to something, thinking it offers what I’m looking for, only to get nothing but an under construction page. Nice designs though.

  • http://www.crearedesign.co.uk TomBradshaw

    I love a good coming soon page or 404 error page – it can be a chance to do something clever and a bit different

  • Chris

    Wow, that ChirpTracker page is very well done!

  • webinternet

    great ideas about how to have a nice and creative coming soon page .

  • Erlandas

    Amazing coming soon pages indeed!

    Just found another one very unique coming soon page which is worth to be on that list too. It has very well balanced colors and it looks stunning . Check it out!

    http://purearomatea.com/