This article is about knowing where you are, what to do now, and what to do next. I’m describing a generalized process flow, and exceptions to it are natural.

There are three phases.

  1. Planning / Organizing / Designing
  2. Building / Testing
  3. Deploying / Maintaining

Phase 1: Planning / Organizing / Designing

A. Planning: The core issue, resolve THIS first! 

Every website is there to answer a need. Anyone who thinks they need a website should be able to say in not many words exactly why they need one. They should be able to list the things that the website is meant to accomplish for the business (or project, institution, or individual). The best websites are based on an absolutely clear understanding of that need. The planning period should be treated very seriously. It’s helpful to have a large enough planning group to generate excitement and ideas but small enough to not founder on large group dynamics, 3 to 5 people seems to work well. Two can be fine. If only one person does this task it will not be done as well as it could be.

The timeline can’t be determined until the website is well defined. The COST can’t be determined until the website is well defined. If you aren’t sure why, interview some contractors and tell them your project is an unknown size and contains unknown features, then ask for a quote.

a1: What does it do? Imagine the website as a machine and decide what things this machine needs to do. Generate a concise laundry list of these functions. It should fit on a single page. The schematics for a physical machine might require hundreds of pages to print, but a tight description of what it does shouldn’t require more than a paragraph or two.

Less obvious, but essential, is developing a portrait of your target demographic. Deeply imagine these people and their needs and desires. Without consideration of the site end-user, your design is incomplete.

a2: Are we there yet? A project without measurable goals will fail. Define critical “project landmarks” as bullet points defining the conditions that have to be achieved to call the project complete. Make sure you and any developers share a common understanding of the criteria for success. It should probably become part of any contract. There is no straightforward time period for this process since it depends on individuals and how excited or even ready they are but I would say a week or two of serious consideration should be done to get it right.

Time: One to two weeks

B. Organizing. 
Once we know what the “machine” has to do, we consider what techniques and tools are required to make it work. This might include such prerequisites as reserving a domain and acquiring virtual hosting for the website. The developer will be planning the back end programming.

b1: The big thing that begins here is called Information Architecture (or IA): Every website has things to communicate. IA is the way that a big blob of unstructured information content gets chopped up into categories and subcategories and then organized and positioned as pages within the website.

The content (what the site is here to say) leads to the form: The content determines the navigation! The IA for every site should be unique and arise naturally from the content itself as well as the needs of the site visitors. This is another planning process. It should probably have a lead decision-maker but with at least one other person to be a sounding board, idea sparker and mistake catcher.

Imagine you have to give a 2-hour speech or write a research paper, think of organizing your site content in a similar way. Think of all the ideas and facts your website has to convey to the public: If you were writing that as a paper, or even on a great big white wall, how would you break it up and group it into sections? How would you organize and prioritize those sections? Since these groups and sections ultimately become the navigational interface for your site, you must name them in unambiguous, helpful ways. If you use profession-specific jargon, will people know instantly what you mean? If your target demographic is in the same business they will, and all is well. If not, think of what ordinary people call it instead. Just use the language of the people you are talking to! Always imagine who you are talking to.

Once the IA has been planned you have the bones, the skeletal structure of the site. This is the underlying logical structure of the site, drawn as a bare-bones flow chart it is a site map.

b2: Now, what I call Content Mapping should begin. This means that we make a master list of all the pages, images, etc. that need to be present and we begin systematically accounting for them and copying them to a common area. Where are words that need to be on these pages? Who exactly is responsible? What are the deadlines? Documents are now either found or written for each one. We check them off on the master list as we get them and make sure we are keeping them all in a safe, well-organized place. Part of IA is planning for necessary supporting images. For example, headshots of managers, etc. These planned images are part of the content that must be ready before building.

(This is also where the client realizes to their horror that they have been doing the equivalent of opening random closet doors and just throwing all their documents in for the last two decades. The wise web developer knows this is coming and allows for it in their planning. Om.)

Time: Probably 2 to 3 weeks 

C. Designing – Possible Delay Warning 

c1: Style and Branding. If branding is a settled issue then designing is mostly a straightforward process. But if it needs to be done or redone then we stop here until it is settled. Logos, colors, fonts, the emotional background tone, etc. etc. all these flow from branding and styling. If this is unsettled, the designer has no starting point. They may do a wonderful job of guessing but the right work-flow builds a style consensus first so we don’t waste time and effort.

