Use of White in Web Design: Tips and Trends

white_in_webdesign1
What comes to your mind  when you think of  the color white? White is the most simple, elegant and peaceful color. Use of white color in web design is seen in many blog, online portfolio, e-commerce and many more sites. White is used for font color, background color, link, images and many more. Although, if you might think white color website is not that appealing to readers, you would be surprised. Some of the best designed websites on the web are use white. In this post you will find inspiration and tips on using white color on your websites.

Minimal Beautiful Sites

Simple minimal websites are delightful to view. When you are creating a white background color website using white, keep it basic and uncluttered. The beauty will reveal itself.  Just to name drop some of the big company and website as flickr, iStockphoto, Makeuseof, Apple uses white as background color. Most of the following sites are minimal but yet they show how using white it can bring out the potential of the content and the website itself.

Loveleft

loveleft

Greece is For Lovers

greeceisforlovers

Pasaii Design Studio

pasaiidesignstudio

CSS Globe

cssglobe

Jason Reynolds

jason-reynolds

Buffalo-Web Design & E-commerce

builtbybuffalo

Jeff  Doe

jeffdoedesign

Rustin Jessen

rustinjessen

Sushi & Robots

sushiandrobots

Qindex Web Design Magazine

qindex

Using Illustration with White

Handwritten design, illustration, cartoon characters  and grunge is the new web trend. Web design and graphic designers shows their creativity using through this illustration and artwork. Here is a simple example to brag about the #FFFFFF :When a painter starts with a drawing  the canvas is white or  an Illustrator drawing a character they start with a blank white paper. The end result comes out beautiful. The white color is root of all the beautiful things that lays underneath.  The following websites show using white creatively with illustration and drawing to bring out the artistic and creative side of the white.

Cologne Bonn Airport
koeln-bonn-airport

Kallwejt

kallwejt

Fell Swoop

fellswoop

Look Designs

lookdesigns

Aqworks

aqworks

Numan Cebi

numancebi

Noemie-Chevaux

noemie-chevaux

Iitchy Pixel

itchypixel

Khairudin Lee

khairudinlee

Rednoseday

rednoseday

Log

log

Squarefactor

squarefactor

Things That Are Brown

thingsthatarebrown

Using White to Brighten up Other Colors

You would think simple plain web sites are exciting like the colorful websites and you would be wrong. Keep in mind that white can make any other light and bright color bring out its depth, intensity and richness. Color such as red, blue, light green , pink and  any other light color will look focused and pleasant. Therefore, if you are planning to mix up other color in links, menu, buttons use the color wisely, rather then looking like a mess. Here are some website that makes white and other colors work together and makes it sexy.

I am Dan

iamdan

Zurb

zurb

Noded

noded

Super Nature Design

supernaturedesign

Michael Paul Young

michaelpaulyoung

Devia

devia

Tim Jarvis- A Base Reference

baseref

Hello Lucky

hellolucky

Final Words

Just to recap here are some simple tips creating a website with white:

  1. Use the light and bright color for the links .
  2. Try to keep it as much as minimal as you can.
  3. Make the content easy to follow
  4. Do  not clutter with ads.  If you decide to include ads do not use a different background color.
  5. Do not use small font size.
  6. Get Creative!

Is there any tips you would like to share?

If you enjoyed this post, get free updates by email or RSS.

Posted Under: Showcase, Tips

Tagged: , , ,

  • Bookmark on Delicous
  • Share on Reddit
  • Share on Technorati
  • Share on Facebook
  • Share on Stumble Upon
  • Share on Stumble Upon

