A Showcase of Watercolor in Web Design

Watercolor is such an old school element. Artists have been using watercolor for hundreds of years, and web designers have adopted the style for good reason.

Watercolor is a great way to add depth, interesting subtle textures and colors. It can really give your site an authentic, natural feel.

The examples compiled in this collection use watercolor in different ways; whether it’s for the main graphic of the site or the more subtle and faint hints that get you to look twice.

Watercolor has been around for a century and I know most of you will say it’s a trend, but you can’t argue with something that has pioneered painting and art.

 

Agami Creative

Agami Creative

 

Billy Hughes

Billy Hughes

 

Binocle

binocle

 

The Croquis

croquis

 

Electric Pulp

Electric Pulp

 

Happy Cog

Happy Cog

 

James Lai Creative

James Lai

 

Element Fusion

Join Up

 

K4 Laboratory

K4  Lab

 

Le Bloe

Le  Bloe

 

Magouya

Magouya

 

Matt Dempsey

Matt Dempsey

 

Sergio Design Trends

Sergio Design

 

Toby Powell

Toby Powell

 

Web Designer Wall

Web Designer Depot

 

Erguvan Platin Evleri

Platin

 

Rockatee Design

rockatee

 

Saint Charles Maryland

Saint Charles

 

Small White Bear

Small White Bear

 

Secwepemc Nation Stsmamlt

SNSI

 

Sunrise Design

Sunrise Design

 

Toggle

toggle

 

Tylor Jerome Reimer

tylorJermorerelmer

 

Viget

viget_inspire

 

vSplash

vSplash

 

Volkswagen Lifestyle Vehicles

VW Great Escape

 

Washtenaw Community College

Washtnaw

 

Weberica

Weberica

Compiled exclusively for WDD by Chad Mueller. Chad lives in Canada eh!, when he’s not shooting donut shape rubber pucks, he’s running Inspiredology and designing anything to get his creative juices flowing.

Which ones did you like best and why? Please share your views with us and add links to other great examples below…

