Rohdesign Weblog: Web Design

Here you'll find all posts file under the Web Design category.

April 23, 2008

The New Gig: Art Director at Northwoods Software

Last November, I mentioned in detail Apple contacting me about a job opportunity with the iPhone/OS X design team. After taking time to ponder and reflect on the opportunity, I felt it wasn't the right move for myself or my family.

I loved living and working in Milwaukee, helping independent software developers with branding and design challenges at MakaluMedia.

These were the major reasons I decided to decline the Apple opportunity.

Fast forward to spring 2008.

Following several discussions with leadership team and design/development staff at Northwoods Software, I've been offered an art director position, which I have accepted. I start my new job in mid-May.

After 10 great years at MakaluMedia, I'm taking the next step.

A Tough Decision
This change was a very tough decision. I love the design work I do, the clients I help and the many colleagues I've had the pleasure to collaborate with. I've spent several years building a reputation for doing good design work, solving problems for my clients and being a designer who listens and is easy to work with.

There is nothing wrong with MakaluMedia. I've loved my time at MakaluMedia.

This change in direction is about new opportunities and challenges on multiple levels. This is the next step in my growth as a person, a designer and art director.

10 Years at MakaluMedia: Priceless
Working for MakaluMedia since 1998 has been a wonderful experience. Matt Henderson, the owner of MakaluMedia and I have been through quite a bit together.

I was Matt's first employee, leaving a position with Hare Strigenz, a Milwaukee print design firm. I'd developed a passion for the web and wanted to learn the new medium by diving in head first.

I learned HTML from books and building sites in BBEdit. in 2003 I shifted from tabled design to web standards, thanks to Designing with Web Standards.

I was the first MakaluMedia employee to work fully remotely. This was way back in 1998 when it was still a little quirky and unusual. I produced my design work on a Powerbook Wallstreet, with a 19" Sony CRT on a folding table in my apartment.

I experienced a shift from larger design projects with the European Space Agency, to building a network of small, independent clients over several years. The first year was tough, but a long-term, steady approach to doing good work and making clients happy has paid off in many referrals, a backlog of work and profitability.

By working remotely and having to build my own network of clients and partners, I've effectively run a small design business. I've enjoyed the entire process: finding clients, winning projects, solving design challenges, selecting and managing partners, producing the solutions, invoicing the work and promoting the work.

These past 10 years have shaped who I am, formalized my iterative design process, provided a better understanding of business, built my knowledge of helping clients, improved my customer service and more. It's been a priceless experience.

Northwoods Opportunities & Challenges
Becoming an art director at Northwoods Software is a step in my process of growth as a designer and a person. I'll be working on larger projects, exercising research, analysis, problem solving and visual thinking skills in new and different ways. I'm looking forward to bringing what I've learned to new projects and users.

I'm very excited about working within a creative group again. Working alone has developed my focus, but I've missed being in an office with a small group of creative people. Over the years I've built a network of design colleagues online, but IM, Twitter and voice chats are just no substitute for having colleagues close at hand.

Sharing with my team will be satisfying part of the position. I'm looking forward to offering up my 20+ years of experience in design practice with colleagues. I hope that all of the joy and pain gained from many years of working on projects with clients will benefit my colleagues at Northwoods.

The company is focusing on new creative areas of expertise, and I'm extremely excited to be part of this. I'm hoping my skills and experiences in building a small design business from scratch will be helpful in this regard.

Finally, the company attracted me with its unique working environment, including a private office with shower and toilet, ping pong tables, popcorn on Thursdays, workout and nap rooms and space outside for frisbee. Northwoods' family first approach and flexibility made a positive impact on me, as I'm coming from a pretty family-friendly and flexible work at home environment.

All in all, I am very excited about this new Northwoods opportunity.

Thanks!
I'm very thankful to Matt Henderson for the opportunity to be a part of MakaluMedia these past 10 years. It's been a great ride, I've learned quite a bit, and I know the team will continue to produce great stuff.

I'm also grateful to the team at Northwoods, for making me a part of their team at this exciting time in the life of the company. I'm looking forward to being a contributor to Northwoods' success and growth.

