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.

« Rohdesign Redesign: Part 3 | Main | Rohdesign Redesign: Status Report »

Rohdesign Redesign: Part 2

I'm now back in the groove and have documentation of Rohdesign Redesign: Part 2 ready for your reading and viewing pleasure. I this part of the project, I'll settle on a structure for the site and begin refined sketches to determine my direction on the look of the site templates.

In the last entry, Rohdesign Redesign: Part 1, I spent time getting my head around my objectives and goals. This is critical to getting the design train going in the right direction. While the initial planning stages might seem like a waste of time (especially if you want to get designing) I feel this goal setting phase improves and streamlines the design stage.

By having a direction in mind, I can constantly have a roadmap to look at and correct myself when I have questions. Even as I sketched out design ideas yesterday, I came back to my comment of "simplicity" which caused me to rethinking some ideas which didn't fit with that goal. So, I know this works.

SitemapBefore I let myself get into the design mode, I have one more step of planning to prepare — the site map. Sitemaps can seem like overkill when the design bug is knocking on your mind's door, but don't open that door yet. A sitemap is another goal device which helps you clarify where you're going before getting lost in design and template building. For instance, my sitemap helped me organize which areas linked to what, and which areas ought to be blog templates or static pages. Sitemaps are also valuable for clients, to offer them a visual, more concrete way to conceptualize a proposed site.

Page Blocking & Focus Sketching
Focus SketchOnce I had a clear idea of the site structure, I began looking at the structure of the site's main page. I had some ideas about what should appear where, but needed to work out those details in sketch form. First, I looked at some initial sketches, then focused on the navigation bar that would appear in the left column.

I then drew out items I wanted in the navbar to see how they might look, experimenting with order and appearances. This type of focus sketching lets me explore a specific area of the site before going back to the overall design. I did this again for the body posts as well, to work out various ideas.

Next, I began exploring the look of the entire main page, in a moderately loose form. In this project I started with a single page design, marking out ideas on the margins of the page. This helped me process through items and see if they feel right or not.

Entire Page sketchEntire Page sketchAs I sketched, other ideas came to mind, so I started a new page in the sketchbook, and began trying rapid variations, scribbling out ideas. I tried 4 variations that came to mind, getting them down on paper quickly to see if they were valid or not. After sketching, I added notes to each approach, for later reference. For instance, on the 3 column design (lower right corner) I felt the design cluttered, so I noted "too much stuff?" and circled the comment.

Digital 'Grey Box' Layouts
At this point I felt comfortable with my sketch explorations. I decided to spend a little time building real pieces in Adobe Illustrator and Macromedia Fireworks, but keeping the elements in black and grey only (no color). I've started this approach after reading Jason Santa Maria's excellent Grey Box Methodology post. I have always followed this for logo design work, so it seemed natural to build site designs without the distractions of color too.

Unfortunately, I activated an apparently bad font and lost 20 or 30 minutes of unsaved work (hate it when that happens) which means I haven't any grey box layouts to share — that will have to wait 'til next Friday. :-)

Hopefully this second installment shares a bit more of the process I'm following as I redesign. I have found it interesting, being aware that what I'm sketching will appear publicly here for others to see (it's a good thing).

Thanks for those who have offered suggestions in Part 1, these are all much appreciated and have been included in my notes.

Alright, lots yet to do today and a busy weekend looms.

Have a great weekend!

Reader Comments (1)

I can't wait for the sketches and comps! Hopefully my favorite section will be next, when you start digging into CSS. :D
June 25, 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):
All HTML will be escaped. Hyperlinks will be created for URLs automatically.