(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:
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
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
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
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!