Tag Archives: redesign

Crooked Glasses’ Upcoming Facelift: 3 Things to Learn

(LOL, y’all are probably thinking “IT’S ABOUT TIME!!!”)

For the last month or so, I’ve been spiffing up things behind the scenes, slowly getting things ready for a big new redesign of this little blog. As long and hard as I worked to get this original layout working, I realize it’s got a few usability problems, and I wanted to address those in the new version.

Such is the life of a webdesigner–we are always updating, always in the process of refitting so that our sites move with the Web and keep up with user demands. So, this week, I thought I’d use my current layout thought process to illustrate this point, and reveal how we webdesigners think out our design choices and put together good-looking yet usable layouts.

First: The Layout Mockup

First, I’ll give you a preview of how Crooked Glasses will look soon:

blog_full
(Click on the picture to see the full size in a new window)

3 Things I Changed for the User’s Sake

I’ve kept the color scheme basically the same, since I was happy with it and no one has yet reported any visibility or usability issues with it. However, there were 3 big issues I wanted to resolve with this facelift:

A Sticky Navigation Bar

blog_navbar
Ever since I did this blog post about an easy way to “stick” your navigation bar to the top of the page, I’ve been in love with the idea…so in this redesign, I incorporated a sticky navbar, for ease of navigation and a cleaner page look overall. Plus, it takes away the huge header image and collapses my site branding into a much more compact and tidy space.

Both these changes help readers get to my content faster without being bombarded with excess information or having to scroll up and down the page to find things. The more obstacles I can remove for the reader, the better for their stress levels–which means happier visitors!

Better Font and Lines Spaced Farther Apart

blog_linespacingfont
You know how your teachers always ask for your papers to be in Times New Roman and double-spaced? It’s not to make your paper twice as long–it’s for readability. I realized that in my original layout for this site, I had not taken line spacing into account, and as a result, awesome writing ended up looking like “Great Walls of Text” on people’s screens. Plus, the Arial font made body text run together more often than not, even when I was reading my own work! FAIL!

To combat that, I not only chose a larger font size and different font (Garamond 16px), but I spaced the lines 22px apart on the page. It’s not quite double-spacing, but it’s far enough apart to make each line distinct on the page. And with the new font choice, words don’t run together as easily, either. After all, if I’m writing a blog, I want users to be able to read what I’ve written as easily as possible!

Awesome New Sidebar

blog_sidebar I got to thinking as I designed this layout: “I don’t want a sidebar that’s trying to do too much.” Admittedly, I filled my original layout’s sidebar with a TON of stuff, like a tag list, category lists, blogrolls, recent tweets–it was all happening up in the sidebar region, and it looked overstuffed after a while. But the stuff that should have been in the sidebar, like a welcome, proper attention paid to the blogroll, etc., was tucked away on WordPress pages. Not my smartest moment as a webdesigner, I’ll admit. But that’s the great thing about webdesign–there’s always “Undo” and “Backspace.” 😀

So, with this sidebar, I’ve included a welcome, put up a blogroll, added the “Brought to you by” links, and called it a day. (With the last choice, I eliminated the need for a footer altogether!) Plus, I spiffed up the FAQ page so that it would indeed answer any and all common questions about me and about this blog. This will keep the sidebar from looking so cluttered and stuffed with text, so that it doesn’t distract from the star of the show–my content!

Summary

Good layout redesigns take time and thought, as well as a critical eye turned toward your own designs. As I’ve illustrated, you have to first point out what’s not working in the design you worked hard to craft, and then take steps to fix those problems so that the site works and reads better.

I’m very excited about this redesign, even though I dread the process of trying to placate WordPress to accept another layout; the last time was rife with much fist-shaking at the computer screen and words I’m trying to stop saying. xD But if these changes will help readers take in my content more easily, it’s ALL worth it!