Northwoods Movies & Photos
Tracy Apps, a friend of mine and my future Northwoods colleague, has grabbed several movie clips and photos of the Northwoods offices on Flickr. I thought would be fun to post several of them here for a little context. :-)

My New Office at Northwoods

Yep, that's my own private office with a window, bathroom, shower and vanity. Northwoods has retrofitted an old hospital space for their offices, so every employee gets an office just like this. Pretty slick.

The Creative Wing Tour

Tracy takes the camera down the hall from my office, and shows the central area where the ping pong tables and other amenities are located.

Brian Artka Scootering in the Creative Wing

A few weeks ago, Northwoods picked up scooters for the team, and of course my friend Brian Artka had to show off his scootering skillz!

Tracy's Extreme On-Board Scootering

Here we have Tracy capturing her thrill-a-minute extreme scooter ride!

Ping Pong Tables

And here are several Northwoods team members playing ping pong.

Permalink | Comments (23) | Design | add to del.icio.us

February 7, 2008

Attending SXSW Interactive 2008!

For the past few years, I've been very intentional about attending thought-provoking conferences and events, to learn, grow and meet new people.

In 2007, I attended BarCampMadison, UX Intensive, SOBCon07, BarCampMilwaukee2 the SEED Conference and excellent monthly Web414 meetings through the year.

For several years I've heard great things about SXSW (South by Southwest) Interactive Festival in Austin, Texas. Many of the people I admire attend yearly, I've enjoyed podcasts from the event, but it's never worked out for me to attend.

That will change in 2008. On March 7th, I'll be heading down to Austin, with fellow Web414 members Ashe Dryden and David Overbeck. We're all excited to see first-hand, just what all the SXSW buzz is about.

Thanks MakaluMedia!
I've been given the opportunity to attend SXSW as art director and designer from MakaluMedia. I'm very thankful for this opportunity, and I plan to make the most of my time in Austin. I'll attend multiple sessions, take notes and capture sketchnotes similar to the ones I did at the SEED Conference and UX Intensive.

Advise the Newbie
Since this is my first time to SXSW Interactive, I welcome tips and ideas from seasoned veterans. I'm also open to Austin tips and suggestions from any Austin dwellers out there who would like to share. Just leave a comment below. :-)

Contact Me SXSW-Goers
I also want to meet old friends and new people while I'm at at SXSW. If you're attending SXSW Interactive 2008 and would like to meet for a coffee in Austin, drop me a line with the subject SXSW. I'd love to connect before I head down to Austin.

Resources
As I prepare for SXSW Interactive, I've compiled a selection of resources to share with other SXSW attendees, and those interested in the event:

SXSW Interactive 2008 — The official site.
SXSW Interactive 2008: Panels (Time) — SXSW Panels, time schedule.
SXSW Interactive 2008: Panels (Day) — SXSW Panels, by day.
SXSW Interactive 2008: Panels (Category) — SXSW Panels, by category.
SXSW Registrant's Guide — Registrant's guide.
SXSW Registrant's Mobile Guide — Mobile registrant's guide.
SXSW '08 Insider's Guide — Information and forums on Ning.com.
SXSW Baby — Un-official Weblog and forums for SXSW.
Ze Frank Explains SXSW Interactive In Under a Minute — Classic Ze Frank humor!
SXSW Core Conversations — Directory for informal conversations.
SXSW Past, Present, and Future — Great podcast interview with Hugh Forrest, Director of Events for SXSW Interactive on the history, culture and future of the event.
SXSW Geeks Love Bowling — Bowling with SXSWers, Sunday, March 9th.
Airbag: Hampton — Greg Storey's Guide to SXSW Newbies.
John Phillips — Beginner's Guide to SXSW.

Have a resource to share? Email me and let me know!

Permalink | Comments (8) | Creativity | add to del.icio.us

October 27, 2007

Going the SEED Conference in Chicago on Monday

On Monday morning I'll be boarding the Amtrak in Milwaukee and heading South for the SEED Conference in Chicago. It's being put on by 37signals, Segura, Inc., and Coudal Partners at the Illinois Institute of Technology.

The event features Jason Fried, Carlos Segura and Jim Coudal, leading a presentation and discussion on design, entrepreneurship, and inspiration. I like the work all three of these guys have done, so it will be a very interesting day:

