Always Moving, Part 2
In the last entry, I explained briefly how this site was setup in Drupal, including the addition of a new content type, called portfolio. In this entry, I'll briefly go over the creation of the theme, which I call "Always Moving".
Designing pages in HTML is a lot like having sex in a bathtub. If you don't know anything about sex, it won't help to know a lot about bathtubs.
-Michael Kaufman
Highest on my list of design needs was the word "clean", and second was the word, "readable". It was tempting to create the site in Flash, or design it around a bunch of the hottest AJAX effects, but I have never been a "form over function" type of person. Since the visitors would be on the site to find and read content, I needed to design the site with readability on the forefront.
I started with pencil sketches of the layout, which was probably overkill for a simple blog, but I hadn't done statics for a site in a little while, and I felt I needed the polish. (Incidentally, if you are looking for a decent primer on the fundamentals of web layout, I like The Principles of Beautiful Web Design by Jason Beaird.) After I had a pencil wireframe I liked for the landing page, content list page, and individual content page I started in Illustrator.
Having learned a different vector editing program first, I find Illustrator a little clunky, so I use it for blocking in shapes and quick sizing and layout, then move everything into Photoshop for polish. I am comfortable using entirely one or the other, but again, this was an exercise.
I created the landing page and that was it. Without the need for a client to sign off on all the statics, I could base the internal pages on the landing page and skip the extra work.
For the theme, I used the Zen Theme, which gave me a standards-compliant starting point with all the building blocks I needed. I had the basic design up on my local server in a few hours.
This is the point where the "designer" part of me really came out. If you have ever written the HTML/CSS for a graphic artist's own site, based on their design, you will know what I am on about. You end up doing the work again and again because designers are never satisfied with their own work. Apparently, I am no different. When I saw the design in a browser, I hated it.
Not wanting to design in HTML and CSS, I backed up to Photoshop. The layout was fine, I just hated the colors and typography. I had started with a light-on-dark theme that just didn't seem readable to me when I loaded it in a browser. The redesign then became dark-on-light, with the green and gray colors you see. I think its a lot easier on the eyes. I found some great illustrations for accents at the Library of Congress, and the look was done.
All that was left was to create a cool view for the portfolio content. I'll save that for another post.