CSS

20 of The Best Uses of Color in Current Web Design

29 Comments 12 August 2008


Many sites “play it safe” when choosing colors. Brilliant colors have to be carefully controlled to avoid looking amateur. I’ve selected these 20 sites for excellent use of color along with their overall web design. Quality of CSS, features, ease of use all come into play as well. Hope you enjoy!

EDIT:

http://silverbackapp.com/
http://www.willportifolio.com.br/
http://wpglamour.com/
http://www.notified.tv/
http://adaptd.com/
http://www.base6design.com/
http://www.mydezzign.com/
http://www.ebugogo.tv/
http://www.yovivoenvigo.com/
http://rosevillehwc.com/
http://www.speaklight.com/
http://www.serj.ca/
http://shylands.com/explore/
http://www.volll.com/#section_main
http://www.regata.co.il/
http://www.activate-p-s.com/
http://www.twistsystems.co.uk/
http://avalonstar.com/
http://www.webdesign-aus-bremen.de/freelancer.html
http://goodworksmedia.com/index.htm

Also check out this site for unlimited web template downloads


Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google

Related posts:

  1. 42 Must-Bookmark Resources for Web Designers – Inspiration, Design, Color, Fonts and More
  2. Current trends in Web Design: The influence of print/typography on the Web
  3. From Sketch to Screen: Sound Discovery Process to help in the conceptualization and design of a beautiful and functional website
  4. Web Design Blog Follow Me Icons
  5. When is a Web Design Truly Finished?

Author

Anders Haig

Anders Haig - who has written 16 posts on [Re]Encoded.com.


Contact the author

Your Comments

