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)


Down The Weblog Rabbit Hole

Ugh, tonight was both bad and good, in that order. Currently it's very late and my weblog is back to quasi-normal again. Tonight, I decided to dig out a nagging problem with comment forms not working on the permalink pages. What started as simple troubleshooting, turned into a spiraling sinkhole! Aieeee!

At one point, I'd even reverted to an almost original default state for the template and CSS, but even that seemed to fail. With some critical help from fellow web designer, Jordan Arentsen , I came to see that it was the craptacular HackTML I had used on the permalink pages (and everywhere else), which was breaking the forms in Windows Internet Explorer. This has now been cleaned up a bit, so if you've had problems accessing the comment forms here in Win IE, please test out the new permalink pages.

What this has brought to the forefront is the need for a cleaning up of this weblog over the Christmas break. When I began the weblog I knew very little about Movable Type, CSS or XHTML, so consequently the templates here were fine quality hack jobs. Now that I have a much better grasp of HTML/CSS and a bit more about the MT codes, I think it's time to clean things up here.

You may also know that I've been meaning to redesign the site, posting several articles about it this summer. Well, while I like the new design, the more I look at the current design, the more I like it. The clean and direct look work — some cleanup and simplifications should improve it even more.

Alright, time for bed. :-)


MailDrop 2.0 Icon Story

MailDrop 2.0 IconOkay everyone, time for a little horn-tooting PR for a “design the icon” contest I won on November 18th. I think the busyness of the season and Thanksgiving holiday threw me off, because I'd intended to mention this sooner. :-)

Anyway, Matt Henderson, the owner of MakaluMedia (the company I'm design director for), alerted me of an icon contest being offered at Erik Barzeski's NSLog weblog. Erik runs Freshly Squeezed Software, makers of various Mac OS X applications, including a Mail Merge app called MailDrop. It turns out that MailDrop is being updated to 2.0 and was in need of a new icon.

Well, I figured what the heck. While I have 15-some years of graphic design experience, I've never done a Mac OS X icon before. I thought this project could be fun, challenging and educational. Better yet, the icon concept they were looking for was somewhat cartoony, and hey, I love cartooning. So I took on the project.

Erik liked the direction in my sketches and rough icon ideas, so I proceeded with the icon project and ended up winning the contest. The final set of application icons are posted with this article. We're still in the process of finalizing the app's document icon.

My icon building process took a little time to sort out at first. I ended up working in Macromedia Fireworks, because I could use vector art, yet see immediately how my changes would appear in pixels. I also experimented with Adobe Illustrator and Photoshop, but because of my daily use of Fireworks and its vector/pixel feature, it just suited me best.

Once I had a final icon, I exported a master PNG file with transparency. Then I opened the file with Photoshop 7 for conversion into icons using a handy Photoshop plugin from IconFactory, called IconBuilder. At $69 It's not cheap, however, for the time it saves doing icons, I can see its value. I love that IconBuilder has no use restrictions (other than a nag screen which appears after multiple uses), because this allowed me to fully test it out before we decide to purchase it.

If IconBuilder is a little too high for your budget, there are other free and shareware tools out there, like Icon Composer (included with the Xcode Tools on the OS X developer CD) or the $15 shareware tool, Iconographer.

Should an icon for OS X be in your future, check out these helpful Apple documents: Icon Genres and Families, Suggested Process for Creating Aqua Icons, and Tips for Designing Aqua Icons. Here's another useful reference: OS X Icon Tutorial from O'Reilly's MacDevCenter.

Overall, it was a great challenge, and indeed, very educational. In fact, it felt very good to dive into something I'd never done before!

Ok, here's my final PR spiel for this Friday: If you happen to need a little icon work or any other type of design work (web or print), please feel free to drop me a line. :-)

Have a great weekend!


Rohdesign Redesign Status and CSS Thoughts

Oh yeah, I'm supposed to be redesigning this site, aren't I?

Busted. ;-)

Ok, It's been a while since I've last mentioned my weblog redesign, because honestly, I've done nothing on it for several weeks. Looking back, I can see our vacation break in July putting me off track, along with our busy summer schedule.

This has, however, been a good thing. I've had a chance to break away from the project and clear the cache in my brain. When I had a peek at my latest design yesterday, I found a several things to change, which I hadn't noticed during the redesign process.

