Mockups

Definición Rápida

A mockup is a static, high-fidelity representation of a product’s interface. Unlike wireframes, mockups focus on the visual and aesthetic aspects, including colors, typography, images, and other graphic elements to simulate the final product’s appearance.

What are Mockups?

If a wireframe is the blueprint of a house, a mockup is the color model or 3D render that shows how the finished house will look. It’s a static (non-interactive) design that communicates the art direction and visual design of the product.

Mockups answer questions like:

• What is the color palette and how is it applied?
• What typefaces will be used for headings and body text?
• What will the icons and images look like?
• What is the spacing and visual composition of the screen?

They are the natural evolution of wireframes, adding the visual design layer on top of the already defined structure.

Why are they important?

• They visualize the final product: They allow stakeholders and the team to see a realistic representation of how the product will feel and look.
• They drive visual design decisions: They are the playground for defining and refining the visual identity of the interface.
• They serve as a guide for developers: They provide exact visual specifications (colors, sizes, spacing) that developers will use to build the interface.
• They detect visual inconsistencies: They help ensure the visual language is coherent across all screens.

How are they made?

1. Start from a solid Wireframe: Never start a mockup from scratch. Take the approved wireframe as the structural base.
2. Apply the Design System or Style Guide: Use the color palette, typography, icons, and components defined in the project’s design system. If one doesn’t exist, this is the time to start creating it.
3. Replace the placeholders: Swap the gray rectangles for real or high-quality images. Replace “Lorem Ipsum” with the final text content or a very close approximation.
4. Refine the details: Adjust spacing (margins, paddings), font weights, shadows, and other visual details to achieve a balanced and aesthetically pleasing composition.
5. Create variations: Mockups are often created for different interface states (e.g., empty state, error state, success state).

Mentor Tips

• Consistency is key: A successful mockup is visually coherent. Make sure recurring elements look and behave the same way everywhere.
• Design for the worst case: Don’t just use short names like “John.” Test with long names like “Maximiliano de la Torre” to see if your design breaks. The same applies to text.
• Don’t forget accessibility: Check that color contrasts are sufficient for people with visual impairments. Make sure font sizes are readable.
• Prepare for handoff: Organize your layers in Figma (or whatever tool you use) logically. This will greatly facilitate the developers’ work.

Resources and Tools

• Main Tools:
  • Figma: The leading tool for UI design and mockups.
  • Sketch: A popular alternative for macOS.
  • Adobe XD: Adobe’s entry in the interface design space.
• Inspiration and Visual Resources:
  • Dribbble: Ideal for visual trend inspiration (be careful, not everything is usable!).
  • Behance: For more complete design case studies.
  • Unsplash: For high-quality images.
  • Google Fonts: For a huge selection of free typefaces.
• Guides:
  • The Role of Mockups in Design - Nielsen Norman Group