A wireframe is a visual representation of elements on a website. It is used to define and plan information hierarchy.
<h2 id="heading-getting-started">Getting started</h2>
<ol>
<li>Get inspired
</li>
<li>Create the building blocks
</li>
<li>Fill in the details
</li>
<li>Go digital
</li>
</ol>
<blockquote>
Clarity, user confidence, and simplicity
</blockquote>
<h2 id="heading-ways-designers-can-structure-the-process-from-design-to-implementation">Ways designers can structure the process from design to implementation</h2>
<ol>
<li>Wireframe &gt; Interactive Prototype &gt; Visual &gt; Design
</li>
<li>Sketch &gt; Wireframe &gt; High-Def Wireframe &gt; Visual &gt; Code
</li>
<li>Sketch &gt; Wireframe &gt; Visual &gt; Code
</li>
<li>Sketch &gt; Code
</li>
</ol>
<h2 id="heading-importance-of-wireframes">Importance of Wireframes</h2>
<ol>
<li>Acts as a blueprint
</li>
<li>Simplifies communication
</li>
<li>Establishes hierarchy of info
</li>
</ol>
<h3 id="heading-references">References</h3>
<ul>
<li><a target="_blank" href="https://www.youtube.com/watch?v=c9Wg6Cb_YlU&amp;t=63s">https://www.youtube.com/watch?v=c9Wg6Cb_YlU&amp;t=63s</a>
</li>
<li><a target="_blank" href="https://www.youtube.com/watch?v=KdfO_e0yK-g&amp;t=1s">https://www.youtube.com/watch?v=KdfO_e0yK-g&amp;t=1s</a>
</li>
<li>"What is a Wireframe? - YouTube." <a target="_blank" href="https://www.youtube.com/watch?v=T0vt3nLZKks">https://www.youtube.com/watch?v=T0vt3nLZKks</a>.
</li>
<li>"The Definitive Guide: How to Make Your First Wireframe."
 <a target="_blank" href="https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/?utm_source=youtube.com&amp;utm_medium=referral&amp;utm_campaign=UXD_wireframe_291018&amp;utm_term=blog">https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/utm_source=youtube.com&amp;utm_medium=referral&amp;utm_campaign=UXD_wireframe_291018&amp;utm_term=blog</a>.
</li>
</ul>

**A wireframe is a visual representation of elements on a website. It is used to define and plan information hierarchy.**

## Getting started

1. Get inspired
 
2. Create the building blocks
 
3. Fill in the details
 
4. Go digital
 

> Clarity, user confidence, and simplicity

## Ways designers can structure the process from design to implementation

1. Wireframe &gt; Interactive Prototype &gt; Visual &gt; Design
 
2. Sketch &gt; Wireframe &gt; High-Def Wireframe &gt; Visual &gt; Code
 
3. Sketch &gt; Wireframe &gt; Visual &gt; Code
 
4. Sketch &gt; Code
 

## Importance of Wireframes

1. Acts as a blueprint
 
2. Simplifies communication
 
3. Establishes hierarchy of info
 

### References

* [https://www.youtube.com/watch?v=c9Wg6Cb\_YlU&t=63s](https://www.youtube.com/watch?v=c9Wg6Cb_YlU&t=63s)
 
* [https://www.youtube.com/watch?v=KdfO\_e0yK-g&t=1s](https://www.youtube.com/watch?v=KdfO_e0yK-g&t=1s)
 
* "What is a Wireframe? - YouTube." [https://www.youtube.com/watch?v=T0vt3nLZKks](https://www.youtube.com/watch?v=T0vt3nLZKks).
 
* "The Definitive Guide: How to Make Your First Wireframe."
 
 [https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/utm\_source=youtube.com&utm\_medium=referral&utm\_campaign=UXD\_wireframe\_291018&utm\_term=blog](https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/?utm_source=youtube.com&utm_medium=referral&utm_campaign=UXD_wireframe_291018&utm_term=blog).

Draft, don't draw. Sketch, don't illustrate

Day 26: Wireframes

Day 26: Wireframes

Draft, don't draw. Sketch, don't illustrate

Table of contents

Getting started

Ways designers can structure the process from design to implementation

Importance of Wireframes

References