Principles of wireframe design for user interfaces

By Emeka Ewule    |    January 2018

online website builder

Wireframes depict the layout of a user interface by describing the structure, content, and behaviour of a screen – or parts of it. They show the relationships and hierarchy of page elements, explain interactive elements, their relationships to each other, and how the user will get feedback. They also contain some of your product’s or service’s content. Its visual design is not in focus. 

Creating wireframes 

Sketch wireframes by hand, use graphic software or em¬ploy prototyping tools. The level of fidelity depends on your available time and goals. In the beginning, use wireframes to:

• explore design alternatives for a single screen

• provide an overview of different screens

• show a screen in different stages (during an error, with new data, etc.)

Later in the process, use wireframes to specify your solu¬tion’s user interface in more detail.

Producing flows

Wire-flows allow you to visualize the steps a customer needs to take for a specific use case. Explore and show how the user interface behaves with customer interactions, dis¬plays errors, etc. Create wire-flows by combining several wireframes, highlighting the inter¬actions, e.g. mouse clicks or ges¬tures, and the response of the user interface by pointing to the next wireframe. Click dummies or mock-ups let you showcase and explore the user in¬terface of your product or service before development has started. Turn wireframes into interactive prototypes with dedicated prototyping software. Define interactive areas and elements and link wireframes together. Try out prototypes directly on the target device, e.g. a mobile phone. Use interactive pro¬totypes for user tests and coordination with the realizing departments or suppliers. User interface specifications are often a key deliverable in software projects. Use prototyping software, like Axure, that allows you to turn your wireframes into specifications.


Prototyping

Prototypes can be anything from a first rough sketch to visualize an idea, over a click dummy, to a physical hardware mock-up. Prototypes allow you to understand, evaluate, and present a concept. The earlier you turn your idea into something tangible, the better you can evaluate it. Thus, prototyping should be performed throughout the design process.

Finding solutions

Early in the design process, you want to understand the problem you are trying to solve, work towards a solution, agree on the scope of the project, or manage expectations. Later on, you want to test your concept with users for feed¬back, get a decision on the general design direction, or present the targeted experience.


Use prototyping methods as:

• a research tool: explore different design alternatives.

• a presentation tool: communicate the basics of your concept.

• a concept assessment tool: validate your design directions from the start.


Conclusion

Essentially, the prototype evolves alongside the design process and seamlessly becomes the final product (or its primary component). This process results in minimal waste—no throwaway prototypes, no extra steps, and no extra software costs.