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 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. :-)


Designing With Web Standards

DWWSThis past week I got a copy of Jeffery Zeldman's excellent book on web design, called Designing With Web Standards. This weekend, I dove heavily into the book (I'm about halfway through) and have been thoroughly enjoying the read. In fact, it's been a while since I've laughed out loud while reading a technical manual... wait come to think of it, I've never laughed while reading a technical manual!

Okay, so why did I like the book? Well, first, it's aimed right at me, a graphic and web designer, who has labored to create good looking websites for the wide array of web browsers. Many of these browsers were foisted on the public over the past few years: namely, all 3.0 browsers and in particular, Netscape 4.

I like that this book offers the individual web designer (me) a realistic way to ditch the old ways of working with tables and other hacks to achieve a nice looking design. Further, it offers an alternative approach of standards-based design by providing practical info on ways to actually build sites using XHTML 1.0 (a new, XML-based version of the HTML spec) and Cascading Style Sheets (CSS) so that the same web page will appear similarly in all browsers.

Now, about the book itself...

Zeldman has a great writing style, which combines deep knowledge of his topic (XHTML, CSS and web standards) and humorous shots at other "usability gurus" like Jakob Nielsen and the companies who've been creating web design "solutions" like Microsoft FrontPage.

The book describes how concerned web designers established a group called the Web Standards Project, bugged the heck out of Netscape and Microsoft to actually create web browsers that would follow the very web standards they helped establish.

The idea was simple -- web designers should need to build only one page that would render similarly in every browser, whether IE, Netscape, a Palm, Pocket PC or mobile phones browser. The gamble to pressure these firms actually paid off, resulting in 5.0 browsers from Microsoft and Netscape (and other firms) displaying web standard specs consistently enough that web designers can actually design a page once, and have it appear pretty decently in all modern browsers.

Designing With Web Standards also shares practical information. In particular, the book offers an easy to read, how-to guide on building sites using standards like XHTML and CSS, rather than common table hacks and other time consuming and bandwidth hogging tricks of the average web designer.

The biggest advantage of this new approach is that the structure of your content gets separated from the markup of that same content. Why is this significant? well, first, it allows all browsers to read the content itself because tags to change the color or font size are not getting in the way of the browser. Further, keeping content separated can make the file size significantly smaller and quicker to load. Lastly, separating markup (or CSS stylesheets) lets the designer make global changes to an entire site with a simple change of the stylesheet item, rather than laboriously editing Every. Single. Page.

So, if you're a long time web designer, or a graphic designer just getting into web design, get this book. If involved in creating web pages in any shape or form, get this book. It presents an incredibly logical and sensible way of working that will make your web designing life much easier now and in the long run.

As for me, well, once I've completed the book I'll be coding with web standards. I might even start before I'm done with the book. We'll see. Changes will most likely start with this weblog page and then extend to all of the other web design I do, because it just makes sense to build to web standards. It's hard to argue with that.

Page 1 ... 1 2 3 4 5