Your process?

siforek

New member
Everyone has "what works for them". Mine, I'm assuming like other's, has been determined over many years. Beginners spend 20x times more time designing/developing their site(s), or at least I did at first, simply because "My Process" wasn't yet perfected.

I'd like to hear how others work. Hopefully someone starting out will stumble upon this topic and save some trial and error time, and perhaps even proficient design/developers will get some ideas on how to better perfect their process, including me. So here's mine, if I were creating an entire site from the ground up:

1. I start with the business/domain name, review goals, and get a mental image/emotional sense of what the site should project.
2. Lay back in my bed, close my eyes and daydream, envision, and create the finished design on the back of my eyelids :)
3. Go to my notebook. Nothing special, bic pen, line paper and work out the layout. I usually sketch out minor elements, divs, etc.
4. Create a draft of the logo. Determine the color scheme.
5. Draft notebook items in Photoshop, navigation, & apply minor colors.
6. 2 Notepad++ windows, xhtml & css.
7. Basic xhtml markup, much with Lorem Ipsum, then link all css elements.
8. Revise logo(final), and any images(stock photos, icons, backgrounds)
9. Apply style to all css elements, going back and forth between color wheel. (this is where much of the design is done in my case)
10. Replace Lorem Ipsum with actual content. Populate links href, alt, titles, etc.

That's pretty much it I guess. There'd be additional steps if scripting/functionality were needed or if it needed to be integrated into an existing software, eg. Wordpress, WHMCS, etc. I'd simply split things up and rebuild the template files.

So 10 basic steps for the most part. If someone simply needs me to slice and code an existing PSD it would only be steps 6, 7, 9 & 10.

The only thing about my process that may differ from others and mite be surprising is that I don't design an entire PSD of the site before coding. I mite play with div colors, sizes, and the very basics of the layout, but anything more than that waists quite a bit of time.

Again, I'd like to hear how others do things.
 
1. I start with the business/domain name, review goals, and get a mental image/emotional sense of what the site should project.
Before you even select a domain name, some research should be undertaken to determine keyword statistics that relate to your goals, and what you desire to project, or how you wish to monetize your site. I'd also suggest doing a trademark search.
 
Before you even select a domain name, some research should be undertaken to determine keyword statistics that relate to your goals, and what you desire to project, or how you wish to monetize your site. I'd also suggest doing a trademark search.

Agreed, but many of my clients come to me with domain name, and dead set on their business name.
 
I understand. So you're already starting behind the eight ball. Evaluating keyword statistics as they relate to the content envisioned will still help to optimize the site. You don't build a site and hope they come. You build a site with content you know your prospects are already searching for.
 
If and when I design a site I tend to do things logically, as far as documentation goes its usually nonexistent unless the client requires or requests it (that is if I’m designing for a client). I like to however set some kind of brief, or goals as it where that id like the site to meet.

I personally would other than research into names, possible domain choices, age range, hardware/ software for both server and client side, logo’s and some basic aesthetics. Start brain storming on a scrap of paper, often several, the pick one or two (for client) or one (for self) to carry forward.

I then usually map in heuristics and design guidelines dependant if I have done so already or not (W3C, Jakob Nielsen, Ben Schneiderman) and also start to divide the site ether on paper or more often in my head, thinking of where code is going to be reused (navigation, headers/footers etc) and usually go for .PHP thinking of includes and interactivity.

That done my 10 steps would be something like:
  1. Add flesh to the bones by writing some Pseudo code (basically, text and code combination – the equivalent of writing the code in English)
  2. Open Dreamweaver CS4 or Notepad, create a html file and start fleshing out the site/design placing div’s
  3. Open Dreamweaver CS4 or Notepad, create a CSS file and start the styles using the naming already used.
  4. (Being no amazing graphics artist) Contact a member of my family (graphics artist) and send over some rough sketches /ideas/briefs for logo’s or images I am not able to create.
  5. Tie the CSS and Graphics together with the html, fill with standard text if necessary and make adjustments before adding the final content.
  6. Adjust the styles accordingly to make the site aesthetically pleasing and fast loading.
  7. Place code in .PHP files formatting correctly adding code to change navigation styles and allow for as much code/content to be reused where possible. (often dividing the site to, header, body, footer)
  8. Check all links are fully functional updating them site wide where possible through the .PHP files.
  9. Put online (non public) to test and debug where necessary adding interactive through Java or integrated scripts where and if possible.
  10. Present to client, review, change, modify and repeat where required.

