Home
About
Categories
 Design
 General
 Inspiration
 Project Management
 Resources
 Strategy
 Technology


<April 2006>
SunMonTueWedThuFriSat
2627282930311
2345678
9101112131415
16171819202122
23242526272829
30123456

Your best shot at happiness, self-worth and personal satisfaction - the things that constitute real success - is not in earning as much as you can but in performing as well as you can something that you consider worthwhile.
~ William Raspberry

Art. You never learn it.
~ Milton Glaser

 

 

 Monday, April 10, 2006
Macs, PCs and Web Design and Color

Since 95%+ web users are viewing sites using PCs and MS IE, wouldn’t it make sense to design web graphics on the same type of computer with similar monitor color temperature, resolution, aspect ratio, browser and gamma? Designers I work with often do not like how their work looks on PCs when compared to Macs. Web sites meant for public consumption should be designed for PC display. The easiest way to make things look good on a PC is to design on a PC. If you love your Mac, you can create designs that view well on a PC, but there must be some compensation and adjustment.

Gamma

Pertaining to computers and the web, gamma is the tonal curve that a monitor displays: shadow detail, highlight detail, contrast and color temperature. Default gamma for a Mac is 1.8 while a PC’s default gamma is 2.2, much more contrast. You can change a Mac’s gamma to 2.2, but it just doesn’t seem the same. Shadow detail viewable on a Mac is often lost on a PC, same for highlights.

Brightness

PC monitors are generally brighter and flat panel monitors are even harsher. When creating graphics on a Mac the brightness needs to be adjusted.

Color

PCs are much colder, or bluer by default. Be cautious about skin tones, and earth tones such as olive, taupe, dark red, and ochre.

Scale

Since Mac went to the wonderful wide screen OS X monitors, some designers have had difficulty with scale. Sure it’s easy to say my layout is 750 pixels wide, but on that huge screen designers new to that environment can design elements larger than they expect them to look. Mac monitors have a default resolution that does not match the conventional 800x600 or 1024x768 sizes of most users’ screens. It is important to check size on a PC. Type and detail in graphics may be difficult to read, or not be in balance with HTML type sizes.

Type Anti-aliasing

Mac’s display web type anti-aliased, not bitmapped. Some new PCs also have this option as a default setting. Most users do not view sites this way. It is important to see how type looks bitmapped. It affects the clarity and size of the characters and general copy volume. If type is supposed to be bitmapped make sure it is checked on a PC to see if it has the desired appearance.

Fine Tuning Color

Color management on the web is a difficult battle. There are huge variations between monitors, settings, and color profiles on user’s computers. Even different browsers can render colors differently.

The best approach is simply to test on various computers. What may look good on your screen may not on others. Remember, acceptable is not perfect; there has to be some compromise. Create images that look the best for the widest number of users. Techniques that work with print color management are not standardized for the web.

Design
Comments [0]  



A practical look at strategy, project management, technology and design for today's web.

Blogs & Portals

 37 Signals
 Ad Pulp
 Adaptive Path
 AdRants
 Alltop
 Brandstorming STL
 Coudal
 David Byrne
 David H Hansson
 David Hayden
 Design Charts
 Design Observer
 DNN Creative
 Flash Authoring Team
 FWA
 Guy Kawasaki
 Joseph Jaffe
 Joshua Jefferies STL
 Kaliber 10,000
 Kottke
 Logic+Emotion
 Newstoday
 Paul Macfarlane STL
 Scott Guthrie
 Scott Mitchell
 Seth Godin
 TechCrunch
 ThoughtWorks Blog
 Tinic Uro
 Web 2.0 Workgroup
 Zeldman
Copyright © blend 2006. All rights reserved. | By James Bielefeldt. |