7 Creative Examples of How Web Design Uses Blue, the Color of 2020

Erik Messaki
Outcrowd
Published in
3 min readJan 27, 2020

Pantone just announced the color of 2020 — classic blue, and we would like to share with you some great blue design examples and how this color can be represented in web design. The blue color is definitely one of the most demanding colors for designers, and artists. Picasso even had a ‘blue period’ in his creative life.

Tate Modern website

When we think about the blue color, the first thing that comes to our mind is the sky. Tate Modern museum in London shows how a simple picture of the sky can look stylish, realistic, and don’t take attention from the art objects or posts on the website.

https://www.tate.org.uk/visit/tate-modern

Casa Batllo website

Casa Batllo in Barcelona is one of the best examples of how blue color can be used in design and architecture. But, their website is also a masterpiece. Here, we see, a dark-marine blue color on the front of a black background. Looks mysterious and fascinating, so visitors are intrigued by what is inside.

https://www.casabatllo.es/

Illustration with the blue color palette

In this work, you see a blue color in different palettes, light blue umbrella adds some ‘arty’ notes to the whole illustration. The picture itself is dark blue, and we created a rainy umbrella of a light blue color. In this illustration, you can see how dark and light blue colors can flow with each other.

https://dribbble.com/shots/6508908-Illustration-Lady-in-the-rain

Abstract neon blue shapes

Another example is neon blue on the dark background. Abstract shapes on the dark background look minimalistic, but the neon palette makes this design stand out.

https://dribbble.com/shots/5500182-HelpScout-Landing-Page

The blue color in a drawing contour

In this example, our colleagues from Hello Monday using blue color a drawing contour on the white background. As simple as that, but looks great!

https://www.hellomonday.com/work/sideways-dictionary

Dark blue

In this example of the same studio Hello Monday, we see another interpretation of a blue color. Dark, deep, blue color with perfectly matched white and orange typography.

https://www.hellomonday.com/work/espn-wethefans

Blue in all its forms

When we think about the environment, there are two colors that come to our mind — green and blue. This design was created for a Global Climate Change website, where we used blue as the main color. The main goal was to inspire a call to action for global change. We wanted to make an illustration of a blue ocean, but also add some blue ‘notes’ and a different palette of blue color for other illustrations.

https://dribbble.com/shots/4862970-Factor-Landing-Page

Which one of these examples do you prefer?

If you want to discuss your next project and excited about adding a specific color, drop us a line.

--

--

Erik Messaki
Outcrowd

UI/UX Design and Development. Let’s create something wonderful together! hello@outcrowd.io