Stunning Examples of Light On Dark Web Design
Deciding when to use light text on a dark background in web design should always be about enhancing the content and the user experience. Here are some stunning examples of light on dark designs where the designers achieved this while maintaining excellent contrast and readability.
Tapbots
Black Estate Vineyard
Jan Sochor Photography
Mark Dearman
tictoc family
mediocore
auditude
Inca un calator
Edit Studios
Lucas Hirata
Krista’s Creations
Take The Walk
SpaceCollective
Aten Design Group
nclud
Dan Tobolic
sroown
Giant Creative
Nine Lion
Revyver Labs
Brand Storm
Elysium Burns
Kanchi
Related Posts
Here's some other articles that you will definitely find useful.
Focus On: Design Trends in Mobile Apps for iOS
15 Useful Web Apps for Designers
25 Inspiring Design Related Websites
Adding Constraints May Boost Your Creativity
Is Your Search For Inspiration Getting in the Way?
26 comments
Nathan Beck
January 19, 2009Nice selection. There’s a fair few more I could have added but there’s plenty of inspiration there.
serge
January 19, 2009great list
really like it.
I know u like Giant Creative… But u used it twice
Nicolas Hoizey
January 19, 2009What about this one with light text on (less than your selection) dark background:
http://www.gasteroprod.com/
Niki Brown | The Design O'Blog
January 19, 2009I really love the Black Estate Vineyard site. Nice contrast and its built on the 960 grid system.
Thanks for the list! Bookmarked and dugg!
chrishartmann
January 19, 2009perhaps you also check out my blog:
http://www.chrishartmann.com/blog/
#blackgreyredandwhite
Henry
January 19, 2009@Niki – I agree. Black Estate Vineyard is very nice indeed.
@serge – Whoops. Thanks for pointing that out. It’s fixed now.
Timothy
January 19, 2009Very good list. Much appreciated.
It’s good to see this trend becoming more serious. Any computer-based design (application, website, etc) in the past was not dark. This was because older CRT displays often do not display dark screen correctly. The light colors do not mix well, text is hard to read and colors (include the darks and grays) do not appear the right colors. This is why Vista developers opted for the classic Windows colors as the default scheme. They wanted, originally, to use the dark / black theme as the default.
But now we are at the point that most users are using LCD or newer CRTs, so this isn’t much of a problem. I love to see people moving towards mediums that make designing easier, better and allows for greater creativity.
Leroy Fernandes
January 19, 2009Nice list of sites up here.
I too have used the light on dark scheme, using orange and black.
Check it out http://www.fuelmediaworks.com
NetOperator Wibby
January 19, 2009This is a nice collection. I’ve known about Revvyer for a while [and, they have nice resources for download]. I came across Brand Storm by accident a few weeks ago.
@ Leroy: Your site looks pretty good man!
Fubiz
January 19, 2009Beautiful selection!
bretagne photo
January 19, 2009“Take The Walk” is a great design!
Daus
January 20, 2009Great list. I love Take the Walk.
Irene Demetri
January 20, 2009Very nice list.
Same as many others, I have used light on dark on my website too! Its my favorite style
http://www.youandigraphics.com
Lee Munroe
January 21, 2009Great list, great inspiration
TIm
January 25, 2009Wilsoni Institute did the black estate one I think..
Anna
February 8, 2009It’s interesting that most of the best looking light on dark websites are those of the designers themselves (whether they be portfolio or studio sites). I wonder whether this is an indication that generally, the consumers find them difficult to use?
Ramona
February 12, 2009My web designer used it to terrific advantage on my website, even though I was a bit afraid for readability. With the jewelry and the photos, it looks great. (www.WristRocks.com)
Sean Baker
February 20, 2009Thanks for including me in your article, I appreciate that!
photofolio
February 24, 2009Nice to see some other approaches. Main reason I followed this on my own photography site is to give the pix a bit more punch then if they were on a white background. The dark tones make it mostly look a bit somber though.
Suwat
April 28, 2009The white on black design is so simple, yet elegant. I could go for a glass of Black Estate wine right now!
web design gold coast
June 2, 2009Big fan of light on dark sites. White is boring.
whut
July 21, 2009Do you notice this website is light bg with dark text? lol
Light on dark is NOT good for blogs or sites with extensive content as the strain on the eyes is just too much. It IS ok for small word content or photo sites as reading is not a major point of the site.
skippy
July 29, 2009There are polls all over the net about light on dark vs dark on light, but whenever the question is asked about preference, people automatically start talking about white on black vs black on white, which isn’t the same thing.
White and black are complete opposites. I find the contrast high for me either way and can never read either one for very long.
Light on dark, however, say white on a dark gray – or dark on light with say, black on a soft taupe or something – I have no trouble reading all day long.
I think people should also talk about other factors like the font size and style. I think that matters even more than the colors in terms of readability.
Bradley Davis
August 26, 2009Great collection of sites, nice job.
Markus
November 28, 2009You should also check out this one. It’s done with a 4 column grid uses good typography and has beautiful photoshopped images in the header and footer.
http://www.mdxinteractive.com
Eduardo
September 29, 2010I really like the concept behind “Lucas Hirata”. That’s been one of my favourites for teh last couple of years now.