You'll learn about taking control of your own work, seeking out methods to inspire new ideas, and adopting unconventional ideas about collaboration and business. The SEED conference will fill your head with knowledge you can use.

This isn't about theory, it's about practice. You should attend if you're a designer (print, web, video) or a business-minded soul who's looking to take your creative ideas and turn them into something satisfying and bankable. Anyone creative with an open mind will take away something useful.

Sketchnotes
I'll be taking sketchnotes, similar to the set I did for the UX Intensive back in April, 2007. I have a Moleskine sketchbook at the ready. I hope I can keep up with the presentations and discussions! I will post the collection of sketchnotes to my Flickr account, so others can view, read and learn from them.

If you're attending the SEED Conference on Monday the 29th and want to meet at the event, drop me a line and say hello.

Permalink | Comments (2) | Web Design | add to del.icio.us

June 22, 2007

My Podcast Interview on The Micro ISV Show

A few weeks ago, I was invited by author, micro-business owner and new MakaluMedia logo design client Bob Walsh, to be interviewed on Microsoft's The MicroISV Show (a podcast for software developers) with co-host Michael Lehman:

It's a brave new world for MicroISVs in which it's no longer enough to drag some controls onto a form and simply make sure they're lined up and the tab order is right. The mantra "form follows function" is becoming more and more important for developers as advent of Windows Vista, WPF and Silverlight once again change the expectations of how customers perceive software. You've got to "put your best face forward" and think about design of the user experience right from the beginning.

In this episode, Michael Lehman and Bob Walsh talk to Mike Rohde, designer and art director for MakaluMedia, about the changing role of design in software development and how and why MicroISVs must incorporate design thinking into their development process.

Listen to The Micro ISV Show #22 podcast:

• Putting your best face forward - The growing importance of design for MicroISVs
• Direct Podcast MP3 Link (Size: 36MB, Runtime: 40:13)

We had a great time! I had an opportunity to talk a bit about my views on design being more than window-dressing on applications, the importance of starting early with a designer, how to choose a designer, vector-based development tools and how they may effect developers and designers, and more.

Bob worked in questions about my creative process, asked how I generate so many sketch ideas, and even slipped in a mention of my Moleskine Planner Hack project.

Have a listen and let me know what you think.

Permalink | Comments (2) | Design | add to del.icio.us

April 27, 2007

UX Intensive Chicago 2007: Thoughts & Sketchnotes

This week I attended Adaptive Path's UX Intensive: Interaction Design Workshop in Chicago. I've decided to share my thoughts on the event and my set of sketchnotes on the blog.

UX Intensive event was a 4-day series of workshops and lectures, and of those 4 days, I attended 1: Interaction Design. Here are my thoughts about that particular event:

The Speakers & Venue
Overall it was a good experience. Dan Saffer and Kim Lenox are both very smart, talented designers who know their stuff. I gleaned good ideas for tweaking my own design process, and was affirmed in the approach and process I already follow.

The Black Orchid was an OK venue. The room was relatively spacious, and the food was quite good. The tables, however, were designed for drinks while listening to jazz — not ideal for taking notes or working, and not positioned ideally for a conference. I got a bit of a cramp from sitting at an angle at my table, trying watch the speaker and take notes.

Workshop or Lecture?
UX Intensive was billed as a "workshop" even though Wednesday's Interactive Design session was actually a day-long series of lectures. Even though the topic very much interested me, by about 2pm I was having a hard time focusing, even after a second Starbucks cappuccino.

I heard from Matt and Que, 2 guys I met at my table, that Monday's Design Strategy and Tuesday's Design Research sessions were true workshops, with activities and interaction between the attendees — much different than Wednesday's lectures.

Concepts I Liked
There were many good ideas shared by Dan and Kim, some of which I'll note below:

• Research is useless in a raw, unstructured form. It's critical to filter the information and draw insights and conclusions from your research that can be applied to the project. I liked Dan's suggestion to use physical and visual representations of research, using post-it walls and drawings on various surfaces.

• Brainstorming for quantity and brainstorming in categories. Dan suggested brainstorming sprints with limited times and an emphasis on many ideas in that time. I also liked his idea of brainstorming within narrower categories, then displaying findings in a matrix or a grid.

