Understanding the underlying process that governs the design and development cycles of a typical client project or product design is incredibly important for working efficiently and communicating effectively with clients and peers.
Client Interview
We discussed the Client Interview, when a designer talks to the client about what problems they are trying to solve with their website. The intent of the client interview is to get a clear sense of who will be using the site and what business goals the site should be facilitating.
The Client Interview isn’t necessarily just one meeting. Sometimes projects take multiple meetings to dig out all of the goals for the project. This phase is important because it informs the site author about what experiences they are designing.
Discovery
The second phase of the design process is discovery. During this phase the designer collects information about the client, the client’s competitors, and the site users. The goal of this phase is to find comprehensive solutions to the problems and objectives that the client outlined during the client interview and to do that, an author needs more information.
The amount of time that this phase requires can vary greatly. Some clients have only a general idea as to what they are trying to achieve and that can mean that the site author will need to fill in all the gaps for them.
Drafting the Creative Brief
The creative brief is a document that outlines the scope of the project. It does several things:
First, the creative brief states the client, their needs and their goals.
Second, the creative brief outlines the problems that the designer is solving and the business goals that the author is facilitating. This is very important for managing the client’s expectations. They need to know exactly what the designer is going to do for them.
Third, the creative brief specifies the strategy that will be employed to solve the client’s business problems. This is important for informing the client about the overall plan for creating a functional site.
Finally, the creative brief lists the production items that the designer will complete to implement the strategy. In the creative brief, this list is very general. Don’t write line-item budget estimates, instead describe in as few words as possible the specific production items that will be produced, e.g. “wireframes, mockups and markup for the homepage, a subpage template and a calendar page”.
Once the creative brief is complete, and the client and designer have agreed on common goals and how to meet those goals, the visual design process can begin.
Wireframes
Wireframes are minimal, structured designs that show the content hierarchy. They are often confused with thumbnails because they look somewhat similar, but in truth wireframes serve an entirely separate function.
Wireframes are usually drafted in Illustrator or a dedicated wireframing app. This class is using Illustrator.
When drafting a wireframe, the designer needs actual content that will appear on the site. The designer then arranges the content in the wireframe to show the content hierarchy. This means that the wireframe doesn’t dictate layout for the final site design. Even though the wireframe is designed, it is designed to illuminate the way that each content element is related to the other.
Usually, content importance is determined by its vertical location on the wireframe. Elements higher on the page are more important and less important elements are lower on the page. Items like the site logo and primary navigation are usually located in the same place as a “common” website, i.e. the logo is in the upper left corner and the main nav is a horizontal bar just below the logo.
Related content elements are usually grouped together to show how they are related and unrelated content items are separated vertically into sections.
By grouping elements and creating a clear hierarchy, the designer can communicate the how the pieces of content fit together.
Thumbnails
Thumbnails are small sketches of the site design. They are usually only a few inches in scale and are drawn very quickly. Think of thumbnails as a way to quickly get ideas on paper and to communicate those ideas to other designers and developers.
A designer can use thumbnails to think through any part of their design. For instance, They designer might draw a thumbnail of the entire homepage and then draw a thumbnail of just the navigation. Thumbnails are appropriate for thinking though a full design or any part of the design.
Mockups
Wireframes are used to establish content hierarchy and structure. Thumbnails are useful for solving layout problems and for quickly drafting design ideas for specific interface elements. Once those two items are complete the designer can begin creating a visual mockup of the final site design.
Mockups are Photoshop documents that look (more or less) exactly how the final site will look at a fixed pixel size. Mockups include final font choices, layout decisions, and all other design details that flesh out the site into a final product. A mockup is literally an image of how the site will look.
Many designers don’t create mockups, they “design in the browser”, but I find mockups useful for a few reasons:
-
Clients often can’t see the forest for the trees. If shown a half coded site, most clients don’t know how to interpret what they are seeing. Mockups are a fairly quick way of finalizing a visual design without having to write any code.
-
I find that solving visual design problems, coding problems at the same time is far more difficult than separating the two into a two step process: solve the visual problems first and then the code problems. I think that because of this difficulty, designer who “deisign in the browser” tend to not expand on the visual devices that the browser provides, so all of their site tend to be minimal, flat, and somewhat unimaginative.
-
Clients often have specific brand requirements and a distinct visual presence. I find that integrating that brand and presences into a web design far easier in a purely visual design environment.
Markup
Markup is the step when the designer converts their visual mockup into an HTML/CSS/JS website. The visual assets are exported from the PSD and the code is written to recreate the visuals in web standards code.
Publishing
Once the markup is complete then the site needs to be populated with content and published to a hosted server.
Often a design is integrated into a content management system (WordPress, Joomla, etc.) and then content is entered directly into the backend of the CMS.
When a site doesn’t require a CMS, the pages are then built by hand using the marked up templates and published directly to the server.