Jason Santa Maria | Grey Box Methodology

Grey Box Methodology

After I read Underline Text in Adobe Illustrator by Douglas Bowman last week, it got me thinking about my own process for designing a website. The main point of his article focuses on not being able to underline text simply in Illustrator (which is quite annoying) and his solution and workaround. Afterwards, there was some interesting discussion about what programs people use to create their designs and why. This caused some self reflection on my methods and how they have changed over the years.

More and more I find myself employing a new beginning process for websites. I mean, I still start the way you really should with any design work, with a pencil and paper, but up until recently, after a sketching phase I would move on to Photoshop and begin producing a final mockup. Within the past year as I have started using CSS and smarter XHTML (in addition to the Flash I already knew), I began getting caught up when making the jump. The reason was that I knew how to do so much more. In turn, I began over thinking my designs as I was doing them. Rather than focusing on producing the visuals I had worked through in my sketches, I was trying to see how I could incorporate CSS into the site’s build. Some of you might work this way to great success, but for me it was like shooting myself in the foot. It’s easy for me to get hung up on what is possible and the technical limitations of something like CSS or Flash while I am designing. I prefer to have a much more open thinking process so that I can blow out the design. If I need to lasso it in a little later because I am unable to get an effect to work in CSS or because of some other technical limitation, so be it. But before that, I would like to create the best design I can. Not create the best CSS design or Flash design. The programs and the code are just the means to convey my message. I find that when I create, free of the means to the end of my design, things that I originally didn’t think were possible become new challenges to discover and I find the ways to create them. This is how new ideas and innovations happen.

For web design, the key for me is to split my design process up into smaller chunks. If they overlap too much, I have trouble making sure certain things are done before moving on. If I move into Photoshop too soon, my focus is drawn away from the structural build of the page because I may get caught up in finding the right font or color.

Let me show you what I mean. Take a look at some of my early sketches and notes from my website (pay no attention to the sock monkeys). When I first started my design process for this site, I had an idea of some of the visuals and aesthetics I was possibly going to incorporate, but I still started with sketches. Sketching out your ideas is still one of the most important parts of any design. I believe it is still the fastest way to brainstorm and see your ideas, make your mistakes and build off of them, and to see your progression through to ideas you never thought of before. The second you move from your head to the computer, you open the door to a world of options. This is a good thing in theory, but because of how many different and refined options like type choices and photography you are privy to, it is entirely human to get lost in the details. By sketching first you allow yourself time to really focus on the idea you need in a rough enough stage to not get hung up on things like imagery and color usage and kerning.

After the sketch I moved into Illustrator for what I call the Grey Box Method. This step could be done in Photoshop, but I prefer Illustrator for its immediate and resolution independent shape and size altering capabilities. Since I now I have a good idea of the structural layout of my site from my earlier sketches, I can apply real-world values and proportions to my layout. The Transform palette is your friend. I can remove myself from worrying about color and imagery choices and allow myself to focus on the site’s structure and hierarchy. I can plot out space relative to importance and insure that the overall architecture of the site makes sense with the flow of the project. Look at the screenshot of an early comp of this site. You will notice some things have changed in the final version, but the underlying structure is still intact from my grey box comp. I plotted out all of my content areas with numeric values and made sure that the flow of content and structural hierarchy are in place. This is more developed than some of my grey box comps in that I have dropped in a logo and took a stab at contrast values. I made this small short-step before Photoshop because it was my personal site and, thanks to this process, I had such a good vision of what I wanted in my head.

For another, more simple example, look at the grey box comps I did for our recent Sideshow website (no longer online; a mockup can be seen here). You will see three layouts, all similar, but structurally different. All three contained the proposed masthead but underneath they differ; the first a symmetrical two-column layout, the second an asymmetrical two-column layout, and the third a three-column layout. If you’ve been to Sideshow, you will see we chose the second layout. After this step, because I had created a strong underlying structure (with Sideshow or with my site), I freed myself to lend my attention to the detailed visual work. The best part of this is when I addressed any layout problems beforehand, I felt more confident to make changes to the layout to accommodate for certain visual intricacies. A few pixels here or there, but the underlying structure remains intact.

In the same way an author makes an outline before writing a book, this serves as my visual outline before creating a design. This is just one approach, and it just happens to make sense to me for the way I work. There are plenty more approaches and plenty more avenues to a successful design. I don’t go through this process every time I design, there isn’t always the time or the need, but when its in order I find this method keeps me structurally organized and frees me up to be more creative when I need to be. There are times when I have created websites almost entirely in Illustrator because I know the client will need some of the assets I create for supplemental print materials and promotion, in which case I need my artwork to be available at a high (or flexible) resolution for output. When I design for Flash, Illustrator is also the optimal choice because my graphics are already in vectors for quick importing. Long ago when I would start a design I would jump right onto the computer and start pushing type and boxes around. What I would end up with were ill-fated and remarkably bland designs that would inevitably fall flat because they weren’t grounded by a solid design structure. But, breaking this process up into steps, whether by the Grey Box Method or not, covers your ass and makes you consider your design choices and foundation before you are swept away by the details of your visual decisions.

• Posted at 12:08 am in Design, Site
• Commentary Closed (26)

via v3.jasonsantamaria.com