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)

Tuesday
Sep132005

HelpSpot Goes Beta

UserScapeIan Landsman, a MakaluMedia client, friend and all around good guy, has just released a beta of his web-based helpdesk app, HelpSpot. If you're someone who manages a helpdesk, or knows of someone else who does, check it out. Ian is looking for feedback at this early stage, to get the final release just right.

We helped design Ian with his corporate identity work several months back, working with him on the UserScape and HelpSpot logos and website templates. Ian has a great weblog post about his experience designing the logo from a client's point of view, complete with sketches and art.

Ian, best wishes for great success on HelpSpot! :-)


Technorati Tags: , , , ,

Saturday
Apr302005

PocketGoddess Reborn

PocketGoddess.gifOn Friday, my friend and fellow Palm OS User Council member Jen Edwards had a small wish come true — she saw her PocketGoddess website reborn! It was revamped with a new look and a new Movable Type system to make her writing and publishing much easier. I'm most pleased because this refresh will allow Jen to enjoy writing, instead of fighting with a manual, cobbled together system.

I was fortunate to help her out with this transformation, thanks to my good buddy Michael Ashby. He asked me to be involved in developing a logo for Jen and setting direction on the design, so he could focus on the technical stuff of Movable Type and building HTML and CSS templates.

pg-sketch.jpgThe logo started as all of my logo work does, in my Miquelrius sketchbook. I had a chat with Jen about her wants and needs, then began drawing ideas out of her comments and my ideas for her identity. I wanted mainly to provide a more refined look for Pocket Goddess, something that would represent Jen's personality but also have a classic, professional feel.

pg-logo-black.gifThrough the sketching process, we both centered on a simple goddess icon, and I explored type and sharpening up the icon itself. From this process I chose two fonts (Gill Sans & Spring Script). For the final stage, Jen and I discussed color, and I learned she dearly loved blues and greens. So, finding the right blues and greens became the task. I preferred a “leafy” green color, though I did explore a blue green option. In the end, the leafier green won out.

Once the logo was determined, I spoke to Michael Ashby about his structural plans for the site. He was setting up multiple Movable Type weblogs for Jen to use, so she could manage all of the news, reviews and other content of her site in a more effective way than her current mostly-manual system.

pg-comp-sm.jpgMichael simply wanted a main page design comp from which he could spin the rest of the site. So, I provided Mike with a quick layout and some graphics, which he turned into templates and eventually, the entire site. Michael put a much more significant amount of effort into his end of the project, making sure every detail was handled, right down to the sub-categories, font formatting and browser testing. Michael spent many hours getting this site up to his high specifications.

I'm very proud of the look and feel and the teamwork we enjoyed during the project. Jen might say it took too long (she was excited the whole way through and both Michael and I worked on the project on our evening and weekends) but I would bet she'd now say that it was well worth the wait. :-)

My thanks to Jen for the opportunity and for Michael's hard work bringing the PocketGoddess site to life for Jen. You guys rock!

Saturday
Apr232005

My Unusual Work Life

office.jpgI'm at the local Caribou Coffee early in the morning, wrapping up a brief chat between a client in Pennsylvania and a friend in Manchester UK, but that's not unusual. In fact, most of my work day is spent on design and web projects for clients and colleagues in Europe and the US, and it's been that way for nearly 7 years.

I work for MakaluMedia, an engineering, web and design services firm with offices and colleagues in Germany, Spain, Ireland, France and the USA (me). I work from my Milwaukee, Wisconsin home office, collaborating remotely with clients and colleagues around the world.

I have an unusual work life, to say the least.

Recent conversations with friends put the idea into my head to document my story and the unique work situation I operate under at MakaluMedia, because whenever I share my story with others, they're quite interested and often amazed. So, here goes.

History
It all began with Matt, a friend living in Germany whom I met on a Powerbook users mailing list in 1994. I'd purchased a Powerboook Duo 230 in 1993, and found this early online community of Powerbook users friendly and very helpful. In fact, one of my very best friends, Andy, came to me through this mailing list.

I ended up helping Matt with some print design projects on which we both really enjoyed working together. Then I met Matt in person on a 1995 trip to Germany. At the time, Matt worked as an engineer for the European Space Agency, but had a deep interest in the Internet which he pursued in his off time.

Around 1997 Matt had decided to start his own web design and engineering firm, and began lobbying me to join as his first colleague and designer. I was quite interested in the idea, being very interested in the web myself. I'd been doing print design for 7+ years by then, and had started experimenting with website design and construction both personally and professionally. But I wasn't quite ready yet.

Matt kept up the subtle pressure as his business went from a part-time to full-time. My reasons for waiting eventually wore down. My interest in the web and web design only increased. So, In mid-1998 I decided to take the leap from print to web design and join Matt's new firm. I figured it was a no-lose situation.

I was single, very interested in the web and I wanted to do something unique, challenging and fun. I figured that if this gig didn't work out, I could always go back to print design. But if the gig did work out, I'd have the opportunity to explore new work and maybe even invent ways of working. Looking back, it's amazing to realize I'm nearing my 7 year anniversary working for Matt and MakaluMedia!

The Big Shift
Moving from a design office in the trendy Third Ward of Milwaukee, to a home office was a pretty significant on many levels. I switched from a 20 minute commute downtown, working with 8 other colleagues in an office, to the second bedroom of my upper flat. My new work colleagues became Snickers the cat, dust bunnies, the mailman and the occasional FedEx courier.

