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 Design (96)


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!


Rohdesign Redesign Project

It's time.

I've been inspired to redesign this weblog and my website. This decision has been hovering around the back of my mind for a while now, impacted by other nicely designed blogs (Douglas Bowman, Jeremy Hedley, Jason Santa Maria, Dan Cederholm, Jon Hicks, Greg Storey, D. Keith Robinson and Narayan Nayar to name just a few), internal thoughts on moving my creative and technical skills to the next step and discussions with friends on the subject of creativity, web standards and blogging.

I'm not displeased with the look of the blog now, but it feels too much like one nice face applied to a generally motley website. The old site is still there, crusty old-school graphics, broken links and all. The HTML code is a mixed bag, stretching back to 1995 and PageMill in some cases. There is no consistency of design that stretches across the entire site.

The minor problems I've been dealing with related to all of this became apparent this past weekend. It bothered me to see what a mixed up state my site was in. It's like a house, which over time gathers bits and pieces of your stuff. Sometimes you just need a spring cleaning.

Now I want to take time to build the site right. I wan to explore ideas for the design, using web standards (XHTML and CSS) for construction. Redesign is also a perfect opportunity to consider weblog and site features. For instance, I'd love post all of my travelogues and sketches. On the weblog, I want to display the book(s) and music I'm currently enjoying, have separate category archives, have a page of up to date links as I come across interesting sites. I'm sure as I think about it, more ideas will pop up.

Obstacles and Opportunities
One big problem is, redesigns take time, something limited and finite for me. I make time for my blogging over lunch hour or late in the evenings depending on the day and what I'm writing. I have a family I enjoy spending time with, I love reading and am involved in many other things outside of work and blogging. Life is busy — which I am certain, is the same story for everyone reading these words.

A discussion with Michael Ashby at the start of my lunch break today sparked an idea. What if I documented the process of a weblog/website redesign on my weblog? Rather than writing each day over lunch, why not spend lunch on Monday through Thursday on the redesign process, showing sketches and writing documentation about that process on Fridays? I thought this could be interesting for myself and would provide a glimpse inside the process for my readers.

Decision Time
The more I consider the idea, the more I like it. Today, I've decided to make this post my official starting point for the redesign process. My aim is to complete the redesign by July 1st. So, for the next several weeks, there will be weekly rather than daily posts here. Once the redesign is completed, I'll switch back to daily mode.

I'm looking forward to this. Redesign will be a good exercise of my creative and technical skills and an interesting journey to share with you. I'm very open to receiving feedback as I progress, so feel free to leave comments on the Friday update posts.

On that note, I wish everyone a pleasant weekend. Thanks for reading. :-)


My Miquelrius Sketchbook

MiquelriusA few months ago, I happened to mention my love of Moleskine notebooks here on the weblog. The beauty of these little books are their size, durability and paper quality.

However, there are times when I need more space to draw than a Moleskine offers, particularly for graphic and web design projects I do at my MakaluMedia day job. Besides size, I don't need a hard cover or high paper quality for concept sketches.

Enter my Spanish-made, Miquelrius (Leather-Look Pad) notebook. The notebook is 6" x 8.25", a size that is small enough to toss into my shoulder bag for a café visit, yet large enough for concept sketches. Because it's smaller than US Letter or Euro A4 I can fit the Miquelrius into my smaller bags. Further, it's the perfect proportion for my technical sketch work.

The Miquelrius has 200 generous pages of thin, good quality white paper with light blue quadrille pages, wrapped in a rubbery, leather-like fabric that's thin, tough and flexible. Covers are available in black, blue, red and green. I found mine at Barnes & Noble for $10 each. Online, The Daily Planner has them for $12 each (plus shipping).

Initially, the cover material and flexibility of the Miquelrius was a bit annoying, flip-flopping all over the place. The cover and pages would also tend to roll after spreading the book out. This was quite a change from the rigid sketchbooks I was so used to using. In fact, for a long time I didn't use the notebook because of this. Then one day I grabbed the Miquelrius because it was nearby and started to use it.

And, I kept using it! Since using my Miquelrius regularly for work sketches, I've grown to love the flexible cover and pages. I like to roll the left-hand sheaf of pages and the front cover under the book to work as a handle. To restore the shape of the book, I just flip it on its cover for a while and it's good as new!

I'm always happy to find good additions to my creative toolkit, like the Miquelrius notebook. I hope my little review of these, handy, flexible sketchbooks will help them find their way to the tooklits of other creative people out there.

Update: I forgot to mention that Miquelrius notebooks are available in Moleskine sizes (3.5" x 5.5"), in the four colors noted above. Further, my Catalonian friend Paco Rivière, notes that Miquelrius is based in Barcelona. Thanks Paco! :-)


