Wireframe diagrams

From Knowledge Kitchen
Jump to navigation Jump to search


Wireframe diagrams are created to show the the types of content and functionality contained in each screen of a software application (including web sites). These are generally drawn as crude sketches with black-and-white boxes and placeholder text, occasionally with a small amount of color or real content (images or text) included for emphasis or clarity. It is understood that wireframe diagrams are not meant to indicate what the final visual design or actual content of the application should be. The actual content and final visual design of each screen in the application are determined in the visual design and copywriting phases of software development, which usually occur once the wireframe diagrams are considered complete.

What wireframe diagrams are meant to indicate

Wireframe diagrams show the blueprint for:

  • what type of content will be on each screen
  • the approximate position and size of each piece of content
  • any functionality associated with piece of content

Wireframe diagrams often include annotations or notes to help explain any important details that may not be obvious simply by viewing the diagram.


How many wireframe diagrams are necessary

Since many screens in an application may follow the same general template, usually only one example of each type of screen is diagrammed. In most applications, there are unique wireframe diagrams made for at least the following:

  • Home screen
  • One wireframe diagram for each level of the site map
  • One wireframe for each unique screen that don't follow a common template (such as for Search Results screens)


Wireframe considerations

Questions to be resolved when drafting wireframe diagrams.

Navigation

Common navigation challenges to think about when designing wireframes:

  • Balance between quantity of images versus text
  • Intuitive/obvious navigation among pages
  • Primary navigation
  • Secondary navigation
  • How to represent each form of navigation
    • horizontally across the top
    • vertically down the left side
    • hidden in a "hamburger" menu

Importance

More important content should "stick out" more than unimportant content. This is indicated in wireframes through:

  • size
  • placement

Important content is usually displayed larger than less important content. This applies to both text and imagery. Generally-speaking, content that is more important is placed towards the top-left of a page, while content that is less important is placed towards the bottom-right of a page. This order is, of course, flipped horizontally for pages in languages that flow from right -to-left, since this strategy is (perhaps mistakenly) based on assumptions about how people read text.

Content layout

At a bird's-eye view, most web pages have a predictable set of content areas. Determining which top-level content areas appear on each page, and the details and layout of the content that will be placed within each area are included in wireframe diagrams. Top-level content areas of a page and the types of sub-components they often include are often a mix of any of the following:

  • Header
    • logo
    • primary navigation
    • secondary navigation
    • page title
    • breadcrumbs
    • account-related links
    • search form
    • utility navigation
  • ads
  • Main content area
    • hero space
    • carousel
    • page description
    • primary call-to-action
    • featured article
    • tiles of articles
    • ads
  • Left nav
    • primary navigation
    • secondary navigation
  • Right rail (a.k.a "the gutter")
    • most popular articles
    • most recent articles
    • related articles
    • secondary calls-to-action
    • ads
  • Footer
    • copyright notice
    • other legalese
    • site map
    • links to info about the company/individual/organization
    • links to social media pages

Consistency

Many large web sites use a single layout template that is applied to all pages at a given level of the site map. For example, the Home (1st level) page may follow one layout, while the sub-pages of the Home page (2nd-level pages) follow a second layout, and the sub-pages of each sub-page (3rd-level pages) follow a third layout.

Small web sites with few pages often have a larger page-by-page layout differences, however, they too often have a lot of shared design features on all pages.

Keeping up with the Joneses

Most web sites do not re-invent the wheel. They follow well-established norms of how web sites are expected to look. This gives visitors comfort, since they don't have to learn how a brand new interface works every time they visit a new web site. It also allows designers of sites to take shortcuts and save resources. You could say that most web sites are simply trying to "keep up with the Joneses"

Tools for making site maps and wireframes

Examples

Simple example

The following diagram is relatively generic. It is a fine diagram for a generic page with a simple layout that contains an image carousel with a call-to-action, plain images and text content in a 3 column layout.

  • All content and functionality is conventional and obvious, so no explanation is needed
Practice CSS wireframe diagram spring2015.png

Wonderful example

The following diagram is a fantastic wireframe that accommodates a somewhat sophisticated, but not unusual, layout with a right rail and several functional "widgets" on the page.

  • content is well organized and clearly communicated
  • Links are clearly indicated with underlined text
  • All details of the Job Search form is indicated in the diagram
  • Almost nothing related to content areas, layout, or functionality is left to the imagination
  • An annotation (the aqua stake icon with the number 1 in it) indicates an area where there is a written note in a separate document that explains any non-obvious functionality or content.
Job seekers website wireframe.jpg

Another good example

This example, like the previous, shows a nicely designed wireframe that clearly explains layout, content, and explains any usual functionality with annotations. In this case, the annotations are included to the side of the document for quick reference.

Website wireframe example.png

What to avoid

The following diagram is a poor example of a wireframe diagram, for the following reasons:

  • the buttons have rounded corners
  • it is colorful
  • these facts can draw attention to visual design and distract attention from the concepts the diagram is attempting to convey
Event planning home page wireframe.png

Wireframe and flow diagram combination

Sometimes, for complicated applications, it's helpful to communicate how a user might navigate from one screen of a website or app to another. In these cases, flow diagrams are usually created for that purpose. However, a flow diagram that includes wireframes can help capture an entire project's layout, content, functionality, and flow in one place.

Emotion recognizer app flow diagram with wireframes.png