wireframe

  • a wireframe is an outline / blueprint / concept art of a webpage or application
  • can be hand drawn on paper or built out digitally
  • provides visual understanding of page structure, layout, user flow, functionality and intended behaviours
  • presented to stakeholders before the interface is coded

source: (Bruton, 2022)

wireframing

  • responsibility of the UI/UX designers
  • occurs during the exploratory design phase
    • experimenting
  • iterative process
  • iterations are presented to the stakeholders to gain feedback
  • some professional tools: Figma, Balsamiq, Sketch

based on: (Bruton, 2022)

design prototyping

Interaction Design Foundation (Interaction Design Foundation, 2019) | CC BY-SA 4.0

types of wireframes

low-fidelity
mid-fidelity
high-fidelity

low-fidelity wireframe

  • first sketch
  • simple
  • rough visual representations of a webpage or application
  • don’t consider scale or pixel accuracy
  • don’t include actual content, typography, colors
    • image: boxes with an X
    • text: scrible
  • might be hard to undersand

source: (Bruton, 2022)

mid-fidelity wireframe

  • provides more precise representations of the layout
  • for exploring design ideas, establishing spacing and buttons, and user flow
  • still don’t include images, typography or detailed content
    • but show more details regarding components and features
  • no colors, grayscale
  • usually made with digital tool

source: (Bruton, 2022)

mid-fidelity

hi-fidelity wireframe

  • exploring complex concepts, finalising design
  • provides pixel-specific layouts
  • usually have actual images and written content
  • created using a digital tool
  • feature actual typography, detailed features, design elements (logos) and menu systems
  • may presented as initial prototypes
    • interactive, clickable

source: (Bruton, 2022)

high-fidelity

wireframe map

shows user flow, ~ user story map flow

sitemap

  • similar to a wireframe map but for web sites
  • for design, documentation
  • also for machine processing
    • for web scrawlers
    • sitemap.xml

sitemap as wireframe map

some free tools

references

Bruton, L. (2022). What is wireframing? A complete guide. https://www.uxdesigninstitute.com/blog/what-is-wireframing/ .

Interaction Design Foundation. (2019). What are prototypes? https://www.interaction-design.org/literature/topics/prototypes .

more about UX design