Perlessence
Site Redesign
If you've been reading this blog for a while, you will (hopefully) notice something new: I have redesigned this site. When I was at SXSW, I was not only inspired by all the designers there, but it also underscored the need for a strong personal brand for people to remember me by. Here's the process by which perlessence.com got a facelift.
At SXSW (and in other social-professional arenas), it's common to meet other developers, talk shop for a bit, and then exchange contact info. I collected and handed out a bunch of Moo cards, but for most of these people, I can barely remember meeting them, let alone what they do and why I want to follow up with them. One technique I learned from Jakob to spark memories days or weeks later is to, right after the conversation, write on the business card how you met the person and what you talked about. But what about other people remembering who I am?
As a developer, a personal site is more than a vanity page: it's where potential employers and peers will go to see what kind of person you are in the technical arenas. A developer's site should therefore reflect their skillset as well as their personality.
The previous iteration of this site, while functional, failed to meet my needs in several ways:
- Aesthetically bland, and thus forgetable
- No technical relevance : there was no mention of my current projects
- Color and layout did not match other site elements: in contrast to the nature-themed header, I used industrial grey and orange as my color palette
- Did not convey my strengths and personality or seem to represent me
At this point I knew what I wanted from my site and what about my current site was not working. I didn't know how to fix it, though! I can barely use Photoshop and have zero sense of color or style. At first I was going to outsource my redesign to a professional designer, but after getting some initial estimates, I decided that wasn't practical. However, I did get some help from Lea Alcantara's series of articles on the art of self branding. I spammed a few people I knew, from coworkers to family to significant other, for each of them to send me the three adjectives they think describe me best. The results were compiled in a spreadsheet, which allowed me to see repeated or similar words at a glance.
I was happy to see that most people thought of me in a very consistent way. It indicates to me that I already have a personal brand well defined through my behaviors; I just needed to express it in visual format. Most people gave some variant on intelligence, with an especial connotation of sharpness, wit, mental agility. There was also a set of terms around the concept of being reliable, especially in terms of attention to detail and consistency. At the same time, several people also labled me as eclectic and interesting. I let the results percolate in the back of my mind for a couple weeks while I started watching my behavior to see if these categorizations were accurate, and if so, was it the impression I wanted others to have of me. I decided that these aspects of me would be appropriate and relevant as the online expression of my personal brand.
Now that I had these concepts, how would I turn them into a design? I spent some time looking at site galleries trying to find an inspiration, but didn't see anything appealing. Finally I decided to pick colors first in the hope that the colors would evoke a layout. This, at least, was easy. My favorite colors are a deep purple and bright orange; a lot of my clothes, furniture/linens and even stuffed animals incorporate them. The colors definitely worked with the eclectic theme, but what about the other parts?
Inspiration struck me this morning in the shower: the shell that was the basis of the old website. Shell growth patterns follow a mathematical ratio called the Golden Ratio; when in spiral form, it is called the Golden Spiral. The capital letter P can be stylized to look like a spiral. And if there's anything that evokes the word intelligent, it's the stereotypical math nerd. Within an hour I had a logo based on my concept; you can see it in the upper left corner of the page and in the watermark at the bottom left corner of all pages.
I picked the lighter purple first, as it is as close to my favorite shade of purple as time, patience and Photoshop's Pantone palletes allowed. Jakob suggested using a darker purple for the main content areas; I lowered the brightness and saturation until I found a pleasing combination. Then I picked a shade of orange for content on the brighter purple and picked a secondary orange that is a little bit less bright for the deeper purple. The reason for two oranges was to make it look the same color regardless of which purple it was embedded in.
From there, the layout seemed obvious. I'm still experimenting with little touches; I just added the watermark after several hours of tweaking. The secondary pages, especially this blog, need styling badly. I finally built the Contact page and will be fleshing out the Projects page with more examples of my work over the next few days. Of course, I still need to verify XHTML and ADA compliance, finish writing blog software using Headlight (the MVC framework that powers this site), and so much more. A developer's job never ends...