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.

Entries in Web Design (23)


Rohdesign Redesign: Part 5

It's another Friday and time for an installment of the Rohdesign Redesign chronicles. This week was not as active as last week, though I've learned some things from objective feedback and have made decisions on color.

More Objective Feedback
All along the process of redesign, I've been asking for feedback from other people — friends, family and readers. This weekend, my brother Steve and his wife Janet were in town for the 4th of July, so I had Janet take a peek at my layout progression. Color ChipsShe's a creative person (kitchen designer), yet she is still far enough away from this project to offer some more objective opinions.

She liked the globe logo, and seemed happy in general with the overall design. Janet liked the 'Lowdown' section, both for the word used and the brief intro to the weblog and its writer (me). One item bothering her was the use of only a start quote on the block quote. I hadn't even considered this, but it made me take note and think about the design.

I've also received feedback from my friend Andy, who has been advising me during the project. He had suggestions about graphical treatments of the navigation to better match other areas, ideas for a right aligned navigation, use of grey as a color, and thoughts on color densities. Again, good food for thought.

Jason Santa Maria wrote in to suggest a treatment of some sort be applied to the navigation, maybe moving to graphics rather than text links. This focus on navigation being maybe a bit too plain or not in sync with other parts of the site seemed to be a theme to consider.

I intentionally left my layouts alone until Tuesday. My only contact with them was to bring them for Janet's review, but even then I only took her comments down mentally.

After some away time, coming back to the layouts felt fresher, and the comments made by friends and family made more sense. That single quotation mark did start to bother me a little, and the navigation did seem lost in the shuffle.

I'm still not completely sold on the 3 column layout, wondering if maintaining a sideblog, and adding quotes each week is just more busy work I don't need added to my plate. In the end I may choose to ditch the 'Quotable' section, but hold on to the 'Notable' area.

Why? The Notable area seems a good outlet for links when I'm too busy for a full blog post — I can update the site easily, offer a new tidbit to readers, yet not invest much time unless I choose to.

Navigation is a tougher call. I want to try using unordered lists for the nav section, and I like the idea of text-based navigation, because it's easier to change. I don't want to create a gray header and icon called 'Navigation' as a navigation area should be obvious to a visitor. I think the solution will be a combination of an unordered list with background graphics. How that will look? I'm not sure yet.

Color Shift
The last large issue from my grey box and color process were colors. As I progressed through the designs, I grew less and less happy with purple. I liked the gray, the orange, the slatey blue/green, but purple was just not that interesting to me. My idea for color was to maintain it from the old site for consistency, but now I'm not so tied to this idea.

So, I spent a little time picking two main colors for the site that I did like, to see what variations I might prefer. This resulted in a palette of 4 color variations. I've not yet settled completely on any combination, but I am leaning a bit more toward the slatey blue rather than slatey green.

Next Steps
This weekend I hope to settle on a color palette, decide what to do about navigation and crank out a few more color layouts with these ideas in mind. I'd like to have settled on a design by Monday, so I can start building the site.

I'm going to use a construction approach that uses no tables for page layout — pure CSS. At work, I've just built my first website layout this way. It's gone quite well. I've been very pleased with the results, and I'm learning a ton about CSS construction. I expect the Rohdesign project will teach me even more.

Thanks for stopping by, hope this episode has been interesting and useful. :-)

Have a great weekend!


Rohdesign Redesign: Part 4

It's been a productive week on the Rohdesign redesign, even though the original deadline of July 1 wasn't met. Partly it had to do with really seeing the scope of my undertaking as I dove in, partly it had to do with real life crashing the party.

035Somewhere near the end of the month I decided not to worry about the arbitrary deadline, as it had already served its purpose: getting me excited about the redesign process. Now that I'm rolling, I've decided to set a new deadline of July 15th, because I know I work best when I have a deadline to work toward.

I've been very pleased with the documentation process. It's been strange (in a good way) how aware I've been of my own work as I have written down my notes, made sketches or futzed with Fireworks comps. The idea of displaying notes and artwork publicly has focused my thoughts on the process in a way I hadn't expected. I've heard many kind comments from readers who are enjoying the series. Thanks everyone!

As for the project status, I've spent time this week focusing on layout refinements and color experimentation. I was generally pleased with the last grey box layout, but wasn't able to get into color schemes until Thursday, which was in the end, probably for the best.

Some contemplation about the site design during the week came to a head on Thursday morning at the cafe. I felt the 3 column design was still too complex — it needed simplification. So, I took out my sketchbook and began putting down ideas on the way back to a 2 column layout. The general idea was to move the new 'Notable' sideblog section into the left column and heavily reconsider all of the items in the navigation area. What was critical and what not?

I needed navigation, and wanted 'Notable', 'Quotable', 'Reading' and 'Hearing' blocks to stay. I decided to move the 'Blogpals' block to the Links page and to move 'Blogtools' block to the About page. This freed up room for both 'Notable' and 'Quotable' blocks on the left navigational column.

The body text area widened out, leaving some whitespace on the right edge, in place of the 3rd column. The globe seemed a bit too large, so that was slightly reduced. Overall I felt pretty good about 2 columns, except for the nagging feeling that Notable and Quotable might be lost in the navigation row.

