According to a study conducted last year by the Nielsen Norman Group, they see a big F. The study, which used special eyetracking equipment to measure how much users looked as specific parts of a web page, showed users tended to view sites in a pattern that looks roughly like an “F,” scanning across the top and down the left-hand side. In addition, they spent almost no time looking at large images, banner ads, or other graphic content. In fact, they often skipped over meaningful content if it looked too much like an ad.

What does this mean for your site design?

Never forget that your customers come to your site looking to solve a problem. They want to buy a product, or find out information. It doesn’t mean that they are indifferent to design — a poorly designed site can look unprofessional, undermining confidence in the solutions you offer. However, design should never get in the way of the functionality of your site. It should never be difficult for your customers to find the solutions they are looking for.

Design enhances functionality. But functionality always comes first.

Ref: Eyetracking Study

These are words that every printer dreads hearing. Usually, it means a disappointed customer. If that disappointed customer has ever been you, with a little understanding of the differences between images on print and on screen, you can be a happy customer instead!

There are two major differences between images seen on a computer monitor, and images seen on a printed page. The first is resolution. The second is color. This time we’re going to talk about resolution.

Resolution is essentially a measure of how much information about the image is present. In traditional dot-based printing (like what you see in a magazine or newspaper) resolution is typically measured as dots per inch, or dpi. Newspapers are almost always printed at a much lower resolution than magazines. Look closely at a newspaper photograph — you can probably see the dots that go to make up the image. Now look at a magazine — you probably can’t see the dots with the naked eye. But if you pulled out a magnifying glass, you could see that they are there, but much smaller than the dots in the newspaper photo, so there are more of them in an inch. Magazine photos are at a higher dpi. Higher dpi means a sharper, clearer image.

Digital images are measured in pixels per inch, or ppi, which roughly corresponds to dpi in printing. Where the difference comes in is that computer monitor displays are very low resolution compared to print — most are only 72 ppi. So, an image that looks terrific on your monitor at 72 ppi may look blurry when printed out. For good print results, 300 ppi images are safe, but images with a ppi as low as 150 may look all right depending on how they are being printed.

If you are sending images to a print provider, find out exactly how they want the images formatted.

The images on most web sites are only 72 ppi. They don’t need to be any higher in resolution to look good on a monitor, and lower resolution equals smaller files that are faster to load, so this makes sense. But it means that you can’t grab your company’s logo from the web page and expect it to look good on your business cards.

That is, unless the image is huge on your web site, and really small on your business cards. For example, an image that is 35 inches wide at 72 ppi can be redefined to be 8.5 inches at 300 ppi. If you have an image from a web site that you would like printed out, try redefining it as a smaller image with a higher resolution, while keeping the total number of pixels the same.

Keeping the total pixel dimensions the same or smaller is very important. Attempting to stretch an image to make it larger nearly always gives poor results. This makes sense if you think about resolution as a measure of image information — on a smaller image, that information has already been discarded, so when you try to enlarge it again you are basically asking your drawing program to invent image information that doesn’t exist.

For important company images, such as your logo, the best advice is to save copies at the highest resolution possible, and know where those images are stored. That way you can always go back to the source.

Last time, we talked about resolution as it relates to print vs. web image reproduction. This time, we’re going to talk about color world.

Your computer monitor creates color using light, like a television screen, using the RGB or red, green and blue model.

The print world creates color using pigment. Full color images are commonly rendered using the CMYK or cyan, magenta, yellow and black model, but some high-end print shops use the Pantone Hexachrome model which adds orange and green to the color mix. Items might also be printed using spot colors (such as those defined in the Pantone matching system), metallic or iridescent inks, or varnishes that give particular visual effects. In addition, the color and reflective quality of the paper affects how a printed image looks.

What this means, simply, is that the colors in your document do not look the same on the screen as they do on the printed page.

In fact, the colors in your document might not even look the same from one monitor to the next – equipment age and manufacturing differences can cause a great deal of color variation in individual monitors.

Similarly, if you print your document on your color office printer (which probably uses the CMYK model), you may not get the same results on a different office printer, or with a professional printer.

If your color requirements are not strict, you may never run into a problem. The sky looks blue on your monitor – it looks blue on your printout – no problem! But there are a couple of common pitfalls when moving an image from the monitor where you do your layout to the printed page.

