Mar 06 2012

Web of Color: Bold and Beautiful Uses of Color in Web Design

Advertisement

As we look around the web, we see so many examples of designers who have brilliantly used color in web design projects to make the page or various page elements really pop. Even in some cases when we see designers opting for more minimal designs, using bold splashes of color can really take the look to fantastic new heights in very simple ways. Using bright, bold colors can often be risky, as the colors can end up visually overwhelming or even downright uncomfortable. So it has to be done with care.

Below is a showcase of sites where the designers struck that balance nicely. From headers to backgrounds to calls to action and beyond, these bold and beautiful uses of color in web design are sure to inspire you to find interesting ways to wield this powerful element in your next project.

Web of Color

Will Fernandes’ Personal Portfolio is a perfect example of using bold colors throughout the design to really bring the personality of the site to life in beautiful fashion.

Blurst uses both strong colors and bold typographic elements to create a really sharp design that by contrast remains soft and comfortable.

Somos la pera limonera has a very simple illustrated site design, where the multitude of earth tones give the site a wonderful natural cartoon feel.

Sitesquared has a design overrun with exciting layers of colors bursting all over the site. Even using multiple font colors well, which cannot often be done in such a complementary and visually pleasing manner.

Mydezzign is an example where the minimal website design, and dark background really pop with the splashes of color that have been added in around the content area edges.

Cultural Solutions uses a large burst of colors in the site header, but as you scroll down through the page, the colors come in more subtle splashes. The Bokeh style background elements work well to drop in the color throughout.

Web Munky uses a nice soft background with bold, royal purple elements that stand out beautifully against it. Creating a welcoming feel and a sense of reliability through the colors.

Panda Creatiu has an elegant look created with a warm brown background that allows the colorful portfolio navigation to shine.

Eye Styles uses softly shaded navigable, animated menu elements that provide the subtle design beautiful splashes of color. They really work well to draw the user’s eyes to the products.

Camp Creative Group uses a slightly transparent streak of bold colors in their over-sized header to set a professional tone through the design.

Meomi has a wonderfully whimsical website design with bold splashes of color scattered down throughout the warm background colors. They help visually lead the users down the page.

Art4web uses bright colorful elements in the header to really set off the clean, sharp design. Coupled with bold, colorful typography highlights, the design is fed by the splashes of color added in throughout.

Treehouse uses a dark design with large colorful button calls to action to grab the user’s attention as soon as they arrive at the site.

Moby beautifully injects random bits of color in an otherwise lightly tinted design. With a couple of colorful headers, but also with a clever logo design that follows the user down the page, changing colors with each section.

Sanctuary T Shop has a colorful navigation menu to grab the user’s focus and help steer them along without drawing too much attention away from the products.

nGen Works has a bold header and footer with other soft colorful elements on the page that give the design a very striking impact.

Duoh! uses lots of bold colorful elements to edge the design and scattered throughout the site and its pages that really help the website’s playful and professional edges combine in flawless fashion.

Soup Studios uses lots of pastel coloring throughout the design beautifully. So much color without crossing the line and hurting the site or the products it features.

Mooty Graphic Design boldly fills their header, and to a lesser degree footer, with bright colors, meanwhile using sporadic colorful elements in the main content area to draw the users.

Beautiful 2.0 keeps their bold colorful elements to the upper reaches of the page, descending into more darkness as you go down. The colors really make the the navigation pop.

Bjarke Clauson-Kaas breaks up the large, softly tinted background of the page with two bold, leading splashes of color. One main set of colorful arrows to direct the reader down the page, and another arrow cutting across the page as you hover to split up the work from the bio.

Stripes Design has a very subtle background and design overall, with an explosion of color down the side of the page which creates a powerful contrast and calls to mind a sense of creativity.

Havaianas uses a canvas like textured background filled with bold colorful decorative watercolor styled elements that perfectly complement the feeling of creative energy which drives the company.

Clair Baxter has a website filled with bold colorful design elements scattered throughout to add extra flair and a creative edge to the design.

F91W uses a large, colorful background which carries a light unobtrusive flow around the content area.

(rb)

About the Author

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Homepage

Comments and Discussions
  • tim, 06 March 2012

    Most of them are too vivid for me.

  • dario, 06 March 2012

    beautiful works :-)

  • adham dannaway, 07 March 2012

    inspiring stuff!

  • Ryan Nanney, 07 March 2012

    Here’s one I’m working on right now, just to add another into the mix.

    http://gnomefest.com/

    Cheers all, this list is awesome!!

    Ryan

  • Puneet Sakhuja, 08 March 2012

    Nice Collection!

    Thanks so much for showcasing WebMunky.com !
    Feels great to be showcased among wonderful fellow designers.
    Cheers from Dubai!!

  • Nico, 09 March 2012

    excellent, thanks

  • waqas, 09 March 2012

    color n web design both at their best! Super Lively!

  • Sihem, 09 March 2012

    Great work i like it thannnks <3

  • Juan, 12 March 2012

    Very nice collection, the first design with the octopus it´s great. I love the colour in teh web design.

  • Åsel, 15 March 2012

    Thanks for sharing! This collection makes me happy on a grey day on the north-west coast of Norway!

  • Candace Lai, 22 March 2012

    Very awesome selection, the first style with the octopus it´s excellent. I really like large in the web style.

  • Jothish, 04 April 2012

    I am liking this very much. I just did a website and I was curious if i went overboard with colors. I saw a comment with a link to one of their works, so I wanted to throw my website in it too. Its for an Indian restaurant in Dallas. Since there are soo many, I wanted to break away from the traditional dark, goldish, burgundy theme stereotyped with Inidan restaurants and used a vibrant pallette.

    I love this site and it has been an inspiration day in a day out..especially on the days when you have “designer’s block”! Keep up the great work.

    • Robert Bowen, 04 April 2012

      Hey Jothish, nice job, not overdone at all! The extreme burst of color works well, especially with white background and green highlights.

      • Jothish, 05 April 2012

        Thank you Robert for the kind words. Have a colorful day everyone! :)

  • John Gibson, 08 April 2012

    Great collection bro really nice work,I love this site and it has been an inspiration day in a day out.

  • Kundan, 31 May 2012

    Great Collection !

  • Mark Ford, 25 October 2012

    Great collection. Thanks for the inspiration.

  • XeBii, 30 October 2012

    Finally found some ideas for header design…

  • daughter, 11 July 2013

    Great for inspiration.. thank you for putting this list together :)

search form
 
image description image description