Often, design projects haven't much margin for this time of separation, since there are usually hot deadlines. This experience reminds me that stepping away mentally, even for a short time, can be very beneficial.

Callisto SpaceI also have more experience with Cascading Style Sheets (CSS), after completing the redesign of the Callisto Space website, a long time client of MakaluMedia (the company I work for). This project was a great opportunity to explore some new areas of CSS and XHTML that I hadn't worked with before. Overall, I feel the project turned out quite nicely.

CSS has been a challenge for me, partly because my roots are in print-based graphic design and several years of old-school (once called 3rd generation) web design using tables with invisible spacers (per David Siegel's Creating Killer Websites) . It's always difficult to step away from something you know, into things you must learn, especially a language like CSS.

I've found with CSS, that things don't always work as I might expect, or what I expect to be easy to do, is usually more complex than it appears. However, with each of these CSS challenges, I've found I'm getting a much better feel for CSS. It can be a hassle and a pain, but I try to stay optimistic, reminding myself regularly that I'm learning a language, and growing through my experiences.

Of course, tutorials on CSS techniques, like those found at AListApart and SimpleBits, are indispensable. I've also found books, such as Jeffery Zeldman's Designing with Web Standards and Eric Meyer's Cascading Style Sheets: The Definitive Guide and Eric Meyer on CSS very useful as well.

Overall, I'm really loving CSS, despite how strange and challenging it often is. I find the power CSS offers me, far outweighs the comfort of old-school web design. The idea of changing a single style sheet which effects an entire website is just too good to let go of now. I suppose I'm hooked. :-)

So, despite the gap in activity, I'm back to focusing on the redesign once again. I've planned to start template construction later this week and weekend, hoping to put up a demo for you all to see on Monday.

If you have any feedback on the redesign so far, feel free to drop a line. For reference, here are all previous entries related to the project:

Rohdesign Redesign Project
Rohdesign Redesign: Part 1
Rohdesign Redesign: Status Report
Rohdesign Redesign: Part 2
Rohdesign Redesign: Part 3
Rohdesign Redesign: Part 4
Rohdesign Redesign: Part 5
Rohdesign Redesign: Part 6


Thoughts on Optimal Design

Rivendell BikesLately I've been brewing on the theme of optimal design — the idea that there's a perfect, or near perfect design for many objects. By optimal, I mean items which are so well balanced, no improvement of significance can be made on their design. Below are a few examples...

Rivendell Bicycles
The idea of optimal design was clarified in my mind while having a discussion with my blogpal, Michael Ashby, a complete devotee of Rivendell Bicycle Works. Rivendell is a custom bicycle builder in Walnut Creek, California. The Rivendell folks believe there is indeed an optimal bicycle design, built on a foundation of a strong, lugged steel frame, surrounded by solid, reliable and proven components. Optimal bicycles should durable, comfortable and (most of all) fun to ride for a very long time. Rivendell bicycles aren't cheap, but if your bike lasts your lifetime and your son or daughter's lifetime, the cost seems quite reasonable.

Pilot and Palm V PDAs
Along the same line of design thinking was the original Pilot handheld. Jeff Hawkins spent an awful lot of time in the initial design, simplifying and focusing the Pilot's features and purpose. The Pilot was designed to do a few things very well and because of this focus, it was a smash hit. Equivalent to the original Pilot was the Palm V, another nearly perfect design. It was small, thin and lasted a month on a charge, but also offered a handsome appearance for the many business executives who carried it (and likely still do). I still recall how the Palm V was the device to beat. I'd wager the Palm V still has impact on its descendants and competitors.

The Moleskine Notebook
Another item of optimal design is the Moleskine notebook. The size is perfect for a pocket, the cover tough enough to take abuse, paper is high quality, and the elastic strap keeps the cover closed (protecting the interior). The design is so intriguing, Moleskines have a very strong following among artists, engineers and professionals alike. These small notebooks are not cheap compared to many notebooks, but their build quality, optimized design and durability make them very reasonable for people who value these qualities. Just pay a visit to Armand Frasco's Moleskinerie weblog frequented by Moleskine fans and junkies to see the passion.

