There has been an on ongoing feud in User Interfaces, whether light text on a dark background is better than dark text on a light background. Dark or black backgrounds are often being associated with sexiness  and gloss, and white backgrounds being clean but generic. Both (obviously) have their merits and uses, but the concern surrounds whether or not one is more physically straining than the other. the results of one colour and readability survey had this to say:

” The most readable color combination is black text on white background; overall, there is a stronger preference for any combination containing black. The two least readable combinations were red on green and fuchsia on blue. White on blue and red on yellow were ranked fairly high, while green on yellow and white on fuchsia were ranked fairly low. All others fell somewhere between these extremes. Also, in every color combination surveyed, the darker text on a lighter background was rated more readable than its inverse (e.g. blue text on white background ranked higher then white text on blue background).

colour survey

However even in the light of information like this people will still cling to the notion that “well… it just hurt’s my eyes”, which funnily enough is exactly the same rhetoric the opposing party uses.

A few observations on the personas behind this:

” I’ve chosen a black background for most of my text because it’s easier on the eyes than staring at a white screen. Think about it: your monitor is not a piece of paper, no matter how hard you try to make it one. Staring at a white background while you read is like staring at a light bulb (don’t believe me? Try turning off the lights next time you use a word processor).

documented on: 2006-08-22, by chrono13

Ok… so this is the typical kind of argument we are facing here. I can agree that staring at a word processor with the lights turned off is no fun. No-one should be working in an environment like that, this is part of the issue. As our dependency has grown on using monitors/screens in the work place, so has our awareness of adapting and integrating these technologies into our daily life with our limited physical constraints. Hence comfy multi-adjustable office chairs, mouse pads with jelly cushions, ergonomic keyboards, etc…those are all place holders until we figure things out.

The eye reacts in a similar way to those old CTR screens, lights can leave ‘burn marks’ or phosphorescent trails if you like. So, if you have a dark background with light text and you focus too long on one word this trail will follow your eye and overlay on top of the next word you are looking at, creating a blurry effect. In contrast the inverse will create the illusion that the text is thinner this is because the whole negative space of the page is the trail creating a more washed out effect. Try it out for yourself.

Visually impaired computer user will usually reconfigure settings to have white backgrounds and large bold black text. It is also interesting to note that astronomers often invert star-charts to analyse them.

Day & Night

Let’s forget about computers for a second. Think of primal man and how our brains have developed over thousands of years of conditioning. Hunting or looking through shrubbery throughout the day, bonfires,cooking and sleeping at night.  Our eyes have gradually adjusted and developed under this regime. Colours and contrast levels have also had their impact on our mental associations inducing states of alertness,fatigue, or irritation. A few simple examples:

• movement will catch our attention
• we are attracted to points of light in the darkness
• we have better visual acuity in daytime conditions

This means that light characters on a dark back will compete for you eyes attention. As you focus on one, the other distracts you forcing you to focus slightly more or squint.

Not so fast

Another study delves further using algorithms to measure contrast difference. The inconclusive results suggests that text color does not matter but what matters is the contrast level:

” In order to assess whether the direction of the brightness difference (i.e. bright text on dim background vs. dim text on bright background) is of any importance in determining readability ratings, brightness difference was calculated as the difference between background and text brightness. In the case where the background was brighter than the text, this difference was found to be positive. For those images in which the text was brighter than the background, this difference was negative. The brightness difference was then plotted against the median rating, and yielded a ‘U-shaped’ plot, shown in Figure 6 (below). This plot suggests that the direction of the brightness difference does not appear to be of importance in determining overall readability ratings.

In the end

It seems to still be an open debate with opinions pretty much split down the middle. Whilst i agree that there will never be an accord as to which is more aesthetically pleasing, personally i think there is a good case for which is more beneficial to our biology. I would be very interested to hear of any new research that has been done in this field.

Anyway, what’s your opinion…

Listen to More ♬

I’ve had these  for a while, just hadn’t taken pictures or put them up yet
go see the whole collection in the portfolio, a few more coming shortly…

check out the portfolio

Tired of doing the same things again and again? Why not use my personal Lazy Kit,
filled with useful time savers and ‘best practice’ principles. Give it a download and
try it on your next website design mock-up.

PSD Includes:

960 Grid system

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible
by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160,
192, 240, 320 and 480. This makes it a highly flexible base number to work with.

.

Web Safe Area

960 x 600
This ‘safe area’ is based on a 1024 x 768 Resolution and applies to maximized
browsers (in their standard UI configuration, e.g. no Google toolbar etc…)
The idea is that you want to fit your header, navigation, key messages, and a
recent piece of content into the safe area.  This will maximise the impact of your page.
We all want users to spend a long time on our sites, but the reality is that people hit
your page and do a quick visual scan to decide ;

a)  What the page is about, is it relevant?

b) Is this interesting enough to interact with anything?

c) Should I leave immediately?

Your goal in using the safe area is to entice users to scroll and discover the rest of
the page and content,  click on your content, navigate through the site.

.

Mouse Cursors

Pointer, Finger, Grab & Grabbing

.

Spare Parts

Close Icon, Dropdown Arrow, Search Icon, Left and right Gallery Arrows,
Play Icon, Top Navigation States

.

Video Sizes

16:9 –  80×45, 160×90, 240×135
4:3   –  80×60, 160×120, 240×180

These are place holder boxes for video content that will work well
within the 960 grid system

.

Gradients

Nice Multi-point soft Gradients with curved falloff

.

Button and Styles

A few Styles that I use all the time in my mock ups

.

Lorem Ipsum Text Box

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Every
Web Designer needs place-holder text boxes to be able to balance the weight of the page
properly. Having the real copy would be even better but most of the time that luxury is
not available, as the copy is still being written whilst the designer works out the look and feel.
Try and at least get a hold of realistic Titles and Headings (this can help a great deal in
conceptual thinking and planning of page).

This text Box has about 5 paragraphs worth of text in it, just click on the text box with text
tool to expand size of box and reveal more dummy text.

.

Enjoy & Feedback

Let us know how helpful this is to you, the more we hear from you, the more we can
give you what you want for free!

Well, haven’t posted in a while … there’s been a lot of changes on my end,
but the good news is i’ve had a bit of time to start working on the new theme.
I’m going for something a lot more simple and clean looking so that the focus
is on the content with lots of @fontface and CSS3 niceness….

Im still working on it as you can see… any thought?

If the Hanger Tea were to be submitted as an entry to tea-packaging-awards (if such a thing existed), I say it would win hands down! I can’t think of a better or more obvious way to pack teabags than this hanger & T-shirt design. It’s a funny take on how the simple motion of hanging a used teabag on the rim of your cup, be done. Color-coded for different varieties, the hangers are rather cute and so are the tea-shirts!

quoted from yankodesign

Artist Kevin Cyr made this Camper Bike, a functioning sculptural piece, built in April 2008. A stand alone piece and the subject of a series of paintings.

Super inspiring…i’d love to have one

more pics on kevincyr.net