arrow_back Artifacts

Wireframes

A wireframe is a low-fidelity visual schematic of an interface, similar to an architect's blueprint. It focuses on structure, content hierarchy, and functionality, deliberately ignoring visual elements like colors, typography, or images.

artifacts schedule 2 min read
toc Table of Contents expand_more
Info Icon Definición Rápida
A wireframe is a low-fidelity visual schematic of an interface, similar to an architect’s blueprint. It focuses on structure, content hierarchy, and functionality, deliberately ignoring visual elements like colors, typography, or images.

What are Wireframes?

Imagine you want to build a house. Before deciding on wall colors or furniture types, you need a blueprint that defines where the rooms, doors, and windows will be. That is exactly what a wireframe is for a digital product.

It is a visual guide that represents the skeleton of a screen. Its main purpose is to:

  • Define the structure: Where does the navigation go? And the main content? And the buttons?
  • Establish the hierarchy: What is the most important thing on the screen? What should the user see first?
  • Plan the functionality: What does each interactive element do?

They are characterized by their simplicity: boxes, lines, and simple text (often “Lorem Ipsum” or placeholder text) are used to represent the elements.

Why are they important?

  • They save time and money: It’s much faster and cheaper to make changes in a simple schematic than in a visually detailed design.
  • They foster collaboration: They allow the team (designers, developers, product managers) to align on structure before investing in visual design.
  • They focus discussion on usability: By eliminating debate about colors or images, the conversation centers on whether the layout of elements makes sense for the user.

How are they made?

  1. Hand sketch (Low-Fidelity): The first step should almost always be on paper and pencil. Draw boxes and lines to represent the screen elements. Don’t worry about details. The goal is to explore ideas quickly.
  2. Digital Wireframe (Mid-Fidelity): Once you have a clear idea, move it to a digital tool like Figma or Balsamiq.
    • Use gray rectangles for images.
    • Use lines for text.
    • Use standard UI elements (buttons, dropdowns) without styling.
  3. Add annotations: Briefly describe the functionality of interactive elements. For example, next to a button, a note might say: “Takes user to their profile.”
  4. Iterate and get feedback: Show the wireframes to the team and users. Collect their comments and make necessary adjustments.

Mentor Tips

  • Don’t fall in love with your wireframes: They are a thinking tool, not a work of art. They should be quick and disposable.
  • Use real text when possible: Although “Lorem Ipsum” is useful, using real (or at least realistic) text helps validate whether the allocated space is sufficient.
  • Maintain consistency: If you use a certain type of box for a button on one screen, use it on all screens.
  • Focus on the flow, not just the screen: Think about how the user gets to this screen and where they will go next.

Resources and Tools

Tags

ux artifact ui-design junior