Many of you may have noticed that I redesigned the site. I have been hinting at a redesign for a number of months now, and I am very happy to finally reveal it to you all. After what has been an almost endless number of hours (or so it seemed) I have a number of new features and what I consider to be a drastically improved design. I am using this article to describe my process and the goals I hoped to achieve through the redesign.
The original positive space design
I began blogging casually a couple of years ago one a basic blogger account but became bored with the system due to the lack of control the blogger system offers. I still wanted to blog though, so I made the commitment to wordpress and began designing. At first I had a number of lofty goals for the original design however I soon realized I had no clue how to pull them off with the wordpress system. Because of this I had to make a number of large compromises and the final design came out watered down and less functional that I would have liked. This process revealed a number of issues that I set as goals for version two, it also taught me what common mistakes were made in blog design.
The redesign
So after blogging for a number of months and tons of research I was able to figure out how to implement a number of the features I had originally planned. I set out with some lofty goals when approaching this design:
- Integrate more community tools to increase discussion
- Design an aesthetic that is more professional and increases legibility through improved typography (ooh and not 2.0ish).
- Create a more technically functional theme (better archives and access to older content)
- Design an intelligent alternative to messy/ugly tag clouds
- Minimize the impact of advertising and hopefully increase profitability
- Integrate more social media / networking tools
Goal 1: Community Tools
This redesign adds a number of new features including a custom designed “comment line” that pops up the latest 15 comments in chronological order. A forum is still in development that will allow further interaction amongst the community, and also integrate directly with the site. In the comments section trackbacks / pingbacks were separated from the comments to make the discussion more natural. Gravatars were integrated to allow for greater personal branding amongst the comment authors. Finally, the commentLuv plugin (for a complete list of plugins see the bottom of this article) was used to encourage other active bloggers to take part in the discussion.
Goal 2: Design Aesthetic
The site design is heavily based on my study of publication design and puts a lot of focus on legibility. Sifr was used to pull off some awesome DIN headlines. Tons of attention was given to the treatment of the additional elements such as block quotes and lists to create a well defined hierarchy and tempo within the copy. Finally the color palette was drastically lightened to aid in increasing the legibility of the content.
Goal 3: Technical Improvements
You will now see that the archives have been drastically improved to make finding content easier. Also the search function and results have been improved by creating a specialized results template. The similar articles plugin was used to make finding relevant articles easier and quicker. The popular articles plugin was also implemented to help users find the best content within the site.
Goal 4: The “Tag Grid”
I have had a hatred for the tag cloud for some time, however up until now I did not have a better solution. The “Tag Grid” is my solution to the problem. The tag grid uses a defined hierarchy to show which tags are the most popular instead of text size. I believe that this is a vastly improved design, because for one it is not a legibility nightmare and also due to its vastly improved ease of use. Plus any designer should appreciate the use of a grid…
Goal 5: Minimize Advertising Impact
In this version of the site I am trying to downplay the importance of advertising, as it is not the main goal of the site. My old site utilized some larger ad formats that I am hoping to replace with more effective and less demanding advertising. I have also added some bargain advertising in the form of 32px square icons with accompanying short text descriptions. Hopefully these will allow me to generate some fair revenue while minimizing any annoyances for the readers.
Goal 6: Integrate Social Networks
I have become more interested in casual social networks lately and have started using them much more often. This new design actually utilizes a number of such services other than social media. I have included a section for my recent twitters, and the new links section / rss feed (still partially in development) is being run by del.icio.us. Hopefully the use of these tools will help support the five preceding goals.
List of Plugins and Scripts
- Thickbox 3.1
- Sifr 3 Beta 2
- Akismet
- Close Old Posts
- Commentluv
- Comment Relish
- Contact Form 7
- Get Recent Comments
- Google XML Sitemaps
- Twitter Tools
- WordPress.com Popular Posts
- WordPress.com Stats
- WordPress Related Posts
- wp-cache
- wp-typogrify
I know that this has been a long post however I am really excited to have finally launched this new design. I hope that this article has given some insight into the process behind version two of the Positive Space Blog.
AssociaDirect – The Association Agency
HellYeahDude.com
WordPress theme's for designers
Digg for Designers
Barackas.com – Barack Obama Maraccas
3 Months $20
April 29th, 2008 at 7:39 pm
Rather a nice overhaul! Much more professional with the light colors, and seems more artistic than the dull dark brown from before.
Eli’s latest post: New Dark Knight Posters - Sic
April 29th, 2008 at 9:48 pm
Nice. I like it much more. Good improvement.
I’m also redesigning my site. I’ve done about 10 mock ups now and finally got one i like and I’m fixing to start coding. thank god.
good job!
April 29th, 2008 at 9:54 pm
Like the new look. I can definitely see the inspiration from Cameron Moll.
I will miss “guitar dude” though.
April 30th, 2008 at 1:21 am
As I mentioned before I’m impressed with the new design, and I’m glad you took the time to write this up and share the process with us. It’s certainly very interesting to see the goals of your design, and I think you’ve pulled them off very well.
Your tag grid is such a great idea, its a very useful solution to displaying tags.
Regards, Liam.
April 30th, 2008 at 4:45 am
Great Re Design, I love th use of the grey’s. The way you have highlighted the Popular Articles is a great idea as well.
Congratulations on a job well done
Daniel’s latest post: Do You Still Hand Code Your Cascading Style Sheets?
April 30th, 2008 at 7:22 am
Congrats on the redesign. It looks a lot better than before, cleaner and simpler. I know what a redesign means, and I can fully refer to “endless hours”, as I’m working on a new one right now as well.
Keep it up!
Robert Augustin’s latest post: Magenta Lessons, Part 2: The Role of Brands in Marketing
April 30th, 2008 at 12:22 pm
I’m a big fan of this colour scheme!
You’ve just reminded me of how much I suck at organising my blog. I’ll probably make my own list of goals next time I do a redesign. It might stop me from diving head first into a design that doesn’t fit my content…
Glad to see someone else shares my (unusually extreme) dislike for tag clouds and the web 2.0 aesthetic.
April 30th, 2008 at 12:38 pm
To those of you who like the tag grid, I will be providing a tutorial some time in the near future of how to pull it off. Also, thank you everyone for your awesome support! The response towards this redesign has been great and I really appreciate it.
April 30th, 2008 at 4:55 pm
Very nice. And easier on the eye. I especially love the tag grid (I have an ugly tag page to fiddle with).
I’ve just revamped my blog too. There is still more to do (isn’t there always?). Like add a darker background behind the glaring white copy. Reading yours really brings back how much it’s needed.
Well, done. I’ll be looking forward to further posts on the subject.
cat’s latest post: Truly Ace
April 30th, 2008 at 6:05 pm
I too, am a fan of the tag grid. It’s a really good idea! Especially for those who WANT a tag cloud, but aren’t happy with the usual way it displays.
I like the comment line idea too, as I have said before bud, nice work.
April 30th, 2008 at 7:41 pm
Wow, it is great, the lighter theme is so much better, makes me want to read more and glad you got rid of the small text. Gonna have a better explore now. Also, do you have a place for link exchange? I’l add you to my friends sidebar on JCD now.
Jacob Cass’s latest post: DON’T MISS: The Best Graphic Design Articles from April 2008
May 1st, 2008 at 3:17 am
I think that the new design is fantastic!
great work!
Nout van Deijck - Blog
(about (web)design, typography, science, news and more)
May 1st, 2008 at 5:27 am
I really like the new design, so much easier to read! Nice color scheme also :)
May 1st, 2008 at 7:38 pm
Cool! Should have read this one before commenting on the next post
Great use of unique, but very usable elements.
kristarella’s latest post: Expressive words