Dated Jul. 21, 2007 / (13) Comments
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!
« Previous: Design Aesthetics and Sociology
Next: Most Boring-est Site EVARRR »
Comments
Well, that’s an interesting question.
I do “all over the place”.
The problem is invariably, that you’ve figured out a better way to do some portion of a site since the last time you finished touching up your templated “base design” that you made a month ago to save you time in the future. you know, that one. The one you slaved over idealistically.
In the end, it’s a constant upgrade. So the live redesign is usually how it ends up flowing for me and those i work with.
With that in mind, i do this:
1. create a basic html page with basic divs, nav, doctype, title, css and js links, et al, etc.
2. work on CSS to get the layout working.
3. start prepping page contents and remap how the html will be ordered (semantically, of course).
4. work on colors, type, tinkering with where ‘graphic backgrounds’ will go.
5. back to html, for adjustments, and prep additional ‘sub-pages’ for extra templates, for example.
6. keep switching for css additions for additional pages.
7. photochoppin’ baby!
8. final css and html tweaks.
Luke Dorny
10 months ago
Good article, well written and well thought out.
Good questions, as well. As I’m relatively new to the game, I recognized a few of your questions, as they’ve floated through my own mind lately. I often wonder how my workflow compares to others, and whether I’m doing things “right” or at least “best”.
As for answers, I’ll try my hand:
I do think of code in the graphics phase, but only long enough to make notes for myself, so that I won’t forget those ideas or concerns when it comes to the coding portion.
Yes, I usually render an entire page in photoshop during the graphics portion. Maybe not the link-dressing, but definitely the text formatting including line-height, font-family, paragraph margins and padding, etc. Again, making notes in notepad or even on paper as far as specific code information that might be crucial for the design to hold together.
For scalability and percentages I usually get a bare-bones layout together, then throw it into my browser and use something like Firebug to work it out. That’s not my strong-suit, so for layouts like that, I usually have to jump back and forth from “graphics mind” and “code mind” a lot.
Yes, I have been known to code a layout first, on occasion. It really depends on how “visual” a site or page is going to be. If I’m designing a simplistic blog layout, and the main point of interest is the typography, I’ll absolutely start with the code, again using something like Firebug to “design live, in browser” as you say.
As for your last question: I think that code validation is a good way to keep this balance in check. If you’re too focused on the aesthetics of a site and not focusing on the semantics of your code, you’re project will suffer. Nothing bad can come from ensuring your code is semantic and valid. Now, do I practice this 100% of the time? Hell no. Barely even 50%. It depends on what’s most important for that particular site or task. I’m not a natural-born coder, so my balance is going to be different from others. That’s just one of those things that needs to improve.
I don’t know if you were actively looking for answers to these questions, or if they were simply meant to be thought-provoking, but I enjoyed thinking and answering them, so why would I keep that fun to myself? :)
J. Bradford
10 months ago
Excellent comment, Bradford - even after writing this, my mind is abuzz with possible ways to adjust my style here or there for the purpose of creating a better product.
Part of my problem I suspect, is impatience. I sometimes get a design that I get really excited about and want to see how it will turn out in the browser. In turn, I might cut a corner or two just to get to the next step that much faster.
Want I want is to retain my high level of graphics skills, find a better balance of transition into code-mode. At least, I think I do. I’m not sure if I need improvement or not, but I certainly feels looser than it ought to.
Anton
10 months ago
Great post Anton.
I’m guilty of not giving much thought to the coding phase while designing my graphics layouts. I love the design phase so much that I tend to get lost in it and zone out. I know it’s bad and I often pay for it down the line when I start putting it all together. A lot of my clients want to see a polished mockup of how it will look in the browser.
One of the things that helped me was to switch from designing in Photoshop to Fireworks. It seems to force me into simpler designs that I have less trouble putting together.
I would love to do more front end design which then gets passed on to developers to code, but my biggest fear is designing something that they can’t build because I get carried away in the design phase.
Leanda
10 months ago
Leanda, thanks for commenting - it really helps to know that I’m not the only one that gets lost in the design phase sometimes. I’m not quite sure if I’m at a point where I’ll be switching to Fireworks though - I just love Photoshop way too much (I didn’t want to get into an App-war anyway, since this was more about process than it was about which tools we use).
Anton
9 months, 4 weeks ago
Nice post.
First I’d like to say I read the site from time to time when something peaks my attention, and this I saw when you posted a tinyurl to twitter that caught my eye.
I’m gonna jump right in here and get on with how I work. In the graphics phase, before I start anything I usually just sit for a while, at least half an hour, and stare into space. During this time I am visualizing the site in my mind… the wireframe of it, the header, possible colour schemes, and looking for anything that won’t work. I then writedown all the things I have thought of, and do some very rough sketches, just enough for me to understand. I find the faster I make these notes, the easier ideas flow. Good or bad, I writethem down at this point and re-evaluate later. During the thinking stage I rarely make notes as I go, just because it wil stop me when I’m on a roll and my focus will be drawn to something else.
I NEVER (if it’s up to me and not specifically requested by the client) do the full page design in Photoshop first. Part of that is because I design alot in my head, and I seem to have photographic memory (don’t test me!)… I can recall at a later date what I previously designed in my head. I always however design the header, and the footer in Photoshop. Once you have these and they’re final, the content usually falls into place in the coding stage.
With percentages and such, I prefer not to design with fluid widths where possible. However saying that I’m currently building a project which requires it. If I have to use this, then I will set a max-width property and limit the fluidity of designs for different resolutions.
As far as coding is concerned, I will make sure I have the header at least done in photoshop, and then I’ll just code the main content up live if it isn’t a particular tricky design. For me not only does it save time doing it twice over, but if it’s a repetetive task that you do day in day out, then why bother with the details of it? If it’s that important have templates on hand with various options you can slot in and out.
I guess everyone has their own way of working, and they either work that way as they prefer it, or as they don’t know any better. IMO, nobody knows everything, but you just have to be careful of those who think they do. I’d rather share my expertise and learn from others, than be absolutley certain that I walk the golden path, only to find out nobodys following me!
Dave
P.S. Apologies for the Golden Path metaphor, Chemical Brothers just randomised on that song and it totally overwrote my other ending metaphor!
Anton, I also found it really hard to writein such a small comment box. I had to keep scrolling back up and down to see what I had previously written. I guess I should keep my comments smaller in future? ;)
Dave Bowker
9 months, 4 weeks ago
I think a lot about code and what will or wont work when I’m designing a site. That said, I do a lot of the work in Photoshop before writing a single line of code. Clients need to see something in front of them, and pushing pixels around in Photoshop is much easier than recoding. When I am working in Photoshop I do have that “programmer” voice (that you only gain with experience), that constrains my artistic choices.
Once I’ve decided on the look in Photoshop, I start coding. Every so often I run into a programming constrain that I had not considered in the design phase that may force me to “think on my feet”, but this is a rarity today. I’ve also discovered that my internal knowledge base contains many of the tools I need to writevalid code that works across all major browsers.
Jon Sweet
9 months, 3 weeks ago
@Dave, Chemical Brothers is always welcome here!
Anton
9 months, 3 weeks ago
I have found it works really well when you can separate the 2 stages. Design and front-end development.
Where I use to work I worked with a designer who concentrated on creativity & design layout and I would concern myself with the HTML/CSS build and semantics of his designs. We would both work on the IA and ease of use.
We would get together at the beginning of the project before anything creative was done and we would work out the IA of the site and depending on the site complexity we would wireframe up portions of the site where user actions would take place for example.
Then from there, when we don’t have to worry about how we need to layout complex areas of the site I let the designer loose on the wireframes and come up with some initial ideas.
We would chat periodically and I would review his designs from a build perspective and the cool thing is, because the designer is not worrying about code, I am pushed as a developer to find ways to develop new layouts. Sometimes we have to change the design, but most of the time we found it an innovating way to work. Yes, you have to be aware of the top down design of html and some other browser constraints, but don’t get so caught up in it so you churn out the same styles because you know they work. I think it’s unfortunate that this can be a luxury to work in this way, as some places expect designers to build too. But there are great depths in design and build and separating them lets people become more specialised and offer a better skill in that area. There are always crossovers and it’s important to realise that. I prefer working in this way much more. I have been at the design and build end… and to be perfectly honest, I know I am not fabulous designer, (so much talent out there) and now I have more time to be a fabulous front-end coder and concentrate on making beautiful sites collaboratively and offering what I am best at.
Laura Zucchetti
9 months, 3 weeks ago
I’m a heavy PS user myself. I like to sketch in it, while I know many find it too heavy for that.
As for the designs, I usually have something in mind when I start. Something as simple as a color combination I saw on a package going by me or something. I usually end up doing a pretty full design right in PS minus link effects. I have the coder mindset sitting on my shoulder the whole time though. If I’m drawing something, and it seems like it’ll be a pain in the xhtml/css, I make notes about it.
I’ve got a few good basic site templates on the MB, and I use these as starting points. If during the design phase I realize it’s not going to fit my templates, I’ll take time out and start on that. I hate having a design ready and then not be able to drop it into my browser for testing.
This is where I spend most of my time though, refining and coding. And it’s often the case that once I get something into the browser, I have new ideas on the design.
Good writeup here. I love reading about processes in design. I’m intrigued by how others handle their work, not only in design but all other aspects of the business as well.
Kelly Sims
9 months, 3 weeks ago
I’ve worked on quite a few websites but always in a pair with my friend.
My friend is a graphic designer and starts the process of sketching the idea out in Photoshop and comes up with the final design all in Photoshop. He has no programming experience, knows very basic HTML or CSS and so does not even think about how his design will work when having to be translated to CSS. It gives him a lot of freedom in the design.
I on the other hand am a programmer, who knows the HTML and CSS inside out, but have the crappiest ideas about design. When he is done with his design, he calls me over, and I try to visualize in my head how the CSS has to work out, where the divs would go, and finally tell him how I want things sliced and so on. It’s then my job to faithfully replicate, across all browsers, his design using valid CSS and HTML.
That frees him up to do anything he wants in the design. He doesn’t even think about how the CSS will be handled. That is part of my problem not his.
I think if this kind of a separation were to become the norm in working on web-projects, it could go a long way. Allows the designer to concentrate on the design and the programmer to concentrate on the ‘code’. It’s worked for us for every single web-project we’ve worked on so far.
Another Pilgrim
9 months, 3 weeks ago
I’m loving these comments. Thanks for stirring up the discussion, Mr. Peck.
Loving the podcast, too!
/buys-round-of-beer-for-everyone
Luke Dorny (luxuryluke)
9 months, 2 weeks ago
I was going to comment on this when I first saw it, I thought I had a lot to say about all this (and maybe I still do)...then I got distracted by a bunch of other stuff, and time passed by...’Missing Link Part II’ rolled up on my Google Reader...and I also read Andy Rutledge’s (professional) criticism as well - combined with the comments already made here - I’m not sure I have anything new or too insightful to bring to the table now! [Longest run-on sentence ever!]
I think there are lots of different approaches being used...people obviously do what feels most comfortable for them.
What works best for them might not be the ‘standard way’ - but if it gets the right result who cares about the process right?!
There’s definitely a graphical aspect to each project, and a coding aspect too, but I usually think about both at the same time really when I consider either...I don’t split them in to two unique ‘phases ‘because they are so integrated in any design. Having said all that though: I’m very much a ‘visual designer’, and I will come up with a design on how I want a site to look - with consideration for various CSS layout techniques that I’d likely use.
Then I’ll get to work with code mock-ups before I actually combine any graphics.
If things don’t work along the way, I will try to wrestle the coding to meet the design as much as possible (and rarely drop any of the original design elements if I can avoid it).
Another key thing that defines the graphics/coding part of my web design process is that I favour making designs that are more fluid than fixed, more accommodating of user preferences (browser types/settings, font-size settings, etc. and accessibility needs) - which means they are usually more minimal, less elaborate or too ornate.
My own site embraces that same concept at the moment.
All the designs I complete are gradual refinements of an initial concept (mock-up concept usually done in Photoshop) - and I try to stick as closely to the original design as possible. Getting it right at the outset is the general idea...but this doesn’t always work in practise! Sometimes, wonderful improvements, overlooked in the original draft, only manifest themselves as a working-version starts to take shape...(and it’s usually nice when that happens!)
I’ll finish my comments on that point for now - I hope it was worth reading! ;)
Matt Robin
9 months, 2 weeks ago
Leave your own feedback
