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
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 [email protected].
Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.