In the Shadow of the Valley of Creativity

Yesterday at the end of a pretty good work day, I came across several websites with superb design, that made good use of the latest web standards. It was a positive experience seeing these sites, because they truly inspired me.

However, as sometimes happens, I began to feel a bit bummed out after the initial inspiration wore off. Actually, very bummed out. Suddenly the design and advanced technical state of those sites made me feel my own design work was old, crusty, and behind the curve.

Over the years as a designer, I've found this roller coaster ride a somewhat regular pattern. Sometimes good creative work inspires me, then causes me to evaluate the status of my own design work in comparison. I call the second phase of this cycle the valley of creativity, because it literally feels like I'm down in a dark valley. It's not a pleasant place to be.

Last night, I shared my feelings about being the valley of creativity with my wife. How it can make me ponder selling hot dogs from a three wheeled pushcart or running a jackhammer in a construction crew, rather than continuing as a designer. But even as these thoughts popped into my head, I could see that they were crazy. I love being a designer.

Fortunately, the valley stage gives way, sometimes in minutes, other times in hours, to the third phase of getting energized. This is where I rise to the challenge of inspiring design, by doing great design of my own. It's a good place to be. Even though I'm in the same state as in the valley, my positive outlook has returned. I'm excited about design again.

As I pondered my state of creativity last night, I began to see how important the valley of creativity is. In fact, it seems almost critical — the valley is the humbling process which allows me to honestly evaluate where I am and then strive for the next level.

Today, while I know there is still much to learn, my state is better than a year, or even 6 months ago. I'm advancing with web standards, CSS, HTML and with all of the sketching, journaling and thinking I've been doing, I feel much more creative.

Yes, there are opportunities to do better work and improve. That's what I love most about design — there is always another project on which I can practice my craft in a new way. And to me, design is as much about the process and the journey as the result.

Is this cycle is common for other designers or other creative people? I suspect it is. It would seem so, since we're always encountering something more creative than what we generate ourselves — there is always a challenge.

I choose my path. I can resign and give up, and stay at my same level, or I can rise to the challenge of even higher creative work. I choose to rise.


eBay: Hokey on Purpose?

Lately my wife and I have been buying small things on eBay, enjoying the deals that can be had there. The other day, I was checking on recent purchase, when I noticed the eBay design. I don't know why I hadn't noticed its design before. Well, that's not exactly right — I'd noticed the eBay design before, but never really contemplated why it looks the way it does — you know, functional but a bit hokey.

Just think about it for a moment. If you've visited for instance, you can see just how slick a website can be. Amazon's look hasn't changed a whole lot in several years, but it is very polished and functional. But eBay... well it works but it looks like it was designed in 1997 by someone just learning to code HTML web pages. The graphics are slightly cheesy. It feels like features were hacked on as needed, without much thought as to how they worked together. This is a web designer's nightmare... or is it?

After some thought, I now believe the hokey design of eBay could be completely intentional. It might be that eBay actually sees the hokeyness of their design as a feature, not a bug.

Consider the design of eBay: it's practical, powerful and reasonably useable but admittedly, a little hokey. Okay, very hokey. However, I think that hokeyness is what exudes the feel of a home-grown community. The design isn't overly professional and slick entirely on purpose, because that would take away the current "feel" of eBay. The very un-slickness of eBay sends the message "we're just a bunch of regular folks, selling stuff. No time for flashy design, 'cause selling stuff is more important." There is an attractive, populist appeal in this.

I think Tradition and familiarity also play a part in the design. eBay has a real, long-standing identity on the web, one which is very, very valuable. I've experienced the difficulties companies face when considering significant identity changes — it's a very hard decision. Companies must ask themselves "how much can we change our look before confusing or even losing our loyal customers?" Facing this, companies often err on the side of caution and familiarity. Just consider the New Coke fiasco, and how in short order so-called "Classic" Coke re-appeared. That was a lesson in changing an identity a bit too much.

eBay's design stasis may partly be that eBay is stuck with the design. It could be that because the site was indeed designed in 1997, those pages are very hard to convert to more modern structures now. Can you imagine the impact of changing everything, every last dog-gone auction on eBay? That could be a nightmare. I've no idea how many active and archived auctions there are at this moment, but I suspect quite a few.

Whatever the case, I believe it doesn't matter because the eBay design is intended to be slightly hokey. Its design sends the right message to their users. How funny that in a world of slickness and perfection, one of the most powerful, money making sites on the net might actually want to look hokey on purpose. I find this ironic and refreshing. :-)