Wednesday, March 24, 2010
Re-Designing Origen: Part 2: Design
In this second installment of my posts on redesigning www.OrigenCreatives.com, I want to talk a bit and talk about the design process. This site has been a pet project for nearly a year now, and I've gone through three major designs before finally choosing the one you're enjoying right now. Things that influenced the process were user interaction, typography, grid, whitespace and color. In this post I'll show you some of the other designs I considered and explain some of my design decisions on this site.
I knew that I wanted to focus in my site design to feature my work, and allow users quick access to screenshots of my site. I also wanted to feature my services on the home page. In my first take on the site redesign, I did both, but neither were extremely successful. The work was small and obscure, while the icons that I was planning on using for the services were just not quite right.
This was a nice enough design, but it didn't stick for a couple of reasons:
- It lacked simplicity - The design felt over-burdened to me. The small icons were just noise, rather than meaningful infographics. There were items, such as the "More than just a design company..." blurb that were just fillers.
- It lacked white space - If you look at the design is has very little room to breath. Every nook and cranny of the design is packed with stuff. I wasn't necessarily shooting for minimalism, but I also didn't want my site to be confused with one of those tourist trap novelty shops you find in a coastal town.
- Wrong Typography - The type on this design just felt wrong to me. While I enjoyed the slab nature of the headline type, the sketchiness of it felt a little too amateurish. I'm trying to balance a fine line of tone in my service. Namely, I'm a sole-proprietor web designer, yet offer professionalism and quality. In the end, I stuck with a Slab-Serif, but selected a cleaner and more professional typeface.
Design Take Two
My second design was cleaner, and a completely different style of site. While the first comp was very arts-and-crafts like, this new site design was Web 2.0 all the way.
This second design, to be honest with you, still has elements to it that I like. The header, I think is very successful, and the large rotating screenshots was nice too. I also like the call to actions on the homepage. Yet, for all of this, the design felt a bit aged to me. The Web 2.0 polish made it feel like it was trying to fit into an era of web design which is slipping into the past. While technically fine, after living with this design for awhile, I felt like I had seen this site design a million times before. Also, for all its merits, the design kind of fizzled on the interior pages. The space between the content area and the header became a wasteland, and I found it very difficult to make it work out.
After axing this Web 2.0 design, I had a few things really inspire me. First off, I spent some time re-introducing myself to the grid. I've always loved the grid, but I spent some time really focusing in on the intricacies of it. I was particularly inspired by my reading of Robert Bringhurst's Elements of Typographic Style and his chapter on how to treat type in relationship to the grid.
In typography, I was inspired to simplify my treatment. I've narrowed my design down to Museo Slab 500 (a Roman and Italic version only) for headlines, Helvetica for body content, and the occasional Georgia for quotations. I chose Helvetica, because of all the web-safe fonts, it remains the most neutral and attempts to bring nothing to the text. It is sterile, yet readable, allowing the content to jump from it. Museo Slab is a nice clean slab type that is both modern and classic.
In regards to color, this design has richer, earthier tones that give it an organic feel. With the double-entendre of beginning, and being from the green state of Oregon, the colors create a warm background for a creative experience.
So, there is just a brief glimpse at the design process of this site. I hope it has helped gain just a bit of insight into some of the reasons why it ended up the way it did.
In my next post, I'll talk a bit about some of the exciting things that went on in the front-end development of the site. From HTML5 and CSS3 to Web-fonts, it was a really fun site to develop.