Like most of us, I see and use a lot of websites every day.  Lots of websites are lousy, most are just so-so, but as a designer myself, I love it when I find a really nicely designed site out there.  Case in point: www.commoncraft.com.  It’s a husband and wife that run a business producing videos explaining technical terms like RSS and Wikis in language that non-technical people can easily understand, using paper cutouts and hand gestures to demonstrate.  You can see examples of their work here.

Anyways, about the site design itself: Despite having a moderate/large amount of content — lots of videos, a full store, lots of blog postings — the design and navigation is still kept very simple: just five buttons on the top navigation bar, with additional links on the bottom or side of the page when needed.

Of course, simple does not necessarily mean visually boring: the use of subtle textures and gradients, along with a bold (though not overly bright) color scheme still make the pages highly visually engaging. I also really enjoy the button rollovers on the top navigation bar: a nice change from the typical “change of background color” rollover effect on most website buttons (my own website included).  I don’t know about you, but buttons like this just make me want to click them.

The navigation bar button rollover effects: on the left is the button's inactive state, and on the right is it's hover state.

And to top it off, the site is built on a solid technical foundation: clean XHTML code with pure CSS styling —no deeply nested tables or tag soup here, folks.

As I build websites for my own clients, it’s always great to get inspiration from other places and people on the web that are doing it well.  So if you’re into web design as well, check out their site for yourself.  Oh, and their videos are great too.

Free Download: Search Engine Optimization Fundamentals

You have a website, but is it getting found? Find out what you need to know about search engine optimization in our free e-book.

Download Now

Well, after a lot of work, my portfolio site’s redesign is finally complete.  Some history: my graphic design portfolio has been running on www.cstrom.com since early 2005.  From 2005 through the first half of 2008, it was running as a pure Flash site.

This had several drawbacks: the first, of course, being SEO.  Being a series of old-school Flash files, my site was literally invisible to the search engines.  (I keep hearing about Flash being more accessible to search engines nowadays, but I still feel like I never see many Flash sites show up prominently in organic search results.)  Another drawback, for me, was that it was cumbersome to update compared to XHTML.  And finally, with increasing monitor sizes nowadays, it was becoming increasingly necessary to change my layout to a 1024x768-optimized layout, rather than the 800x600-optimized layout I was currently using.

My 2005–2008 portfolio site — showing its age

With these things in mind, I decided a few months back to overhaul my site, giving it a redesign and moving it over to an XHTML format.  My plan was to first run the site in a “transition mode:” build a few XHTML pages with my résumé and a few of my most recent work pieces, but still link to my old Flash site to display the majority of my work.

The transitional portfolio site

Finally, when some time opened up between contracts, I started building out the “finished product” — the fully redesigned site.  I kept the same basic layout as the transitional site, but gutted it all under the hood: the transitional site ran completely on absolutely positioned <div> elements, so I rebuilt it using a more flexible and standardized flow-based layout. I built out a full footer section, using the wonderful footer technique from A List Apart.  I filled out the content to display a much larger selection of my portfolio, divided up by category.  I added this blog that you’re reading now.  And finally, I gave a bit of a facelift to the design, cleaning up the typography and some of the visual elements.

A comparison of the transitional site and the final site

Free Download: Website Fundamentals

Download our free e-book to learn what you need to know about building effective websites.

Download Now