• about
• contact
• advertise
• archives

Redesign: Synopsis

December 17, 2003 | View Comments (10) | Category: Whitespace

Summary: My thoughts on how I came about the new design and what actions led me to it.

Well here is a synopsis of my thoughts while doing the redesign. I tried to justify everything I could since every design choice we make on a site should be justified, right? These thoughts probably aren't revolutionary or earth shattering to anyone here, but maybe it will help you view things just a little bit differently.

Trends of this site

Before doing the redesign I sat back and focused on the trends of this site. I post about 5-6 times a week, meaning an entry every weekday (don't ask I how I do it). That means that discussions on certain topics can happen very quickly and then die instantly because now it is time to move on to the next discussion. However, not everyone wishes to simply move on to the new topic and some will linger posting comments on older topics, usually getting no response because those entries have already been forgotten. New users would have to scroll down the page to get an idea of what was happening. Those were the trends I spotted.

What I wanted

I love having discussions on this site and I love for people to read as many entries as possible. I felt that the normal blog structure did not facilitate a means for good discussion to occur unless you post every couple of days. However, I post 5-6 times a week so discussions happen quickly and therefore a topic that someone might have found interesting four days ago will probably drop below the page fold discouraging them from continuing on with the discussion.

I do see each new entry I write more as an "article". I take great pride in what I write and the useful insight I get from the many readers of the site. The more comments an entry gets, the better information attained for all of us. Even though this site is still a "blog" in the common sense of the word I am beginning to see it more as an online resource, just short of an online magazine. I wanted to give that feel off through the design.

A new trend in design focuses around "user-centered" design where designers focus on making their sites for the users and not themselve. Well I decided that my type of "user-centered" design was thinking how I wanted the users of this site to use it and design a site that encouraged those actions. I wanted them to read and explore. I wanted them to come here and not just read an entry and take off, but to sit and discuss and go on to the next entry. I wanted to encourage the sharing of knowledge. Typical blog formats do not encourage these things so I needed a new design that helped the users do what I wanted them to do. That was my "user-centered" design.

The First Layer

Everyone understands that the entry at the top of the blog is the most recent. However, the only significance that the entry has is that it is at the top. Sure it can be cool and gratifying to see something new at the top of a site, but I wanted it to be exciting, if that was at all possible. With this in mind I made the newest entry appear more like a feature article. This way when you visit the site the next day it is like a whole new feature has been written instead of another entry. It is the largest section with the most information for the article and therefore it should stand out the most.

The Second Layer

After a couple of months on this site I noticed a pattern with regards to comments and entries. Once an entry gets to be about 4 days old, rarely will it see any new comments. They kind of get put into the archives for newer visitors to come resurrect later. So I thought that most users would only be interested in discussions that would be occurring in the four latest entries. Hence you got a second layer that displays a summary and the amount of comments so far. This also helps users who may only visit a couple times per week see what has been going on. I wanted to help the users eyes quickly distinguish a hierarchy on the site though and the light gray background was added. I did this because I myself as a reader try to get a grasp of a site's structure when I first arrive their. The layers and the colors help the user do that even quicker.

The Third Layer

The third level was created for multiple reasons. First and foremost it was made to show how "deep" the site is. On any site it is good on the homepage to not only give the reader an idea of what the site is about, but to also show them how deep the site goes. The categories give an idea of what content is discussed on this site, while the recent entries would be more for new users. As noted, these entries very rarely get commented on so the metadata for comments was not necessary to post on this list. Another important feature I thought would be useful for the more advanced users of the site is the recently commented list. This list helps users see what entries have recent comments. It might help if there were a date field showing when the comment occurred, but recent entries already have the number of comments so advanced users will already have an idea of where the active discussions are taking place.

Individual Entry Pages

The focus on these pages is obviously the entry. The layout is situated in a way where it is impossible to mistake where the entry is. Something that occurred to me and was written in an article not too long ago had to deal with users who come to the site, but not through the home page. A lot of users will visit this site for the first time by entering one of these pages. For them I provided a quick summary of the entry on the right panel. Once they are done reading the entry the second and third layer can be found encouraging exploration of the site. This also helps users from having to scroll back up the page to hit other entries.

Fonts

I really wanted to give this site more of a design feel since the "look" of the site would not initially give it that oomph. So I chose two fonts, trebuchet and georgia, and that is the reasoning behind that.

Conclusion

After this redesign I have started to look at other traditional website structures such as ecommerce sites and webmail sites and notice that their structures could also be different. I think the key to helping me come up with this structure was actually figuring out how I wanted the users to use the site. I wanted to encourage exploration, but not the way Yahoo! tries to do it. I tried to make it as easy as possible and build a design that had features for both beginners and advanced users of the site. I focused on how I wanted users to view the site and what type of image I wanted to portray and that lead me to what you see now. The advice I can give to everyone is when beginning a design on a site initially I would stay away from designing the aesthetics of the site and focus on the layout, realizing that you do not have to be confined to only three choice (1 column, 2 columns, or 3 columns). In the end though I really just got tired of seeing two column blogs...

Acknowledgments: Thanks to all the people who called Kottke's recent redesign revolutionary. Without you guys I wouldn't have been inspired to truly think of a different way of presenting a blog. Mad thanks to everyone who commented during Phase 1, Phase 2, and Phase 2.5. You guys pushed the ideas even further and helped some of the ideas really evolve. Another great reason to make the design process public.

Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/79

Comments

Keep track of comments to all entries with the Comments Feed