From 53ea6e8a34341ab5d505c4aa5cbbf6e8c62aa7dc Mon Sep 17 00:00:00 2001
From: Cody Lynn <jclynn87@gmail.com>
Date: Mon, 15 Apr 2019 06:12:57 -0400
Subject: [PATCH] Fixed markdown and added resources (#32685)

Added more information about wireframing
---
 .../visual-design/wireframing/index.md        | 53 +++++++------------
 1 file changed, 20 insertions(+), 33 deletions(-)

diff --git a/guide/english/visual-design/wireframing/index.md b/guide/english/visual-design/wireframing/index.md
index 96e1122b50..ab32275597 100644
--- a/guide/english/visual-design/wireframing/index.md
+++ b/guide/english/visual-design/wireframing/index.md
@@ -1,37 +1,24 @@
 ---
 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>
-<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>
-<p>Find additional resources on Wireframing <a  href="http://www.experienceux.co.uk/faqs/what-is-wireframing/" target="blank">here</a>.</p>
-<br>
-<h2>Wireframing Tools</h2>
-<hr>
-<ul>
-  <li>
-  <a href="https://marvelapp.com/home" target="blank">Marvel</a>
-  </li>
-  <li>
-  <a href="https://www.invisionapp.com/" target="blank">InVision</a>
-  </li>
-  <li>
-  <a href="https://proto.io/" target="blank">Proto App</a>
-  </li>
-  <li>
-    <a href="https://www.lucidchart.com/pages/examples/wireframe_software/" target="blank">Lucidchart</a>
-  </li>
-  <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>
+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/)
\ No newline at end of file