Fortunately, if you’ve kept to my plan, that isn’t very difficult. Function guides design and you figured out the functions in step one. You also have a path to follow for the styling because you thought long and hard about your target demographic right from the start. If you can imagine them properly you can design a welcoming place. This place is for them, not you. The site will succeed (serving you) only if it serves them first.

We begin by thinking about what this place should FEEL like for your visitors, which has to include the inherent tone of your content. It’s partly who you are talking to and partly what you are saying. As a thought experiment imagine your demographic is older people: In one case your content is about world travel packages, in another, you are discussing estate planning. Clearly they can’t use the same styles.

Style is emotional and beneath conscious thought, but it’s very important. Style is the warm, dry handshake or the cold, sweaty handshake. Get out of your head and into your body. What sorts of fonts and colors speak your words in the right “voice”? The wrong fonts will make you look silly or stuffy because you are talking in a weird, off-target voice. Design so your visitors feel they have arrived at a safe, intuitively approachable, and attractive place worth the trouble of exploring.

When your visitor arrives, they experience on your website that feeling you get when you step into a new restaurant or a possible daycare for your child, for the very first time. The instant optimism or pessimism of the first impression. Design for that moment.

Time: Uncertain

c2: Working together in preliminary building Once the styling is finalized the designer combines the established IA with the style guidelines and works up one or two preliminary designs. These are run by the client who can accept it outright, reject it, or best of all thoroughly and thoughtfully critique it, which gives the designer a clear direction. This is a period of “Getting warmer…colder…” which eventually settles on a complete design. There may be five or six iterations but it shouldn’t be much beyond that or people are not communicating clearly.

If you are the client let me warn you not to cling to the perfection you imagined before there was anything to actually look at. An amorphous idea of perfection stalls many projects. Push for what you want but make sure it’s actually achievable…and important. Not all of your ideas are important. Ground your thinking in practicality and force yourself to be specific about things that need changing.  You may want to view this time as a collaboration with the designer. I don’t mean hover, I mean you should communicate, engage, ask questions and clarify your wishes. Clients frequently experience delays just by repeatedly using a word or phrase that suggests to them an obvious meaning but which means something different to the designer. Question your language. Every single thing the designer makes is a 100% specific thing, and the full design consists entirely of 100% specific things. Designers can’t make something that is kinda, sorta different, they have to make another 100% specific thing. If you refuse to be specific about how you want things changed, you are dragging your feet.

Time: One to two weeks

Phase 2: Building/ Testing

 A. Building.
This phase depends on how complex and extensive the site is but it is relatively swift as long as all the earlier steps were finished. If they weren’t followed this stage can become limbo. The culprit is almost always the client not taking content mapping and content gathering seriously. If we get here and you didn’t put in this work, we stall. Forgive my language but this fucks over both yourself and the designer. Your launch date is now in question and the designer can’t just hang around here waiting for you to get your act together, he/she is on a timeline with a completion date, after which the move on to the next job to keep the money flowing. If you jam them up at this point you DESERVE to pay more. I put deadlines into my contracts for the client to have all content ready to go because it became almost routine to get screwed at this stage.

If we are developing the site on a WordPress platform, we install WordPress on the site server. Then we configure all the settings for it to the needs of the site and install the designer’s theme. Then we install all needed plugins and begin creating all the pages and populating them with the content we banked during content mapping.

Time: Allow one to two weeks

B. Testing.
This phase overlaps with building and probably a bit beyond as uncertainty underlies everything in web design due to device dependency and browser variation.

Phase 3. Deploying / Maintaining

A. Deploying.
Pulling the trigger. This the act of publishing, the moment the thing is out there to look at. In another sense, it is also about publicizing the debut of the website. Background plans for this should start back in the planning stage. If pr and advertising are involved then you obviously must know when this is going to happen.

Time: This is a moment but it should be a planned part of the overall timeline.

B. Maintaining.
This is the process of updating and editing content as needed but also keeping an eye on-site security and related issues.

Time: Ongoing. 

Timeline:
1. Planning / Organizing / Designing = Probably six weeks
2. Building / Testing = Probably two weeks
3. Deploying / Maintaining = Ongoing

Your results may vary. But if you plan for each step your process will be smoother and faster!

 

twitterrssinstagramtwitterrssinstagram

FacebooktwittermailFacebooktwittermail