adultingblog.com

Browser Shot 1

This project began as serendipitous happenstance. I came across a tumblr post requesting web assistance with a blog theme. After a conversation with K. Williams Brown it grew into a from-scratch design build.

We began with the general needs, wants, wishes, etc. She was frustrated with Tumblr's stunted search and wanted to opt for a Google Search of some kind. Design-wise she was after something clean and simple, and wanted to add a few features her current theme didn't offer. The site had already grown into the prospect of a published book (March 2013), and so it was vital that that be worked into the site. Design was under way for the book cover and Kelly was adamant about the site meshing with the book's "look & feel" in some way.

Getting Started

The overall goal was to provide a realignment, to grow the site, not tear it down and start from scratch. Often times it is easy to just throw everything away and start with a blank canvas, but if you look hard enough you will always find things that are working. I find these to be good starting points. Why are they working? Would they work on their own? Would they work in a new direction? Are these good build points to grow the site in a new direction?

Typography

On the whole, text is the dominate form of content on the web. This being a writer's blog made text all that more important. My first route was to approach the typography of the site.

Typographically there were readibility, spacing, and rendering issues, but the heading typeface was simple and clean in nature, giving me a good place to build from.

Didact Gothic

The old theme used cufon font replacement and had a few bugs especially with apostrophes. However, the overall feel of the sans-serif font was well liked and so it was senseless to deviate greatly from the original. I set out on a hunt for a typeface that was similar in nature, but would help move the site into the new direction. I tested several samples, and eventually decided upon Didact Gothic (above) by Daniel Johnson served through Google Web Fonts. Helvetica was chosen for the body copy, because sometimes you just shouldn't overthink it. The two played well together and that was all the reason I needed.

Layout

With a typographic base direction to follow, I then set out on layout. The current look & feel of the site had a very narrow one column layout which wasn't working well. The final choice on layout was a header, left sidebar, right content arrangement. The top nav was already bulging past its allotted area and needed room to grow. A sidebar nav was a logical choice because there's room to give on longer navigation menus in the vertical direction.

Layout Sketch

Next came a focus on the content area, it needed a larger "content first" focus. Headlines needed to have presence without being overbearing and body copy needed to be set much larger.

Body Shot

At the end of it all the right mixture that achieved adequate readability, focus, and client approval was 4.2em for article headings and 1.6em for body copy (with 180% line-height).

Style formatting was set very standard, with a slight subtle exception to paragraph links. Links are often bold, colored, highlighted, or employing some other "hey look at me" tactic. There's nothing wrong with this approach, except when you take into consideration that links are usually a part of the reading flow. Make them stand out too much and you disrupt readability, too little and people miss that they are links. Therefore, links were established with subtle underlines (colorized on :hover). This allowed smoother reading and less distraction.

An Aside On Process

Because of the webfont inclusion and to establish adequate rendering and testing, almost the entire design phase was done as follows:

[10% Paper Sketches] → [ 90% HTML Prototypes + .AI Bits]

This is something I've worked into my process more and more lately. It usually just makes more sense to do the initial design mockups in browser so can get more accurate tests than you ever would get in a non-dynamic image.

Color

Color Shot

Color came next, I usually always never approach color first. It is easy to get obssessed with and it is a quagmire of distraction if one isn't careful. The scheme was loosley based from the book cover color pallette, employing a very basic two color accent approach. The goal was to let color be subtle in the theme itself so that the color in all the content images could really rush in and fill the design. A pink and blue pair were employed for a while and then the pink was abandoned for a shade of red that better accompanied the book cover near the end of the project.

The Header Image

The final piece was choosing an appropriate header image (with an appropriate crop). A shot was chosen from the book cover photo shoot that deviated enough from the actual book cover to be unique, but still lived as a sibling.

Cover Crop

Several crops were tried, both close up and omitting different areas of the face and couch. Ultimately the final decision was a mild crop of the full image. The composition of the chosen image also helped play a subtle role in the visual flow of the site. Humans are drawn to look at eyes, and to follow where eyes are staring. Both Kelly and her cat have visual direction lines leading the visual flow to the title which helped reinforce that area.

Wrapping Up

The final result was a custom tumblr theme, on a limited budget, coded & designed, employing an external Google Custom search, broadened readability, simplistic color pallette, a .js feed for "Greatest Hits", and adequate breathing room; all grown from the original design of the site into a better, more future friendly direction.

Visit the site →