Just Released
25 Jan 2011I have completed a redesign of my personal portfolio website. Visit carletondesign.com to check it out.
I thought I would let you in on the design and development decisions behind the project.
Design First, let me say designing a site for yourself can be a bigger challenge than pleasing your pickiest clients. I went through multiple iterations of several different design directions before settling on the final styling. The earlier versions had fine details, textures, and color tones that were really nice, but the problem was, I was making more work for myself than necessary. I realized that my site doesn't have to showcase my finest details or adhear to the latests design trends. Instead, I turned toward simplicity. I cut the personal monogram that perfectly balanced positive and negative space which boasted a brushed metal texture and realistic highlights and shadows. I cut the multi-state navigation menu that had a mechanical feeling I loved. Instead, I thought, what would the site look like if I used zero graphics (other than the portfolio images) and only text. This self imposed constraint roped in my creativity and allowed me to focus on getting it done. I had the design comp done in a half hour, and I loved it. The layout is simple, the details are subtle and it's designed to focus the visitor on my work and the calls to action. I also designed the copy to reinforce the simple, get to the point style, that is me.
Development The simplicity of the styling inspired a simplicity in the code. I worked to keep the code clean and flexible. It validates!. The layout's simplicity also hides it's best feature: flexibilty. If you didn't notice, go back and resize the broweser window. Watch the site adapt acordingly. Thanks to some inspiration from Ethan Marcotte, the images and layout scale based on the size of the browser window. I'll be digging deeper into these strategies and making further improvements, but I love how it works so far. I first coded the site without the CSS3 drop shadows, transparency or fonts. Once the foundation was laid, and tested, the embellishments were added. I have the advantage of focusing on an audience that uses the latest browsers, so I took a vacation from the usual struggles of browser compatibility and had fun with some nice features. The most visual feature is the custom font, Museo sans from Typekit. I love typography and have been folowing the boom in web fonts closely. I've used @font-face before but thought I would find out what all the hype around Typekit was about. Now I'm a believer. In a matter of minutes, I had a cross-browser/platform solution that enabled me to use a wide variety of high-quality fonts on my site. Wow, thinks sure have changed.
Like most websites, it's never done, but reaching this point feels great. I enjoyed designing and developing this new site and hope you enjoy browsing it.