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.

Last august, in the peak of Irelands wintery summer, Tim & I were talking about setting up a website. Maybe a joint portfolio or something along those lines; but we soon realised there wouldn’t be a whole lot to gain from it. It wouldn’t be much of a learning experience. So after a few months, I suggested a blog, somewhere for us to express our thoughts, to write post on things we like, work and people that truly inspire us. So we agreed. It was set in motion.

Thinking of a name was the first thing. We went through pages and pages of names, it wasn’t getting anywhere, it was bit forced; so we took a break. Then sometime after 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.

Here is a very skimmed taste of the amount of sketches and doodles that went into how we’d present the site’s logo. In the end we realised we weren’t creating a brand so 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.

They were just a few screenshots/photos of some ideas we had. Some were the result of pages of sketches others were just one off doodles. We went with a type-only title, sort of like a masthead. Here are a few images of the blog design progression.

As this is the first post, I don’t want to overload you with info; however in my next post (Design Deconstructed) I will break down and give rationale to the elements of our blog design, such as the grid, typeface(weight/size), colours, going into some detail on the css and layout. I hope to make ‘Design Deconstructed’ a regular feature, where I try to deconstruct the designs of some of my favorite websites.

I hope this gave you a little bit of an insight into how we designed this website, the steps and progress. From start(august) to finish(january) it took about 6 months, with the interaction of our visitors it’ll keep growing. If you’ve got hope for the blog, please subscribe on the sidebar to the right.

Thank you for reading.