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.
Comments
Dentist Norwalk posted at 11:07 pm on December 23rd, 2009
Great post! I really find your article very interesting. Good job for this kinds of information. Thanks a lot!
Melissa posted at 11:07 pm on January 11th, 2010
This is a nice transition step - I think I’d find it very useful for how I like to work. Thanks for the post.
Shaan Nicol posted at 11:07 pm on January 11th, 2010
Excellent post, as melissa stated above, it’s a great little transition step between the work we do in mockups to offering the client a complete mockup with colours. Going to save us plenty of time when we implement this!
Metrodesk Clipping Path service posted at 11:07 pm on January 11th, 2010
nice ! Great !
Danny Foo posted at 11:07 pm on January 11th, 2010
I do this too. And it’s additionally flexible when you use shapes in grey boxing because you can resize them easily.
Adrian Gould posted at 11:07 pm on January 11th, 2010
I’ve been using a combination of wire-frame, grey box and colour box for my personal design projects, and have been teaching my students to use this as well.
The Grey Boxes, thanks to JSM (http://jasonsantamaria.com/), are a wonderful way to get the student to think about white-space, content arrangement and more.
It allows me to critique the student work in a way as to allow them to develop their concepts further before they get onto the final design and then mark-up.
I tend to get the students to do a) wire-frame sketches, b) grey-shaded sketches, c) wire-frame in a graphics package, d) grey-box the wire-frames, e) colour swatches, f) colour shaded wire-frames and then g) final graphic version. Obviously h) is then mark-up.
I know that is a lot of steps but until they are able to self critique effectively and also to get the feedback from peers and the client and apply to their work in a professional manner, it helps them to decide what is the best course of action.
Adam Webster posted at 11:07 pm on January 11th, 2010
I do this, it helps me lay things out evenly and make sure everything looks good in a position before I start doing the heavy lifting.
Bob Galmairni posted at 11:07 pm on January 11th, 2010
Thanks for the feedback guys. It really is a process that we have found a lot of success using. Adrian, I also have my students learn this process. Keeping them away from the styles of a site as long as possible generally helps the layouts be more thoughtful and detail oriented.
ReTox posted at 11:07 pm on January 11th, 2010
Good article.
The ‘a-ha’ moment for me was when I discovered balsamiq mockups. It’s a wireframing tool, easy to use, simple and powerful.
R
Andrew posted at 11:07 pm on January 11th, 2010
Top work tiger.
Book- Making and breaking the grid
Heaps of print and digital examples with overlays of various grids tops.
Keep it up
A byrne
Leave a Comment