Wireframe Examples

The goal is to define the core components in the initial concept in an effort to quickly visualize the workflow, and build a prototype to further refine the idea. A typical first approach is to create a wireframe, which depicts the page layout or arrangement of the website's content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on what a screen does, not what it looks like.

View Options

  • Option 1: All 9 wireframe examples were uploaded to the InVision App for easy review.

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

Wireframe encourages people to comment on how things actually work, how the screens connect and what the structure of the page looks like. Again,it focuses on what a screen does, not what it looks like.

  1. The reason we make wireframes is not just to have a skeleton for the UI design, but to be able to quickly iterate, modify and get feedback on your design.
  2. The primary focus is on the information architecture and content presented in a clean, simple, intuitive, user-centered design.
  3. The beginning of a great design starts with content, therefore content drives the design you see on screen.
  4. User Personas, Customer Journey Maps and Empathy Maps are a vital and crucial aspect of any design process.
  5. Customer research fits into every workflow, every role, and every company size.
  6. The goal is to guess less and work from a position of being informed and confident.

Many designs still begin with desktop views and then attempt to retrofit them into mobile friendly versions. However, it's important when developing wireframes to adopt the mobile-first approach, which ensures that core content displays well on mobile, first, and then expands the design for larger devices. The “mobile first” approach is all about minimalism, and simplifying the design helps improve usability.