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