Design. SEO. PPC.

No, that’s not a misspelling. ‘Compleat‘ is a totally legit (if mildly archaic) word that simply means “skilled in all aspects of his or her chosen endeavor”. Reading this will not turn you into a compleat web designer, but it will give you a very solid idea of what a compleat web designer’s process looks like from the inside. In other words, we’re talking about what a web designer has to do to create a great site, in the broadest strokes. Let’s start at the beginning.

Get a Brief From Your Client
No web designer should ever have to start this process without receiving a full brief from their client. A website brief is a document that tells you the designer all about:

• The industry in which the client operates.
• The client’s Unique Selling Proposition.
• The chief products or services they provide.
• The URL of their current website.
• The aspects of their current website that they consider good, bad, and ugly.
• Who built their website and when.
• How much business they currently get from their website.
• What their goals for their website are.
• Their budget — both in time and in money.

This is an absolute minimum amount of information you should have before you go any further down this road. Ideally, they’ll include a lot more information about the site, including how they currently and intend to promote it, who will be responsible for creating and upkeeping the content, and any technical requirements they know they have.

Research
Assuming that your client is a capitalist who wants his website to make money, you’ve got some pretty extensive research to do. First, you need to research the client to get an understanding of their needs, their goals, and their level of willingness to be unorthodox. I’ve had clients who insisted on strict adherence to pre-existing corporate templates, and others who told me “I don’t want outside-the-box — I want can’t-even-see-the-box-anymore.” You need to understand their target audience, their current creative direction, their budget, their deadline, and what they already have made.

Even if they’ve already had market research done — and they should have; that’s not your job — you will still want to do a little bit of it on your own. At the minimum, look at a dozen other websites of your client’s competitors. Mostly, though, your clients should have the research done or be willing to hire a firm to do it properly when you tell them it’s vital.

Brainstorming
After your research has told you what the project is actually all about, it’s time to go about creating the framework of your idea — that that begins with brainstorming. Don’t look for the perfect idea — look for every idea. Start by brainstorming the kinds of content that your client’s site will use, then brainstorm as many different ideas of how to co-relate that content as you can.

The reason you want to brainstorm for content types first is that ‘form follows function’ — you don’t want to come up with a great concept that would work marvelously for a photographer’s web portfolio only to realize that what your client wants is a news site. By brainstorming for all of the different kinds of content, you’re significantly less likely to design a form that won’t give you all the functionality your content needs.

Remember the basics of brainstorming: every idea is worth writing down — even the ones that aren’t. Brainstorm content until you spend a good 5 minutes without any new ideas, and then spend a good hour (minimum!) just spamming yourself with ideas about how you can arrange those kinds of content. Don’t worry about relevancy, technical difficulty, awesomeness, or anything — just think about what can be done.

When you’re done with the raw brainstorming, it’s time to cull the ideas. Cut all of the least-relevant ideas (meaning the bottom 50% of relevant ideas) first, followed by the least-awesome, the costliest, the most technically difficult, and then the least-awesome again. Take whatever’s left and make your decision based on your gut.

Technical Requirements
After the form has been decided upon (the end stage of brainstorming), the technical requirements can be discussed. These decisions will affect the time frame of the project, the budget, and the nature of the site. By ‘nature’, I mean the core software the site will be based on. That may include:

• Basic HTML+CSS: A manually-edited HTML page is fairly quick to develop, but minimally flexible and requires a lot of ongoing maintenance.
• CMS-based: A CMS (Content Management System, such as Joomla or WordPress) allows even a none-too-tech-savvy client to perform content updates on their own, while giving the designer the ability to control the look and feel of the site. Hardcore web programmers can even put together their own custom CMS for each client, though that’s rarely necessary — the big names have more than enough power (and plugins) to get almost any job done.
• Flash:Flash sites can offer rich, engaging multimedia experiences. Flash is, however, slow to load compared to simpler sites and can really bog down older computers.

There are obviously many other options, and none of these options is exclusive — you can have a site that is written in both HTML and Flash, or a site that uses a Joomla CMS to store and produce HTML pages, and so on. The important part here is that you come up with a page that is usable by the webmaster, based on his or her levels of technical skill and the time they’ll have to spend keeping up the website.

