My Process – Planning Stage

Many parts of the designer/developer process toolkit come to them via trial and error. Sometimes this can be a painful experience which is what lead me to this particular part of my project process. To this day while I still wince about this particular project, the result was a learning experience that has helped myself and my clients. So I am thankful for it. I have found that this process helps involve the client during a crucial stage, keeps communication going and improves project success.

Most clients come to me with a site-map in mind but I have found that illustrating the site-map for them helps us seeing any gaps or changes at this point vs later.

The site-map is crucial in determining how the website will flow, what content is needed and should reflect the goals of the site itself.

I generally start the design process with a choice of colors with an example to show how those colors might be used. The client receives a series of style tiles to give me a sense of what they are gravitating to and then we refine this even more. During the wire-framing stage unlike most of my counterparts I do use color to give the client a visual idea of how the color will be used in sections of the site. This can greatly impact their choice of colors.

I have noticed my example is too strong and it gets chosen sometimes unintentionally. =)
Each set of colors are specific to the client and their particular color preferences if they have one, site goals and target market.

Wire-frames are essential, 95% of my projects don’t start without a least a low fidelity wire-frame. The fidelity of the wire-frames vary between clients and projects. I have done something as simple as the first example but generally they are like the colorful examples. Some projects that require a lot of UI work or web apps I work with interactive wireframes that are completely black and white but show the user how the functionality would work. Occasionally I do more of a high fidelity example like the last one if the client is looking to really narrow things down before producing a design.

Sometimes a quick wireframe can illustrate how you are viewing functionality on the page and see if you are on the same page with the client like in using this really low fidelity wireframe.
Often a wireframe can highlight visually structural changes the client would like to make and this is the best time to make those changes.
Sometimes helping the client decide between four color swatches helps in this stage as well.
High fidelity wireframes allow for more details narrowed down before the design.

The mood board is not always needed but it can help if the client is looking to do some rebranding or has no branding present. This also conveys to them without designing anything what is possible using existing sites.

This mood board let the client know his big photos, bold headlines and square buttons was right on track for what he wanted.
This mood board has more than typical but offered the client a sense of what the final product would offer.

Some client’s prefer to be involved in the font/type face selection but many do not. =) I present some options either way and as we move to the design phase we narrow this choice down further. I use Typecast and they have some very neat options to organize and output samples efficiently. Hey and they are free now so win/win!

Like the color swatches each client’s project receives a collection of fonts appropriate for their goals.

After we have collected the above elements and the client has signed off on them we should a pretty good idea of what the design will look like based off of our planning. This process has worked really well for me in the past and as I learn and grow from each new project I refine it more.

Sharing is caring!