Cold Hard Code

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.

One of the reasons I founded Cold Hard Code with Jay was to explore interests that weren't part of our day to day jobs. One of these passions for me is design. I — with a lot of help from Jay and some close friends — am the creative mind behind our properties. Cold Hard Code has given me an opportunity to pursue this love.

My only "training" is over 10 years of using Photoshop and an equal time writing markup. I've always held strong opinions on design and style, but I rarely talk about them to anyone but close friends because I don't feel that I have a firm enough base in the material.

So over the last year I've been working on changing that. Starting with this very site I've shaped a style through trial and error as well as more traditional methods: books. Here's a list of some of the tomes that line my shelves now.

We'll begin with Robert Bringhurst's The Elements of Typographic Style. This book single-handedly convinced me as to the power of design books. Of all the books I've read thus far it is this one that I consult most often. I have a dozen pages bookmarked and I consult it often enough that it stays on my desk rather than on my bookshelf.

Although interestingly named, Alexander Lawson's Anatomy of a Typeface was a work I never really found my stride with. It makes a droning sound in my head if I read it for too long. It does, however, contain some very interesting history that I will almost certainly dip back into. In writing this entry I've noticed some passages deeper in the book that I have yet to reach and am looking forward to.

Ellen Lupton's Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students (Design Briefs) is one that I consumed in bite-sized pieces while on business in New York City. That being said, I don't remember a lot of the material. A quick glance reminds me that it was very "project" based and flowed well from one topic to the next. It is rich with examples.

Entering the world of Edward Tufte has been one of the more interesting experiences related to this renaissance. I managed to obtain The Visual Display of Quantitative Information, 2nd edition, Envisioning Information and Visual Explanations: Images and Quantities, Evidence and Narrative. I still have one left to read: Beautiful Evidence. These 3 books have had a significant impact on some of my more recent work. Tufte argues extensively against "chartjunk" and other wasteful use of real-estate in graphics as well as using the lack of color to convey information. I could go on for many posts about what Tufte has to say and still not touch the bottom.

Due for delivery this week is Luke Wroblewski's Web Form Design: Filling in the Blanks. This came from a post at one of my recent feed additions: The Designer's Review of Books, who gave it 4 and a half stars. Forms are one of the design elements that I feel steadily improve from project to project for me. I have high hopes that this one will increase that trend.

I'm excited to see what 2009 brings to my style, as a considerable number of design blogs and an Amazon wishlist full of books are waiting for me. I look forward to posting again in a year!.

I'm wrapping up a weekend project that uses MooseX::Storage extensively. The object I'm storing is pure moose, except for one thing: a DateTime field. Luckily ::Storage is up to the task and serializing a DateTime attribute is as simple as:

MooseX::Storage::Engine->add_custom_type_handler(
    'DateTime' => (
        expand => sub { DateTime::Format::ISO8601->parse_datetime(shift) },
        collapse => sub { (shift)->iso8601 }
    )
);

Simply add that to the class you want to serialize and it will henceforth know how to handle any DateTime objects it encounters.

I chose to use DateTime::Format::ISO8601 but you can use pretty much any mechanism you like!

We neglected to mention our other contributions to the Catalyst advent entry in a timely fashion. Day 3 covered creating sparklines and Day 9 covered Catalyst::View::Graphics::Primitive and how to build PDFs.

Each of these entries revolved around the power of Graphics::Primitive when coupled with Catalyst. These topics were both exciting to cover and give people some interesting options when choosing what modules to use for "rich" output in a web application.

We love cars.  We love to write code.  Cartionary.com is the result of the CHC crew merging two loves.

Cartionary aims to the premier site for the automotive enthusiast.  We wanted to raise the bar in terms of features and feel.  The high quality, gratuitous, hedonistic, luxury model as compared to the existing economy sites.  We don't, and won't, measure success in member counts but instead the quality of our members.  Raising the bar, and creating a wealth of information for car enthusiasts of all types.

We understand that car enthusiasts come in all forms; car care, speed freaks, classic show cars.  Each true car enthusiast can well respect the origins and knowledge of any other enthusiast.  Whether you are Richard Griot in a classic racer, cared for immaculately or Jeremy Clarkson seeing just how much rubber you can convert to smoke, there is a common bond between them.

Cars.  That's what we're about.

The way Cartionary fits in is our growing product to help facilitate the best accumulation of knowledge and socialization of true car enthusiasts.  Much of Cartionary is centered around the creation and maintenance of your garage.  Your garage can contain as many cars as you like.  You can even create multiple garages!  These virtual garages allow you organize and categorize your vehicles.

Speaking of vehicles, you are allowed to create descriptions, tag and make a list of the equipment that you've got.  If you have customized it, then this would be the place to talk about the custom modifications.  If your car is stock, then perhaps you might detail the extra stuff you opted for or discuss why you picked that car.

Cartionary isn't about a particular type of vehicle: It's a about a particular type of driver. We put the same attention to detail into Cartionary that we put into our beloved cars. We hope you will to.