My Creative Process

design-process-190x180

My Design Process

The creative process, or really any process you use to do your work, is something that develops somewhat naturally and methodically over time. My own process is not the same today as it was when I first started. I use a much more methodical approach these days than in the past.

How is it that I do what I do?

The Interview

First there is the interview. Typically, I talk with my prospective client and find out more details (and in as much detail as possible) what they hope to achieve with their website. My list of questions has grown and changed over time. I suspect that it will continue to do so as I move forward. This is a very key portion to being successful in my mind. Without knowing what the client is looking for you can never find your way to the finish. At least not without lots of frustration on both sides.

Now don’t be scared, it doesn’t have to seem like a job interview at all! Typically these are questions that can be answered over the phone, in person or via email. I try not to ask questions in a non-linear rapid fire type of circumstance either. I find that it is much less stressful and way more productive to do the interview through casual conversation if I am talking to the client in person or on the phone. There isn’t much way around just a list of questions via email, but the client is free to think about the questions for as long as they need.

The interview helps to determine who the end-user will be. Once you know who that person, or group of people, is you know better what colors will work best, what fonts are best, and have an overall better idea of formulating a website that will help your client achieve his goals.

Brainstorming

Once the interview is complete, I like to just brainstorm ideas. None of this needs to be complete or even make it to the final design. I try to start formulating who the end-user will be and think about what they are looking for. Along with this, I start trying to narrow down a broad pallet of colors that might be applicable (unless the client already has a pallet of colors defined). New to my process is coming up with a mood board.

What the crap is a mood board? Honestly, I didn’t know a few months ago either! Basically, it is a way to collect images, colors, textures, etc in one place. These are elements pieces that you think might fit into your overall design. In the past, graphic designers, architects, and other similar people did these on actual boards or posters. These days you can create them much more easily on your computer or through cloud based services. I am a big proponent of Google Apps and Evernote. So typically, I will use one of these services to create my mood boards. I have seen an iPad app that looks interesting called Mood Board. I don’t have an iPad though.

Lately, I have found that Evernote is ideal for starting a mood board. The Windows version has a printscreen tool that is fantastic. When you hit the Print Screen key, you get a cross-hairs and can drag a box around the portion of the screen you wish to “print”. An image file is then saved to Evernote. I collect all these into one folder for that particular project. It has really helped to speed things up. Once the images are collected, I can pick and choose which ones I liked the best or will work together best and assembly the images in Google Docs or Photoshop.

The end mood board never needs to be showed to the client unless you think it will help the project along. Typically they are just for me to help get my creative juices flowing and point me in the right direction. However, they can be extremely useful depending on the client. You will know you are on the right path early on.

Bradley & Emily Mood Board

Bradley & Emily Mood Board

Wireframes

Wireframes come in all shapes and sizes. The main thing is to have something that isn’t too polished looking to discuss page layout with the client. If you have something that looks too finished, often times the client may get the impression that there is not any room for changes or that changes will be difficult. At this stage things should be really casual.

In the past, I have done wireframes with hand drawn sketches, on dry erase boards, and with software. When you are working with someone remotely or not having regular “in-person” meetings, software works well. Generally, the software will output something in jpg or png format. It is easy to email an image to the client to look over and discuss over the phone or through email. Alternatively, you can scan a hand drawn sketch, but that just adds another step to your process.

One of my earliest projects, I met with a team of people to discuss the web site. At that meeting, we were able to brain storm page layout ideas on a dry erase board. It was large enough that everyone in the room could easily see where the direction was going. Items could be easily erased and changed as the discussion progressed too. It is often not feasible or desireable to work this way, but in that instance it worked. Sketching up something while in the initial interview can be a good thing though, as long as you have a good feel for what the client wants and what would best serve his users.

Below is a sample wireframe that I did for the website my wife and I use to keep our families updated. I drew it in about 10 minutes using a Firefox plugin called Pencil. I like that it looks hand drawn. The software is simple to use too. If you look around, there are several other similar programs out there.

Bradley and Emily Wireframe

Bradley and Emily Wireframe

Mock-up

The mock-up stage is nearing what the final design will look like. Unlike the mood boards and wireframes, the mock up is a near true representation of the final product. Typically these are created in a graphic editing program like Photoshop or Illustrator. I am most comforatble with Illustrator. That is where I create my backgrounds, buttons, etc. typically. Even though things look really finalized here, you can still get in there and pretty easily edit colors and some of the basic elements.

The mock-up is delivered similar to the wireframes. I export a jpg file and email it to the client. They can get a look at what I have come up with based on the interview, mood board, wireframes, and all the discussions we have had to date. The mock-ups can be sent at various stages of the design. Sometimes it is nice to get feed back before having a finalized mock-up.

How many mock-ups do you deliver? For some sites, I make a mock-up of every page. This is very time intensive, and I can only justify it when the client is very indecisive or having a hard time visualizing the slight differences from page to page. This is not the norm, and the overall project price has to be increased to compensate.

I like the idea of creating on a grid system. To me this helps with alignment of features. The grids can make the site look to boxy and linear, but with a little creativity unique designs can also be achieved. I work mostly with the 960.gs system. They have templates on their website for just about any graphic editing software you can think of! While I like using the grid in the editor, I usually create my own CSS framework even though there is one provided.

Working Model

Once the mock-up has been reviewed and accepted, it is time to start working on the site as it will sit live. I build most of my sites in WordPress. To get a head start, I have an un-styled theme template that I start with. It has lines in the CSS for all the major elements that WordPress styles for, and it has only the necessary components to make the site work with the most current version of WordPress. Obviously, this is something that I developed over time and it continually evolves. If you need a place to start, there are several theme frameworks available as well. Thesis is one that I have used in the past with great success. All the elements are in there, and much of what you need to style can be done from the administation panels of WordPress.

After I have made some progress towards having the design ready to go live, I make it available for the client to view. Usually this is done through my hosting company, but occassionally I will work from the client’s host. It really depends on the project and the client. Just make sure that you have a way to get payment before releasing all the files to the client. You don’t want to get stiffed on the bill.

Delivery

The process of getting all the elements into the site, and completing some pretty extensive testing, can take a while. Anywhere from several days to more than a week. In most cases, the testing takes as long or longer than coding the site. When you think all the bugs have been worked out and all the elements included, you are ready to “go live”. Inevitably though there will be bugs to be worked out after the site is live. I always make sure to budget for this inevitability, and work as quickly as possible to make sure the site is working 100%.

Part of my delivery usually involves some education for the client. If their site is using a content management system, it is likely something they have never used before. As easy as WordPress is to learn, you need to be pointed in the right direction. I try to make sure that whomever is going to be actively updating the site knows enough to change information, add pages, and add posts. Plus, I am always available for phone or email consultations! I typically don’t charge for this as long as it is just random things here and there.

The whole process is really very much like a funnel. You start out very broad talking about concepts and refine that incrementally until you have zeroed in on what the client needs.

I am constantly trying to improve my work flow and customer satisfaction. What is your process like? Are your clients happy with it?

Thank for reading!

Bradley

Love it? Share it!

About Bradley

I live and breathe web design! You want a fantastic looking and great performing website. I just know it. Contact me about making that happen today!

What's Next?

Never miss a moment! Get all our fantastic posts delivered right to your inbox. Plus! Once a month receive our newsletter and occassional emails about great stuff you won't want to miss out on!

Subscribe now! You know you want to!

Worried? Your email address will be kept in a heavily guarded vault!

Bookmark

Leave a Reply

Your email address will not be published. Required fields are marked *