The Google search results page was just drastically improved. A clear hierarchy of user interface elements was carefully considered and executed, meaning it’s now just a little easier to make sense of the glut of information this search engine gives us every day.

In the past, Google has suffered from design-by-committee syndrome. One example where that has not been true has been their amazing maps.

The new look was created by Andy Hertzfeld. One of the seminal Apple UI designers, he worked there from 1979 to 1984.

Nothing in this redesign added server load. The user interface was improved through cosmetic changes that give better legibility and useability.

I’ve used an original search engine results page (SERP) from SearchEngineLand’s Flickr stream, released under a Creative Commons license.

I’ll start right at the top of the page:

1. Main Navigation

• Main navigation has been clearly separated from the logo/search field by making the background a charcoal gray.
• More vertical space above and below menu items.
• The items in the bar have been spaced out an additional two pixels.
• The active item over-line is now red.
• The pattern language of the navigation bar, so widely prevalent on the web, has been leveraged to allow the designer to remove the link underlines.

2. Logo/Search Area

• The logo has been reduced by about 20 points (about 15.5%) which brings it into better scale with the other elements on the page.
• Search field has been reduced vertically by about three pixels.
• The entire logo/search field area has been given a light gray background with a darker lower border. This separates the primary search area from the results. Because the logo is smaller, this area was able to be reduced in height by 4-5 pixels.
• The ‘Search’ button has been replaced with an icon of a magnifying glass that needs no translation.

3. Left-Hand Sidebar

This area originally annoyed some because it seemed to add a visual barrier to their results. There’s even a Firefox plugin out there that removes that sidebar. In the newest design, the sidebar has been widened even more, from 160 pixels to about 190 or 230 pixels, depending on the width of your browser window. I think there are some good reasons for this.

Older web sites often put vital navigation information in the lefthand sidebar, until it was shown through user testing that people noticed it only after information in the header and main content areas. Placing tools that refine the results in this area makes sense, since a user will probably follow the pattern of:

1. Input a search term in the search field
2. Scan the results to see if Google has delivered what they’re looking for
3. Look for a way to refine the results in the More Tools area (I often use date filters to find recent blog posts)

Only then does a user tend to look toward the ads on the right sidebar.

Old Icon Set	New Icon Set

Icons on the left sidebar were in bright Google colors that distracted the eye away from search results and other important elements. They’ve been converted from blue to the same charcoal gray as the header, simplified and enlarged for emphasis.

They are easier to understand now that they have room to be seen and no longer compete with one another for attention. Yet they fall below the search results in importance because of their muted color.

Removing the rules from between and to the right of the menu items eliminates visual noise and allows typographic principles of white space to perform the same function more effectively.

The currently-active service was indicated by a bright blue background that jumped in front of the search results. Now the text and icon is the less-saturated red, causing less distraction.

