The New Design Gnome

As I’m sure you’ve noticed if you’re reading this on the website, The Design Gnome is sporting a brand new look! That’s right, everything from the logo to the search bar has been completely overhauled.

In lieu of a normal post this week, I want to talk a little bit about the new design, my process, and what to expect in the future. Let’s get started!

New Mascot

The first thing I did when I started the redesign was re-illustrate the mascot. I started completely from scratch, this time giving him legs and make him pop with more liberal use of gradients and shadows. I also toned down the colors to a more subtle, gnome-like palette.

Not much more to add I guess. I’m happy with how the new mascot turned out, and I think he fits well in the new website.

Typography

The new idea of the site was to be very minimalistic and typography-focused. I stripped away every element that didn’t have to be there, and decided to use color sparingly, as well as for emphasis (header, thumbnails, etc.). I primarily stuck with the same green present in the last design, but put it over white instead of dark brown. This gave the color more punch, and seemed to give it more breathing room.

The main focus of the redesign was readability.

Another focus of the redesign was readability. I turned all the body copy into large, easy to read 16px Helvetica. For the titles I decided on the bold League Gothic to make them stand out from the rest of the content.

With the two fonts chosen, it was a simple matter to use them throughout the site using consistent sizing throughout.

New Post View

Arguably the biggest change for the new design is the completely re-imagined post view.

I wanted it to be very unique, so I chose to have two distinct columns inside the view. With the post content not wrapping around the meta information, it drastically reduced the maximum width of the content. Knowing this, it was a hard decision to make, but in the end, I think I made the right choice.

Leaving the left column mostly empty leaves it free to be filled with stuff like blockquotes, overflowing images, and code samples.

/* Hey, look at me, I'm a sample bit of code! */
/* I can be in both the left AND right columns.  */
#sidebar {
 width: 50px;
 height: 500px;
}

By doing this, the left column became more than a meta section, it became a sort of second content section.

Threaded Comments

Like always, I implement a feature years after its release.

In this new site, I have finally buckled down and included threaded comments, a feature that has been available since WordPress 2.7. There’s not really much else to say about it really, aside from that it was ridiculously easy to implement.

HTML5

More of a behind the scenes thing, but nonetheless interesting: the new design was marked up in HTML5.

The new elements in HTML5 allowed me to mark up the content of my site using beautiful, semantic code.

While I didn’t make use of any fancy canvas effects, the new elements in HTML5 allowed me to mark up the content of my site using beautiful, semantic code. This is only my second site using HTML5, but it is so, so easy to get started, I recommend that everyone start using HTML5 today!

Responsive Design

Try to resize your browser. Go ahead, I dare ya!

If you’re using Firefox, Safari, or Chrome, you’re being treated to a beautifully responsive design, AKA one that reorganizes itself to fit the size of the browser’s viewport.

For this, I have to thank Ethan Marcotte, who indirectly held my hand through my first responsive design through his many, excellent articles on the subject.

What to Expect

The new Design Gnome heralds a new era in this blog.

Not only is this a redesign, the new Design Gnome heralds a new era in this blog (or “web publication” if your prefer).

I’d love to hear your feedback on the new look, so please leave those in comments.

For one, instead of putting up two or three short posts a week, I’m going to cut back to one or two really detailed posts per week. In addition, within the coming few weeks, I’m going to be posting the first art directed post up, so stay tuned for that.

Finally, I’m now actively looking for guest writers. If you would like to write for an up-and-coming blog, please contact us through the contact form.