First who we are: account managers and business developers at web design agencies. This process is geared towards bigger agencies, however it can be applied to freelance and smaller shops in theory.
The important pieces
Web design projects tend to be unique in nature, however it is important to have a basic process that can be applied in most cases. This process is executed in a linear fashion starting with information and ending in code, but requires iteration loops at each step.
- Information – The organization of content and data.
- Design – The face that communicates information.
- Code – The guts that power design and information.
Let’s break them down from a high level – project complexity requires flexibility but this process works to manage the 80%.
Organization of Information
A website in theory is nothing more then a fancy way of communicating information – so we start with it’s structure (commonly referred to as information architecture or ia).
How are the pages organized
Before we know what to design and code we need a road map. For basic sites this is as simple as a hierarchical representation of pages – lets look at a common restaurant website. The information is simple – users need to know what it is, where it is, and when it’s available. A budget restaurant may look like this:
What goes on each page?
The next step is figuring out what data is important for each page. Think conversion, you have 8 seconds to give your user what they are looking for. If we take our restaurant example – our home page architecture may look like this:
Writing and Gathering
Arguably the most difficult part of building a website is writing the copy and gathering content. Get started early in the process and let content drive design. Remember, a website is a fancy way of communicating information. The message and direction you give to your users defines your success so focus on writing first. The best design cannot make the worst content effective. A detailed outline will organize all the necessary pieces – stick to the plan and avoid adding content not identified in your outline.
Wireframes determine placement
Now that we have a clear understanding of each page and their respected content areas – we need to focus on placement. Often times this can be done right in your favorite design program, but there is benefit to using something less formal. As designers we see a blank photoshop canvas and immediately start visualizing aesthetics – this can be detrimental. I like to start on paper or something like Omnigraffle or Vizio to avoid distraction and move quickly.
Getting the inspiration and assets
Getting inspiration and gathering supplies is up for review as every designer does it differently. Whether you do this before or during design it inevitably has to happen. Figuring out what everyone else is doing, how you differentiate, select colors, textures, fonts fuels the design process.
Mock up the pages – changes to paper are easier then changes to code
All of your important pages should be mocked and iterated before you start coding. Get them as close to perfect at this level so that coders do not have to deal with design changes during build (specialization). Adjusting round corners for a button in photoshop is easier then adjusting border-radius in css (I know this doesn’t sound like a huge time saver, but lots of little changes like this pile up on a coder’s plate and cause wasteful and annoying rework).
Bringing it all together
A coder’s job becomes much easier when they have a clear blueprint to work from. Think back to building a house – contractors would be lost without the architects plan, websites are no different. By providing coders with ia mapped content and detailed mock ups you eliminate any guesswork from their job. They can focus on what they do best – making it work pragmatically.
A specialized process
The key to a successful web shop is efficiency and consistency, a refined process will help you get there. The key is developing a process that makes it easier for each person to do their part without losing site of the final product.
