Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
6 views

Getting started with wireframes

Wireframes are low-fidelity design layouts that outline the information, structure, and user interface direction of a page. They serve as a bridge between sketches and prototypes, allowing for quick adjustments based on user feedback without focusing on aesthetics. Designers can choose between hand-drawn or digital wireframing based on the project's needs and should consider user and business goals during the process.

Uploaded by

yemmi.goke
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Getting started with wireframes

Wireframes are low-fidelity design layouts that outline the information, structure, and user interface direction of a page. They serve as a bridge between sketches and prototypes, allowing for quick adjustments based on user feedback without focusing on aesthetics. Designers can choose between hand-drawn or digital wireframing based on the project's needs and should consider user and business goals during the process.

Uploaded by

yemmi.goke
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Getting started with wireframes

First things first. A wireframe is a low-fidelity design layout that serves three
simple but exact purposes:

1. It presents the information that will be displayed on the page


2. It gives an outline of structure and layout of the page
3. It conveys the overall direction and description of the user interface

Just like the blueprint of a building, a wireframe describes details clearly and
specifically while giving the builders (you, other designers, developers, etc.) an
overview of the project.

Wireframes serve as a middle ground between pen-and-paper sketches and


your first prototype. They help you plan the layout and interaction patterns of
your users without distracting details like colors or copy. The proposed user
journey should be clear without needing color or shading or fancy menus.
Wireframes are fast, cheap, and perhaps most importantly, impermanent.
Wireframes (and the sketches you draft before wireframing) are meant to
change as you gather more information through user research or stakeholder
input.

Compared with a high-fidelity mockup or prototype, gathering feedback with a


wireframe is much more important than researching usage patterns or user
journeys. With a wireframe, people pay more attention to functionality and the
user experience than the aesthetic characteristics of the on-screen elements.

Using wireframes in your design process


Different UX designers approach wireframing in different ways. Some like to
start by sketching by hand, while others like to use apps or tools that are a bit
more technically inclined. More often than not, the decision to wireframe by
hand or on a computer, and the process used to get from sketches and
wireframe to code, is more related to what approach the particular situation
requires rather than the preference of the designer.

There are some questions you should ask yourself when preparing
wireframing
● What are the intended user and business goals when interacting with
this page?
● Exactly how can the content be organized to support these goals?
● Where should your main message and logo go?
● What should the user see first when arriving at the page?
● Where is the call to action?
● What will the user expect to see on certain areas of the page?

You might also like