Mock-ups 📝

In UI Design it is most important to demonstrate how the user will interact with your application. Sketches, wireframes, and mock-ups are used at different stages of development to plan and visualise the interface.

• Sketches

  • Quick, freehand drawings

  • Used early to explore ideas

  • Focus on layout and basic function

  • Not detailed or to scale

• Wireframes

  • Structured, simplified layouts

  • Show placement of UI elements (buttons, menus, images)

  • Often in black and white or grayscale

  • Help define content hierarchy and functionality

• Mock-ups

  • High-fidelity visual designs

  • Include colours, fonts, spacing and branding

  • Look like the final product but aren’t interactive

  • Used for client presentation or UI testing

Key features of mock-ups:

• Visual accuracy:

  • Display exact colours, fonts, spacing, icons, images, and branding

  • Represent the final visual style of the UI

• Not interactive:

  • Unlike prototypes, mock-ups do not include clickable elements or animations

  • They show appearance, not behaviour

• Used for feedback:

  • Help clients, stakeholders, and users understand what the final product will look like

  • Allow for early visual testing and feedback before development begins

• Created with design tools:

  • Common tools include Figma, Adobe XD, Sketch, or Canva

Purpose in UI design:

• Communicate detailed visual design choices

• Support decision-making about colours, typography, and layout

• Identify visual issues before coding

• Bridge the gap between wireframes and prototypes

For Digital Solutions:

• an essential way of demonstrating how the success criteria have informed your design decisions.

• demonstrate your understanding of useability principles and visual communication