What's your general outline of designing/building a website?

May 28, 2012 6:57 AM

What's the general outline of designing/building a website?

What's the general process/steps that web design proficients take in designing/building a website?

Let's say you have a subject that you want to design/build a website around. Say, dogs, for instance. What are the general steps of the process that you'd take, in order to take the process from idea to concept to (decently) full-fledged website?

Does this process usually entail slicing a design in Photoshop (or similar)? And in this process, how in the world does one go about figuring out where/how to place/order/sort div's and frames?

Less of a "how-to" in the nitty gritty particulars, and more of the general steps and overview of the process. As in, "First, I sketch out preliminaries; then I figure out where navigation bar/layout should be framed; then I blah blah div's; then I slice and dice in Photoshop..." etc.

posted by coldblackice to Computers & Internet (3 answers total)

If someone were doing this all themselves, unless the final site is going to be flat HTML I would recommend starting from selection of a content management system or other web framework, getting some of the content together, and then afterwards do the aesthetic / web design work that involves Photoshop, etc. based upon creating a theme or skin for the chosen system.

That way you can start from whatever divs and layout the system you've chosen uses normally and modify that as needed, rather than putting together a flat-file HTML template from scratch or whatever the defaults of the design tools are and then having to shoehorn it into the system that displays the content and the site. The approach where someone like a web designer or separate contractor assembles a bunch of HTML and "throws it over the wall" to the people actually building the site often creates lots of unnecessary work.
posted by XMLicious at 7:34 AM on May 28, 2012

Best answer: Here's how I usually work:

1. Lots of chatting with client about needs and content. Get general varieties of content locked down.
2. Produce wireframes for each template in either Illustrator or Photoshop. This is to establish the user interaction models. I often sketch these out on paper first, and think about how the use will actually use the site. You want to think about how they'll look around the page, how they'll move around the page, what they (probably) came onto the page for, where you'd like them to go from here etc etc. There are also the UI details, like worrying that each piece of interactivity has enough space around it, that it's not crowded, etc etc. Depending on the project, I might also start making moodboards to try to establish the design language.
3. Sometime I'll submit these and wait for feedback. Usually the client doesn't care much at this point.
4. Start fleshing out the site, again either in Illustrator or Photoshop. Usually finish the homepage first, as that has the most emotional investment.
5. Submit this to the client and wait for feedback. This usually results in a few rounds of changes. Sometimes they love it and I move on straight away.
6. Flesh out the rest of the templates based on the design language established thus far.
7. Submit those to the clients and wait for feedback. Usually there's a lot less feedback at this point than at number 5, but sometimes they'll get into the details a bit more.
8. Start codin' it up! (in Sublime Text 2 these days) I tend to leave PS/Illustrator open to refer to measurements, colours etc. That means that I can also easily export any required graphics as need be. The exact thing I start coding first depends heavily on the project. Let's pretend I'm doing a fairly complex Wordpress-powered site. I tend to code straight into WP these days, but that does require a certain familiarity, so I'll not do that for this example. That means that my first port of call is to look at the design and work out how I can and semantically code up the HTML. This means using as few divs and sections as possible. The page should also make a lot of sense with the CSS switched off, so you want to be rational with your use of h tags, etc. In reality, you'll usually have to end up adding in presentational classes and divs, but it's a good ethos to work by. If I feel like it and it's appropriate, I might start including the common sections like header, footer, and maybe sidebar via PHP, and I'll almost certainly use loops if I've got long lists as part of a template.
9. Start coding up the CSS. I usually try to get the general layout and typography down before I flesh out each section. FWIW, I usually work vertically down the page. I usually try to do as much presentation in code as possible, only using image files for things that are necessary, and sometimes for older browser fallback. Modernizr is very useful for facilitating this. At this point you want to have several browsers open and check for inconsistencies as you go. Standards are getting a lot better, but it can still save a headache at the end, especially if you have to cater for IE 6, 7 or sometimes even 8. If there's not much complex JS required, I'll do it as I go. Otherwise I'll do the general framework and get to it later. I'll typically fully style templates one by one, hopefully taking into account styles that'll work across the whole site. By the time I get to the last template, it should be mostly done.
10. Build up any complex JS I hadn't got to before. Sometimes involves a despairing search around Stack Overflow before kicking myself.
11. Start building it into a Wordpress theme. I don't like to use frameworks and child themes at all, though I do quite often use a starter theme like _s. I'll rationally separate out the header, footer, sidebar and various content sections to the appropriate files. If I'm using a different CMS, the process is usually fairly similar.
12. Test, fiddle, test, fiddle, test, fiddle etc etc etc.
13. Done!
14. Lots of client training.
15. More fiddling
16. Actually done!
17. Six months later - Paid!

If the client wants me to, I'll develop on a live development server, otherwise I develop locally.

I hope that was helpful! There's lots more I could write, but I've got to get back to work. Let me know if there's anything else you'd like to know.
posted by Magnakai at 7:38 AM on May 28, 2012 [15 favorites]

My setup is pretty similar to Magnakai. I use WordPress for most work. I have a parent theme that I build a child theme from (based on Hybrid Core and Twitter Bootstrap).

I use SASS/Compass for CSS now, along with the excellent CodeKit.

Using the same theme makes it really easy for me to customize for a new project, and also really easy for me to determine that my framework won't work for a particular project, and use something else.

You'll get the hang of slicing up your PSDs the more you do it. You'll be able to look at a mockup and say "Okay, I'll need some html for that section there, and I'll need to slice this image for a background on the header container", etc.
posted by backwards guitar at 8:27 AM on May 28, 2012