Apple iPod and iPod Mini
Not much needs to be said about the Apple iPod and iPod Mini, both very popular MP3 players. Again, iPods aren't the cheapest or most featured music players on the market — yet do well and are the target of every competitor. The iPod design combines simplicity with effectiveness in a way that attracts a wide variety of buyers, even though clunkier but cheaper competitors flood the market. Design and quality are very recognizable.

Optimized is not Necessarily Perfection
Now, that's not to say optimal design is necessarily perfect — I'm sure Rivendell bikes have their issues, as I know the other items I've mentioned do. The original Pilot was a bit creaky and had a dim monochrome screen, Moleskines have no way to attach a pen or pencil and the iPod is behind the curve in some ways. Still, even with minor issues, flaws or missing features the items I've mentioned here are generally recognized as optimal designs.

What is Optimal Design?
I believe the description of an optimized design is this — an item that's simple, focused on core tasks/goals, constructed with high quality materials, considerate of the user, and built on previous proven designs or design ideas that have been thoroughly contemplated. An optimal design should have function, practicality and quality held in higher regard than flash, fashion, and glitz. However, an optimal design should still be aesthetically handsome or beautiful and functional. Form follows function.

What are your thoughts on optimal design? What objects or items would you consider optimal designs? How about un-optimal designs? Please leave a comment with your thoughts on the subject — I'd love to hear them.


Rohdesign Redesign: Part 6

Another week has passed and I've made good final progress on the design. In fact, I feel I'm where I want to be to start hacking graphics and coding the design into XHTML and CSS templates for the site.

Color Issues
03.9, The final!Since my last post I've wrestled with colors. My original intent was to carry forward the colors from my old weblog design, in more muted tones. As I continued to look at the burnt orange, teal and purple, I felt these were just not working with the new design. They felt dated, probably because I've been looking at them for years.

After color discussions with my pal Andy, I decided to make a break with the past. Last week's chips showed muted blues with burnt oranges. Andy suggested a burgundy might be a nice accent, so I began experimenting with burgundy on my layouts. I liked the contrast, and realized burgundy is a color I love (two favorite shirts prove it).

You can see my progression from greenish-blue and burnt orange to the addition of burgundy on 03.8a, 03.8b, 03.8c, 03.8d and finally 03.9. In the end, I liked the color balance: cool, muted blue, rich burgundy, warm burnt orange as an accent color and the ever useful gray.

As you can also see, I've kept the plain text navigation (which will be built using an unordered list) and have added an orange tint and orange diamond to differentiate it from other blue section headers while staying consistent with them. My thinking for these is to use background images for the navbar graphics. I may also utilize the hover feature of links to create a rollover effect... we'll see.

Two Columns
I wrestled with the Three (3) vs. Two (2) column design a bit as well. Three columns offered nice flexibility and readability for the site, but also meant that I would need to fill a third column — specifically a "sideblog" (Notable) and the quote section (Quotable). The quote section was an add on from the start, so it was relatively easy to leave off.

The Notable section was harder. I wanted to have an outlet for links in a sideblog, for busy days when a full post is difficult. However, reality settled in. I have very limited time... why was I adding another weblog to my list of to-dos? I would much rather invest time into quality weekday posts than into maintenance of a good sideblog.

Lastly, I felt the need to simplify the design — going to two columns resolved the complexity issue and put focus back on the post section of the weblog — another goal from the outset. Writing is after all, the whole point.

Bye Bye Radio Waves
As much as I liked the idea of radio waves, they just never worked as I'd envisioned. I tried textures, airbrush techniques and fine lines, but each variation seemed to bother me when intersecting text on the page. Following my gut and the simplicity rule, the radio waves had to go. Maybe at a future point I can add them back — if a solution presents itself.

Details, Details
Other small details were added: rounded edges for nav and sectional bars, slightly larger fonts overall, new icon and tweaked text for Lowdown, adding my name to the "World Famous Designer" tagline up top (that tagline is a joke, BTW), and a gradation on the bar behind the globe.

Hack & Code
So, with my design settled, it's time to start the graphic hacking and XHTML/CSS coding of the template. So let the fun begin. I plan to have the template completed by next week, but as I'm off for vacation the week after, it may move into August. We shall see.

Have a great weekend everyone! :-)