Buy my Books!


The Sketchnote Workbook is a fully-illustrated book and video, showing how to use sketchnotes in new ways, along with advanced tips and techniques.
Learn about and buy the book →
Download a FREE chapter →
Watch a FREE video sample →


The Sketchnote Handbook is a fully-illustrated book and video, designed to teach regular people how to create sketchnotes.
Learn about and buy the book →
Download a FREE chapter →

Mike Rohde (Color - Square)

ROHDESIGN is the website of designer Mike Rohde, who writes on design, sketching, drawing, sketchnotes, technology, travel, cycling, books & coffee.
Read more about Mike →

SIGN UP! Get the Rohdesign Newsletter.

« Cranky Al's & Mrs. Java | Main | Rohdesign Redesign Project »
Friday
Jun112004

Rohdesign Redesign: Part 1

Hello again. It's been a good week as I progress on the Rohdesign redesign project. While I wasn't able to spend each lunch break on the project (other things inevitably came up), I was able to spend time on the weekend and evenings to make up for this. In fact, a few rough site ideas were sketched out at our patio set, while grilling chicken for dinner. :-)

On this project I'm following my normal site design process, while being mindful of that process and documenting it mentally and then on paper/digitally. The documentation of my process is quite interesting, because normally I wouldn't think about process so much — I just do it. Documentation should be beneficial, as I'll see what works well and what could be improved or added.

As a recap of this week, I'll present brief descriptions of my approach as tasks, followed by some questions for commentary.

Determine Design Goals
First, I began to contemplate what message I want to send to visitors to the Rohdesign site and weblog. I spent time thinking over this question, then took time to get my thoughts down. Here they are:

Generally, the site should be consistent. It should feel unified no matter where a visitor might end up. Specifically, the content of the weblog is very important to me, as this is the most active place on the site. Therefore, the weblog should act as the hub for the site, with branches connecting to that center hub.

The weblog is also focused on my writing but also on my design. Having a great looking, yet moldy site isn't enough. I must find a balance between quality content and a clean, good looking design which won't distract from the content.

Writing the Spec Sheet Outline
Site SpecsWith my overall goals in mind, the next thing I did was write down specs for the website. Because I'm my own client on this project, I didn't just want to have the specs in mind, but on paper — visible. This is very important, because writing out my specs forces me to process my thoughts.

Writing out specs displays exactly what I think I want, without reservations. This is good for several reasons: First, I can see my list in all its glory, with no way to hide a warty spec in a corner of my mind. Secondly, it gives me an idea of the project scope and depth and exposes poor or unnecessary ideas I might not realize I'm holding on to. Thirdly, nothing gets lost along the way, as might happen if specs were stored exclusively in my noggin'.

I transferred the spec sheet from my Miquelrius notebook to the Mac, saved it as an RTF document, and synced the file with Wordsmith on my Tungsten E. A Wordsmith version of the specs are handy, because they are editable and portable. If inspiration strikes while I'm away from the Mac, I can easily add or edit the spec sheet, and sync back at home. In addition I can work lightly, carrying my TE and a sketchbook for sketch time at the café.

Review and Evaluate Inspiring Sites
Site ReviewNext, I took time to review the sites I most admired, to see how they've dealt with weblog structure, features and integration into an overall site. The idea here was not to go out and rip off another design, but to get a general feel for each designer's approach to the same problem and learn from it.

In my sketchbook, I put down loose scribbles of the overall column structure of each site, totaling 7 sketches and 9 sites (some sites used similar structures). This was a good exercise. Very quickly, I could see how some sites followed similar paths and how others took a more unique approach. Sketching structures also helped me gauge how I felt about each structure in a rapid fashion.

After my review and evaluation, I was most attracted to the approach of Greg Storey's Airbag and John Gruber's Daring Fireball, primarily for their use of white (or gray) space and overall simplicity. This approach resonates with an entry on my spec sheet:

Clean, uncluttered, clear design.

While I like visible grids for weblogs and websites, I wanted to take a different approach to the design, making white space and simplicity guiding principles. My goal after three steps became clear: Create a clean, uncluttered and simple design that's refreshing, easy to read and enjoyable to look at.

Rough Sketches
Sketch 2My next step was to begin with rough sketches of site designs. With the site's goals and specs and some direction from the review and evaluation process, I spent time putting very preliminary ideas on paper.