29 Comments so far

  1. Akshay Sura says:

    Great work. Will look through.

  2. RonnieSan says:

    Great list of sites. Color choice is definitely one of the hardest parts of web development, something many designers glance over.

    A great resource to use is kuler.adobe.com. You can download some great palettes in ASE format for use in PhotoShop.

  3. MartinAlbens says:

    Interesting list! I was looking at a website that made me really consider the role of color in design (www.zanperrion.com with its blue color), and then the next thing I see on the web is this list. Are there any studies that correlate the colors on websites to the usability (or feel) of a website?

    Fascinating subject!

  4. Anon says:

    If you’re going to use others peoples work as the main purpose of the blog post, the least you could do is include proper links to their sites.

  5. Fubiz says:

    Nice choice !

  6. Anonymous says:

    Way to show respect and link off to the respective owners of the very well designed sites.

  7. Yea link to original author would be nice :) but anyways nice post. These days color depend more on client choice rather than what designer prefer.

  8. webmaster says:

    … another one bites the dust… dun, dun, dun… another ones gone & another ones gone… another one bites the dust….

  9. anon says:

    I can’t believe you wouldn’t even include a clickable link to the original sites. Why bother showcasing them at all?

  10. Mikael says:

    A horrible set of sites, truly. Each one decorated and illustrated to death.

  11. Crazy… I found my own site on this list….
    I did the site for Goodworks Media and Volll was actually one of my inspirations.
    thanks – andrew c.

  12. Sketchee says:

    I like the sites and disagree with Mikael’s opinion that they’re overdone. I do think a link to the original sites would have been very helpful for the post. The thumbnails get the point across all the same, however

  13. Meeko says:

    great article.

  14. Thanks Anders for thinking in my site, great selection!

  15. dwhs says:

    Great blog, I design and learned allot of about colors. Also I just liked some of the designs. My style for sure, I love how images are being faded into the background allot now.

  16. Hello Ander.
    Nice great seletion!! congratulation.
    Thank you for thinking my website.
    Cyu,
    Will

  17. Michele says:

    I like the use of color. I’m bored to death with standard black/white colors. Don’t let the standards bore you anymore … Get out there and design a colorful site with colorful quality graphics. Again, nice list :)

  18. web says:

    ..……………………….„~”¯¯¯”~„
    .……………………..„”. (_). . . . .
    .……………………..|. . . . . . . . .|
    .………………„-~^”¯”-„. . . . . . .„”
    .……………„-”::::::::::::”~—–~^„………………_¸„„„_
    .………….„”:::::::„^””””””~„:::::::::”-„…………„-“. . . . .”-„
    .………..„”:::::::„”. . . . . . .”~„:::::::”~„…….|. . . . . (_).
    .………„”:::::::„”. . . „–~~–„_.”-„::::::::¯”~-„„. . . . . . . „”
    .……../::::::::/. .¯„-“;;;;;;;;;;;;;;”^-„”~„::::::::::::”~„„„„„„-~”
    .……/::::::::/. “„-”;;;;;;;;;;;;;;;;;;;;;;;;¯”-„”~—„„„„_:::::::”„
    .…../:::::::/.„-“;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;”-„. . . .”):::::::’|
    …./:::::::/”;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;„”. . . „”:::::::„”
    …/:::::::/;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;„-“¯._’. „”::::::„”
    .ƒ:::::::/;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;(“. . . „”:::::::„”
    ‘|:::::::ƒ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;¯**”„”::::::„”
    |::::::;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;„”:::::::„”
    |::::::;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;„”:::::::„”
    |::::::„;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;„”:::::::„”
    |::::::.__;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;„”::::::„”
    |::::::¯”:;¯”^-„;;;;;;;;;;;;;;;;;;;;;;;;’„”:::::’:„”
    ‘|::::::-„.:;:;:;:”-„;;;;;;;;;;;;;;;;;;;;ƒ:::::::„” GET ME A MIRROR!!!
    .|::::::. . :;:;:;:;:”„;¸„¸;;;;;;;;;„~~|::::::„”
    .’|:::::::. . :;:;:;:;:;:;|:;”-„;;;;;. . |:::::’{
    ..“„:::::::”~„”-„:;:;:;:;:”:;:;:;:”„;;’|. .’|::::::
    .…”~„:::::::¯”~„~–„:;:;:;:;:;|;;ƒ. .’|::::::
    .’……..”~„::::::::¯”^~-„~-„_|;;/_. ƒ::::::’|
    …………..”~-„_::::::::¯¯””~’¯-~”::::::’ƒ
    .…………….…¯”~-„_:::::::::::::::::„-”
    ………………………..¯””^~~~~^”

  19. medyum says:

    Way to show respect and link off to the respective owners of the very well designed sites.

  20. Richard says:

    Great designs, really like the WP Glamour one and good to see how creative design can make a site more memorable

  21. These sites really stand one which can be excellent if used to build up a brand


Trackbacks/Pingbacks

  1. 20 Extremely Skillful Uses of Color in Web Design [PICS] | WhiteSandsDigital.com - 13. Aug, 2008

    [...] web design. Quality of CSS, features, ease of use all come into play as well. Hope you enjoy!read more | digg [...]

  2. 20 de los mejores usos del color en el diseño Web actual | Isopixel - 14. Aug, 2008

    [...] 20 de los mejores usos del color en el diseño Web actual,  para darnos una idea de como se pueden utilizar los colores  de manera elegante, sin llegar a [...]

  3. links for 2008-08-14 « Stand on the shoulders of giants - 14. Aug, 2008

    [...] [Re]Encoded dot Com » Blog Archive » 20 of The Best Uses of Color in Current Web Design (tags: web design inspiration) [...]

  4. 20 Extremely Skillful Uses of Color in Web Design [PICS] « t722 - 14. Aug, 2008

    [...] read more | digg story [...]

  5. links for 2008-08-15 « 個人的な雑記 - 15. Aug, 2008

    [...] [Re]Encoded dot Com » Blog Archive » 20 of The Best Uses of Color in Current Web Design (tags: design color) [...]

  6. [Re]Encoded dot Com » Blog Archive » 20 of The Best Uses of Color in Current Web Design « llbbl - 15. Aug, 2008

    [...] [Re]Encoded dot Com » Blog Archive » 20 of The Best Uses of Color in Current Web Design. Posted in General | [...]

  7. TurkAtesi.oRg ~ Internetin En Cix Mekanı » Blog Archive » İlham verici 20 Örnek - 16. Aug, 2008

    [...] İlham verici 20 Örnek Yazan By admin Tarih 16 Ağustos 2008 – 08:08 – Pek çok web sitesi ve tasarımcı renk seçerken cesur davranmaktansa klasik kalıpların içinde kalmakta… Göz alıcı renkler seçerken amatör görünmemek için çok dikkatli olmak gerekiyor. [Re]Encoded sitesi de, CSS Tasarımı, özellikleri ve kullanım rahatlığı gibi ölçütler temelinde bu işi en iyi kıvıran 20 web sitesini seçmiş. [...]

  8. México sigue en Flash | - 23. Dec, 2008

    [...] Costo  para el cliente (porque en México los programadores cobran muchísimo por este tipo de sitios) Aquí les pongo ejemplos de sitios web que se pueden hacer sin recurrir a flash (o bien, utilizádolo limitadamente), verán lo que se puede hacer: Ejemplos [...]

Share your view

Post a comment

          

Community News

  • Free Telecom Icon Set

    ComFi developed a specific ”ComFi Telecom Icons” icon pack in 32 x 32 pixels in Jan 2010. For personal & commercial use.

    February 8, 2010
  • 25 Unique 3D Light Graphics Wallpapers

    What I’m gonna show you is 3D version of light painting wallpapers, which called light graphics. At first, I’m a little bit confused & had no idea what they are called.

    February 8, 2010
  • 30 Twitter Hacks and Plugins to Spice Up Your Word…

    Twitter has grown exponentially in the past few months and Still, It’s growing like crazy. Twitter has surpassed Facebook and others to become the fastest-growing site in the “Member Communitie…

    February 8, 2010
  • 50 Fantastic Examples Of Origami Art Work

    Origami,from oru meaning “folding“, and kami meaning “paper” is the traditional Japanese art of paper folding. The goal of this art is to create a representation of an object using geometri…

    February 8, 2010
  • Web Hosting Layout Tutorial in Adobe Photoshop

    This tutorial will teach you how to create a PSD layout for a hosting business, internet service provider, or any other internet related business.

    February 7, 2010






© 2010 [Re]Encoded.com. Powered by Wordpress.