Once more unto the breach, dear friends



Monday, September 3rd 2012

Another Redesign?

One of the largest and most fascinating changes happening in the web design community of late has been the adoption of Responsive Web Design. After reading the whole A Book Apart series ( the first seven at least, I see an 8th is coming later this year) I felt the itch to do another redesign of my site. Taking what I had learned in the past couple years, I wanted to focus on a responsive and more immersive experience. I also knew it was time to remove older portfolio items (some had been taken offline or redesigned) and add several new projects.

My Process

Planning

I thought some (a couple?) of those reading would be interested to hear about my process for the redesign. I went into it knowing two things for sure:

  • I wanted the new site to be lighter than it had been in the past – both in file size and in color palette.
  • I didn't want to use a responsive framework yet, I want to try building my first responsive site on my own before trying any frameworks.

To explain that second point, I know there's really excellent frameworks out there like Twitter Bootstrap and I do plan on trying them. I just felt like I'd have a better perspective of what works and doesn't work with them after trying this myself first. Similar to learning Javascript before diving into jQuery (personally I didn't have a choice as the Prototype/jQuery revolution hadn't started yet), I wanted a manual and unbiased perspective before embracing conventions.

Design

I don't consider myself a designer, but when it comes to my own website I've always worked on it personally. I wanted the new site to feel more like an extension of myself, to share my temperament so to speak. After mulling it over for a couple weeks while working on overall UI and organizing new content it came to me – plaid! Those that know me would attest to my penchant for plaid shirts, incorporating plaid into the site then seemed like a no-brainer. The next hurdle was coming up with a suitable color scheme, keeping in mind the desire for a lighter design and the fact that the colors would be used in a plaid swatch. After a bit of playing around in Kuler I came up with this:

color-swatches.gif
The colors overlap in interesting ways – which is important for a good plaid – now on to the plaid swatch! I tried to wing it and work something up in Illustrator and then Photoshop but it just didn't come out right. The results were anywhere between meh and horrendous, it became clear that some sort of tutorial was in order to get me on the right track. I tried a few tutorials and still wasn't happy with the results, most turned out too rigid and 'digital' without any character or texture. Luckily I came across this little gem of a tutorial from a designer with years of experience in creating plaid swatches, here's what I came up with:

plaidSwatch.png|Now armed with the plaid swatch and overall color scheme I eagerly started working on a design for the logo.

Design – Logologo_old.gif

As I mentioned before, I'm not a designer, so the thought of coming up with a logo raises more than a bit of anxiety for me. After several false starts I decided to put the plaid into the logo, initially I hadn't had that in mind as an option. Eventually I came up with this rigid mockup.

logo_final1.png

I tried adding more depth and finally landed on this new version.

I was digging the “Admit One" ticket style of the corners and the new angles. Keeping the shape more towards a square was important, I realized in the past that having a logo too narrow either vertically or horizontally causes issues not just in website design but also other applications in which it could be used.

Design – Website

I started by focusing on the fonts I wanted to use. I didn't want to overload the page with a lot of fonts so I settled on looking for two, one for headlines and the other for page content. To be honest I had to really fight the urge to use Lobster, I know it's been used countless times lately and that was a main reason I avoided it – but I still really dig it. I settled on Alice for headlines and Droid Sans for content, both only using the normal font weight of each (Alice only has Normal) to keep file size and load times down.

Knowing that everything needed to be malleable enough for a responsive design I got to work on a design fully intending to not stick to it 100%. Actually come to think of it, many of my favorite features of designs past had sprung up organically as I was coding.design1.png

With a design direction in hand, I had to finally start the part of the process that I find most daunting. Gathering assets and writing up blurbs for portfolio items has never been a fun task for me, I've gotten better about it lately but that's only after years of ignoring the fact that keeping up with it is the best way of keeping it from piling up. A hard lesson I'm still trying to keep in mind.

Development

The development of the site started with a great deal of momentum, I had all but the blog and portfolio set up in short order. But then freelance beckoned, and as we all know a cardinal rule of web design is that paid projects take precedence. When I got back to it, I realized that I'd better come up with an easier single way to add portfolio items to the site now that they were being displayed in three different places (see DRY principle). It was a small enough application that I settled on creating an XML file of all the items rather than rely on a database. Now everything gets updated automatically when I add a new item to the Portfolio XML, maybe this will make it easy enough to keep it up to date!

In working on the responsive layouts and figuring out breakpoints of various styles and layout properties, I found it very helpful to be able to see how wide the browser is in pixels as I was resizing. To get this I set up a simple fixed position box in the upper left corner that displayed the current width of the window and the main div in pixels, constantly updating on resize using this snippet of jQuery.

$(window).resize(function(){
    $('#pixels').html( $( window ).width() + " | " + $( "#horizon" ).width() );
});

One problem I identified early on was trying to work out responsive break points and styles too soon. Far too often I would get carried away and have to back track when something was changed. I readily admit this was likely because I didn't plan very far ahead with respect to how the layout would react to smaller screens. So, in this case I ended up working on a desktop site around 1280px and when I was satisfied that there wouldn't be any more major changes I worked on the media queries for smaller (and somewhat larger) screens. Definitely was a learning experience, and I realize how difficult building a responsive site can be.

Surprisingly the final developed site ended up being pretty close to the initial designs, see the difference between the designed blog posts and the final implementation.

design_versions.png

There's still plenty I need to do before I'm happy with the redesign. I suppose that's the way it always is with web development and especially one's own site, there's always more to do (or undo). In all I'm pretty happy with how it turned out, and welcome any comments or suggestions.