The More button now reveals other Google services rather than search tools, which have been moved to their own dropdown. These are no longer blue but rather charcoal gray (#333333, the same as the top menu background). This is crucial to their improved integration into the page design. The filters are lighter (#666666) and have more line spacing (19px, rather than 18px).

Now that Google is so location-oriented, they’ve given your location pride of place by setting it off with a red title and very light rules.

4. Search Results Are Easier to Read

Another reason why the left sidebar area has been a boon to searchers is that it gave Google an opportunity to reduce the spread, or the number of horizontal characters, in the results.

The first line of the old results page has about 115 characters. The longest line I could find in the new results has about 100 characters. This makes it slightly easier to read the second line of the results, since the eye doesn’t have to travel as far to find the beginning of the next line.

In the search results, the leading, or line-height, has been increased by one pixel.

5. Colors

The type colors hold together much better in the new design. At first, I thought that the new blue link color was less saturated, or bright, but in fact it is more saturated, but darker. here’s a comparison of all of the colors, plus the new red that was introduced:

As you can see, the brightest color is still the link blue of the search results. This means that Google’s stock-in-trade always comes first.

Conclusions

There’s an overall pattern of page elements being reduced and scaled back in order to play better with each other. A solid understanding of color and typography have been put to work to better serve the needs of Google’s users.

I appreciate more any insights you have!

But now, there’s a new option: http://vectormagic.com

It’s not perfect, but it’s pretty darn hot. Here’s what it did when we pulled the logo off of our own web site:

There are issues that would need to be cleaned up in a vector drawing program, and the type still needs to be identified and re-set. Still, it would save a lot of time. Put this together with WhatTheFont and you’ve got a successfully traced logo in half the time or less that it would usually take.

Now bookmarking…

ywca clark county approached us for a wide-ranging rebranding effort. Part of that was to redesign their brochure system. These pieces are the front line for this non-profit in fulfilling their mission to help individuals in crisis. We were given the mission of working within their existing corporate identity.

ywca clark county brochure system before redesign

As you can see from the ‘before’ image, the system had suffered a range of variations due to organizational changes over the years. The result was an incoherent look that seemed messy and disorganized. We also energized the layout while prioritizing easy comprehension.

We did take one liberty with the identity: ywca wanted to move away from the over-bright persimmon orange shown in the ‘before’ pictures, so we chose something with more red and complexity which was in the same family of color.

We worked hand in hand with YWCA’s content writer, Eve Connell, to conceive content that spoke directly to the individual in accessible, active language.

Working with an organization such as this means that we had to remain flexible as each stakeholder brought their input to the table, while we advocated for our own design viewpoint and built consensus.

Once the designs were complete, we guided the brochures through the printing process.

Redesigned brochures have better impact.

This is a great idea, as long as the clearinghouses are ethical about only blacklisting genuine spammers. Unfortunately, Quoin has recently had a run-in with another kind of company.

One of our clients had their email rejected by the recipient’s web host. It was an important message to a supplier. This happened several times, so the supplier talked with their host. The host said our server had been blacklisted. I checked and found that it was on a single black list, UCEPROTECT. I emailed my web host, and they sent me this reply:

Hello,
While the server is listed at UCEPROTECT, there is very little we as a company can do.  They run their blacklists only as an effort to make money.  We’ve tried to work with them before and it all comes down to them wanting money to do something that is automated in the first place.  We have repeatedly asked them for logs/evidence/proof and they adamantly do not provide any.  Unfortunately, even paying them to remove the listing gives them no reason to not re-list the server at their whim, based on little or no evidence, based on past experiences where they have done just that. Armed with this information, upper management refuses to deal with such unscrupulous companies.

Essentially, this black list holds email hostage. We did some research on UCEPROTECT, and discovered that they want 50 Euros ($70) to de-list a single IP address.

What we couldn’t understand is why reputable web hosts would be working with a black list like this. We’re very glad ours doesn’t! Web host administrators have the option to exclude lists such as UCEPROTECT but sometimes don’t take the steps necessary to exclude them.

We’ve posted this in an effort to increase the exposure of this practice. If it’s not illegal yet, why isn’t it?

Many of the blogs out there are tutorial, or directed outward in terms of broadcasting the writer’s knowledge and understanding. This is of course a very good idea. The writer can demonstrate his expertise, and Google will then send all sorts of PageRank karma his way.

I could sit here and try to crank out PSD Tuts (that’s graphic design blog speak for PhotoShop tutorials), but there are many out there who can do that far better than I can.

However, I’ve been surveying my knowledge. 30% or so of it is verbal. Another 60% is non-verbal. To create content, that knowledge can be demonstrated via images, of course. Google doesn’t love that, but it’s a start. The last 10% is non-verbal, and, frankly, non-visual. And it’s the part without which I can’t possibly do my job – that 10% inspiration part. It’s the magical bit. I’d love to talk about that, more than anything else. The best way for me to begin to do that with this blog is just to find stuff I love and link to it.

I’ll start there anyway.