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 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 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 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 on January 11th, 2010
nice ! Great !
Danny Foo posted 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 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 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 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 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 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
EnridaThearia posted on April 21st, 2010
Добрый день!
Я у вас на http://www.ehousestudio.com в первый раз.
Не знал куда написать своё сообщение. Написал в этот. Если ошибся, огоромная просьба к администраторам - перенести пост в более подходящий раздел форума.
Приглашаю вас на сайт, посвещенный <a >лечению прыщей 276060 </a> - http://www.noacne.ru !
<a >прыщи 797059 </a> и <a >угри 570877 </a> являются очень неприятной проблемой, которую ни при каких условиях не удаётся игнорировать.
В настоящее время существует масса способов и рецептов по <a >избавлению от прыщей 810965 </a>. Мы постарались собрать самые действенный из них на нашем сайте.
<a >Лечение прыщей 653945 </a> процесс сложный и долгий. Поэтому прежде чем пытаться избавиться <a >от прыщей в домашних условиях 780270 </a> необходимо ознакомиться с медицинской информацией или же поступить совсем по-умному и дойти до дерматолога.
В любом случае надо понимать, что запущенная <a >угревая сыпь 737936 </a> может перейти в очень неприятную болезнь - <a >акне 532461 </a>.
<a >Прыщи на лице 162246 </a> также могут стать причиной психологических расстройств и даже перерасти в комплекс неполноценности и заниженной самооценки.
<a >Прыщи 378340 </a>, <a >угри 436246 </a>, и <a >акне 401856 </a> поддаются лечению! Главное - не терять время и оперативно реагировать на первые признаки болезни.
Также полезной и нужной будет информация о <a >строение кожи 806758 </a> и о <a >причины возникновения прыщей и акне 444231 </a>.
Также мы не обошли вниманием тему о том, как лечить <a >псориаз 859579 </a> и <a >парапсориаз 876586 </a>.
Псориазом является незаразное кожное заболевание, так называемый хронический дерматоз, который поражает кожу, а также иногда суставы и ногти.
Проявлениями псориаза являются папулы, которые возвышаются над поверхностью кожи, имеют розово-красный цвет, покрыты серебристыми чешуйками, которые отпадают при поскабливании. Папулы также имеют тенденцию сливаться в более крупные бляшки. Для псориаза типичен зуд. Папулы располагаются чаще всего на коже коленей, локтей, ягодиц, голеней, на волосистой части головы, но также довольно такие часто появляются в местах, где травмирована кожа. Впрочем, нарушения могут быть почти в любом органе.
<a >Лечение псориаза 896872 </a> требует очень внимательного и качественного медицинкского подхода.
На сайте даны подробные описание таких препаратов как <a >дифферин 793706 </a> и <a >зинерит 79598 </a>.
Есть также отличные <a >заговоры от псориаза 785880 </a> и <a >заговоры от прыщей 76285 </a>
Venture posted on June 13th, 2010
Клубничка - эротические фильмы, домашнее и частное порно.
<a >скачать</a>
<a >xxx клипы</a>
<a >взрослое кино</a>
<a >порно видео ролики</a>
<a >смотреть порево</a>
meego development posted on July 28th, 2010
wire-frame, grey box and colour box dont go well
its like hell am frustrated
lets try once more
i gonna get it
paid to click
Leave a Comment