In this feature I try to shed some light on the development process and/or elements of a selected design. By deconstructing the design into layout, typeface, colours & use of images we will hopefully develop a better understand of how the final result was achieved. I feel that this degree of awareness is crucial to a graphic designers development; being able to not only identify the design elements but the rationale behind them.

In this edition of Design Deconstructed (DD) I am going to be observing our own website, WHITEINK (www.whiteinkblog.com).

Masthead, Set in Helvetica Neue

Kerning of the name, WHITEINK, more info on the development of the logo in this post, Welcome, The WHITEINK Story.

Typeface choice, this was used for all the type on the site. Almost everything you’re reading is set in Helvetica. Due to it’s popularity and clarity it was selected as the primary typeface, followed by arial, arial is installed on nearly every computer and would be a similar alternative to helvetica.

Body Text: 13pt Helvetica
Post Title: 18pt Helvetica Bold

See Wilsion Miner’s post on Relative Readability for a comprehensive insight into web type sizing. Personally I think 16pt might be a little on the large size, it could be because the column is quite narrow on his website. But I like the thought behind it.

Photo credit to Wilson Miner.

These are the colour which appear on the site. The only use of the gradient is as the background, the background plays a part in the logo. As the gradient fades out it causes the logo to fade out aswell.

“Tim and I were chatting about something or another; we were talking about the cost of printing. The place we get stuff printed charges based on ink coverage. Tim was wondering how much it’d cost to get a white pdf printed on white paper. Took a second to realise that made no sense, and from that the name ‘WHITEINK’ was born. It was simple and easy to remember. So we went with it …

… we went with a clean uppercaps ‘WHITEINK’. Deciding to make it white on a light grey gradient was to pickup on the story behind it. Demonstrating how as the gradient fades out, white-on-white doesn’t really make much sense.”

Black [#000000]
The primary colour of the text.

Grey [#999999]
Used for other smaller piece of text such as the colophon at in the footer, the 7px boarder around images and hairline horizontal rules.

Red [#990000]
Used for link rollovers, except for in the navigation bar.

Final Homepage Layout

Homepage with highlighted grid. (Click to view at 100%) There maybe a a few tiny little things off, but I think over all, we did well with sticking to the grid and making sure it was tested over and over. I’d suggest clicking the image to check it out.

That covers the majority of elements in the site. The masthead, typeface, colours and grid. I hope this gives you a better insight into the reasons behind the decisions made when designing this website.

If you have a suggestion for a website or design you would like to see deconstructed, leave a comment. Let me know what you think of this post, leave a comment and get involved. I’ll do my best to respond.