How To Plan Great Designs: A List of Design Deliverables

Graphic. The title, "How to Plan Great Designs," typed over a photo of a desk workspace with UI wireframe cards, an iPad with mockup sketches, and a sticky note.
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin

Great design isn’t something that happens instantly. Successful print and web designs utilize strategies to ensure the design is actually satisfying user goals. Fortunately, several popular planning methods help to develop the strategy that goes behind the design. Each planning method results in a different graphic or web design deliverable.

Methods for Planning a Design & Their Design Deliverables:

  1. Site map
  2. Content map
  3. Wireframe
  4. Mood board
  5. “Style tile”
  6. Mock-up
  7. Prototypes

Site Map

Any website design should begin with a site map. A site map (also spelled “sitemap”) is a macro-level illustration of the hierarchy of web pages within a website. This web design deliverable includes primary and secondary pages that are found in navbars, footers, and other navigational elements.

Drawing a site map is simple. Designate a starting point, often shown as a labeled box or a circle at the top of the document. This starting point is the index or homepage. Then create the first-level, primary pages and connect them with a line to the starting point. These are all parent pages in the hierarchy. Child pages occupy a second-level, using created by a vertical shift or a horizontal indentation in the connecting lines. Continue drawing as many pages and levels as needed. However, best practice follows the “three-click rule”: content should always be accessed within three clicks. At four clicks or more, most users get frustrated, feel lost, and abandon the task, resulting in a negative user experience.

Designers use site maps to list the number of pages required and explain relationships between pages. Most websites are hierarchical. Hierarchical layouts allow users to enter the website at any point and travel through various pages in no particular order. Conversely, linear layouts require users to enter at a specific point and proceed through pages in a certain order. Web forms with multiple parts might use linear layouts to break the content down into more manageable pieces. Site maps might indicate linear layouts using lines with an arrow terminus, or page labels preceded with numbers. Hybrid websites have both hierarchical and linear layouts.

Nearly all website designs deliver a site map too.

Examples Of Sitemaps:

Content Map

content map is a macro-level illustration of the content of web pages within a website. Each box contains a label of the page’s title, plus a few words describing the page’s primary topic, important technical elements, and a call to action. Descriptions are short and sweet, just one to three words to capture the subject. Designers use content maps to list content requirements for a design project and plan content strategy at a macro-level.

I find content maps to be useful checklists for what I need to make myself or request from a client. Plus, it helps me identify a call to action for each page so users don’t encounter “dead ends” on a website.

Content maps are a useful design deliverable not limited to any media; content maps work for graphic designs, website designs, books, layouts, or anything else organizing written information.

Example Of A Content Map:

Wireframe

wireframe is an illustration of a particular web page’s layout. Designers use wireframes to explore design elements and layouts without the potential distraction of typography, colors, textures, and graphics. This is another popular web design deliverable.

I find wireframes helpful to arrange a page’s visual hierarchy. Elements with great importance occupy more space in the layout and the premium positions within a layout. For websites with Western readers, most web page layouts adopt the F-pattern. Because users start at the top of a page and read from left to right, designers place the most important elements to the top left of a layout. If a web page is long with lots of content, more important content sits “above the fold”—what users can see immediately on open, without scrolling down. This portion of the web designs needs to be compelling, intriguing, and inviting to users.

Rounds of revisions to wireframes may increase the detail. Some wireframes are so detailed that they are practically static mock-ups of a webpage. However, initial wireframes should be light on detail and focus on form instead. I try different strategies for drawing wireframes. Sometimes I’ll work with pencil and paper to rapidly draft ideas for layouts. I find this method pushes me to invent vastly different layouts. Other times, I’ll work with a program, like Adobe Illustrator, for creating layouts where precision is important or there are a lot of repeating elements. Working with a program also allows me to refine and style the wireframes quickly for client presentation too, whereas my hand sketches can get quite messy!

Examples Of Wireframes:

Mood Board

Mood boards are probably one of the most recognizable design deliverable and one of the easiest to make, too. A mood board (also spelled “moodboard”) is a collage of various images, graphics, typographic elements, and textures that illustrate a concept or mood. Designers love to use mood boards to visually explain a brand and the feelings a brand evokes. Whereas wireframes focus on the layout, sizing, and positioning, mood boards focus on the typography, colors, textures, and graphics. Mood boards are a quick tool to identify conceptual and/or visual themes. Some mood board can even summarize the client’s final branding guidelines.

Mood boards provide a macro-level perspective of a design that allows both designers and clients to identify a direction(s) without investing too much time in detailing a design that doesn’t meet the client’s wants or needs. This is especially useful when a client isn’t sure how to describe their aesthetic or wants to see a variety of very different ideas.

Examples Of Mood Boards:

Style Tile

style tile is a simple, bare-bones mockup of the typography, colors, graphics, and textures for a website contained in a single image. Style tiles usually feature “Lorem Ipsum” text to illustrate the size, font, and color of a headline versus body copy; accent and background colors; potential icons or other core graphics; and texture, if any. Style tiles do NOT mockup any particular webpage or web element, but rather provide a very high-level preview of how the moodboard ideas might look if implemented. Sometimes, mood boards might include style tiles to preview a blog’s feature images, iconography, or other notable branded elements.

Style tiles are useful web design deliverables.

Examples Of Style Tiles:

Mock-Up

mock-up (also spelled “mockup”) is a micro-level illustration of a particular web page’s layout and aesthetic. They are essentially a combination of wireframes and mood boards. Mock-ups arrange key containers, columns, call-outs, sidebars, and navigational elements, as well as showcase typography, images, graphics, colors, and textures. They are first drafts to the actual website. With just the addition of the client’s actual content, a mock-up is an accurate representation of a final web page.

Mock-ups are useful both as graphic design deliverables as well as web design deliverables. The advantage of mockups is that they illustrate the website’s aesthetic and content without the distraction of coding. They are “front-facing” and easily understood by clients, who don’t need to know all the intricate details of development.

Examples Of Mock-Ups:

Prototype

prototype is an interactive mock-up of the website’s layouts, aesthetics, and client content. It assembles all the parts and represents a live first draft of the final end product. Prototypes are useful to designers because they help identify issues with sizing, responsiveness, navigation, customer journeys, or other problems that weren’t evident with the static mock-ups. Prototypes, therefore, are the last planning tools for a design. The advantage of prototypes is that can be modified and refined until completion. Therefore, prototypes are very useful web design deliverables.

Examples Of Prototypes:

How to Use These Planning Tools

Sitemaps, content maps, wireframes, mood boards, style tiles, mock-ups, and prototypes are all great planning tools for graphic designs. Each design deliverable allows the designer to focus on a core element of the strategy behind a design:

  • Sitemap = site hierarchy, page relationships
  • Content map = content strategy
  • Wireframe = visual hierarchy
  • Mood board = aesthetic
  • Style tile = aesthetic
  • Mock-up = static draft
  • Prototype = interactive draft

These planning tools and design deliverables are useful for designers and clients to develop a strategy that satisfies each party with an efficient use of time and resources. They can also be great relief tools for artist’s block! Consider trying one, some, or all of these tools and design deliverables in your upcoming creative projects.

Save The Infographic Version Of This Post!