Write a Site Outline
It’s time to get the basics of the site down on paper. An outline of the site should include each section that the site will need to have included, with each section getting described in terms of content and purpose. It should give as much details as possible about what features the site will offer — social networking buttons, commenting, widgets, squeezes, videos, articles, user accounts — everything. The more detail you provide at this stage, the fewer questions and delays there will be during the next two steps.

This is the stage at which you should begin to concern yourself with details like streamlining — making sure that your site will load quickly and not overuse bandwidth if viewed on a mobile device. You’ll also want to note, if you’re using a responsive-design strategy, which content will get display priority as the screen shrinks.

Also remember at this point that you’re creating a page usable by the end user as well as the webmaster. Many websites — especially corporate websites — are designed to be usable by the corporation, and the end user experience suffers. Focus on putting the end-user-relevant aspects first, and organizing the navigation, search, and other functions in a way that the end-user will find intuitive and useful, even if that means that corporate people logging on to do corporate stuff will find it less so.

The client will then receive the outline so they can approve it. If they feel the need to add, remove, or adjust any sections or features, take that into account and adjust your timeline and budget assumptions accordingly. Only after the client has signed off on the initial outline should you agree on a price for the website.

Create Wireframes
If you weren’t familiar, a wireframe is a line drawing of a web page’s layout that allows you to focus on layout without getting caught up in details like color, shape, or other specifics. This is very important, because it’s the part of the process where you determine which content gets the largest amount of page space (and thus what gets the attention of the end user.) If you try to do this later, you’ll have to contend with those other details, and stop thinking in terms of simple spatial volumes — and that’s bad.

First, decide on the level of granularity you’re going to work with — you can have a wireframe that just gives the basic outline of columns and blocks, or you can have a wireframe that shows every single design element’s outline, or somewhere in between. Second, get a list of ‘must have’ elements from the client and check them off to make certain they’re all there. Finally, submit the wireframe to the client for review and stamp of approval, and you’re off.

Design the Site
Once the wireframes have passed everyone’s muster, it’s time to start the actual visual design — probably in Photoshop, though there are plenty of other tools available. The focus on each page should be presenting that page’s key content clearly and without excess. Then, the second focus should be on the navigation: if what they want isn’t here, point them to wherever it actually is and give them a clickable link to it. Fill in the spaces where there will be content with nonsense text (Lorem Ipsum!), and show the results to your client for approval.

That’s a very deceptive paragraph — I almost just left it as it is, but that’s kind of denying the complexity of the process. The fact is that designing is the most challenging aspect of the process, and I’ve written lots of web design articles that talk about it. There’s just no way to cover it in enough depth in the context of this article, seeing as this is a procedural overview — if you want more detail, click the link and read a bit.

Write the Code
Once the design is approved, it’s time to take those pretty visuals you made and turn them into code — depending, naturally, on what kind of system (HTML/CMS/Flash/etc.) you decided to work with earlier. If necessary, you may want to hire someone to turn your design into code, if you don’t feel like you have the chops — but most people who accept the mantle of ‘web designer’ take a bit of pride in being able to code up anything they design. If you do need to hire someone to code for you, decide on it early in the process, and get the designers involved ASAP, preferably no later than the wireframing stage.

(Optional:) Integrate the Website
Once your code is complete, it may need to be integrated with the system you’ve chosen in order to turn it into a functioning website. This may be the CMS you decided upon, or can be a fresh WordPress template, or it can be the use of a tool like Dreamweaver to add more advanced web features to your site. If you have multiple languages working together to produce the site, this step will be long and vital.

Launch and Maintain
Once the site is fully developed, you can keep people coming back to it by keeping them interested with ongoing updates. New blog posts, new photos, videos, music — whatever your site was built to emphasize, keep it fresh and keep ’em coming. This is one of the major advantages of having a CMS in place: without one, you’d better have a tech-savvy client, or be willing to update the site yourself every week or two with whatever new content the client has come up with.

Plan Ahead for Redesigning
No website is forever — eventually, your client is going to want something new, whether it’s added functionality or just a new look. Keep all of your material from this entire process: all of your brainstorming notes, your wireframes, everything. If you come across a new idea that you think would be an effective way to re-present this site’s content, note it and toss it into the site’s folder. When the time comes for a revamp, you’ll be much better prepared to jump in feet-first and whip out a sweet design in a day or two instead of a week or two.

That’s that! If you’ve ever wanted to know what life looks like around your typical web design studio, that’s a pretty good summary. If you have any questions or you think I missed any details, toss me a comment!