Design process - part 1: Introduction and environment

Posted on 24 February 08, in design, tutorials

Every so often a designer takes us into their kitchen to share their secret recipe. Step by step, they explain how they've designed a website, often including screenshots of the various stages. Apart from being educational, these types of articles trigger us to think about our own design process.

Everyone has their own way of coming to a design. Some steps in the design process seem more common than others. A typical project often involves a client briefing, research, information architecture, wireframing, design comps, client approval, final designs, coding, and finally, project sign-off. What exactly is done throughout these steps, and how it's done, varies between designers. This article offers an overview of how I go about this process.

Ingredients of the process

First off, not every project is similar. Or actually, no project is. Therefore, each project demands it's own process, with unique ingredients and methods. As stated, some steps are more common than others. Based on the specific project, both common and not-so-common steps might be needed in order to come to a good result. I'll address some of both while we're going. First, however, we need an actual project to discuss. I am going to use this site's recent redesign for that. This is easy because I don't need client approval for posting details on the project, and interesting because I've used some methods and techniques that are less common in the client work that I do. Also, since some parts of this site are unfinished, I can include some live development in this article.

On the left: the previous version of subdued.net. On the right: the current version.

This write-up

This article the first in a series of articles that I will be posting on the topic of my design process. These articles will address the following topics:

1. Introduction and environment
2. Goals and audience
3. Content, structure and wireframing
4. Design
5. Front- and back-end development

At the time of posting this first part, the full series are not completely done. This means I am not exactly sure when each article will be posted, but I intend to have no more than a week between each.

Update: the once a week frequency was wishful thinking. I try to follow up asap, but I can't promise exactly when each article will be available.

Anyhow, let's get started. Before anything else, I am going to address my working environment. To me, a good place to work really is the starting point for every project.

Working environment

While I currently work in an office 4 days a week, I am used to working at home a lot, and I still spend quite some time behind my desk at home. Call me a geek, but my working space certainly is the most important part of my house. It's where I spend most of my time at home. Being comfortable and inspired is therefore very important.

My workspace at home

I 've set up my home office to be really comfortable. As you can see in the image above, it has a very nature-like feel to it. That's because I'm a sucker for everything forest and nature, and it makes me feel relaxed and at home.

Apart from being comfortable, there's obviously some practical needs as well. In the photo, I've marked the following:

1. A computer. Nothing too fancy, I've got a dual core pc that's fast and decent enough for my needs. Furthermore there's a 19” wide screen monitor, a logitech mx laser mouse (if you're doing a lot of detailed design work, get yourself a good laser mouse.), a small wacom tablet, and an all-in-one printer/scanner/copier. That's really all I need in order to work.
2. Decoration. I've got a wall-sized poster of a forest, green walls, and not in this photo, different kinds of posters and things hanging on the walls. This creates a personal, inspiring setting to work in.
3. Books. I've got loads, and love 'em. On my desk I keep books on topics such as design, web, typography, coding, color, photography, and so on. I like being able to quickly grab a book and look something up.
4. Boxes filled with different kinds of materials such as flyers, old newspapers, (textured) papers, small product packages, etc. I tend to collect things that I like and am inspired by. Sources of inspiration like these, are always good to keep for future reference.

Apart from the above, there are some other items in my office that I use regularly. For example: a sketchbook, a notebook, various types of pens, markers, (colored) pencils, sticky notes (for example to quickly create site maps on your wall), a calculator, and a diversity of small toys and other items that really serve no other purpose than to underline my geekiness :).

Resources

So that's where I work when at home. If you're looking for some good resources to get started on creating a nice working space for yourself, here's a few links that you could find helpful:

• Recipe for a creative workspace
• Creativity in the workplace
• How does your working environment look?
• How does your working environment look II?
• Inspiring workplaces on flickr

This was the first part in a series of 5 articles on my design process. The 2nd part, on setting goals and making decisions, will be published soon, so check back for that!

Join the conversation

Have you got any interesting ideas or advices for designers workspaces? Photo of where you design? Post them in the comments!