Well Paul, you got me with your challenge. Writing a blog post is good for SEO anyway (even if it’s only a “nofollow”-backlink from Smashing Magazine). I thought about my recent work, but decided not to present a client’s project. Call me a coward, but clients tend to have their own agenda, and it’s a top priority to make them happy even if the result (sometimes) might look less than perfect.

As it happened, I’ve redesigned my own site lately. So let’s talk about this one.

Grid

I’ve used a four columns layout (229px wide/20px gutter) that snaps to three columns when using a device with lower screen resolution (eg. iPad), or to two columns when displayed on a mobile phone. It’s not exactly what you’d call a “responsive layout” because it switches to fixed layout steps but as a designer I like to stay in control (old habit from last century). I call it “adaptive layout” until someone finds a better name for it.

Layout

Oh god of the whitespace! I was quite generous with whitespace, especially with the four column layout. I thought it would add some extra weight of importance to the logo. Actually I was tempted to pull some of the meta information or thumbnails to the left column (and might do eventually), but I’m still undecided on this question. But the more important layout decision was to organize the main navigation into the column blocks on top. It looks like a sitemap but it isn’t. I like it.

Color

I spent much time on how to draw a complete color scheme from one single color (eg. from your logo as the most important part of your corporate branding). The WordPress theme I created for this website has an options page where you can enter a RGB value – et volià – you get a matching color scheme on the whole site.

Typography

I fiddled around with Google Fonts and opted for “Tenor Sans” finally. It is a humanist sans-serif typeface designed by Denis Masharov that also works for headlines. Sadly it doens’t looks so pretty in my navigation blocks, so I cheated and used “Droid Sans” there. No design without compromises.

Imagery

I’m reluctant to use images extensively. There are some smaller icons to visually support meta information on blog posts, and of course I’m using larger screenshots on the frontpage and on the portfolio page to showcase recent web projects. It’s the work for my clients that is important after all.

Styling

Styling means to me that the overall look of my site is a representation of my personal style. Currently I like flat icons, light grey CSS buttons and clear functional messages. Of course I’m influenced by recent design trends as shown on Google+ and Apple.com, so this might change anytime.

As I said before in my first blog post (this is the second) this is still work in progress but I’m open for helpful suggestions by Smashing readers.