My typical design process
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 being 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, 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 head them. Maybe you have some ideas for making my process better. If so, please comment and share your ideas!
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
I like this process. It works for me as well.
It seems like a waste of time to me to move to CSS in the mockup stage. If your design is not finalized you have to save out changes and modify your CSS for every change. Of course, it is advisable to think about CSS implementation and potential issues during the sketch and mockup phase.
[…] My Typical design process - 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 […]
hi there, first off, thats very helpful to me as im starting out designing and coding websites! ive just finished uni. i was just wondering how long it takes you to complete a website? i have no idea what would be a sufficient time to do this in?
@Claire…
My time frame for a typical website obviously varies from project to project, but typically I complete a project in 2 weeks or less. This is once the design has been finalized and the scope of the project has been determined.
There are many factors that can determine project time and one of the most important is the amount of time it takes a client to provide feedback, content, images, etc. When this process is streamlined, project time is usually pretty quick for me.
Good luck to you though, and I hope that I have helped you come up with a process that works well for you.
I generally try to code for multiple browsers from the get-go rather than doing a load afterwards. It helps me keep an eye on everything throughout the design stage without messing something up in one browser by changing it for another.
Also, during the mockup stage, I find it helps to do a quick layout with CSS rather than just Photoshop alone as I can see how everything is going to work in a real environment.
Just my two cents