Much of my work to date with Cold Hard Code has been for relatively large applications.  These big, complex applications can quickly overwhelm so a lot of time is spent keeping things simple.  Our most recent project, Codepeek, gave me a chance to make something less intense.

The logo came together very fast.  Hoefler & Frere-Jone's Tungsten is CHC's corporate font so it's use was predetermined.  I had it in my head to create something playful, classy and more pop than my usual work.

From jump I knew that I wanted to set the text on an arc. After a few attempts I finally found what I wanted with a negative leading. This gave it a presence that reminded me of an announcer crowing to the crowd: Codepeek has arrived!

The two-tone effect is intentional, providing some clarification for the words.  The name is inspired by the concept of "peeking at code".  My original idea was "peekcode" but the k and c felt like a linguistic train wreck that refused to roll off the tongue.  Codepeek worked much better but was backward from my original concept.  Placing "peek" front and center in bright white balanced the message I was trying to send.  Careful not to forget the "code" I added a strong gradient and some subtle dots that are intended to look like bubbles rising in the code.  Those embellishments can be easily removed and the logo reduced to two colors very easily, fulfilling one of the rules of logo design.

The small leaves set behind the name are decorative fleurons that provide some distinction for an otherwise wordy logo.  It's a purely subjective decoration that I have an odd affinity for.

Codepeek was a great project that Jay and I took from concept to production in just over a week.  It gave me an opportunity to create a light, playful identity that I'm very proud of.

The Cold Hard Code name has always evoked feelings of metal. I've generally opted for stark expanses livened up by small dashes of bright color. This has worked well but I decided that CHC needed a change. This design used a bright, eye-catching background with a dark header, creamy body and dark text.

The Page

The first step was to fire up a grid. One of the fundamentals of using any template or one-size-fits-all methodology is realizing that it's a guide, not a law. I began by using a 60px column width to frame up the page. The first layer of the orange (which I call the wrapper) is 60 pixels wide. The second layer (the liner) is also 60px. This two-tone look breaks up the large, boring field of orange that would be there otherwise and frames the text. My original had an outer size of 60 and inner of 120. This looked great at high resolution but cramped the text unnecessarily when shrunk down to 1024x760.

The header gives me a place to show one of my signature design memes: organic patterns. I love to add swirls, paisleys and other curves into squares. Subtly peeking from our header is a complex pattern. It doesn't overpower the header but adds an underpinning of style. The inset type is set in Hoefler & Frere-Jones new Tungsten family. Recently released, I knew at first glance it was a great fit for the CHC brand. The inset effect — which is very trendy at the moment — gives it that stamped feel that anchors most CHC designs. A bit of a spotlight is added to the left to draw some attention to our logo.

The Body

The color was chosen to contrast well with the orange background but will also be discussed in the text section. The sides discussed earlier are fixed, so our center is fluid. Since I didn't expect there to be any grid needed for our body, this is a reasonable choice. Were we mixing in a lot of images or other content I would probably reverse my grid and let the sidebars be fluid.

Text

Since the state of web fonts is currently in flux, I chose to use our signature font (the aforementioned Tungsten) only in the header. The titling and body fonts are chosen from the palette of standard fonts that users should have installed. The titling sans-serif progresses as: Helvetica Neue, Arial, Helvetica, sans-serif. The body serif progresses as: Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif. We move from least-to-most in terms of expected availability. Most modern users should have these fonts and if they don't then we gracefully degrade to other fonts with comparable qualities.

The base font size is 14px with an 18px line-height (14/18). Since the content is expected to be somewhat technical, I chose to keep the text open with plenty of room to breath. If it were going to be less tech-heavy I would probably drop down to 13px for the font height.

The sizes of the various header tags are arranged using the golden ratio: 34, 26, 21 and 16. The line-height of each is adjusted to be a multiple of 18 to retain vertical rhythm. All block text elements are padded 18px at the bottom, again, to keep vertical rhythm.

Not happy with boring ol' black for text, I chose a very dark brown that works well with the header. Choosing a background and foreground color for your page is very important. It's vital that there is adequate contrast between the colors so that people with various forms of color-blindedness (or people with shitty monitors) will have a good experience. You can use Jonathan Snook's Color Contrast Check to verify that you are meeting established guidelines for contrast. In our case the foreground (#312A24) and background (#EFEDC9) have a brightness difference of 190 and a color difference of 550. Well beyond recommendations. This gives us excellent contrast and a nice feel, as the brown-on-brown looks high end.

Code

The markup is all HTML 5 with some features from CSS3. Since our market is people that aren't running old IE browsers we can leverage these modern features without alienating potential users or customers. The overall weight of the page is light, with only 5 images making up the base design. The YUI reset stylesheets are used to give us a clean slate to work from. There are some major problems with IE8 at the moment, but we're O.K. with that for now.

Summary

I'm quite happy with the overall design. The bold earth tones and the solid underlying principles yield a look and feel that is both modern and stable. A header swap will allow us to some simple updates in the future. The fluid center is causing some problems when scaled up to large widths, but that's par for the course. I'm also very excited about the recent support that WebOTF is getting. I assure you that I'll be closely following it's developments and constantly tuning this site over the coming weeks.