wireframing

Gergő Pintér, PhD

gergo.pinter@uni-corvinus.hu

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: [1]

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: [1]

design prototyping

Interaction Design Foundation [2] | 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: [1]

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: [1]

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: [1]

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

[1]
L. Bruton, “What is wireframing? A complete guide.” https://www.uxdesigninstitute.com/blog/what-is-wireframing/ , 08-Sep-2022.
[2]
Interaction Design Foundation, “What are prototypes?” https://www.interaction-design.org/literature/topics/prototypes , 17-Oct-2019.

more about UX design