A typical wireframing process

There are many ways to design a wireframe; each designer will have their own process. The process shown here is a basic one to use as a guide if you don't know where to begin. Although we use Axure to create the wireframe, you can wireframe on paper to complete the following steps:

  1. Create and name the pages: Create and name those pages that you will be using for wireframing. Create two groups of pages--one for mobile and one for desktop. This helps you to keep the different screen sizes in mind while positioning elements:
    • Some tools will help you with responsive design. For example, Axure provides Adaptive Views, which allows you to create a base view and then specify linked versions for different screen sizes. ...

Get UX for the Web now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.