↓Skip to main content
  1. Posts/

Your-guide-to-creating-a-website-wireframe-Cacoo

390 words·2 mins

Your-guide-to-creating-a-website-wireframe-Cacoo #

This guide is useful for:

  • Anyone interested in learning more about UX design,
  • UX Designers just starting their careers,
  • UX Designers struggling to deliver quality wireframes, and
  • UX design veterans wanting to brush up on the fundamentals and stay up-to-date on new trends. Achieving this outcome requires an effective design process and a skilled UX Designer who understands how to create the right type of wireframe with the right design elements at the right time.

Types of wireframes #

People use many terms to describe wireframes, but essentially there are three types:

  • Content wireframes,
  • Annotated wireframes, and
  • Interactive wireframes. By removing any graphic design from these initial wireframes, the UX Designer can focus on what matters most: laying out content in a way that best achieves business goals and user needs while keeping elements consistent across different pages and devices.

Interactive wireframes #

Sometimes called prototypes, interactive wireframes require digital design tools that allow for the addition of interactivity into your wireframes to test with users. Here are a few examples of common design processes

  • Content Wireframe > Annotated Wireframe > Prototype > Code
  • Content Wireframe > Annotated Wireframe > Lo-fi Wireframe > Prototype > Code
  • Content Wireframe > Annotated Wireframe > Hi-fi Mockup > Prototype > Code
  • Content Wireframe > Annotated Wireframe > Lo-fi Wireframe > Hi-fi Mockup > Prototype > Code
  • Content Wireframe > Code There are many common objects and symbols used within wireframing templates. This will include: Interaction feedback, i.e. information that tells the user what happened or what will happen next, such as:
  • Validation responses for forms
  • Intermediary messages and modals Interaction states, i.e. potential states for all UI components, such as:
  • Dropdown lists
  • Titles, labels, and names
  • Dynamic content
  • Icons with numbers
  • Form fields
  • File uploads Gestures, i.e. the way your users will physically interact with your UI on a given device, such as:
  • Click
  • Double-click
  • Right-click
  • Swipe or flick
  • Pinch and spread
  • Press
  • Hover
  • Drag and drop
  • Keyboard input
  • Keyboard shortcuts Cross-device interactions, i.e. gestures that may not translate to different devices:
  • Hovering
  • Dragging and dropping
  • Uploading files User types, i.e. what different users see based on their previous interactions with the page, such as:
  • New users
  • Guests
  • First-time visitors
  • Returning visitors
  • Existing or logged-in users
  • Admins and super-users As we stated earlier in this guide, UX and UI often overlap.
↑