Imagine the difficulty of getting to a destination without a clear direction. It’s not enough to know where you want to go. You also have to know the process that’ll get you there.
Every design project should start with a design process. Having a design process in place before you begin will help you overcome any confusion and distractions along the way. You’ll be able to focus on your task at hand and execute your vision with clarity and efficiency.
There are many design processes. But very few are simple, practical and useful. The design process I want to share with you is one that meets all those qualities. It has no fluff, just the essentials to designing an outstanding website.
Content
The first cycle of the design process is content. At the heart of every website is content. It’s why users visit your site and what keeps them coming back. Before you even think about design, you should have a clear idea of what kind of content you want on your website.
The purpose of starting a website in the first place is to share your content with others. With a website you’re able to reach a worldwide audience. But in order for your website to have an impact on others, you need to have content that’s interesting, informative and useful.
You also have to decide which group of people you want to target. This will keep the subject of your content focused. The more focused your content is, the more value you’ll be able to offer your users. By offering focused content, users can rely on you as a valuable resource for your niche.
Content consists of text, images, video or other media. It’s best to have at least a high level concept of what kind of content your site will have before you start with information architecture. You can develop your content before the information architecture cycle if you know exactly what your site will have, or you can do it after if your site becomes clearer that way.
Either way, it’s important to develop all of your content before you get to the visual design cycle. That way the designer can create pixel perfect mockups without waiting for the content and without adding extra design iterations to the process. Once you know what kind of content your site will have, it’s time to figure out how to organize your content on each page.
Information Architecture
Many designers skip this crucial step and go right into visual design. Or, they try to combine the information architecture and visual design cycles to do them simultaneously. This can have negative consequences on your website in the end.
Creating quality content is one thing, but making it easy to find and consume is another. The information architecture cycle of the process involves structuring and organizing the content page by page in a way that users can easily understand. If users can understand your navigation and layout, they should have no trouble browsing through your content.
Wireframes help guide the navigation and layout design. Wireframes are low fidelity blueprints that show the placement and ordering of the content on each web page. They are often done iteratively until all stakeholders reach a consensus.
Designers can also do user testing on wireframes so that any information architecture problems overlooked are found before moving on to visual design. Whether a design needs testing, depends on the skill level of designers on the project, the size of the project and the amount of time available.
Visual Design
When the visual design cycle starts, the designer uses the content and wireframes to design pixel perfect mockups. Pixel perfect mockups are high fidelity composites that show how the product will look with the content and information architecture together. They are also done iteratively until there is a consensus among stakeholders. Pixel perfect mockups are an important part of the process because they force you to name and clarify all unknown factors before moving into development.
The reason you want your mockups to look perfect before moving into development is because once it’s in development, any changes made to the design can cost a lot time and money. Making changes to the design during the IA or VD cycle is less costly because doing so is relatively quick and easy. Every little thing on the website requires code. And programming the code requires a lot of time and effort. Changing the design is not as easy for a developer, as it is for a designer. That’s why you never want to iterate in the development cycle.
Development
Once the development cycle begins, the developer should have the pixel perfect mockups in their hands, along with the text, images and graphics in them sliced and ready. Slicing is a necessary step that allows the developer to program everything you see on the mockups into a working website.
Sometimes pixel perfect mockups aren’t clear enough for the developer to understand your design. For instance, if your design has advanced interactive functionality, the developer might not notice this unless you point it out. This is why if your design has complex functionality, well-written design specifications are necessary to describe how the design will work.
The success of the development cycle will likely depend on how clear the pixel perfect mockups are to the developer. If they’re communicated clearly, but the developer’s version of your mockups still doesn’t match how the mockups actually look, then that probably means there’s a problem with the alignment. If this happens, make sure to communicate the exact pixel spacing to the developer. Ultimately, the developer’s final product should look exactly like the pixel perfect mockups.
The journey to creating an outstanding website is one that will take time and energy. Working hard might get you there eventually, but working smart will get you there sooner and with better results. By following this web design process you’ll be able to work smarter. You now know what it takes to get to where you want to go and how to get there. This web design process only shows you the door. Walking through it is up to you.
Book
Affiliate
Hi Anthony, thanks for another interesting post.
I like how you’ve distilled the design process down to the essentials. However I have to disagree with you on the order of steps 1 and 2 – I believe IA has to come first. Especially for a new website (as opposed to a redesign) it’s highly likely that most of the content won’t exist yet. How do you know what you what text, images and video your content team needs to create? By starting with the information architecture.
In your diagram you state the goal of the Content cycle as follows: “To decide what the website will be about, its purpose, who will visit and how it will benefit them.” We would normally do this in a Concept phase where we work out the objectives for the site. This takes place before any content work, and even before the IA.
Let’s see what the other readers think about this, feel free to comment.
Btw there’s been some great stuff on UX Movement recently, keep up the good work!
Cheers, Jussi
—
Jussi Pasanen | Volkside | http://www.volkside.com/contact/
Interaction and Information Design, User Experience and Usability
Jussi,
You make a good point. I don’t think the relationship between the content and IA cycle will always be linear in terms of developing content. Instead, they’ll likely interchange. It’s possible to develop some fundamental content that you know will exist before IA, but sometimes new ideas will spark during the IA process, which calls for new content to be developed. There are certain pages like the home page where you can’t develop the content for it first. For the home page the IA should come first and then the content. This article alludes to that idea: http://blogs.sitepoint.com/2006/02/01/information-architecture-why-the-first-page-comes-last/
I definitely think that content and IA can almost merge as one cycle in the process. However, there’s one fact about content that remains. The designer needs to have at the very least a high level concept of what content will go on the site in order to do wireframes. This is akin to the “concept phase” you talk about.
Another fact is that pixel perfect mockups can’t happen without the actual content. If you decide to do mockups before the content is created you’ll add extra design iterations to the process because the content will have to be added to the design and the design will need to be adjusted to fit the content.
The other thing is that I don’t think content creators should expect their text and images to look exactly as how they created it. I think most of the time designers will need to edit text or resize images in order to make the content fit beautifully on the page. This should be expected. Overall, I think people need to be flexible, but at the same time, there are certain things that need to happen to successfully build a website.
Pingback: Grafika – Web Design Process (and deliverables) « UX Labs
I think this is a fairly reasonable way to break down an ideal web development process. The company I’m working for right now definitely needs to improve in the Information Architecture stage.
However, I don’t think the web development process should be locked into these steps, I think it needs to become flexible. Some of the things that I would do differently include not demanding “pixel perfect” mockups in the Visual Design stage, and not limiting the Development stage to one iteration.
Labeling mockups as “pixel perfect” leads to clients expecting their website to look exactly the same in every environment. But web design is not print design. The web is a flexible medium and attempting to make a design “pixel perfect” increases development time as well as causing developers to use techniques that may sometimes go against best practices just to get a handful of old browsers to render a website exactly as the mockup.
Ideally there will be a different person, with different training, fulfilling the role for each stage, however each person should understand what the others do and the whole process should be a collaborative effort. I wouldn’t limit development, or any other stage, to one iteration. For example, if a design change needs to be made in the development stage, the developer should have the knowledge and skill necessary to make minor changes, and consult with the designer on major changes. The same goes for every stage of the process.
Hi Anthony, thanks for your reply.
I support your notion that the order of the IA and Content phases is less important than the facts that a) both are essential for a successful project and b) they should take place before the visual design and development.
In my experience much of the content work is regularly delegated to the client (due to scope and budget constraints), which often means that the content production is delayed and falls out of step with the rest of the project. When this happens designers and development have to do much of their work relying on a page or two of “sample” content and litanies of lorem ipsum. Naturally, the quality of the ultimate website is compromised.
The SitePoint post is good and it makes an interesting reference to this article on ALA, which in turn reminds me of 37signals’ notion of “Epicenter Design”.
However, contrast those with this 2005 article on SitePoint: Wire Frame Your Site. (Note: Matt’s initial sitemap “wireframe” is what I would call an IA.)
There’s really two different ways to approach this: top-down and bottom-up. What’s most appropriate depends on the project, and if you’re really savvy (or work on a large project) you can probably even combine the two.
Thanks again for an interesting topic.
Cheers, Jussi
Ps. I must mention our new tool Wirify here – it’s a bookmarklet that lets you turn any web page into a wireframe in one click. It may be of interest to your readers.
–
Jussi Pasanen | Volkside | http://www.volkside.com/contact/
Interaction and Information Design, User Experience and Usability
Pingback: Links der Woche | Tobias Glawe
Pingback: Una metodología de diseño que cualquiera puede seguir | Marca aCMe – Pablo Muñoz
Nice article.
I would add an extra step: “Testing and Revising” you work. It’s important to find errors or refine the interface based on users feedback.
Good post. I like the ‘content first’ notion – too often IA moves forward with ‘imaginary’ content and templates end up being barren wastelands when no substantive content emerges.
To be fair, I don’t even know how someone could start without figuring out their content first. The content is where I draw inspiration from for the rest of the website’s design!
Thanks, very informative post!
Love the post!!! This is the process I already follow, pretty much! 🙂
You didn’t mention SEO in your process, is this really an element you would handle after the website is ready? Ok, off-page, link building, represents 3/4 of the task, but why neglect optimized directory structures, keywords/page focus, etc?
I’m glad you included the IA step. That seems to be the step that I gloss over the most because it’s easy to forget about it in the excitement of getting started. It’s a very important one though because when the site is lacking this step, often you step back at the end and think to yourself ‘There’s something just not right’, but you can’t quite put your finger on it.