1. Dot Gain
“Dot gain” refers to the tendency of printed dots to spread as the ink soaks into the paper. This is particularly noticeable on newsprint, which is uncoated and very absorbent (as anyone with a puppy can attest!). If you are preparing something to be printed on newsprint – such as an ad – for the image to look right on the paper, it will probably have to look too light on your monitor.

2. Luminosity
Images on your monitor are luminous – lit up. Images on paper are not. This can make printed images look too flat and dark if you are expecting them to look like the image on your monitor. Again, making the image appear too light on the monitor can give better results on the printed image. Using a coated paper stock or a varnish can increase the apparent luminosity of a printed image. Sometimes shifting the color mix toward yellow or green can make the image seem more luminous.

When going from screen to print, if you are having the image professionally printed, your printer may have some good ideas about how to improve your results.

When going from print to screen — for example, if you want your website to look like your business card — you will want to talk to your web designer about how to get the best results.

Often, the answer is: nobody.

It was a committee.

It might seem odd that a group of people working together should be able to come up with something that not one of them actually likes, yet, in my experience as a designer, it happens all the time. A company rebrands, only to revert to the previous branding a few months later. A company goes through an absurdly lengthy logo design process, and in the end nobody is happy with the result. Or maybe everyone in the company is fairly happy with the result, but they discover that their customers find the new logo, or slogan, or name, to be baffling and unpleasant.

No group is immune to the pitfalls of a committee design. It seems difficult to avoid – after all, you can’t have a logo or a web site that some members of your organization just hate, can you? And some compromises are inevitable in a cooperative business environment.

Why do committee designs tend to turn out so badly? There are three major reasons.

1. The design nobody hates is also the design nobody likes

Consensus is good, right? You want everyone to be happy with the results of your design. But not everyone is made happy by the same things. We don’t always like the same music, or the same TV shows, or the same clothes — we don’t decorate our houses the same way – is it any surprise that we don’t always like the same designs?

The bolder the design choice, the higher the chance that someone on the committee will actively dislike it.

Eventually, a consensus will be reached – usually on a design that nobody actually hates, but everyone finds kind of boring. Over time this boredom deepens into profound dissatisfaction, somebody decides to spruce up the company image, and the cycle begins again.

2. You really can’t have everything

A common complaint about web site, logo, and package designs is that they are too busy and visually cluttered. They have too much going on, and none of it is very clear. Visual clutter is usually the result of trying to include too much — and one way that happens is committee design. Everyone on the committee has their own personal thing that just has to be there.

3. Warning! Egos ahead!

Committee design projects often become a playing ground for every other dynamic going on in the organization — status conflicts, ego conflicts, personal vendettas, pet projects. Sometimes, deep conflicts about the direction of the organization as a whole manifest themselves as conflicts over design.

Sometimes ugly designs are even the result of passive-aggressive lashing out, either by frustrated committee members, or perhaps by the designers themselves, after one too many contradictory design iterations.

In general, the best way to avoid the worst pitfalls of committee design is to give one person — hopefully, one person with some design sense — final approval on the project.

Number one tip: Use a standard color reference

I have a confession to make: I love color swatch collections.

Whether it’s paint chips, fabric samples, Pantone color match books, cosmetic guides, or boxes of Crayola crayons, I get a kick out of seeing a lot of different colors all grouped together and organized by type. I’m not the only one who loves these things. They’re intended to be attractive and enticing.

Because of this, colors are often given names which are intended to not only be descriptive, but also to evoke an emotional response. So, when the Sherwin-Williams web site offers dozens of almost-white colors, it makes sense to call them things like “Nacre,” “Nonchalant White,” “Frosty White,” “Opaline,” “Topsail,” and “Quicksilver.” But, unless you have established the Sherwin-Williams site as a reference, it is nearly impossible for your designer to know that “Nacre” is a pale ivory color (especially when, in nature, “nacre” is the term for mother-of-pearl, which isn’t ivory at all).

Similarly, very common color words can be easy to misunderstand. Turquoise, aquamarine and teal all refer to a bluish-green (or a greenish blue!), but one person’s “teal” might be another person’s “pine.”
The Pantone system, which is intended for use by designers, identifies colors by number. That’s it.
(Of course, after working in the industry for years, many designers might know that Pantone 306 C is a pretty sky blue, or that 382 C is a bright lime green.)

