The Missing Link of Web Design
This one goes out to all my professional web design buddies out there (you know who you are!). This article leads into some questions that I’m hoping that many of you can help me answer, if you feel up to it (and please take the time to help me spread this mental conundrum that I’m working out, so that you will not only be helping me and many others like me, who have similar thoughts, but just don’t know how to ask them).
When you’re designing a site, there’s a ton of steps needed to effectively manage, and produce the project from start to finish. You might not be good at them all, but in many ways, you’ll usually be involved in the process lifetime from start to finish, regardless of what role you play in a team, or single-person environment. This article focuses on one particular section of a design process. That time exactly between where the comps and UI-work is done, and when it starts looking like something in the browser.
During a project, once you’ve got all the information gathered that you need to actually start producing a design for a website, you hit the real meat of the design phase when you decide to open up your graphics application of choice. Here, you use whatever sketches, ideas, doodles, or whatever concepts you’ve got floating around in that creative head of yours and just making it all look like something. Some of us are very strict about the process, demanding to develop the graphics based on wireframes and color palettes, and other times you just develop it free-flow, letting it work itself out purely from the joys of genesis-pixellation. Sometimes, it’s just different for every project.
However, at some point, there’s another part of your brain that’s somehow (to some degree, no matter how minor) thinking out how all of pretty graphics are going to work in the browser before you actually get there. Like a little voice in your ear whispering things like “oh, you shouldn’t put that there sir, you’ll have a bitch of a time making that line up right…”. But you don’t always know until you get there, do you?
Then, when satisfied enough with how it looks visually, we decide to build it. HTML, CSS, and Javascript leap to our command in our code-editor of choice, along with a browser or three open in the background to test in, and we slave away at making that graphic goodness work, all while trying not to compromise a thing. Code, debug, test, complain, moan, cheer, code… it all goes on until you realize that you have to take those flat-file templates of yours and actually build them into an application… sigh.
Or, maybe this isn’t how you work. Is it? Aren’t we missing something? What exactly, is happening between our “graphics mindset”, and our “coding mindset”? Where is the missing link? I know how I personally like to work, but I’m constantly striving to improve my process. And I honestly feel that the best way to improve a process, is to find out how others solve their own problems, and evaluate all of the options to see if those individual solutions could apply to my own circumstances. Trial and error.
So here we are, at last, to my questions - first, the graphics phase:
How much thinking of code and content do you do in the graphics phase, if any?
Do you ever render an entire page in your graphics app as it might appear in a browser, all the way down to the underlines on the links?
How do you take into account things like scalability and percentages, when you’re using a program inherently designed for fixed-layouts?
And, the code-phase:
Do you ever code a layout before the visuals are done, simply to figure out whether an idea is going to work or not?
Do you ever prefer to “design live, in the browser”, effectively circumventing much of the graphics phase?
How often do you flip back into graphics phase, if you find that a particular part of the design is just not semantically possible, or not aesthetically reasonable once you see it in the browser?
Finally, the last, and possibly most difficult question of all (the sum of all my fears):
How do you personally deal with the unlikely (dare I say awkward) balance between graphic design and code development?
As a side-note, I just want to point out that I churned this all out in the span of just a few minutes on the basis of a single thought. Sometimes it’s good to just type, and let it all flow. This a natural energy for me, and perhaps, after reading it, I’ll think of something that I didn’t realize before. But no matter what, I feel that you’re getting a more honest and raw article from me with this type of writing. I hope you find it valuable.
UPDATE: this thoughts of this article have been continued in The Missing Link - Part II!
