Website development 101
Sometimes the whole client-agency thing doesn’t work out. For any number of reasons which may or may not include some combination of capabilities, personalities, experience and halitosis, it’s just not a good fit. We’re cool with that.
Sometimes, though, there’s more to it. Like when a client perceives Website design and development as a commodity on the order of hand soap or puffed rice cereal. If that’s you, that’s fine. We won’t try to convince you otherwise or bore you with talk of user-centered design and hand-crafted XTHML and CSS. Nope, we’ll just assume that you’re more than okay with paying your wayward brother-in-law a thousand clams and a case of Schlitz to create your site.
Before you he fires up his pirated version of Photoshop, though, make him read this quick primer on how Websites should get built, start to finish. It won’t guarantee you don’t get screwed, but it might help stem the tide of canned templates, co-opted design and inferior experiences. (We do what we can.)
Step 1: Discovery
Put down the mouse. This is thinky stuff. It’s about finding out what the site needs to do, based on a combination of business goals, competitive factors and customer needs. Assumptions are only OK when they are verified by research. Research that doesn’t include yelling a question across a crowded room and guesstimating results by a show of hands.
The business goals come from key client stakeholders; people who can weigh in on what content and/or functionality should be part of the experience, from the company’s perspective. Feedback from relatives of any sort and Magic 8 Balls don’t count.

Do you think they'll like my website? "Highly unlikely"
Customer needs are really the most critical, since users are ultimately in control of the experience. Existing site analytics will provide insight into current user behaviors, but the best audience research includes actual customer interviews to learn what they expect the site to deliver. These interviews often yield incredibly valuable information beyond the questions themselves, because while a user can’t necessarily articulate the functionality they want, they can often describe the kind of information that’s important to them and how they’d like to receive it. If you choose to do nothing else—and that is completely likely—do this.
A comprehensive document known as a Requirements Analysis should synthesize all of this information and clearly articulate recommendations for what the site will be. You probably won’t do this. No, you definitely won’t.
Step 2: Information Architecture
Here’s where the site begins to take shape, by defining the navigation, content areas and functionality elements in the form of two foundational documents: The sitemap and wireframes. Think of these as blueprints; the sitemap provides a high-level, structural view of the main areas of content and how they relate to one another. The wireframes are detailed plans that show the priority of content and functionality on each page of the experience.
You don’t have to get all fancy schmancy here. Feel free to sketch it out on a piece of paper. Just don’t use the back of the FB quiz you printed out—clients don’t care what kind of Pokemon you are.

Pikachu car
Neither the sitemap nor the wireframes are intended to show actual design, but they do inform it. (No, that’s not a haiku. Read on.)
Step 3: Content Audit
Together the Requirements Analysis and Information Architecture will provide an idea of the content that needs to be created. Beyond that, however, an audit is required to evaluate all content that exists to inform the IA, and identify where new content has to be created.
That new information should be developed alongside the visual design.
A word of caution: Don’t rip copy. The Google knows everything.
Step 4: Visual Design
Ideally, several different design comps will be created based on the sitemap and wireframes from step 2. These comps will typically go through a few rounds of revisions and reviews, with the client weighing in on branding, layout, etc. (Or, since you’re ‘the Web guy,’ your sis’s hubby probably just asked you handle everything; in which case, it’s best to use your favorite NFL team’s colors.)
The key is to ensure that each set of comps is faithful to the IA in terms of how information is organized and prioritized. That said, you’ll likely design one page and then copy that for every all the others. If your bro-in-law asks for changes, feel free to ignore him in favor of playing WoW. Who needs the hassle, right?
Once a design is approved, templates are created for different page types and prepared for the development team. This is the intersection of design and technology. It’s like the matrix, only with more Mountain Dew and Skittles.

Candy? Or design inspiration?
Final deliverables for a web project range from a mixture of layered Photoshop files, a comprehensive style guide and CSS files. These documents work together to provide the dev team with clear instructions on how to setup the site’s technical environment and answer any lingering design questions.
Or you can fast-track the whole thing and ship your PSD file to one of those PSD-to-HTML services for $150. Same thing.
Step 5: Development
The technical side of Website development will have to be covered in a separate tutorial (don’t hold your breath), but suffice to say there are a myriad different ways a site can be coded. What’s important is that the dev team’s been involved with the project from the outset, reviewed all the relevant documentation (especially the RA, the IA and the visual design) and has an open line of communication with the design team.
In this case, since you are the team, you know the project inside and out. And if you haven’t already bailed on the project, you’ve purchased a stock template and modified it a little bit to appear less unoriginal. Either way, you’ve got some cash in your pocket, the client has a Website (sort of) and even if he doesn’t like it you don’t have to see him until the next family holiday. We know: Sweet.

The Woz thinks you did a good job!
Next week’s lesson: Advanced banner looping techniques. (Just kidding. Teaching’s hard. We’re going back to creative.)