I often times get asked what my process is for designing and building a typical website. And, while my process is probably not much different than others, I thought I would share it for people that are maybe looking to simplify the process of designing a site. I have broken the process down into 5 steps.
Step 1. Sketch Phase
When it comes time to design a new site, I start out by sketching all of my ideas out on paper. I first begin with writing down all of the initial thoughts I have about the company, the logo, the branding idea, etc. This allows me to free flow my thinking and get it all on paper to go back and use later. Once I do that, I sketch out some layout ideas and starting forming the look and feel as well as the flow of the site. Sketching on paper saves loads of time in this process, because it is quick and you can quickly get a good idea of where the site is headed without spending a lot of time mocking stuff up. Once I have a good sketch in place, and I am happy with the layout ideas, I move on to mocking it up.
Step 2. Mock-up
With my layout ideas sketched out, I move on to Photoshop to actually mock up the layout in a clean fashion. I build the site and place everything as it will look once it is actually usable. This is where I can move things around to better suit the site and finalize the layout before actually coding anything. Once I have the site mocked up and I am happy with the final version, I build it.
Step 3. Slice/Code
With my mock-up now complete, I can slice it up to get my images, logos, background images, etc. I then begin the coding process by coding out all of the framework in an xhtml document. I typically use Textmate or skEdit for this but Dreamweaver is also a tool in my arsenal that gets plenty of use. Once I have the initial framework coded out, I then begin my CSS coding and putting some life to that xhtml code that I have created. Once I have the CSS and the xhtml code, I can build the complete site and fine tune the design to my liking.
Step 4. Testing
After I have the site built and looking like I want it to, I then begin the testing process in multiple browsers and platforms. I design and build everything in Firefox on the Mac, and I get the site looking perfect there first. Once I have that, I then go back and tweak for IE6, IE7, and some of the other lesser known browsers. I test everything for xhtml and css compliance and make all of my final tweaks at that point.
Step 5. Launch!
Once the site is designed, built, and tested....I launch it! Usually after a site launch, I often have to go back and make some other subtle tweaks to get everything pixel perfect. I set up hosting, domain name, etc. and upload everything to the new hosting server.
So, although what I have described above is brief, it gives you a good idea of my overall process. Obviously, there are further details that go into this such as client revisions, color schemes, project requirements, etc., but you should now have a really good idea of my basic process. I hope that you find it useful and hopefully it helps you better refine your process for building sites.
As always, no process is perfect, so if you have any ideas or comments, I would be glad to hear them. Maybe you have some ideas for making my process better. If so, please comment and share your ideas!