gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed markdown and added resources (#32685)

Browse Source 
Added more information about wireframing
This commit is contained in:
Cody Lynn
2019-04-15 06:12:57 -04:00
committed by The Coding Aviator
parent 1f310d8c58
commit 53ea6e8a34
1 changed files with 20 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
guide/english/visual-design/wireframing/index.md
View File

@ -1,37 +1,24 @@
--- ---
title: Wireframing title: Wireframing
--- ---
## Wireframing # Wireframing
<p>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.</p> 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.
<p>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.</p> 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.
<p>Find additional resources on Wireframing <a href="http://www.experienceux.co.uk/faqs/what-is-wireframing/" target="blank">here</a>.</p> Find additional resources on Wireframing [here](http://www.experienceux.co.uk/faqs/what-is-wireframing/).
<br>
<h2>Wireframing Tools</h2> ## Wireframing Tools
<hr>
<ul> * [Balsamiq](https://balsamiq.com/index.html)
<li> * [Omnigraffle](https://www.omnigroup.com/omnigraffle/)
<a href="https://marvelapp.com/home" target="blank">Marvel</a> * [Axure](https://www.axure.com/)
</li> * [FlairBuilder](http://flairbuilder.com/)
<li> * [ProtoShare](http://www.protoshare.com/)
<a href="https://www.invisionapp.com/" target="blank">InVision</a> * [Marvel](https://marvelapp.com/home)
</li> * [InVision](https://www.invisionapp.com/)
<li> * [Proto App](https://proto.io/)
<a href="https://proto.io/" target="blank">Proto App</a> * [Lucidchart](https://www.lucidchart.com/)
</li> * [Pencil](http://pencil.evolus.vn/)
<li> * [Adobe XD](https://www.adobe.com/ca/products/xd.html)
<a href="https://www.lucidchart.com/pages/examples/wireframe_software/" target="blank">Lucidchart</a> * [Figma](https://www.figma.com/features/)
</li> * [Sketch](https://www.sketchapp.com/)
<li>
<a href="http://pencil.evolus.vn/Default.html/" target="blank">Pencil</a>
</li>
<li>
<a href="https://www.figma.com/features/" target="blank">Figma</a>
</li>
<li>
<a href="https://www.sketchapp.com/" target="blank">Sketch</a>
</li>
<li>
<a href="https://www.adobe.com/ca/products/xd.html" target="blank">Adobe XD</a>
</li>
</ul>