[Rob Kaper]

Everyone reaches this decision at some point: you've created some graphics, moved around some layers in Photoshop.. and now you have to build the HTML/CSS to get your new design actually working as a web site. But when do you do this? Do you complete the entire design first? Do you design the basic elements and then figure "from now on it's faster to finish things with the actual code"? Or do some even start with the basic HTML/CSS and then work on the graphics, for example because you always use a base template for the HTML?

I tend to fall in the middle group. I design the logo and basic page layout elements, but when it comes to texts and links it's easier for me to just directly design them. I then crop the design image into the image parts I need. For new projects I now also start on a CSS sprite pack right away because I noticed a hidden unintentional benefit of using CSS sprites: having all icons together in one image makes it a lot easier to check that the icons match in style, while also making it possible to colourise all icons in one go.

When do you think is the best time to trade in your graphics program for the web browser?

[Karl Buckland]

Unless there is a design decided before I start coding a project, the design always comes later and is usually informed by the layout and usability chosen by me in the application. Although I do tend to use a basic design and layout in the first version of any developed software (not the final design) simply because things look a lot better and more objectives decisions can be made about look and feel and layout, which have to develop as the application matures.

To be honest, there's no one point when it all goes to HTML. I always see the design, layout and functionality as evolving and maturing and nothing is set in stone until you complete development - whether that's design or functionality.

[jameson]

I tend to use Photoshop as a sketch pad, where I draw out what a single page of the website would look like complete with text and everything. Then I show the image to the client, and if he/she likes it I move on from there and start the actual coding.

[TJSingleton]

In a rush, I have build layouts just knowing the dimensions of the site. We added the images later after they were approved.

That said, normally we have a basic photoshop mock up, prior to starting converting it to html.

Here is the process we use at Vantage Street.

1. Sketch - http://www.draftdepo...tics-sketch.jpg
2. Deisgn - http://www.draftdepo...ctics_mock1.jpg
3. Code - in progress.

[supasnail]

I will aim to have a fairly polished (fireworks) mock-up of the site before beginning any html. Clients have a habit of changing their minds, so I like to have as many problems as possible ironed out in this design stage before beginning to code. Changing layout once the coding has begun can often be problematic and therefore costly to the client.

[jameson]

supasnail, on Jul 28 2008, 04:50 PM, said:

Changing layout once the coding has begun can often be problematic and therefore costly to the client.

Yeah, plus if you start the coding with one layout in mind and then change direction halfway through, you can end up with some pretty messy code, too.

[Rob Kaper]

True, at some point you'll want things settle a bit. On the other hand I have to agree with Sirkent that often there will be an iterative process.

[Bronzytalk]

I think you have to design first on photo shop because photo shop is the best designing software. After that you link your image in HTML coding .CSS is just a style sheet you can change here background color , Font Size color, etc.

[Bronzytalk]

After completing the sketch how my web page actually looks I start converting into coding.

[lconcordnc]

I do tend to use a basic design and layout in the first version of any developed software (not the final design) simply because things look a lot better and more objectives decisions can be made about look and feel and layout, which have to develop as the application matures.

[EncoderDecoder]

i think when the graphic is approved by the owner of the site, then that is the time that the web master puts the graphic into the html.