Credit where credit is due

Because most of the readers of this site will be fellow designers, developers and other web nerds of certain shades, I thought I’d write a post about how I built this website and those that helped and influenced me. I started designing this site in February because I wanted to write more than 140 characters on certain topics and have a landing page that would be my online hub. A hub with spokes for my portfolio which has become more important since I have gone freelance.  Spokes for all the other sites I partake in like Delicious, Twitter and Flickr. As much as I enjoyed using Tumblr and Virb and even to a certain extent Facebook, as a visual designer, nothing beats making your own site.

Design

So, I designed the site in Photoshop and got it just the way I wanted it through feedback from some of my trusted friends who probably assumed it would never see the light of day. Many designers will relate that designing for your inner client is the hardest client to please. Well, except for that one client of mine. You know who you are! About every other month my friends see a design mock-up for a personal site/blog/idea that I never launch. This design, I never got sick of! So, I started to think of development.

ExpressionEngine

So, I fired up Textmate and began coding the site while in the back of mind thinking I would use ExpressionEngine as my CMS (content management system). In the past I had used Wordpress. I like Wordpress. I have friends who work for Wordpress. However, over the past year, I have been building more complex client sites using ExpressionEngine. The flexibility + ease of use of ExpressionEngine really makes it the best CMS I have ever used. I love developing a site and getting it to work in the browsers and then just add the ExpressionEngine code to replace the static content for the dynamic content. It really frees you up when you are designing your site. If you want to start developing sites in ExpressionEngine it helps to become friends with Ryan Irelan. Just email him with pretend love for the University of North Carolina basketball team and he’ll be wrapped around your finger. Bonus points if you can email him of your UNC love in German. If you can’t do this kiss-assing because of ethical reasons or you are afraid of tall people, then I recommend two sites of Ryan’s: EE Insider and EE Screencasts. If you get through the 12 screencasts, you’ll be like 89% of the way to becoming EE proficient and in love with Ryan’s sexy baritone. The EEInsider, EE Forum and the EE Wiki will get you the rest of the way.

Inspiration

As you may tell, I designed this site around the same time as I was designing the site for EllisLab (makers of ExpressionEngine) President, Leslie Camacho’s blog. There are certain elements that I repeated. When designing both sites, I was looking at a lot SpiekermannPartners designs and admiring the simplicity and use of white space to put the focus on the content. I also have had always admired the Kiss Me I’m Polish and Folkert Gorter’s work for the Good Magazine website. I think you see the influence in the post boxes. I also have been interested in transparencies and layers. Maybe when you live in Detroit, you think layers in the winter! At the time I was getting business cards done on letterpress and working with printers on posters for a client and really thinking about color separation, color layers, overlays and how the color overlays in print vs how it overlays on your screen. Another site that I absolutely love for many reasons is Joshua Blankenship’s site. One of the things I love is that every day you visit his site, he changes up his style sheet so that the colors of the site are different. Sometimes it’s green, sometimes purple… it’s a fun way to switch it up a little and give the user a little surprise. So, you will begin to notice upon repeat visits (please come back!) that the background of the site will be different most days. Since, all the overlays are done in transparent PNG files, the look of the site will change subtly. Check out the Happy Cog designed, MICA site for an example of awesome transparency. The typefaces I use on the site come from the Darden Studio. I am using Corundum Text and Freight for the headers and plan on implementing either technology: Cufon or sIFR to make the blog post titles use Corundum Text, but I haven’t gotten to it yet, so the versatile Georgia typeface is being used.

Big thanks

I could not have launched this site without IE specific CSS help from the multi-talented Aaron Feaver. I also relied on ExpressionEngine help from the master, Ryan Irelan. I also like to thank Greg Storey, Paul Armstrong, Zach Miller, Luke Dorny, Chris Kaufman and Luke Worley for their feedback and support.