Inspiration: Wonderful Watercolor Websites
This article showcases 30+ stunning web designs that make use of the incredible watercolor effect. The showcase is followed up with a small selection of links sharing a few tutorials and watercolor textures and brushes that you can use in your own designs.
Viget Inspire
Viget Inspire is one of the most recognized pieces of watercolor-style web design to date; there aren’t many web designers who haven’t seen it! The style is absolutely stunning, and the combination of the watercolored background and digital foreground and typography mixes incredibly well together.
Deborah Cavenaugh
Web Designer Wall
Web Designer Wall is yet another fantastic web design that is well known for its use of watercolor effects. The stunning watercolored patterns and the whole hand-made feel of the site makes it visually appealing, especially for their target audience: the creative industry.
Toby Powell
Boompa Shop
Boompa Shop have merged modern web design, such as the minimalistic footer, with some great watercolored “doodles” to create a beautiful and very unique effect for the web-based shop design.
Agami Creative
Corvus Design Studio
Corvus Design Studio have used a similar layout style to those typically used in portfolio designs, however instead of keeping it simple and plain to draw attention to their work, they’ve made the portfolio itself a piece of art, which is probably more than enough to persuade any customer to choose them for their latest project.
The Black Keys
Erguvan Platin Evleri
Erguvan Platin Evleri is one of the first to combine two popular trends in the web design industry: abstract watercolor effects and three-dimensional models. In this case the styles work very well together and are pleasing to look at; let’s hope we see more like this!
Davide Savelli
Colour of Air
Colour of Air is the first website in this showcase that uses very subtle watercolor in their design. To bring the content area below the header to life, they have used a low-opacity watercolor texture beneath the header and under the different article areas. The use of rendered noise in the design combined with subtle watercolor works great.
Sergio Design Trends
Sunrise Design
You don’t see vivid watercolor effects very often, mainly because it is quite difficult to pull off. Sunrise Design, however, pull off the effect very well, using bright greens and yellows in the background of their site design to create a happy and joyful feel.
Big Cartel
Volkswagen Escape
There are some huge and very well known companies making the most of the watercolor trend, too, such as the ever-popular Volkswagen car brand. They use a subtle, washed-out watercolor landscape in the background of their web design.
The Croquis
Saint Charles Maryland
Saint Charles Maryland, like several others in this showcase, used a light watercolor wash in the background of their design. This time, however, it is being used in the main content section of the design instead of the main background image. It’s an interesting concept that is pulled off well and goes with their corporate image.
Deep Roots and Wide Wings
Toggle
Toggle is another company that is well known in the creative industry for its fantastic use of watercolor in their website design. Unlike others, the watercolor effect seems to be randomly placed in the center of the background, rather than being used to produce a full background pattern or image (such as a landscape) in most of the other designs. It adds a great “oomph” to the site and brings out the lovely blue color scheme that has been used in the design.
Small White Bear
Brad Candullo
Brad Candullo uses watercolor in his portfolio design to add a little extra something to the background of his header, mainly to help draw attention to his website’s logo. The use of watercolor being used with so many other textures such as subtle grunge and wood is pulled off well and looks great!
Five Points Interactive
4PSD
4PSD is one of the most minimalistic designs in this showcase, simply making use of a light watercolor wash to separate the header area from the rest of the design. The colors go well with the site’s overall color scheme, and the use of whitespace only makes the watercolor effect look better!
K4 Laboratory
Binocle
Binocle is another site that uses a vivid watercolor effect in their design, this time using a very hot pink/red that slowly merges off to a deep pink/purple and magically transforms into a million birds. The effect is great and it really helps bring out the true power of the pink color used in the rest of the design.
Happy Cog
Imaginary Moments
The use of watercolor in this website design is superb! It’s very unique compared to the rest of the designs in this showcase, and is one of my personal favorites. I love how it has been merged with various other images and textures, and just the overall feel of the site.
Lebloe
Weberica
Weberica is possibly the grungiest watercolor styled web design in the showcase. It’s dark, olive green colors bring out the lovely gradient effect used in the logo, and those pink flowers help to bring out the small amount of red typography that is used in the rest of the design.
Football Made In Africa
Tylor J. Reimer
Tylor J. Reimer’s portfolio design is so simple yet so beautiful. The bright splashed watercolor effect combined with the hand-sketched dog is wonderful, and the low opacity neutral content background help to separate the illustration from the website’s content.
Helpful Resources
- Create a Watercolor-Themed Website Design with Photoshop
Use the Art History Brush Tool and custom brushes to create a trendy watercolor web design. - Create a Nature Inspired Painted Background in Photoshop
Learn several great tips and techniques whilst producing your very own web design inspired by Viget Inspire. - Design a Watercolored Design Studio Blog Layout
Learn how to create a clean and simple watercolor-based blog design in Photoshop. - Design a Watercolor Effect Menu
Using simple techniques, learn how to create a stunning watercolored web design navigation menu. - Watercolor Roundup: 200+ Beautiful Brushes and Textures
A huge collection of watercolor brushes and textures; everything you need to start creating your own watercolor designs. - 500+ Watercolor Brushes for Photoshop
Yet another huge collection of watercolor brushes that you can use in your own designs.
Write a Plus Tutorial
Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.
Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Callum Chapman
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
This trusly is a wonderful style. Feels so “handcrafted”
urgh… Truly
Lol yh.
Really wonderful collection
Great collection. Thanks for this post.
Those are all very inspirational, I wonder what an oil painting would look like.
woow, very nice works
PSDTUTS?…
Wow… I am really happy that you have picked our humble website and included it among all these great designs.
Thanks a lot.
We might want to reconsider a re-design now… ^__ ^
Love this collection. This is the most fresh list of colorful website design I’ve seen! Thanks dude!
The Colour of Air design is a commercially available theme from Elegant Themes. It is beautiful though.
Thanks for the mention!
Excellent varied selection of examples. Just goes to show even with a similar application the results can vary so much. Well done Callum.
A good Logo and you’ve done half of the work =) (look Saint Charles Maryland)
R.
Ahh this takes me back to finger painting in kindergarten, and eating all of the yummy paste mmmmm…
stunning collection, thanks for sharing.
They’re all watercolor inspired, good stuff
We appreciate the mention :)
I reckon http://www.circa.com.au should be on that list
Woah, nice designs.
Nice collection
thanks for the roundup maybe
next time a showcase of web design in web apps or services
a little bit off topic…
is the author related to Cameron Chapman?
What, Andorra Creative gets no love? -it’s a new site (still working out issues in the portfolio section…)
ultimate collection of designs. I just wanna know , these images are hand made or digitally colored.
Great roundup. Too bad some of the designs are always on the same lists.
I liked Deep Roots and Wide Wings and Toggle. Haven’t seen them before.
thanks again for the feature
amazing website.. .. cool!!!! need more reference ;D
Amazing websites!
Very nice collection Callum. Nice roundup of watercolor websites
please keep this site tech, and let smashing magazine be design
Why? I find that variety in the same place makes things a lot easier.
I vote you keep doing articles like this one. It never hurts to learn a little more.
what I like about this round up is that it showcases html/css and or flash.
Which proves the technology you are designing for good design is still good design.
A few years back it seemed like “everything” was in a grudge phase, whereas now it appears a watercolor phase is in full effect.
Which I think works well with digital typography and web elements.
–
Thanks and Regards
Noel for Nopun.com
a graphic design studio
Thank you so much for including me in your list! I’m flattered :-)
Try http://www.viacassa.sk ;)
This proves that there is definitely a reason why watercolors are one of the first toys you love as a child. Amazing use, great inspiration.
The Agami Creative center image is pretty darn close to the “Star Reacher” treatment used by Leo Burnett.
http://images.google.com/images?q=leo+burnett+logo
Wow, The Croquis is alarmingly similar to the Big Cartel site.
Taking any kind of artistic style onto the web is always a winner! So natural and organic looking. Loverly stuff indeed.
Wow this is one awesome showcase! Theres nothing here I don’t like, great inspiration! :D
It’s a nice selection, but one of the sites, “Sergio Design Trends”, just copied the idea of a site I developed last year: http://www.arvorecer.com.br. Man, this really sucks…
Some nice examples.
Another pretty new watercolored site is Kina Grannis’ site: http://kinagrannis.com.
Thanks for the feature. Some great inspiration here.
Check out the Southwestern Watercolor Society site. Its a WordPress blog with a design template that I customized for SWS..
Guys I have a big question. What I’ve done so far it’s not taking care of that subject avoiding to touch it you know what I mean? Help me, what do you do when you have all your document ready. (the design. In photoshop per say) and you have a background, when you “transalte” that to html, how you make the background expands according to the resolution of any pc.
For example the small white bear layout. how you make Those mountains expand according to the resolution? besides, how you make not to repeate in the whole page, in case this grows vertically.. with the css background-repeate: none y. (or something, I don’t remember right now the exact sintax). Do you get the point? Hope you can answer this!
God bless ya’all for what you do. That’s passion for art.
Excellent varied selection of examples. Just goes to show even with a similar application the results can vary so much
That’s a huge list! I’m a big fan of the K4 lab’s page. It’s pretty slick, not too much.
great works. i dont know much about water color designs. never thought of using them in a web design. but these look awesome.
thanks, looks great. thanks for sharing