I think its safe to say that each designer has their own way of doing things. When it comes to how to start a new web design project, there are quite a few ways to get started. I’m not going to say that any one way is right or wrong, but each direction does have its own benefits and trials. For example some starting points may take way more time then they need to and delay the actual development process. While others are have too much of a shotgun approach and may leave you doing more cleanup in the long run then necessary had there been more planning at the beginning.
Let me start off with the way we at Design Theory get started with a new web project. Again, no way is right or wrong, this is just a transparent look into our world.
1. Wire frame: Once your contract is signed and a deposit is paid, our graphic design team starts designing a mock home page. Depending on what the client’s needs and requests are, most layouts are pretty standard. We start off with a wire frame of boxes and rectangles as placeholders for content and images. Logo here, banner there, ads here, text and content here, images there. Once this is created for both the home page and at least one sub page, it will be passed on to the client for approval and signing. We don’t move forward unless we get a signed copy back.
2. Designing the Mock-Up: This part is a little fun because you’ll start to bring in some colors and realistic elements using Fireworks or Photoshop. Any design app that allows you to use layers. Then head over to Lipsum to grab some text filler for page body areas. Use the company logo and position it where you think it will best fit. Try some page backgrounds or menu colors and boarders to see how much more live the design looks. You may also want to design a few other sub page variations as well as the contact us page here too. Again, you’ll send this phase to the client for approval and signing.
3. Slicing: Some call this PSD to HTML, but the concept basically is cutting up all those layers and graphical elements from your design into individual graphic files. For example, the logo will now be saved as its own file with a transparent background, and so will the banner, and the menu boxes minus the text. Slice the navigation bar into buttons or formulate a working htm file for dropdown and linking functionality. You’re pretty much breaking down every part of your design to prep the development team to build the site.
4. Development: This is the fun part. Depending on whether or not your a coder I should say. At this stage you’ve got all the right elements sized or scaled to what they’re supposed to be. The functionality of menus and widgets have been explained and demonstrated so you can do everything you need to in a timely manor without any more interaction from the client. During the build process, you’ll also be checking for browser compatibility, what is actually see above the fold, font sizing, CSS, and overall flow of the each page.
5. Double-Checking: Hopefully at this point there are a fresh set of eyes overlooking the project. Check for broken or incorrect links, image alt tags, site map, spelling, grammar, lines and balance and attention to detail. Within our design firm we’re happy to have a content writer who’s not afraid to pick and tear apart our sites during development for inconsistencies and errors where we may have ignored or missed along the way. (Thanks Yvonne!) After this step is when you’ll want to present a semi-polished preview to your client. Having your ducks in a row will save your client from noticing small errors and focusing on the big picture. In my experience this stage is rather crucial because if you can’t get them to focus on the overall design and functionality, they’ll run you crazy on the minor imperfections that you can probably fix just as fast as they find them while on the phone.
That’s a brief run-down of what we do at our design firm. I hope this is helpful to you. If you have another way on how you start your design projects, please share in the comments below!