I decided to take a break from design, to explore colors and textures. I've wanted to maintain the color scheme from the old design, at least in spirit. Feeling more attracted to strong but muted colors of purple, orange, black and green, I began colorizing two column layouts, exploring dark purples, bright and then rusty oranges, slate greens and variations of their application on elements and type.

I liked the color process, even though it was quite difficult to balance the colors I was working with. Rusty orange is a strong color when paired with deep purples and slate green. I think the color choice process is made even harder, since I want to come up with a combination I'll like for a long while, perfectionist that I am.

I've decided to post my progression of comps created with color, as links because there are quite a few: 03.0, 03.1, 03.2, 03.3, 03.4, and 03.5.

Seeking Advice
After several variations on these color schemes I brought in my advisory council. First, Michael Ashby, a fellow blogger and web designer. Michael always offers good feedback and did not disappoint. I showed him my progression of layouts, and heard his feedback, which challenged me to continue with the process.

Later that evening, I had my wife in to have a look and offer opinions. She liked my progression, though had feelings about some color choices which helped me greatly. From her suggestions I built a final color comp on Thursday evening.

Before heading to bed, I sent the progression of links to my friend Andy Bauer, whom I trust for design and color. Andy has already been a helpful through this process with the design, so I knew he would also offer useful feedback.

Boy did Andy deliver this time! He wasn't as keen on the 2 column layout as I had been, because he felt a sense possibly of "missing something" on that left column — particularly the Notable and Quotable blocks. He felt that keeping these items on the right side of the page (e.g. the original 3 column design) kept them in a place easy to see. He also had suggestions about the colors, offering his gut impression that they felt very 1980s. He liked them but wondered if they might go out of fashion.

He wasn't completely crazy about my experiments with the weathered looking globe logo. He thought it was just a bad resize in Photoshop rather than an intentional thing. As I'm new to and not totally sold on the weathering idea, I had to agree.

So, I made some adjustments per his thoughts and generated another comp, numbered 03.6. This one featured 3 columns and a gray layout (as color is being revisited).

Another friend and fellow designer, Paul Rozanski, stopped by the house this afternoon to pick up some things, so I asked him to have a look as well. He suggested I consider more descriptive identification, sharing with new visitors just who this 'rohdesign' guy was. I was encouraged me to generate one last comp this evening before dinner, 03.7. This modification featured a more descriptive tagline, a small photo and intro to the blog and myself and a little more positioning experimentation.

Decisions & Direction
The design progression for now has stopped and I've printed out each one for review. I have some contemplating to do about the design, colors and what items really ought to be on the new design, but I think this should wait until Monday. Sometimes getting away from the project helps me identify things I may not notice when I'm up too close.

So, another chapter of the process has passed and documented here. As always, if you have comments, suggestions or ideas, feel free to leave those.

Have a great weekend! :-)


Rohdesign Redesign: Part 3

Good news! I've made progress on digital 'grey box' layouts for the redesign over the weekend, so I've decided to share them here tonight. I'm actually very pleased with the shape the design is in at this point, even though there are many details to settle on.

Grey Box Layout 01
Layout 01My first grey box layout came directly from the rough sketches I'd posted in parts 1 and 2, with the globe logomark and 'rohdesign' logo type on top of each other. My goal with these layouts was to keep the design as restrained and simple as possible, after my overarching goal of "Clean, uncluttered, clear design."

While my goal was simplicity, I still wanted to remain open to changes if I felt the need. For example, as I built the digital grey box layouts in Fireworks, I felt that a migration from 2 to 3 columns was necessary to add Items not present in the initial designs. In particular, I've decided to add a 'Notable' section to the weblog. The Notable section, inspired by other blogs, will be a place where I can post links to interesting articles I don't particularly want to do full blog posts on.

Plain text with triangular graphic indicators make up the navigation, along with simple icons in light toned bars to mark off sidebar sections. Other changes included the removal of the graphic badges from the lower navigation column, in favor of text links. I've also decided to turn article headlines into permalinks, replacing the 'Permalink' text on the current design.

Grey Box Layout 02
Layout 02Over the course of two sessions layout one was completed. However, it wasn't perfect. The upper section felt too vertical and disconnected — so I created a duplicate of layout 01, renamed as layout 02. I took some time to experiment with a horizontal treatment of the globe logomark and logotype, adding a color bar along the top edge of the page.

Immediately I felt the second layout suited my goals better than layout 01. I liked the offset globe slightly tilted, the rohdesign logotype to the right and carrying the tonal bars along the top edge of the page. 02 felt more balanced overall, and more interesting to boot.

Next Steps: Colors & Textures
Now that I'm comfortable with the layout, the next step is to experiment with colors and potential textures. I plan to carry my current colors over from the old design (or very close anyway). As for potential textures, I'm considering a aged look for some graphical items, but we'll see. I like crisp clean graphics, so an aged feel will need to be brewed on for a few days.

See you all on Friday...


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!


Rohdesign Redesign: Status Report

My Rohdesign Redesign documentation has been delayed a bit. I've decided to post an update.

I've actually made good progress planning the structure of the site, figuring out the site map. Problem is, work and good ol' regular life has impacted my time for writing the documentation.

I'm continuing the process, and will document it (some has already been put down) however, I've decided to publish part two on Friday, which will include the process of defining structure and refining the template design.

So, Until Friday...