large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="https://medium.com/ello-learn-what-matters-today/intro-to-wireframing-bfebd53b3440">medium bookmark / Raindrop.io</a> |  </p>
<div>
<div>
<div>
<div>
<div>
<p>Learn What Matters, Today | Follow The Publication</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<div>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*1gmKrF_lzB1z3Urszj1R8w.gif" alt="1*1gmKrF_lzB1z3Urszj1R8w.gif"></div>
</div>
<p><a href="https://dribbble.com/shots/2053317-Blueprint-Wireframe">Dribbble Shot by Nick Buturishvili</a></p>
<p>Continuing our series on “Intro to User Experience Design”, this post focuses on one of the funnest aspects of it all — Wireframing. Once you’ve figured out who your target user is, empathized with their problems and reframed the problem, its now time to put pen to paper!</p>
</div>
<div>
<div>
<div><img src="https://cdn-images-1.medium.com/max/2000/1*0zo_Uju7-ZJC-wti4Tk3GQ.jpeg" alt="1*0zo_Uju7-ZJC-wti4Tk3GQ.jpeg"></div>
</div>
<p>Always Start By Sketching</p></div>
<div>
<p>Literally, the first step in ANY wireframing exercise should be paper sketching. To see what the sketches for the designs above turned into, you can <a href="http://www.sahejvirlocham.com/work/sherlock/">check out this case study</a>.</p>
<blockquote><p>There’s no better way to ensure your designs get too complex too fast than by firing up a fancy design tool to do your first pass.</p></blockquote>
<p>Sketching makes your life easier in a couple of ways:</p>
<ul>
<li>It lets you think freely, without the risk of getting to attached to your designs. The effort to make paper sketches is lower to making stuff in design softwares like Sketch.</li>
<li>It doesn’t let you feel bad about “all the work you’ve done so far”, and lets you iterate on variations.</li>
<li>Its free! Besides actually costing 0 dollars, sketching also frees you creatively. You <strong>don’t</strong> have to make sure everything is pixel perfect and pretty — go ahead and make a mess. Experiment with your thoughts to arrive at the solution that speaks to you.</li>
<li>If you do think of starting off with “high fidelity” wireframes or designs first, then let Gordon Ramsay explain this to you:</li>
</ul>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*66ytVEKXmIG_IaDkqhoIsA.gif" alt="1*66ytVEKXmIG_IaDkqhoIsA.gif"></div>
</div>
<p>Pls Listen to Gordon</p>
<p>Once you know generally what your solution looks like, its time to build what we call “wireframes”. Wireframes are the simplest visual reproduction of your designs. They communicate things like basic flow, structure and core components in your designs.</p>
<blockquote><p>Think of wireframes (or wires) as the scaffolding to the building that is your final solution.</p></blockquote>
<p>Besides being able to communicate your idea to other people, they help you iron out those pesky macro-details.</p>
<p>There are a ton of tools and softwares to build out wireframes, and they all offer a variety of fidelity. Some of our favorites ones are Sketch, Illustrator, Invision, Flinto, Balsamiq. You’ll notice that in that list there are some prototyping tools. Invision and Flinto are great for wireframing because they offer you only basic shapes to play around with. Block wireframes are quick and easy, but they give someone a visual anchor for conversations.</p>
<p>While wireframing, there are a few best practices to keep in mind:</p>
<ul>
<li><strong>Keep it greyscale</strong>. It’s still too early in the process to pick out you hex codes and worry about gradients and shadows. Put that damn thing away! Building wireframes in greyscale lets people focus only on what’s important.</li>
<li>You <strong>don’t</strong> need to wireframe EVERY SINGLE FLOW. Stay sane, don’t spend 4 hours designing the perfect login flow — focus on your core solution.</li>
<li>Get them in front of as many people as possible. You can use Invision or Marvel to share designs with folks easily, even if you use pictures of your paper masterpieces.</li>
</ul>
<p>Check this out for some inspiration for your wireframes:</p>
<p>Once you’ve built out your wireframes, you can move on to prototyping your solutions — which is the topic of the next post!</p>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<p>This article was written by <a href="https://medium.com/@Sahejhog">Sahej Locham</a> for <a href="https://medium.com/@ProjectEllo">ello</a></p>
<p>You can follow <a href="https://medium.com/@ProjectEllo">ello</a> and subscribe to our <a href="https://medium.com/ello-learn-what-matters-today">publication</a> to stay up to date with all the content we have planned for you.</p>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*h7_AUhGZ_2dkirjk6BHZAA.gif" alt="1*h7_AUhGZ_2dkirjk6BHZAA.gif"></div>
<p>You can also follow us on our other channels to stay up to date. If you’d like to write for <a href="https://medium.com/@ProjectEllo">ello</a>, please reach out to us on <a href="https://twitter.com/ProjectEllo">Twitter</a>. We’re always excited to work with others. See you out there!</p>
</div>
</div>
</div>
</div>
<div><a href="https://medium.com/ello-learn-what-matters-today/intro-to-wireframing-bfebd53b3440">https://medium.com/ello-learn-what-matters-today/intro-to-wireframing-bfebd53b3440</a></div>


Intro to Wireframing Part 4 In ello’s Intro to UX Series

Intro to Wireframing Part 4 In ello’s Intro to UX Series

Top Stories