Hi-Fidelity Mockup Examples

A mockup is a visual design draft used to represent the information architecture, content and basic functionalities of an application or website in a static way. Unlike wireframes, mockups provide visual details, such as colors, imagery and typography. At it's core, design is the process of enhancing a person's experience by understanding their behavior.

View Options

  • Option 1: All 7 mockup examples were uploaded to the InVision App for easy review.
  • Option 2: A responsive version of the above screen has been created in Bootstrap for review.
    • Resize your browser to see the tablet and mobile versions.

Tools

  • Anima: a Sketch plugin that allows you to design and publish responsive websites.
  • InVision: a collaboration, interactive and prototyping tool.
  • Sketch: a digital design toolkit.
 

Overview

Interaction design isn't about how interfaces behave, it's about how people behave, and then adapting technology accordingly. Essentially, interaction designers are only concerned with the specific interactions between a user and a screen including every element that a user might swipe, click, tap, or type. Basically, interaction design focuses on the functionality needed to accomplish a task. UX design is the process of enhancing a person's experience by understanding their behavior.

Visual design focuses on implementing images, colors, fonts, and other elements in order to engage users. Visual design engages users through the use of visual cues such as prioritizing tasks on a page through size, color, and the use of whitespace, hence drawing the eye to the correct functionality. Designing an interface to ignite strong emotions is one way to make them memorable. Implement a visual hierarchy – use bigger elements, contrasting backgrounds, and whitespace to draw a user's attention.

It's important that designers and developers work closely together to set clear boundaries. This could be done by creating a clear, concise plan of what the first implementation needs to do, and then, the designer can iterate on the mockup that includes multiple versions.