Mockup

As explained in Everyday Data Visualization

A visual prototype of a design that represents its intended appearance at a specified level of fidelity.

A mockup is a visual prototype that shows how a design should look at a chosen level of fidelity. After wireframing, mockups can move progressively closer to a real digital product. section 8.3.3

Use one to compare layouts before building. A dashboard crowded with bar graphs gave way to a clearer calendar view and line charts, making the design easier to judge and approve. section 8.3.3

Choose fidelity according to the decision the mockup needs to support:

• Add only enough color or visual detail to secure agreement on the palette and overall direction. section 8.3.3
• Invest in high fidelity when development will be costly or when stakeholders care strongly about fonts, colors, and interface details. section 8.3.3

A dashboard before construction

A wireframe exposed the weakness of a bar-graph-heavy layout. Replacing it with a calendar showing stayovers, check-ins, and checkouts, plus line charts, produced a direction ready for stakeholder approval. section 8.3.3

Figure 8.6 Sure enough in a surprise to no one, a zillion bar graphs (on the left) are overwhelming and busy. Mariette and I decided to go with the concept on the right instead, with a calendar view showing stayovers, check-ins, and checkouts (with symbols to indicate whether a night was fully or almost fully booked), and a line chart showing adults and children by room type (legends to be decided later).

Compare the overwhelming bar-graph concept with the calmer calendar-and-line-chart alternative. section 8.3.3

How Everyday Data Visualization covers it

How deep it goes

Explains increasing fidelity and effort trade-offs, but stops short of detailed component construction.

Examples

Uses dashboard wireframes, bar graphs, a calendar view, line charts, colors, fonts, and interface controls as examples.

What it assumes

Assumes basic wireframing and design-process knowledge while treating fidelity and effort trade-offs conversationally.

What you can do after

Evaluate layouts and apply an appropriate fidelity level before committing to development.

How it connects

Connects mockups with wireframing, dashboard design, stakeholder approval, and development.

liveBookmanning.com

Read Everyday Data Visualization on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  Design for DevelopersA mock-up is a static visual representation of a proposed interface appearance used for review and refinement.

Compare how 2 books explain mockup →

Related concepts

• UI designused by · UI design is the practice of planning the visual elements and interactive behavior of interfaces through which people use software.
• wireframeproduced by · A wireframe is a simplified schematic representation of an interface’s structure, layout, content, and controls before detailed visual design or implementation.
• user testingused by · User testing is an evaluation method that observes or measures representative users interacting with a product or system while performing relevant tasks.
• HTMLuses · HTML (HyperText Markup Language) is the standard markup language for structuring content and elements in web documents.
• CSSuses · CSS, or Cascading Style Sheets, is a stylesheet language for specifying the presentation and layout of structured documents and user interfaces.

This explainer was generated by Manning's knowledge graph from the text of Everyday Data Visualization. The section links point to the parts of the book it draws on.