<h2 id="user-content-Wireframe-Workflow-Design">Wireframe: Workflow Design</h2>
<p>Created on scraps of paper, a whiteboard, or in a software program, serve to establish relationships between elements in a project such as navigation, imagery, and calls to action.
Often, a wireframe has 3 core goals:</p>
<ul>
<li>To show the content and functionality of the pages before any further designs.</li>
<li>To help designers communicate with clients about the design concept.</li>
<li>To establish the information hierarchy of the site.</li>
</ul>
<h3 id="user-content-Tools">Tools</h3>
<ul>
<li>Paper &#x26; Pencil</li>
<li>Balsamiq</li>
<li>Whimsical</li>
</ul>
<p><img src="/content/playbook/design/assets/wireframe_3c6ce1f34b539d7de9da020608c19f8a_md5.webp" alt=""></p>
<h2 id="user-content-Information-Architecture">Information Architecture</h2>
<p>Information architecture (IA) is, like a blueprint, a visual representation of the product’s infrastructure, features, and hierarchy. IA provides designers (as well as product development and engineering teams) a bird’s-eye view of the entire product.</p>
<h3 id="user-content-How-we-do">How we do</h3>
<ul>
<li>Sitemap</li>
</ul>
<p><img src="/content/playbook/design/assets/wireframe/203ab5b0117c8ecbeb2cf2db4b549d51_md5.gif" alt="&#x22;Sitemap&#x22;"></p>
<ul>
<li>Card Sorting</li>
</ul>
<p><img src="/content/playbook/design/assets/wireframe_1f61968fcb92a401380478e6df78410a_md5.webp" alt=""></p>
<ul>
<li>State machine</li>
</ul>
<p><img src="/content/playbook/design/assets/wireframe_a58d97e8735e49f087898dd95725b929_md5.webp" alt=""></p>
<h3 id="user-content-Tools-2">Tools</h3>
<ul>
<li>Whimsical</li>
<li>Draw.io</li>
</ul>

Properties

Location

Stats

wireframe

Wireframe: Workflow Design

Tools

Information Architecture

How we do

Tools

Subscribe to Dwarves Memo