• Failure is OK. A 50% failure rate was suggested as a good thing. I've noticed that in my sketches, the more ideas I can get through the sooner I usually find a solution. Trying out ideas that may fail, lead to a good ideas, so I find this to be very true.

• Good designers make better guesses. Intuition is important in design, and it's based on making good guesses. Dan shared principles and techniques for making better guesses and decisions.

• Living Documents. Kim Lenox talked about designing for suites and platforms, suggesting the use of living documents, sharing information and innovations, consistency and that interaction designers need to think about the integration of 3 key areas: the PC, the Internet and mobile devices.

• All products are broken. By starting with this premise, we're free to try and improve products rather than making them perfect and completely free of brokeness. Dan talked about good areas to focus on for fixes, breaking fixes down into smaller chunks, and the use of quick n' dirty wireframes with screenshots (I use this approach, and it works great!)

• Constant Communication. Use various tools such as blogs and wikis within your team, to keep communication lines open with each other, and to capture information as living documents.

View my detailed notes in my UX Intensive sketchnotes on Flickr.

Suggestions
I'll end this post with my thoughts on how the Design Interaction portion of the UX Intensive event could be improved:

• Call it a workshop only if it has workshop activities. I came expecting interaction and activities with my design colleagues and instead got a day of lectures. Workshop activities would have broken up the time, made it easier for me to focus on the ideas and apply them practically.

•  Add more breaks. We had breaks for lunch and for the morning and afternoon sessions, which were great. However, because of the day-long lecture format, by the afternoon I needed mini breaks in-between the individual sessions. By about 2pm I was losing focus on the topics that a few mini-breaks may have helped with.

• Show more real-world examples. We had some nice examples in the lectures by Dan and Kim, but I wanted to see more of them to illustrate the concepts presented. Having more examples might also have helped my focus in the afternoon.

• Go narrower and deeper. I think reducing quantity of material covered and focusing on deeper real-world examples, discussions on those ideas and workshop activities might improve the relevance of the information to attendees. So much info was presented, that I couldn't adequately digest, discuss or apply with those ideas to my own design practices.

I hope these thoughts are helpful to fellow designers, and might be useful to Adaptive Path in tuning and perfecting their UX Intensive series in Amsterdam in June.

Many thanks to MakaluMedia (my employer), for sending me to the event.

Technorati Tags: uxichi07, chicago, design, rohdesign

Permalink | Comments (2) | Web Design | add to del.icio.us

April 11, 2007

AdaptivePath UX Intensive & SOBCon07 Blog Conference

I'm excited about the end of April and beginning of May, because I'm attending 2 important events in the Chicago area. Both look like great events.

Since I'm a Chicago kid, going back to the hometown is always great fun. I'm planning on a train ride for one event and a road trip with a friend for the second. If I'm lucky, I'll even meet up with a few Chicago friends while in town.

Here are the two events I'm attending:

Adaptive Path: UX Intensive: Interaction Design Workshop
The First event on my schedule is Adaptive Path's UX Intensive: Interaction Design Workshop, happening on Wednesday April 25, at the Black Orchid in Chicago:

In this course, you will build upon your understanding of the principles of interaction design by learning tools and techniques that will improve your interaction design work and your collaboration with your teammates. Will be led by Dan Saffer, a Senior Interaction Designer at Adaptive Path and author of Designing for Interaction.

I'm very excited about growing more deeply in my interaction design practices, being challenged in new ways, and meeting some interesting people at the event.

SOBCon07: Successful Outstanding Blogger Conference 2007
The next event, SOBCon07, takes place Friday, May 11th and Saturday 12th at Hotel Sofitel at Chicago's O'Hare airport:

An evening and a day of community, strategy, and information about the art, technology, and science of relationship blogging for 250 experienced bloggers.

We will demonstrate to 250 bloggers how to take their existing blogs to the next level through interactive presentations on publishing, design and branding, tools, analytics, social networking, marketing, and coaching, from the perspectives of the blogger and the audience.

I'm heading down with my blogpal Phil Gerbyshak, who I suspect will know tons of people, and introduce me to more than I can remember. I'm looking forward to meeting other bloggers, and learning how to be a better blogger.

