Remodeling contractor Hamish Murray Construction, Inc. needed a show display for the Oregon Fall Home and Garden Show that walked the line between modern and craftsman, two of their largest markets. It also needed to be clean, bright, and orderly to give a sense of what a homeowner could expect from working with the company.

The center of the display holds a television display with a slide show. Quoin designed scale drawings from which a cabinet maker built the custom show display. Files were provided to a sign company for the header sign and vinyl lettering. We specified standard IKEA frames to show accreditations and work images, to hold down cost and give extra flexibility.

Molly’s Fund Fighting Lupus needed an convention show display that would support their Voices of Lupus campaign, which tells the stories of people suffering from lupus. We consulted with the client and sign company to determine the best solution. Then, we created the convention show design and worked with the printer to ensure accurate color.

Portland market strategist Rich Bruer asked us what Quoin could do to help improve his site’s legibility and update its look. We extended his existing brand and incorporated the font Futura Light as a web font. This improved the web site design’s faithfulness to the brand, while maintaining excellent search engine optimization.

Quoin installed a brand new custom theme over his existing WordPress site, which meant no search engine results were harmed in the making of this design. New features included custom menus, thumbnail images and clear calls to action that improve conversions (that’s sales, folks). Quoin also carefully considered his social media strategy throughout the design process.

Launch the site

Lechman-Su and Quach, P.C. asked Quoin to create a web site with the twin goals of garnering new local business for their family law practice while increasing and extending their reputation as guardians of minors from overseas. We needed to give the site an open, friendly feeling that helped users see how good they were with helping children and understanding their needs. We also worked to show how they partnered with attorneys in other countries to navigate complex adoption and family law.

This site is in development.

Town Center eSuites asked Quoin to extend the brand we had created to let new tenants know about the central Wilsonville location of their Class A office space. We performed graphic design of the site’s visuals that carried the brand forward and made dynamic use of their images.

This site is still in development.

Related projects include logo.

Town Center eSuites began leasing executive suites and needed to let people know about its professional image and high level of service. They brought Quoin on to create a new logo design. In the logo’s mark, we referenced the building in which it the e-suites are located to create this two-color logo that alludes to the scalability of the suites.

Wilsonville Town Center Offices needed a logo that would represent the building as they began the process of attracting long term lessors. We created a stylized line drawing that captured the principal architectural lines of the building. The colors were chosen to work with existing colors in the building’s interior design.

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…

Molly’s Fund Fighting Lupus needed to drive participation in their annual interior design benefit at the Portland Fall Home and Garden Show. Audiences included interior designers, vendors and others who will contribute to the show. We utilized the Molly’s Fund butterfly motif in a way that communicated the level of design participants can expect.

To hold down production costs, we modified the typical 11 x 17 inch format by adding a fold which created an overleaf. This provided more areas to organize event information and photos and gave the piece a narrative that nevertheless kept important event specifics front and center.

Non-profits need to constantly promote themselves and their events to drive donations, and Quoin is always excited to be a part of their success.