These sketches were slightly more detailed than the review scribbles, but not much. I didn't want to fall too deeply into marking out features until I had the design right, so columns were labeled simply nav, body or features. I began exploring elements of the design I felt should be prominent, and played a bit with locations of items and column ideas, adding notes for future reference.

Sketch 1Once I felt that the rough sketches were going in a positive direction, I stopped this process. Normally, I would have kept on, sketching more and more detailed ideas until the graphical comp stage. However, as I sketched, I realized my spec list is quite extensive and that July 1 deadline, is not far off. I decided to focus myself a bit more and create a "Must Have" minimum list of items.

Must Have List
As of this writing, here is my must have list of features and requirements:

Version 1.0 Redesign Must Haves

MT-Page Tempates/Specs:


  • Blog posts

  • Navigation


    • Travel

    • Mac

    • Palm

    • Colophon/About

    • RSS Feed

    • Archives

    • Search

    • Links


  • Archives


    • Category

    • Everything w/ search

    • Power search tool?

    • Monthly?


  • Search page (or included with archive?)

  • Mobile edition (make main page PDA-safe and offer mobile no-image edition?)

  • Blogroll

  • Book block

  • Music block

  • Mini-badges

  • Copyright/RSS/XHTML/508 area

The process of settling on a must have list was the result of my own thoughts and a good discussion with my friend Andy about some of the features. I expect this list to change as I go along, probably increasing and becoming clarified as I ask for comments from readers.

I've also decided that because the weblog is the hub of the site, I will first design this section and have it up for July 1. The remaining sections will be considered as I continue in the design and structural decision stages, I just won't build those sections until I'm happy with the weblog section.

Next Steps
From here I'll go into the sketch and structural decision stages, narrowing down a look for the site and building a sitemap. Once these are settled, its on to the comping stages, where I'll build a PNG of a template page(s). Finally, once I like the look, I'll build graphics from the PNG comp and develop a template. This is what the site will be constructed from in the production stage. Of course there will be testing needed and tweaking too.

Call for Comments
I've laid out the process for you to see, along with some sketches. Now I'd like to open the floor for readers to comment and make suggestions or offer ideas about the site and weblog.

I've already noted several things that I'd love feedback on:

Archives: What works best? I want a category archive and a full archive with search tool. Andy suggested a power search of some sort to help locate posts more easily. I'm not tied at all to Monthly archives as I hardly ever use them for other weblogs.

Search: Should there be a separate search section, or is that better located in the archives? I'm considering a global site search, but honestly wonder if there will be much searching on the other site sections.

Handheld version: As a handheld user I want to provide this feature, but just how, I'm not sure. Since I'm using XHML and CSS, it's easy enough to offer a version for handhelds with low-weight markup, even a non-image version. Further, since the main weblog page will be XHTML, it could be made to work with a handheld as well.

RSS: I like the abbreviated comments, but I wonder if a full posts feed would also be good. I'm also not sure which formats to offer, though I lean toward the most common format only. What about Atom? I'm inclined to not even bother right now, but would love to hear opinions on this.

I am also open to other topics and ideas.

NOTE: While I highly value your comments and will consider each and every one, this is my website — so I hold the final decision on what stays or what goes. I want to find a good balance of presenting the design process and hearing constructive comments but I do have to draw the line somewhere. :-)

Thanks for stopping by to read the process of part 1 in the redesign. I hope it has been informative. I would love your comments and ideas at this stage and of course, will present results of week 2 next Friday.

Have a great weekend!

Reader Comments (3)

Lo: thanks for the feedback. I would actually prefer a text-only edition for my iSilo uses too, so I think this is going to happen. I believe it's pretty easy too, since I can just specify in CSS that img tags get hidden. But we'll see.

Fazal: point taken about the contrast of white type on gray background at Daring Fireball. I think it's difficult to read as well. I was more inspired by the strucure, spacing and the simplcity of the site. Logo, some nav and text is all you get, but that really does focus me on his writing. If he did black or very dark gray on white I'd be even happer reading the excellent comments there.

Thanks for your comments guys! :-)
June 14, 2004 | Unregistered CommenterMike Rohde
Mike, this stuff is great. I'm not a formally-trained graphic designer or web-designer but I do all of that. I love to see how other web designers work.

Scott
June 20, 2004 | Unregistered CommenterScott R
Looking good buddy! I'm anxious to see you get into the nitty gritty of page design. Keep up the good work!
June 23, 2004 | Unregistered Commentermashby

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
All HTML will be escaped. Hyperlinks will be created for URLs automatically.