I'll likely write follow-up reports on the events, so keep an eye open here for those.

If you happen to be attending either UX Intensive or SOBCon07, drop me a line!

Permalink | Comments (2) | Design | add to del.icio.us

January 4, 2007

Word Count Journal Launch & Design Notes

On January 1st, 2007, Word Count Journal, a new project our MakaluMedia crew has been working on, launched for public consumption.

The Word Count Journal idea is simple — sign up and then write a little bit each day for 365 days. If you write the minimum every day for a whole year, you'll have written at least 66,795 words. Word Count Journal is especially well-suited to anyone who wants some encouragement to keep their words flowing every day.

I wasn't sure if the idea would interest me as a blogger, but it's actually pretty fun. You aren't penalized for missing a few days, since you can always log in and quickly catch up on your posts.

I've even found it fun to write more than the day requires — you only need to meet the minimum, but it's sometimes easier to keep on rolling.

My Word Count Journals Page

And now, a few words on the design of the Word Count Journal site.

Word Count Journal Identity Design
Our team had a great time working through the design of the site. I had the pleasure of designing the Word Count Journal logo, as well as assisting my colleague Alex Bendiken in establishing a site design based on the new identity.

I had long wanted to use the font American Typewriter for a logo, and this project seemed the perfect opportunity to use this font.

While Word Count Journal is an online journaling application, I wanted to bring in the ideas of analog journaling — the pencil icon and typewriter fonts — as these recognizable elements help convey the idea quickly.

You'll note that the letters have been pretty tightly kerned, especially 'Journal' which I snugged so tightly that the 'u' and 'r' have merged into a ligature, and the 'n' and 'l' have been customized to allow for a close fit.

The pencil icon was kept intentionally simple, and also snugged into the space above the curl of the 'J' in Journal, keeping in the style of the overall "cozy" theme of the type treatment. Placement of the 'Word Count' text was a tough call — I wanted it centered in the space above 'Journal' initially, but decided to align the 't' of 'Count' on the right edge of the 'a' in Journal.

You wouldn't think so much goes into kerning of a few words, but I feel this little extra effort pays off in a more flowing identity.

Word Count Journal Site Design
Based on the logo, I assisted Alex in developing the initial direction of the site design, which he and the team completely fleshed out and built. I really like the cooler aqua blue and grays, combined with warm orange and bright yellow, and the use of American Typewriter throughout the site. Alex and the team did a great job keeping the structure simple, yet super-functional and beautiful.

If you'd like a space where you write a little each day, check out Word Count Journal!

Permalink | Comments (2) | Design | add to del.icio.us

September 13, 2005

HelpSpot Goes Beta

Ian 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: design, helpdesk, logos, micro-ISV, webdesign

Permalink | | Design | add to del.icio.us

April 30, 2005

PocketGoddess Reborn

On 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.

The 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.

Through 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.

Michael 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!

Permalink | Comments (7) | Logos | add to del.icio.us

April 23, 2005

My Unusual Work Life

I'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!

Permalink | Comments (17) | Web Design | add to del.icio.us

August 24, 2004

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.

I 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

Permalink | | Web Design | add to del.icio.us

July 16, 2004

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

Permalink | | Web Design | add to del.icio.us

July 9, 2004

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. She'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.

Consideration
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!

Permalink | | Web Design | add to del.icio.us

July 2, 2004

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.

Somewhere 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.

Documentation
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.

Simplification
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.

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

Permalink | | Web Design | add to del.icio.us

June 28, 2004

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
My 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
Over 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...

Permalink | Comments (2) | Web Design | add to del.icio.us

June 25, 2004

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.

Sitemapping
Before 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
Once 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.

As 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!

Permalink | Comments (1) | Web Design | add to del.icio.us

June 22, 2004

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

Permalink | | Web Design | add to del.icio.us

June 11, 2004

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
With 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
Next, 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
My 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.

Once 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!

Permalink | Comments (3) | Web Design | add to del.icio.us

June 4, 2004

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

Permalink | Comments (3) | Web Design | add to del.icio.us

June 9, 2003

Designing With Web Standards

This 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.

Permalink | | Web Design | add to del.icio.us