Ractoon Redesign: Part 3 – Design

The redesign went into motion over a year ago. In that time there were a couple complete design overhauls, as well as a smattering of minor adjustments. The goals for the first iteration addressed problems found in the previous design.

Ractoon Website Redux Alpha Version

The first iteration migrated the existing layout sections of the site into a new format, along with some of the desired improvements:

Change color scheme from light-on-dark to dark-on-light

The reversed text on the existing site was causing eye strain while reading longer sections of text. Though this carried over from the very first version of ractoon.com, readability became a higher priority for this update.

Increase font size

Fonts in general on the previous site were somewhat small. Coupled with the light-on-dark color scheme this was more of a problem. But it still helps with readability with the new color scheme.

Better use of fonts

Since the previous design support for @font-face, and availability of web licensed fonts, had exploded. This time around I wanted to use a nice font with some clean curves and a bit of style. The first design used Play from Google Web Fonts, along with a Cambria stack. After some fiddling I chose PT Sans, also from Google Web Fonts.

Fewer gradients

Though snazzy, I wanted to try for a cleaner look and feel (I also tended to overuse gradients). This would also cut the graphics needed on the site if I wanted to make sure everyone could see them (IE < 9 I’m looking in your general direction).

Second Pass

The alpha design sat for a few months. The trouble with idle time and personal projects is the amount of cool new things that get discovered each day.

Ractoon Website Redux Beta Version

Icons

I wanted to refine the existing elemental icons on the site, and introduce other icons to accent certain pieces of data.

Elemental Icons Redux

I’d thought that basing all the new icons off of circular shapes would help them carry a similar feel. Also, discarding gradients in favor of solid colors would make them clearer. When made into raster images they did not scale particularly well, and required more images for retina resolutions.

This led to looking into some alternatives, and eventually settling on using an icon font. This had a couple of advantages: it would scale well to small and large sizes independent of pixel density, and it allowed for usage of an icon family for the various icons across the site.

I examined several free and paid fonts, but eventually Font Awesome came out on top. It included all the icons I’d need for the site (even some of the more unique ones including the elemental icons).

Removing Hero Image

The scenes that appeared before the content carried over from both earlier versions of the site. After mulling it over it seemed better to exclude them. Though I enjoyed doing them, they simply pushed the content down without adding much value.

Establish a better hierarchy

Previously the site had not established a very good hierarchy for the content on each page. The alpha redesign did not address this very well, so that was a goal for this revision. Clearer headlines, call outs and use of colors to define unique areas.

More responsive

The biggest adjustments went in place to prepare for implementing a responsive site. However, rather than building out each break point for tablet, mobile, etc. the primary design used a grid that would break down at smaller resolutions. This approach came from the Style Tiles method proposed by Samantha Warren.  This also allowed for a more efficient design phase, focusing on all the graphical elements in one shot and rearranging and paring them down via the code.

Time to code

At this point I felt like I could tweak the design forever. I needed to cut it loose and start crafting some code and addressing problems that came up, rather than anticipated issues. The PSDs got locked down and prepped for implementation.