As with any work environment change there are always tradeoffs. I gained freedom in my work attire, work schedule and reduced my commute to 15 seconds, yet I lost the creative office environment, design colleagues, and space in a hip building in a happening part of Milwaukee. Probably the hardest of the tradeoffs for me is working alone, though this also did wonders for my focus.

Work-wise I moved from about 80% print, 10% web and 10% Mac systems administration at my old design position to 85% web, 10% print and 5% systems management at the new position with MakaluMedia. This suited me, as I love working on web-oriented projects.

Moving from mainly a print orientation to web orientation I was forced me to adapt to new things, such as hand-coded HTML and CSS in a text editor, building web graphics with Macromedia Fireworks and Photoshop and learning how to hack my way around PHP code. Great thing is, I've not lost my love for corporate identity or print work, and I continue to do both.

I also gained new opportunities to travel to our main office in Germany, which I enjoyed. In fact, I need to think about my business trips to Europe, because they've all since blurred together. Since 2001 I haven't been back, because the need for my physical presence became much less critical on projects. Now all of my work and communications can be conducted via email, chat, voice or video.

New Disciplines and Freedoms
I found a few things helped me with my big shift, particularly setting a daily routine similar to my workday at the design firm. I'd have breakfast, brew coffee, commute to the office (all 15 seconds of it) and then start work at 8:30. I always take an hour lunch and quit at 5:30/6 pm each day. Over the years I've found that discipline in maintaining a regular start, end and lunch time helps keep me on track. Once and a while I'll vary my schedule, though I find I'm most productive when my normal routine is maintained.

Having a relatively flexible schedule meant that I could take a little longer break for lunch or sneak in an errand here or there, then stay later or put in that extra time in the evening or the next day. Time freedom is especially attractive now that I'm married and have a young son. It allows time with Gail and Nathan if I like, to relieve Gail when Nathan is getting on her nerves or for a mental break of my own.

I found it was also important to establish a space for work, which has been either a spare room, or currently a basement office. I think for me it's important to have these two "bases" from which to work — a general time frame and a work space. I can always adapt hours based on the day or the workspace (a café for instance) but I think having the structure of a time and space is critical for me to work most effectively.

Lonliness of Remote Work
Probably the most difficult aspect of working remotely is the loneliness. This was more of an issue early in my remote days, because now IM chat, Skype and iChat voice/video chats are pretty commonplace with the advent of broadband net access. I've also built a group of net-based friends, colleagues and clients with whom I can take a short social break with. I've found that taking short social breaks are good for me, so long as I keep them brief.

As a social person, I also sought out meetings with friends locally, just to get out of the house from time to time. These 'reality checks' are still a critical part of keeping sane in a remote-working environment. IMs and voice chats are good, but for me, personal interaction is also necessary to fulfill the need to escape occasionally and have some face-time.

I have a pretty good balance of social interaction with both net-based and local friends after years of living the remote life and building a network of contacts. However, I've considered searching out or even starting a group for remote workers, either virtually or locally. I figure there must be many other people working in the same way I do, in need of social interaction. I'm still brewing on this one.

More About the Work
Besides the remote part of my work situation, I think the unique nature of the firm I work for is worth going into detail on. A chunk of our clients and my colleagues are European, which for me means 7 hours ahead of my time zone. I arrive at work at about 3:30 Central European Time, as my colleagues are finishing up their workdays. However, this time differential has advantages in that I can work a normal workday (8:30 to 5:30) and provide our clients service from 3:30 well past midnight in their time zone.

While the majority of the Makalu staff are based in Germany, several of my colleagues are remote workers, with 3 in Spain, 1 in Ireland and 1 in France, so we have a pretty distributed company. This creates challenges for us, primarily in the form of communications. We work mainly via email and our secure company IRC server, though we do chat via AIM. Our group also makes use of Skype/iChat AV for voice or video conferences when needed.

My Work Roles
I'm the design director for MakaluMedia, so it's my job to focus on the overall design of our work and internal/external documentation. I'm mainly focused on the design of our sites and web applications with the ability to build static sites and hack a bit of PHP and flash, but mainly I leave the heavy-duty programming tasks to our engineering specialists.

I'm also keen about corporate identity and Mac icon work, so I also pursue those with our clients. My work is quite broad and varied, which suits my "generalist" skills. I like having many different projects happening at once: a new website, a website redesign, several corporate identity projects, setting up a weblog for a client and updating internal company documents.

I've also been interested in blogging and blog design for the past 2 years, which has become a service area and lead generator for MakaluMedia. We've helped setup several blogs for clients but better yet, blogging has directly led to our 4 most recent clients. Pretty cool when an area you love to explore can also provide opportunities and growth.

Final Thoughts
I hope my story has been an interesting one for you to read. I'm so used to how I work that it seems "normal" for me now, so it's hard to know how unusual my story really is. Maybe my work life really isn't so unusual after all?

I'm fortunate to work in the way I do and for the company I'm employed by. I enjoy varied and interesting projects, great colleagues and clients, work flexibility, helping others and the challenges of maintaining discipline with nobody looking over my shoulder.

In the end, working remotely all of these years has helped me understand that the power to achieve things at work lies inside of me — not in a cool office space or trendy part of town, or even the kind of computer I use. It's in how creativity is drawn up by colleagues, clients and myself and it's about the process of working as well as achieving good results.

If you're a remote worker or free agent, please leave your comments on your work life and ways you've dealt with the issues of working alone. I'd love to hear them!

Tuesday
Aug242004

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

Friday
Jul162004

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.

Navbars
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! :-)