When designing for print, the Pantone system is your best choice for avoiding color ambiguity.

When designing for the web, try to use either an RGB specification (RGB 168, 144, 108) or a hexadecimal specification (#a8906c). If you don’t have a picture editor such as Photoshop to use for selecting colors, there are many web resources that exist to help you select the hexadecimal notation for the color you want.

The words every designer dreads hearing.

When you hate your first (or second or third) website design, it’s easy to assume that somebody must have done something wrong. Maybe the designer was lazy, or your sales representative is an idiot, or maybe it’s you, maybe you didn’t "ask right." But there’s really no "right" and "wrong" when it comes to designs. You probably didn’t do anything "wrong" and your sales rep and designer probably didn’t either. You just don’t like your first design. The question is not, "what went wrong?", the question is "where do we go from here?"

The first thing is, try to figure out why you hate the design. Review the specifications and example sites you supplied to the designer. Sometimes it will be because the designer actually did miss one of your specifications, sometimes it will be because the designer didn’t understand your requirements, and sometimes it will be because your requirements didn’t include something crucial. If that is the case, it should be fairly simple to add or clarify the missed specifications.

Of course, sometimes you will hate the design simply because it doesn’t look like how you imagined it would. Or, really, because your reaction when looking at it is not the reaction you hoped you would have. Maybe you didn’t even know your requirements included "no green" until you saw a site that used a lot of green and hated it. Or you didn’t know that you wanted soft edges, or a curve in the header, or a background that’s not white, or an extra-glossy wet look throughout. Well, now you do know. So, even if you hate the first design, you’re now that much closer to a design you’ll love.

All that assumes you can pinpoint what you don’t like. But sometimes you can’t. Sometimes you just don’t like it and that’s all there is to it. In that case, it might be a good idea to supply your sales rep with a longer list of sites liked and sites disliked. Be sure to explain why. If the designer sees a list of six sites that you like, he or she might observe something they all have in common — such as rounded edges, or a textured background or a smaller than usual header image — that you never consciously noticed.

Finally, if you really, really dislike a design, it is important to let the designer know that you want to see something completely different next time. Otherwise the designer might produce a second draft that addresses your individual problem points (wrong logo, different colors, etc.) but still give you a design that looks very much like the one you already know you hate.

Does that mean that you can enter the land of Web 2.0 by taking your existing website and adding glossy buttons, rounded corners, gradient backgrounds, and graphics that look like they are reflecting on a wet surface?

Not exactly.

The term "Web 2.0" was coined for a conference in 2005 as a catch-all to describe post-2001 trends in web development.

It is easy for people to latch onto surface texture – like shiny buttons – but the reality is that many web design trends of the past few years are the result of underlying changes in how the web works and how it is used. Greater browser support for CSS design standards has expanded what kinds of designs can be implemented. The trend toward dynamic and interactive websites has pushed designs to be more flexible and to have clearly defined sections. And, as people increasingly use the web as a platform for social connections, business collaboration, and research, websites that are functional and easy to use become more important.

Shiny buttons aside, here are some design concepts that might be considered Web 2.0:

1. Simplicity

Minimalistic Google sets the tone for this concept, but many other sites have followed suit. Simplicity doesn’t mean bare-bones, although it can. It means that site elements are organized logically and obviously, so that it is easy for a casual visitor to instantly grasp what the site is about.

Modern websites have a lot more going on than websites of the past, and it’s crucial to corral all that visual activity in such a way that it doesn’t turn into a big mess.

2. Personality

For a while back in 1997, web designers seemed to have the idea that being cold and a little dull was the best way for a small company to communicate professionalism. (Don’t forget the stock photographs of serious-looking people in business attire!)

The best modern websites have a strong design personality and communicate a sense of fun. Bold icons, humor, splashes of bright color, cartoons, distinctive visual textures or illustrations — all of these have a place.

3. Attractive calls to action

A "call to action" is a marketing concept: essentially it means telling people in no uncertain terms what exactly it is that you want them to do. In marketing, of course, the thing that you want people to do is something that directly gets you money. "Buy now!" or "Call us today!"

Calls to action on the web include not only standard marketing, but also how to use elements that are free to the user — "Watch kittens frolic" or "Download our free software" are both calls to action.

The best calls to action feature both a visual iconic element, and a text element. These two aspects work together for instant recognition.

And yes, calls to action can include shiny buttons.