Thursday, December 1, 2011

Website visual design vs function design

You'd think that as a modeller I'd have a good grasp on the visual side of web design, or at least enjoy it. Well I don't. I find designing the look of a site tiresome and unrewarding. It's like playing tennis. I'm shithouse at tennis and, as a direct product, I hate the game. You need to have a certain amount of success to enjoy an activity. I find more enjoyment in coding functionalities and subsequently wearing out my f5 button testing my multitude of minimal modifications. There's a lot to think about with visual web design. Page lines, unifying texts, colour balance, information weighting and heaps more. This all goes sailing over my head as I tap away at php and jquery functions, so my web designs are inevitably un intuitive, uninspired and ugly. But perhaps there is a way to turn this frown upside down. After all, doesn't function inform design? Shouldn't the functionalities I focus so hard on define them environment in which they operate?

Function informs Design

It's a common concept in web development, that the use of your site should be the primary consideration for the look. If your site is a journalism site you want to give your articles the preference on the page, not so much the pictures, and visa versa with a gallery site. This is what is meant by function informs design.

Most of the time this goes without saying - you're not about to put grey writing on a slightly lighter grey background - but elegant, efficient design takes more consideration and, logically, uses many of the concepts of general art composition. Just as you use high contrast areas to hold the eye in a painting, you can use them to draw attention in web composition as well. The rules for guiding the eye are just as relevant in web as they are in art. You can use these rules for weighting your information in order to bring the users attention to the functions of your site. I'm not about to go into this extensive set of rules here, but if you are remotely interested then you really should research composition and colour theory. Another reference to more relevant art work is the use of concepting for your web designs. As a modeller I am a big fan of concept art as it defines my piece for me in detail before I even start. Working without a clue as to what your final piece will look like is a recipe for disappointment. But, adhering to the rules of function and design, wouldn't concept art be a technical faux pas?

Concepting vs Functionality

Concept art is used to define a model or render before you embark on the long process of creating the piece. It sets the mood and composition of a piece so that you can model with a clear idea of what you need to make. But with web development you want to avoid developing around the look of your site, no? A process I am trialling now is what I think is called 'wireframing'. It's a locally coined term but it revolves around the idea of leaving your design as bare as possible, black and white and simple layout up until the functions are all finished, then deciding what to do about styling. The main advantage of this is that by the time you start styling you already have all the info there so you can plan out your design around it. The only downfall I can forsee is that there may be some code tracking as divs and id's need to be created throughout the site for css and jquery to reference. How I plan to combat this is by use of a php layout file. But that's a tale for another campfire.

I have a habit of coding a website thrice before being satisfied and I am yet to decide whether this is a good thing. Since I do this for my enjoyment alone I am not bound by any time constraints, and that approach allows perfectionism, which creates better end products. It is frustrating, however. I am on the third iteration of my most recent site and I have got to the point where I just want it done. Could concept art have prevented this constant retreading? Or would it have left me in the lurch as I flounder around my design, trying to slip in bits of new code where they aren't welcome? Hopefully with my new 'wireframing' approach I'll have a better chance of finishing it this time.