Before you build, decide what will happen once it's up. 

Static, informational 'brochure' sites are a thing of the past. Today, competitive web sites are dynamic marketing engines that are a keystone of your business's identity.

To adjust quickly to market conditions, you need to be confident that you can set a strategy and execute it. Your web designer can help ensure you have that flexibility if they know how your company will use the site.

Some questions to answer:

• Who has the technical skills to maintain your site?
• Who in your company is responsible for content decisions?
• How will it dovetail with your larger social media strategy?

Knowing this information at the start of the design process will help you realize a better return on your investment. 

Let's take the questions one by one:

Who has the technical skills to maintain your web site?

Your Web Designer

Your web designer probably maintains a wide variety of sites, and, depending on your employees' skill set and the number of changes per year, that may be a cost-effective option. Of course, they must be able to make changes quickly.

Divert, Hire or Train

If that's not right for your company, you will need to find someone in your org who already has the skills to maintain content, or you will need to train or hire someone. 

Many of Quoin's sites are built on WordPress, and training is always a component of our new site design packages. Most people who can readily operate Microsoft Word can maintain a WordPress site through it's well-tested user interface. However, a basic knowledge of HTML can save time if a tag gets broken.

If you have an in-house IT department, this might be the answer to the question. But suddenly you're asking your IT department to support marketing. This is a relationship you (or they) may not be accustomed to. 

Who in your company is responsible for content decisions?

What we're really asking here is: Who is responsible for strategy decisions? What blog posts will support your new product release? You have a benefit coming up. What do you say about it, and how often? Does the content manager have the images she needs?

How will your new site dovetail with your social media strategy?

Your web site and blog posts are the foundation of your organic search results. These are fundamental to your site's success, whether or not you're also buying online ads.

Traffic between your web site and your social media network is a two-way street. People can find your site first, and then engage with you socially, or vice-versa. But your web site designer will need to provide the right tools for them to do that. 

Some common social media tools are:

• Facebook 'like' buttons for your company's page: When a user clicks this, your site's news begins to populate their feed, keeping you connected to them.
• Facebook 'like' buttons for your individual blog posts: When someone clicks this, they post that particular blog post to their wall, so their friends can see it.
• Twitter 'follow' button: When they click it, your user starts seeing all of your posts in their Twitter feed.
• Retweet button: posts that blog post to the user's feed.
• Many other social networks can be integrated with your web site, and it's a flexible process wherein networks can probably be added or deleted as your strategy changes. But it's best to know up front if, for instance, you're going to be making inroads into GooglePlus.

Set your strategy and stick with it

But not forever. The best thing about online marketing is it's flexibility. Sometimes that flexibility can lead owners and marketing managers to change tack before they know if a strategy has been effective. 

Decide how long you can wait to see results. A month is very short in search engine terms. Make sure you take baseline measurements before you put up your new site. Then stick to your time line. 

Having the right people and strategy in place to support your site will give you your best chance of success.

If you're considering a new web site, please check out our recent work.

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…