New Year, New Theme

Hi 2012, nice to meet you.

I took a small break from writing this blog at the end of last year to revise the design a bit. Now that I have a few months’ worth of work experience under such an accomplished design company like Square, I wanted to go back and reapply the lessons to what I had built. The first obvious choice was this blog.

This is how the site looked before:

It was a multi-month effort, mostly because I had tried to “do the right things” by starting with wireframes, moved onto high-fidelity mockups (for myself, mind you), and eventually gave up and did everything in code anyway. I also spent a bunch of time catching up on modern web design and did what I thought was “good aesthetics”.

Some of the things I missed:

  • Light text on dark backgrounds work great for portfolios, not as well for text. Text shadow overuse tended to blur the text and hurt the eyes.
  • Consistent layouts and white space made the page look designed as opposed to just janky.
  • Textures are nice, as long as they’re not overdone.
  • Fonts and types establish a clear hierarchy to the content, and should be consistent across pages.
  • Rounded corners are softer on the eyes and focus them to the box inside.
  • Prefer subtle animations if you’re to do animations at all; they’re distracting and never as cool as you think they are.

So I went ahead and redid the theme – again just in code – with these guidelines in mind and created something that I hope is a bit less offensive1. The idea was to put full focus on the content, the posts, and other self-promotional items to bottom; I also kept many of the page layouts and UI, to try to avoid the “redesign for the sake of redesign” trap. This time around, my code is checked into Github, but honestly it’s not very interesting2.

I think it turned out alright, if a bit plain. Think of it as elevating the content.

  1. Though I couldn’t help myself with the animation bit. CSS3 is awesome.

  2. Most PHP code isn’t, and WordPress themes are especially horrid. Goes to show that technical superiority has little effect in the marketplace.

Share this article
Shareable URL
Prev Post

The Luxury of Simple

Next Post

How to get Front-End Developers

Leave a Reply

Your email address will not be published. Required fields are marked *

Read next