A wireframe sketch is the initial hand-drawn design process, using paper and pen/pencil, of what a website design will look like.

Wireframing is an important step in any screen design process. It primarily allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information. A wireframe is a visual guide that represents the skeletal framework of a website or mobile app.

Wireframes are generally created by business analysts, user experience designers, developers, visual designers and other roles with expertise in interaction design, information architecture and user research.

There five major components in a wireframe. The Uses of wireframes (purpose), Elements of wireframes (skeleton plan), Information design, Navigation design (move from page to page) and Interface design (selecting and arranging interface elements to enable users to interact with the functionality of the system).

  • Wireframes are the skeleton
  • Mockups are the skin
  • Prototypes demonstrate the behavior

Few Examples of Web and Mobile Wireframe Sketches

  • Online Store Website Wireframe

  • Mobile Website Wireframe

  • Website Product Page Wireframe

  • Commerce Website Wireframe