0 shares
  • http://lenatailor.designerteam.info Lena Tailor

    Excellent examples. Thanks for the inspiring roundup :)

  • http://www.jennamolby.com Jenna Molby

    These are beautiful, thanks for sharing!

  • http://www.bebop-ad.com BebopDesigner

    Brilliant collection! Amazing examples! thanks for sharing

  • http://adjacentconcepts.com Blain Smith

    We just recently launched our site with some watercolor. Perfect timing.

  • Robert Urbańczyk

    Really nice to see how web pages (early ’90) evolve from clunky/squared/blinking/ugly designs into a piece of art. Great examples. Thanks for sharing.

    • chris

      its called “innovation”…. its quite amazing how web design.. change.. style.and design perception through year passed..

  • http://www.osvaldas.info Osvaldas

    Ah look, you forgot http://www.pasikeitimai.lt!

  • http://www.aledesign.it aledesign.it

    Great post. Excellent designs. i like so much this examples…inspire me and my work! Really creative! Thanks for sharing!

  • Dion

    I saw this page (http://www.re-winder.com/) on a recent blog post (http://designm.ag/inspiration/attention-to-detail/) that was a tweet of the week.

    I agree with the blogs description: “The watercolor effect at the top or Re-Winder has a big impact on the overall look of the site.”

  • Alfonso

    Nice collection, I have been seeing more and more traditional media elements creeping into web design over the past few months. A welcome relief from the 2.0 shiny logo era.

  • http://matthewlyle.com Matt

    Watercolour is becoming one of my favourite trends. It looks really nice when done nicely as shown here.

  • http://3circlestudio.com/ Justin Carroll

    Design-trend articles, grr; however, there’s some nice design here. But why does using watercolor make sense for the majority of these brands? Exactly, it doesn’t. It’s not design, it’s style.

  • http://shikebali.co.cc Shikeb Ali

    Water color is good … I used it on the background in my last project.

    http://www.amankiasha.com/

    A very famous international project now a days… Aman Ki Asha ‘Destination Peace’: A commitment by the Jang Group, GEO and The Times of India Group to create an enabling environment that brings the people of Pakistan and India closer together, contributing to genuine and durable peace with honour between our countries.

  • http://www.ukpb.co.uk/ Buy My House

    Water color is really looking very natural and fabulous, What a ravishing work has been done. Thanks for sharing it.

  • http://www.creatusdesign.nl/ Gert van den Brink

    Those are some nice exemples of water-color web design. Thanks!

  • shaunyk

    Fantastic stuff – thanks for the inspiration. I’d love to know which of the examples above were designed entirely digitally and which ones actually started off with a paintbrush and some watercolour paints. It’s so hard to tell nowadays.

  • http://www.thepeachdesign.com peach

    Nice collection. Got to love the flow of these water color effects.

  • http://www.kupferwerk.net johnny

    Some nice examples… but http://thecroquis.com/ reminds me of http://bigcartel.com/!

  • http://sexidesign.com Melody

    Not only great designs, but I’m lovin the model on the architect’s website..

  • aaliyah

    Woaaa…stunningly beautiful. Thanks for sharing…

  • http://www.cozypenguin.com Linda Chadbourne

    I really love the watercolor look and feel. It’s soft and when beautiful colors are used the effect is very eye catching. Thanks for the collection.

  • http://www.jordanwalker.net Jordan Walker

    Those are really neat designs, thanks for the round up.

  • http://www.squaresphere.co.uk David

    I do very much enjoy seeing more creative and illustrative work coming into the current web design trends, but I can see some of these designs becoming overbearing, unusable and overly complex. It can be great to have a fantastically visual impact on the user, but I still think that many of the sites here are overdoing it for the sake of it. Perhaps their focus is on that visual impact, and making a statement with their site. But for me at least the amount of information that I consume on a daily basis via the internet and other connect digital media means that a leaner, cleaner and more streamlined experience will give me less frustration and thus a better user experience. I can’t imagine trying to navigate these sites on a phone, if they didn’t provide a mobile specific site.

  • http://chedonline.com Ched

    Great collection. Thanks!

  • http://nickburd.com Nick Burd

    great post. Thank you!

  • http://www.thaicar.com รถมือสอง

    It looks really nice,thank you for this.

  • http://devisefunction.com Matthew Heidenreich

    My favorite is the Agami Creative. Great collection!

  • Brian

    Nice collection. We also used the water colour effect on a recent project: http://www.amarulatrust.com. You are more than welcome to feature it in this post.

  • http://ice-horse.de Birgit

    very beautiful and inspiring examples here.

    My favorites are the Croquis (nice mix of minimal and playful), Agami (great use of colors and textures), and Sergio (stunning use of color and contrast).

    Keep it on!

  • http://www.sentril.com NYC

    Wow those are some really nice sites that feature a watercolor effect.

  • http://sabramedia.com/ Joshua

    Great collection; one more I’d like to add: http://rosiebrownrn.com/

  • http://christopherross.ca Chris (web designer from fredericton)

    Billy Hughes is spectacular, I absolutely the the mix of digital with traditional!

  • http://twitter.com/fashionluvr @FashionLuvr

    I have a water color background on my twitter that I had an artist do for me:

    http://www.twitter.com/fashionluvr

  • http://pelfusion.com Pelfusion

    impressive collection

  • _ANI_

    Designs are awesome !!, Great Work..

  • http://www.wanderingmist.com Ishrath

    Really good post. Reminds me of time when I had designed one with abstract flowing colors in the header, though I had painted it with acrylic colors. Keep the momentum.

  • http://www.gamearai.com/ เกมส์

    Very good example, thank you for sharing and the watercolor effect is Amazing.

  • http://www.webrodban.com/ Rodban

    Amazing works and very creative mixing the watercolor effect to the graphic. Thanks

  • http://www.nova-media.fr olivier

    Original de faire de la peinture à l’eau sur le web….en tout cas certains reussissent mieux que d’autres

  • http://huffo.com nick

    I love the croquis site
    looks just like indies’ http://bigcartel.com/

    hmmmm.

  • http://www.jamiereddish.com Jamie

    Some of these are absolutely beautiful!

  • http://www.urviho.cz Urviho

    Whau.. some of them are really great :)

  • http://www.riyazone.net Riyaz

    stunning collections…

  • PhuongDung

    Inspiration! Awesome! Keep moving forward, guy! :)

  • http://www.carteenee.com/ carteenee

    i like Volkswagen Lifestyle Vehicles’ theme. i think it clearly, not more colorful theme, and good view.

    and also, i like Volkswagen. LoL

  • http://www.gamearai.com/ game

    Web Designer Wall is very colorful theme, like it!!