45 Responses to “Use of White in Web Design: Tips and Trends”

  1. Sarah says:

    nice post very interested. great examples thanks:D
    Sarah´s last blog : derek loux, festivus, festivus for the rest of us, …

  2. kre8iveminds says:

    Nice list, white makes you design look more easy and professional

  3. loans says:

    I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the good work. Look forward to reading more from you in the future.

  4. Maybelline says:

    I love the look as well. I think I might be doing something similar with my site!
    Maybelline´s last blog : Maybelline XXL Mascara – FREE!

  5. Corey says:

    Interesting Article. Thanks for the read!

  6. when you’ve got great images, then white is perfect – let the images speak for themselves

    majorca holidays’s last blog post..Majorca Holiday Guide to Cala D’Or

  7. Jennifer says:

    Great informative article! We love utilizing whitespace as a design tool and we’re so pleased you featured our website. :)

    Jennifer’s last blog post..we love — a recycled office

  8. aravind says:

    Great Roundup.
    I am a great fan of white space and uses it a lot in my designs.

  9. Jeffdoe says:

    Thank you for featuring my site! Props to all the other featured sites, very inspiring!

    Jeffdoe’s last blog post..Portfolio Update: Scion Drive Tour 09

  10. Kawsar Ali says:

    @RMK: Well thats okay. everyone has different opinion.

  11. RMK says:

    Just wanted to say that strictly speaking, white (like black) is NOT a color. It’s the ABSENCE of color. Correcting this would give you more credibility, IMHO ;) .

    Nice list.

  12. Kawsar Ali says:

    @Kevin Palmer: @Matt Fouty: Thanks guys appreciate the kind comments

  13. Matt Fouty says:

    Very cool, my own site uses white heavily! I dig the minimalist style.

    Matt Fouty’s last blog post..Wire Caddy Website and Brochure

  14. great article nice examples thanks..

    joyoge designers’ bookmark’s last blog post..Use of White in Web Design: Tips and Trends

  15. Kevin Palmer says:

    Great list. Always love to see people pushing the use of white space in design. We actually just finished our new site http://www.HEAVYGIANT.com and it uses lots of white.

    Kevin
    @heavygiant

  16. Patternhead says:

    Useful post, thanks :D

    Patternhead’s last blog post..Free Vector and Pixel Patterns – Ornate Set 2
    BTW I love your blog!

  17. Patternhead says:

    Useful post, thanks :D

    Patternhead’s last blog post..Free Vector and Pixel Patterns – Ornate Set 2

Trackbacks/Pingbacks

  1. Use of White in Web Design: Tips and Trends | Squico
  2. 白色を使ったWebデザイン « kota.blog
  3. What Space Means to Web Design? | Missouri Website Builders
  4. Twitter Trackbacks for Use of White in Web Design: Tips and Trends | Desizn Tech [desizntech.info] on Topsy.com
  5. Use of White in Web Design: Tips and Trends | Desizn Tech
  6. How to Accessorize With Jewelry : Storing Earrings: Fashion Accessories From the Jewelry Box | Open-a-Boutique.com
  7. 白の活用 | Nutspress
  8. Twitted by howdous
  9. Use of White in Web Design: Tips and Trends | Desizn Tech « inkpress.net
  10. Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?
  11. Link Love :: 04.26.09 | sarahsmile.us
  12. 在网站设计中使用白色:技巧和趋势| Resource| 前端观察
  13. links for 2009-04-24 « Giri’s Blogmarks
  14. Inspiring Design Links for Creatives for 2009-04-24 | This Inspires Me
  15. 我想网 » Blog Archive » 白色在网页设计中的使用:贴士和趋势
  16. Topics about Web-design | Use of White in Web Design: Tips and Trends
  17. WATCHMEN Trailer - AMAZING! | Latest News!
  18. Topics about Web-design | Use of White in Web Design: Tips and Trends | Desizn Tech
  19. Una veloce analisi sull’uso del noncolo… | Simone Lippolis' fastblog
  20. Website Design Schools for an Exciting Career | Visual Art Blog
  21. Using White in Web Design - Tips | IntegrityLance Blog
  22. Use of White in Web Design: Tips and Trends | Desizn Tech | Buy Cheap Microsoft OEM
  23. Graphic Design Links and Tutorials
  24. joyoge.com
  25. Use of White in Web Design: Tips and Trends | Desizn Tech | Feed Rss
  26. Use of White in Web Design: Tips and Trends : Design Newz
  27. Topics about Microsoft » Importance of Using Proper Fonts in Web Design
  28. zabox.net

Leave a Reply

Premium webmaster graphics - Brushes, Vectors, Icons, PSD layouts
Hosted By
SecureSignup.net