That’s a quick overview of how I would go about building a website, a lot of people tend to have similar approach but mix and match the steps (take a look at the two names mentioned for guidelines for example) as there is a lot of overlap. There is no real right or wrong though thankfully although go to an exam board and they will tell you otherwise :smash:
 
[*]Place code in .PHP files formatting correctly adding code to change navigation styles and allow for as much code/content to be reused where possible. (often dividing the site to, header, body, footer)

I do the same in many cases. IMO, the more you can reuse code/content the better.
 
One step I left out that is extremely important to my process is to choose a color scheme. I mean, you can have a general idea of what colors you want to use, but without having some type of "chart" of 5-10 colors you'll use there's a good chance you'll fumble around for quite a while trying different combinations. And I don't mean "blue" I mean the actual hex values :)
 
1) Sketching and planning the design on a piece of paper
2) Photoshop, Fireworks, Illustrator, for designing and slicing
3) Dreamweaver for coding (I never use the design view WYSIWYG editor, I just like DW's options for tracking down changes throughout the site)
4) All work is checked in Firefox, IE6 and IE7 at the same time.
5) When the site it is finished I check it in Opera and Chrome.
6) Publishing with Dreamweaver or FileZilla or Total Commander.
 
1) Sketching and planning the design on a piece of paper
2) Photoshop, Fireworks, Illustrator, for designing and slicing
3) Dreamweaver for coding (I never use the design view WYSIWYG editor, I just like DW's options for tracking down changes throughout the site)
4) All work is checked in Firefox, IE6 and IE7 at the same time.
5) When the site it is finished I check it in Opera and Chrome.
6) Publishing with Dreamweaver or FileZilla or Total Commander.

Not bad. Welcome to the forums. :)
 
I am not a designer by any means but I fully get what you are saying. I am the type that can see it but can not make it, so I have other people for that. I like the way you process too, most people end up taking the easy way out and say "we need more time" but at least I can tell if I hired you, if you needed more time it would be worth the wait seeing as how you end up laying things out before you even start the project. ;)
 
I am not a designer by any means but I fully get what you are saying. I am the type that can see it but can not make it, so I have other people for that. I like the way you process too, most people end up taking the easy way out and say "we need more time" but at least I can tell if I hired you, if you needed more time it would be worth the wait seeing as how you end up laying things out before you even start the project. ;)

Thanks. If I ever "need more time" is usually due to not having everything I need from a client. Though obviously not getting back to me with "what color do you want the links to be" wouldn't keep me from much :)

I think one important aspect of things is to present a few options, let them choose which is best, then get consistent feedback until they are satisfied with the final result.
 
Thanks. If I ever "need more time" is usually due to not having everything I need from a client. Though obviously not getting back to me with "what color do you want the links to be" wouldn't keep me from much :)

I think one important aspect of things is to present a few options, let them choose which is best, then get consistent feedback until they are satisfied with the final result.
One thing I haven't seen here is 'managing your client's expectations (before you even start).' If they know your process upfront (and agree to it in writing), there'll be less confusion down the line. Design can be incredibly subjective.
 
One thing I haven't seen here is 'managing your client's expectations (before you even start).' If they know your process upfront (and agree to it in writing), there'll be less confusion down the line. Design can be incredibly subjective.

You're right. I guess started this thread to simply list the technical tasks, etc. There's much more to it considering communications, agreements, and an overall understanding of what the client wants.

Client's expectations is a very important, if not the most important aspect IMO. It can be a bit tricky. I've found a happy medium between a 10 page proposal and just covering the basics of what they want.
 
Not bad. Welcome to the forums. :)

Thanks. :) I have very streamlined and fast workflow. I tend to keep all things organized, and all materials at hand. I can't emphasis enough how much this saves time that you can use later for something else.
 
Back
Top