THE CREATIVE PROCESS
We have recently been experimenting with different creative processes and workflows at {e}. The website design process is one that has successfully changed for us. There are many different theories about the workflow process in web design. Some people dive right into photoshop, some people draw it on paper first. Although I definitely have my preferences and know what works for me, I understand and appreciate that every designer is different. I have always started my designs on paper with a pen or a sharpie. These sketches have always been nothing more than wireframes for me to identify the grid and structure of the site. This allows us to look at the UI from a usability standpoint without all the factors of type, color, and imagery. The wireframe on paper has been great for me to get a clear idea down before I start designing, but jumping straight into a design from a wireframe on paper has proven to be a big leap.
.jpg)
wireframe example
INSPIRATION CREATES CHANGE
I recently read a blog post by Jason Santa Maria talking about grey box modeling. Grey box modeling is basically the in-between I was looking for. It is essentially designing with spacial relationships and identifying your grid on the computer without getting hung up on colors, textures and other design elements. Grey Box modeling has added a layer of detail to my designs that I wasn’t previously achieving.
In my personal experience with “Grey Boxing” I have learned to build in stages right on top of my grey box designs, so that the actual design process is more in touch with my initial wireframe. The beauty for me is that although it is closer to my wireframe in structure, my designs have become more of an organic process because I am adding and building the site in layers. I have the ability to make adjustments in the grey box, wireframe and site design all at once.
established grid
grid viewed with grey box.
The main advantage that I have come to realize by adding the grey box modeling is that the UI becomes well thought out and planned. Often times when I would dive straight into a photoshop design I would make decisions on the fly and sometimes those tweaks or adjustments would cause problems in moving forward on the site. Grey boxes allow for you to think it through and make educated planned adjustments throughout the site.
grey box model example
CHALLENGE EVERYTHING
One of the things we do at {e} is question what is needed. We are always looking for ways to improve our process and workflow. I was not sure that adding a step to a design was going to be more efficient or save me time, but it did. I suggest giving this process a try if you are not already doing it. Change is always good, and if it doesn’t work for you, you have at least experimented with simplifying your process. Dare I say that this change led me to using FireWorks for the grey boxing… but that’s a story for another day.
