Imagine, how much difficulty you need to endure to get to your destination without a clear direction. It’s not enough to know where you want to go, you also need to know the process that will 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, it just contains the essentials to design 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.
