What is Your Design Process BEFORE Coding?

Quod erat faciendum

gary

 

You'll have to excuse the attitude, but when people like kk5st, Dan Schulz and myself are the ones going around behind the people working image first and cleaning up their messes - it does predjudice us greatly against the goof assed .psd file first approach. I have rarely ever seen a page done from that approach where the code was worth a shit, the accessability was high, or the images were even close to optimal/well thought out.

 

There are many very capable web designers who start image first. Rockettheme for example prototype in Fireworks in what I imagine is very much the way I described. I'm not trying to win any converts. I answered the man's question about what I do before I code. It was about then you all jumped down my throat. Obviously your going to have issues with a designer who knows photoshop but doesn't know xhtml/css. There are some of us who are quite capable with both. I didn't know it mattered so much to everyone. Guess I'll just STFU next time I try to be useful.....

 

I got to template sites and pick up details on templates i like and combine them into one unique template, chop it up and code it.

 

If those bloated poorly coded boomla templates are your idea of good code... They are very pretty, but at upwards of a third of a meg apiece, nothing even RESEMBLING semantic markup much less the abuse of definition lists on forms where labels should be used, classitus, divitus, improper header orders, putting out brand new pages in a transitional doctype, content after the </html>, inlined styles, inlined scripts, seven separate scripts and an unbelievable six css files?!? BEFORE we count in that stupid conditional crap they've loaded up on?

Here's a tip, when the html file is over 30k for less than 6k of content, a page is made of /FAIL/ - which all of the templates at rockettheme are.

They're very pretty though.

 

I experience this with almost every page I do, because so far, in my work, I'm taking an existing, working (for non-disabled using only IE6 and 7) site which already has a design, and rewriting it so that it really works. So it's almost the same as if I was working from a PSD, becuase the sites already have a following and the boss doesn't want a redesign, only a recode.

It's not impossible-- you've seen my code, I think it's pretty good, pretty accessible and pretty semantic-- but I've had to probably work longer or harder to make better code match the current designs. Sometimes I can change stuff- other times I can't (like that sticky footer... the sister site to the home rental site has both a sticky header, footer, and sticky, frame-based sidebar as well... that'll be fun : ) It is a bit harder code-wise to work off a design, but since I'm not as creative design-wise as I thought I was, it's easier in a way to know how I have to make it look, while thinking how to build the page so that the look can change (as deathshadow said, if there's sidebar content it should sit in a sidebar, but should teh Pretty change, it should be an easy change in the CSS, not the HTML).

I can't build a page in GIMP. I need to build it in code. But I do, for a wholly new site, sketch out boxes on paper and discuss with the boss and my coding colleague what's going to do what, and how is the page supposed to behave at this and that resolution, with and without scripts... and to be truthful, design does affect my code at times-- mostly with menus (if it's a long menu, I've learned NOT to set it horizontally as this fux0rs with small browser windows no matter what I do) and sidebars (if it's first in source, it can be floated left or right no problem, but if it might become a "fat footer" then I set it after the source and do the wrap-up-with-negative-margins, so it can change from a sidebar to the fat-footer thing (whatever that's called, it's been getting popular)).

I wouldn't bite someone's head off if they start with a PSD first, but I would still expect any "finished" code to be as functional as any other well-built site. If that means the designer wastes more time, oh well. I would only care about the final product. If it's valid, semantic, accessible, works in all major browsers at most resolutions, and doesn't take a day and a half to load due to a love affair with Javascript, then who are we to bitch about how it got there? Only the guy who pays the designer has that say, as he's paying for work and time.

 

How I start: I study content and navigation first.

Most important to me is what content goes where and how a visitor will navigate the website..
(This is for sites that are more than a basic company introduction where the whole site is only 10 html pages..)

First: content, content, content. Write down on a paper a list of the content and group what belongs together, and make menu items for each group.

Based on that I draw on paper a few webpages and what links/menus a user will see on each and arrows to indicate how to navigate between them.. ie is there a block of main links that stay on every page, and sub-menus that change for each group of pages under it..
or wil every html on the whole page have an identical menu structure, complex menus, ..
Can you navigate from one sub-group of content into another or do you have to pass the main screen or another overview page ? Stuff like that.

Once this basic content/navigational structure is done I will try to decide the general layout of the site.
Menu/submenus top, left, .. content, ads, .. centered layout or left-aligned, .. fixed width or expanding, ..
Also a few quick drawings with boxes of what type of content goes where.

Then I will really start to think about how the layout itself will be (colors, gradients, ..).
Usually I'll take a look at website templates to see if I find something I like color-wise, and if I find something that looks like the content-boxes I drawn.. ie do I find a layout with logo and menu on top and submenu on the right that resizes for all browser widths ?
If I do I'll play with it, change the menus and put some content in it, to see if the navigation I made on paper is indeed working in a browser.
Layout ok ? I'll mark the layout paper I created and split the layout in div's so I know how to start on the html/css..

Usually then I draw the layout on paper.. using colored pencils, to have an idea about the color scheme, and especially what will be dark and light, where attention of the visitor should go to.. so inspired by the colors of some layout's I've seen.

After all of this, a mockup in gimp, using a lot of different layers..
The actual colorscheme, gradients, .. can still change from what I've drawn, depending on what colors look good on screen.

After that it's making the html/css itself, based on my paper layout and on cutting parts from my gimp layers.

 

I never plan a design before coding.

It's easier for me get the script done and then make it fit into almost any design, but avoiding as much graphics as possible, basically mix and match of color schemes.