WEB STANDARDS CREATIVITY

136
Beginning with the pen
I like to start every design with a pen and paper. This approach has a few advantages. Drawing is quick, cheap, and easy. If
something doesn’t work, you can throw away the piece of paper and start again. You can scribble until something does work.
Additionally, working with pen and ink is a much more organic process that allows ideas to flow quicker than if you were sitting
in front of a computer screen. In short, it saves time and money, and it also gets you away from your computer!
Producing thumbnail sketches is vital for tackling the scope of the design. The content, functionality, and technical requirements
can all be worked out on paper first, before you spend any time on a computer. See Figure 6-4 for examples of my
preliminary sketches.
Figure 6-4. Designing before you get anywhere near a computer screen not only saves money, but also your eyes!
Breaking down the elements
After working with the IBO over a period of time, and studying the existing websites and applications the organization
offered, we decided on a framework approach to the design, which could be applied to a wide variety of templates. It
wouldn’t be reasonable to design a project of this size on a page-by-page basis.
The process we undertook was similar to the traditional web design process: brief, discovery, wireframes, design, production,
code. However, I adopted more of a partnership role with the IBO. This helped me gain a thorough understanding of the
organization’s business goals and the users’ goals. And so when it came to designing, it was a lot easier.
One vital task was breaking down the content objects of the sites. Now this may seem like a technical, information architecture,
or even a project manager’s task. I actually see content analysis as part of a designer’s task. As this framework was
going to be predominantly typography and grid structure, breaking down the content to the micro levels is very important
in understanding their relationships. I started this process by identifying the elements in the design. These can be broken
down into macro elements and micro elements.