Welcome to our web color community. Here you'll find the latest web-focused Palettes and Patterns, as well as Blog, Trends and Forums to help guide your next web design project.

Channels»Web»Blog
Creative, Colourful Landing Pages

Creative, Colourful Landing Pages


This guest post is written by Alex Black. Alex writes for printing company Print Express. In his spare time he enjoys studying graphic and web design and works on his Photoshop skills. You can follow him on Twitter at @iamalexblack.

Share this Post Pin It

As the saying goes, you only have one chance to make a first impression. When you’re marketing a product or service, if your landing page doesn’t make a great first impression then it’s unlikely that visitors will return, much less use your product. Good landing pages show off the product, sell it’s benefits and do a good job of leaving the visitor with the impression that it’s well designed. Great landing pages, on the other hand, do all this and also stick in your memory – they stand out and are remarkable.

Of course, this is much easier said than done – how do you create a landing page that’s remarkable, and memorable while still being beautifully designed instead of garish? One of the ways in which you can do this is to focus on creating a tastefully bright, vibrant and colourful design. Use a bold, daring colour palette – or use subtle, muted colours but with bright, impossible-to-miss contrasts on the buttons you want users to click (like the “sign up” or “try the demo” buttons).

The use of colour in landing pages is an art form in itself, and we’ve brought this collection of designs together to help give you some inspiration for your next landing page project. We hope you find the collection useful and entertaining.

Viximo

Viximo is a company that works with developers to get their games published online. The landing page stands out instantly by using big, bold illustration and the muted colour palette grabs attention without being too garish.

Evernote

Productivity tool Evernote has a homepage that is awash with their trademark bright green. The header – which explains the concept and benefits of Evernote – is impossible to miss as a result.

Vimeo

Vimeo, the hosted video platform that rivals YouTube, is universally loved by creative, and so their homepage appeals to this group by the use of rich, colourful illustration.

MailChimp

Email newsletter provider MailChimp stands out with their use of big, bold typography and large, colourful backgrounds for each page. The use of colour is bold without being too overwhelming, and complements the large type nicely.

Amazing Alex

Amazing Alex, a mobile game from the makers of Angry Birds, features a lot of colour on the landing page, which compliments the cartoon theme of the game well.

Movie Poster Quiz

The Movie Poster Quiz is an iPhone game that tests your knowledge of film posters – and the landing page uses a vibrant, impossible to miss yellow backdrop to help the content pop.

Flutter

Flutter is an app that uses your webcam to allow you to control your music by waving your hand. It’s a fun and quirky concept, and the landing page suits that theme nicely with a bright, colourful, cartoon style.

Foursquare

Foursquare, the incredibly popular mobile app that allows you to virtually check-in to places, uses their brand colour of blue for the header and footer of their landing page, but they also add a tasteful element of colour by making the background a huge map of your city.

Keen IO

Keen IO is a tool that helps sites access their website analytics data through an API. They’ve made a tasteful use of colour on their homepage with their muted blue header which contrasts with their signup button in a slightly muted red.

Cue

Cue is an iPhone app that helps you plan your day, by automatically using your emails and calendar to tell you what’s coming next. The landing page uses huge background images to help illustrate a typical day using the app.

Loop11

Loop11 is a usability testing tool that allows you to see how well your site performs when participants try to navigate it. The landing page has a strong focus on their green brand colour, but they’ve also used bright orange to stand out and heavily contrast for the call to action “Let’s get you signed up”, and the “Sign up for free” button.

Skype

Skype – one of the first products that made video chat easily accessible to the masses – uses their brand colour combination of blue and white heavily throughout the site, and the landing page is a perfect example. The header, the top navigation and even the call to action buttons use the blue and white colour combination to always be on brand.

Wufoo

Online form builder Wufoo use an extraordinary amount of colour on their homepage, from the attention-grabbing red header to the variety of brightly coloured boxes, the landing page is hard to forget. All of this plays into the fun, personality-driven brand of Wufoo.

Everpix

Photo storage site Everpix makes use of colour on their landing page through the background, which constantly rotates through bright (but not distracting), slightly blurred imagery. Despite the colourful backgrounds, the bright orange “Sign up now” button is impossible to miss.

Fitocracy

Fitocracy is a social network designed around being healthy and keeping fit. They’ve used a bold, deep purple for the header to help grab attention and the muted orange thunderbolts in the illustrated robot stand out and help the design to pop.

Lorenzo Verzini

Lorenzo Verzini is an Italian designer and art director. His homepage aims to show off his creative, colourful art style – it’s both minimalist and simple, and colourful and iconic with a style that’s all his own.

Adioso

Adioso is a flight search engine that aims to make finding a flight simple and easy. Their landing page uses vivid, brightly coloured images of holiday destinations, which helps to inspire you to travel.

Treehouse

Treehouse provide teaching modules to help you learn how to code and design. Their landing page uses colour very tastefully to improve the visual aesthetics and to draw your attention to key areas – like the “Start learning today” button which stands out, compared to the darker background of the header.

LayarVault

LayerVault helps designers project manage their work and stores and syncs each projects files neatly. The landing page is a beautiful example of flat design on the web, but it also uses colour to help stand out visually. Their muted green backdrop on the slider helps to make their heading prominent, and adds some personality to the site.

DIY

DIY is an app that aims to teach you new skills by setting you challenges, and allows you to earn all sorts of badges to help mark your achievement. Because it’s such a big part of how DIY works, they emphasise this on the landing page by featuring a wide assortment of the brightly coloured badges that you can earn.

Have you found any examples of bright, bold, vibrant & colourful landing pages that you’d like to share? Please do let us know in the comments.

If you're now feeling inspired to take your landing pages to the next level, check out Creative Market for some immediate downloads.


2 Comments
Showing 1 - 2 of 2 Comments

CREETEN.

The "LayarVault" part needs to be fixed. First, it's LayerVault and second, the image doesn't link to their homepage.
Otherwise great article, thanks!

ressia.torres

i like the simplicity of Lorenzo Verzini

Post a Comment

You must be logged in to post a comment.

Search The Blog

Subscribe & Share

Our Latest Tweets

RT @ryan_schuijer: Dang, check these waterdroplets on @codepen, made by @stefanweck! So well made, it's like a window in your device https:…
about May 25, 2017
Tweet this ArticleFollow @COLOURlovers

Latest Web Blog Posts

//View More ›

Tags

Latest Web Colors

//View More ›

Latest Web Palettes

//View More ›

Latest Web Patterns

//View More ›