I get asked a lot by friends and family (people that are not designer savvy), how I design my sites. I’ve never really sat down and explained each step to them, but I think it will help some of you guys (especially since you’re requesting more tutorials and web design articles). This is just what I do, a lot of people have different methods, but I’ve found this is the most efficient, and results in the best final product. I’ve designed a mock website using these steps, including pictures for the entire process. Let’s get to it…
1. Client Consultation
This is, without a doubt, the most important step in the entire process of designing a web site. It’s the foundation to the entire project, and unless you have a strong foundation (as with a house, business, etc.), the project will be riddled with problems, and might fail completely. This is the first building block, everything else will come back to this first step.
I spend about an hour talking with the client about what exactly they want. Obviously, we talk about price, deadlines, and all those lovely juicy details, but most importantly we talk about the needs and goals of the sites. I always ask the client what they’re trying to communicate through their website, what type of information they want the reader to not only see, but to remember. Anyone can throw together some nice gradients, text, and icons, but to truly make a website that meets (and exceeds) the clients needs, takes planning and thought.
I ask about the demograph the client has, who will be reading it, the market the client is in, competitor sites, everything. Is the client trying to showcase their faux painting artwork? Or do they want to give out information on their non-profit? These two sites are radically different, but they both have their foundations in planning. A wise man once told me that failure to plan is a plan to fail. If you don’t have an end goal, you’ll just be putting together images and words. Here are some key questions I ask clients in the planning stage.
- What demograph is your site going to target?
- What are you trying to communicate (i.e. your works, info about your company, reasons to buy your product, etc.)
- In case of a product or service, what makes you the best? What is unique about you? What features do you offer? What solutions? These will be what you showcase in the design, make these key, the most important elements.
If I could sum this step up into one sentence, it would be this: your client is not hiring you to simply make them a website; they want you to provide a solution to their marketing strategy.
2. Initial Drafts And Sketches
Remember how your 8th grade English teacher always told you that a rough draft would improve your final work? Turns out she was right. I always begin my designs by sketching out ideas and drafts in a notebook. This is a fast way to come up with design ideas, but still be able to show the client the general structure and elements of the site. It’s a lot easier than starting in Photoshop, only to have the client totally reject the design. I normally draft out 5-10 ideas, and then talk with the client, showing them the drafts, and either decide on a layout, or mix parts of my ideas to create a new, approved design.
Your drafts don’t need to be a piece of art, they simply need to show the general structure and layout of the site. Sure, you can get creative and add little details, but as long as the client can visualize where all the information and content will go, you’ve succeeded. Here are 4 quick sketches for the mock site I’m designing for this article. I’ve decided to go with the last one.
3. Photoshop Mock Up
Now that the client has approved the general layout of the site, it’s time to design it. Fire up Photoshop (or Fireworks, or whatever you use) and design the general layout. This is where you can start to add details, but don’t worry about creating it perfect the first time. This again is a general draft to show the client the style. Some people design it first in grayscale (that way you can easily change the to any color scheme you want, the hues are already set), but I don’t really do that. You’ll finalize colors, design elements, fonts, etc. in the next step. Here is what mine looks for the mock site; nothing amazing, just the basics of the style so the client can visualize even more how the site will look.
4. Finalize The Design
After the client approves the style mock up, it’s time to finish up the design. This is where you will finalize colors, type faces and sizes, and details. In this extremely quick and simple, I’ve made some typographic changes, added more detail to the menu, and added a highlight style. Again, this is just a mock up, and I would never hand something like that to the client as a finished design, but it’s made to show the progression of the design progress. The client approves the final design (they may want some minor changes, but this is the final design they will approve). Here is mine:
5. Code Into XHTML/CSS
This step really doesn’t need an explanation; you simply code the client’s approved design into valid XHTML/CSS. That’s it, you’re done. If you are doing backend for the client, then you’ll impliment that now, but if you are simply designing a site, this is the final step.
I hope this helps some of you guys, or at least gives you a better example of how a site is created, from the very beginning through to implementation. The mock design I used is just to show you quickly the progression from the steps, but your design will be (again, back to step 1) fully tailored to the client’s needs. That’s how I do it, you may have a different method, and I’d love to hear it, as well as any suggestions or comments. Now you have the entire process, go out and their and make some websites!
).
