The introduction of a completely new design can be aggravating for existing users, particularly when features that they’ve taken the time to learn are suddenly relocated, or removed altogether.

To avoid disorienting users, we reused the existing site format while updating the visual design and improving elements such as spacing and contrast. This way, Reason’s readers benefit from the enhanced features made possible by the new publishing system, without the inconvenience of relearning how to use the site.

For example, Reason, like many other websites, structures content with a static three column layout. The left hand column is dedicated to navigational links, masthead information and advertising. The center column contains the featured content well and links to categorized content, and the right column promotes additional highlighted content, with space for advertising.

The old version of the site was well organized with plenty of white space, but the design was flat and lacked visual interest and depth. The new design is more appealing, has a more natural visual hierarchy, and does a better job of keeping content separated without feeling unnecessarily boxy.

We sent over two design variations, making sure to reuse their currently branded blue whenever possible. Their feedback follows…

“Can I see this with a completely different color scheme?”

Hearing this might make a designer cringe, but it’s very important to make sure the client is happy.  Fortunately, the project was still in the early stages, so alterations were relatively easy to make.

After a brief consultation, we agreed to work on some new variations while keeping within the same basic palette. This would mean shifting the use of color around while adding shades and tints to create more variety. This type of consultation helps keep everyone happy by taking the middle ground. We aren’t creating designs with wildly conflicting colors, and the client doesn’t have to hear a flat out refusal on our end.

We submitted the above mockups, two of which rotated color usage in sections like the highlight column (bottom right corner), and one of which used a monochromatic scheme (third mockup from the left).

When only one color is used for a design, the overall feel can often be flat or what I’d consider “overly emotional”. A design that only uses red can make you feel too hectic or heated without a cool compliment for balance. Similarly, a design that only uses blue would make you feel too serious or cold without warm oranges or reds. When it came time to show our client the revisions, we made sure to bring this up as a possible issue.

In the end, they went with the primarily orange/gold design, giving the site a bright and light feeling while still leaving room to use the complimenting blue for their logo and headings.

To help explain what we mean by color distribution, take a look at this little map we created using IWF.org as a base.

On occasion, we start layouts by grabbing all the content the client would like to see on the main page, making it black, and dumping it all into a new Photoshop file. Next, we make textual hierarchy changes by pumping up the weight and size for headings and subheadings. After some spacing and alignment changes its ready, but start collecting color only after these steps have been completed

First, we establish any existing colors which will need to be incorporated into our palette due to existing branding. In the example using IWF.org, the red from the logo needed to be added.

We needed to pay attention to an additional client request, which was that we keep the site feeling open and bright. Yellow or yellow used as a gradient is good for this.

You can add two colors to the palette by choosing one with a rich hue (aka saturation), in this case blue, then branch off by grabbing a tint of the same hue.

We also always grab something fairly neutral to use as borders, or for headings and backgrounds which require less emphasis than areas with brighter hues. For IWF.org, we chose a medium gray that is used on all borders and dividing lines.

Now the color palette is ready. Most, if not all of your color usage will be dictated by the palette. You can deviate, but only by shifting the base hue with shades and tints. Start by identifying which elements should use the same color. For example, all links within the main content area need the same color. All first-level headings need the same color as well.

Now you can experiment by using the colors in your palette in these positions. Any colors that are too light can be used for text as long as there is a background behind it with good color contrast to make everything readable.

Remember to use white as a color as well, not just for backgrounds. Any of the colors in your palette can be used for a background, which means any text on top of it can be white (depending on readability).

Huh? Let me explain:

Sites like digg.com and reddit pull in data by relying on a unorganized rabble of internet misfits to strain good internet content from the bad. ShoutingMat.ch looks to a definitive list of the blogs that everyone’s reading, bottling you only the best content from purest sources in the ice cold mountains.

Not only will you drink up high quality content, but each story delivers the blog or origin from whence it came, accessible via a handy drop-down list so simple even a caveman could figure it out.

Here. Me make drawing

Since The American Spectator has been around for 1967, keeping the established identity was an important part of the design process. We retained their look by re-using the existing color palette and by keeping the established logo simple in a basic white on red header. Further distributing the red, we threw it into the date-bars, content category headings, third column headings, and buttons. Using the black in the large featured post area serves as the focal point, drawing the eye with an over-sized image and further distributing color. We continued this with the bold black post headings and the background for the active state of the nav list in the right column.

We were also tasked with keeping a good chunk of the content available on the main page without a ton of scrolling. To accomplish this, we kept the spacing between posts on the homepage to a minimum. This expands of course when you click through to read the full article. To create visual separation of content, we used thin borders on the bottom of each post and kept the article headings big compared to the accompanying text.

Along with the re-design, this site has been built on a newly built backend framework which allows for much greater content control by the editors. Additions to the backend are super simple now as well, so any client changes/requests can be managed quickly and efficiently.

We began by creating several mockups in Photoshop, utilizing some existing media to develop cohesive looking examples. With these, they were able to give us great feedback, helping to push the designs forward and moving closer to a design which met their needs.

A few color tweaks, a section or two added to the right column and the design was complete. Reliably serving up high quality video to a potentially massive visitor base was crucial, so we went with the Amazon S3 grid for this. So far this has been the perfect solution as well as an inexpensive one.

Currently, we are re-working the center column a bit to allow for smoother work flow, but the same basic feel will be retained.

Some notes for the CSS geeks

Notice how the text changes color on hover for the “send us your videos” and “Drew Carey Project Archive” areas in the right column? This was accomplished by using an <a> which has this image applied to it using the background declaration. There’s a :hover state for the <a> which shifts the background image up by sixty eight pixels.

Some earlier concepts: