24 lines
1.4 KiB
Markdown
24 lines
1.4 KiB
Markdown
---
|
||
title: Wireframing
|
||
---
|
||
# Wireframing
|
||
|
||
A wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors.
|
||
Wireframing is a way to design an application at the structural level. A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page for these reasons: wireframes typically do not include any styling, color, or graphics. Wireframes also help establish relationships between a website’s various templates.
|
||
Find additional resources on Wireframing [here](http://www.experienceux.co.uk/faqs/what-is-wireframing/).
|
||
|
||
## Wireframing Tools
|
||
|
||
* [Balsamiq](https://balsamiq.com/index.html)
|
||
* [Omnigraffle](https://www.omnigroup.com/omnigraffle/)
|
||
* [Axure](https://www.axure.com/)
|
||
* [FlairBuilder](http://flairbuilder.com/)
|
||
* [ProtoShare](http://www.protoshare.com/)
|
||
* [Marvel](https://marvelapp.com/home)
|
||
* [InVision](https://www.invisionapp.com/)
|
||
* [Proto App](https://proto.io/)
|
||
* [Lucidchart](https://www.lucidchart.com/)
|
||
* [Pencil](http://pencil.evolus.vn/)
|
||
* [Adobe XD](https://www.adobe.com/ca/products/xd.html)
|
||
* [Figma](https://www.figma.com/features/)
|
||
* [Sketch](https://www.sketchapp.com/) |