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>Published on <a href="http://ift.tt/2pVricu">| Prototyping: From UX to Front End &mdash; Medium</a> prototypr.io </p>
<p><em>This was first published to subscribers of our mailing list — </em><a href="http://ift.tt/2oSpvse"><em>join here for free</em></a><em>.</em></p>
<p>Last week, readers enjoyed our list of <a href="http://ift.tt/2qXyJA4">new tools on the prototyping radar</a>, so we’ve got more for you this week in issue #14. Here’s the 3 sections we’ll cover this time:</p>
<ol>
<li>5 Products and Tools to Try</li>
<li>6 Articles on Sketch — Tutorials and Updates</li>
<li>3 from the Publication</li>
</ol>
<p><img alt="" src="http://ift.tt/2rgg0na"></p>
<h4><strong><em>New Tools to Try Out:</em></strong></h4>
<p><em>Check these out for your design workflow — from CSS to collaboration:</em></p>
<h3><a href="http://ift.tt/2pV5k9M">1. Introducing iotaCSS</a></h3>
<p>“iotaCSS gives designers more flexibility than any other framework by adapting to their design instead of forcing them to design in a specific way.” Awesome work by <a href="http://ift.tt/2rgwZ8M">Dimitris Psaropoulos</a>!</p>
<p><a href="http://ift.tt/2pV5k9M"><img alt="" src="http://ift.tt/2pVvNE4"></a><a href="http://ift.tt/2pV5k9M">Introducing iotaCSS</a></p>
<h3><a href="http://ift.tt/2rgrvv5">2. Meet Ludus: PowerPoint for the 21st Century</a></h3>
<p>Who likes powerpoint? <em>“</em><a href="http://ift.tt/2pVfZBl"><em>Ludus</em></a><em> is a new presentation tool for creative people, see it as PowerPoint for the 21st century”</em> 🤔 Looks cool, <a href="http://ift.tt/2rg8l8u">Vincent Battaglia</a> explains all.</p>
<p><a href="http://ift.tt/2rgrvv5"><img alt="" src="http://ift.tt/2pVgbAv"></a><a href="http://ift.tt/2rgrvv5">Meet Ludus</a></p>
<h3><a href="http://ift.tt/2rgCVi7">3. Purple: Flexible project boards</a></h3>
<p>A tool to keep your whole project in one place — from Sketch files to Marvel prototypes. “Flexible project boards for designers and creators”.</p>
<p><a href="http://ift.tt/2rgCVi7"><img alt="" src="http://ift.tt/2pVu8OK"></a><a href="http://ift.tt/2rgCVi7">Purple</a></p>
<h4><strong>Updates to Try:</strong></h4>
<p><em>For 4 and 5, here’s a couple tools that have recently added new features:</em></p>
<h3><a href="https://twitter.com/zeplin_io/status/862332986443927553?&amp;utm_source=prototypr_newsletter&amp;utm_medium=email&amp;utm_campaign=responsive_grids_in_sketch_44_and_how_a_good_user_experience_should_make_you_feel&amp;utm_term=2017-05-12">4. Zeplin now generates React Native code snippets</a></h3>
<p>Generate React Native code snippets for colors, text and text styles (for iOS and Android projects). If you’re a big <a href="http://ift.tt/28KgwxR">Zeplin</a> user, let us know what you think!</p>
<blockquote>
<p>Zeplin now generates React Native code snippets on iOS and Android projects &#8211; from layers, colors and text styles! ✏️⚛️</p>
<p> — <a href="https://twitter.com/zeplin_io/status/862332986443927553">@zeplin_io</a></p>
</blockquote>
<h3><a href="http://ift.tt/2pVzidL">5. Introducing Figma Mirror for Android</a></h3>
<p>Figma have stopped neglecting Android users, making their Mirror App available for Android devices 📱— real time mirroring for everybody now.</p>
<p><a href="http://ift.tt/2pVzidL"><img alt="" src="http://ift.tt/2rgCBjB"></a><a href="http://ift.tt/2pVzidL">Figma Mirror for Android</a><iframe src="http://ift.tt/2pVqG6E" width="800" height="400" frameborder="0"><a href="http://ift.tt/2rgg0DG">http://ift.tt/2rgg0DG</a></iframe><img alt="" src="http://ift.tt/2pVo4G0"></p>
<p><em>Here’s 6 articles teaching us something about Sketch — including everything you need to know about Sketch 44 Beta:</em></p>
<h3><a href="http://ift.tt/2rg02cY">1. Prototyping with Sketch &amp; Principle</a></h3>
<p><a href="http://ift.tt/2qXhqPE">Marc Andrew</a> is back, with a full chapter excerpt from his book, <a href="http://ift.tt/2rgFvVE"><strong><em>Sketch App Essentials</em></strong></a><strong><em>. </em></strong>He shows us how to create a beautiful user profile animation using Principle &amp; Sketch 👌</p>
<p><a href="http://ift.tt/2rg02cY"><img alt="" src="http://ift.tt/2pVm00B"></a><a href="http://ift.tt/2rg02cY">Prototyping with Sketch &amp; Principle</a></p>
<h3><a href="http://ift.tt/2rguzqY">2. Sketch 44 Beta (In Depth) — Creating a Responsive Grid</a></h3>
<p><a href="http://ift.tt/2pV7K8q">Isaac Minogue</a> shows us exactly how to take advantage of Sketch’s new features for responsive layouts by creating a nice responsive grid, complete with consistent gutters:</p>
<p><a href="http://ift.tt/2rguzqY"><img alt="" src="http://ift.tt/2rg02tu"></a><a href="http://ift.tt/2rguzqY">Sketch 44 Beta (In Depth)</a></p>
<h3><a href="http://ift.tt/2pVnhov">3. Sketch Process for Beginners</a></h3>
<p><a href="http://ift.tt/2rgIhKh">Jessica Jiang</a> runs us through a few tips on how she uses Sketch, along with some amazing articles that helped her get started:</p>
<p><a href="http://ift.tt/2qNhPV0">Sketch Process for Beginners</a></p>
<h3><a href="http://ift.tt/2pV7Lcu">4. Sketch 44 Resizing: How does it work???</a></h3>
<p><a href="http://ift.tt/2gR47fa">Jon Moore</a> keeps on smashing it at UX Power Tools. This time he’s teaching us how Sketch 44 Beta’s resizing feature works:</p>
<p><a href="http://ift.tt/2pQ5Oyw">Sketch 44 Resizing: How does it work???</a></p>
<h3><a href="http://ift.tt/2rgFktc">5. The Hidden Benefits Of Writing Sketch Plugins</a></h3>
<p><a href="http://ift.tt/2pV291H">Vince Schwidder</a>, Co-Founder &amp; Designer at <a href="http://ift.tt/2pi3C5W">Yummygum</a>, explains the benefits of building Sketch plugins to improve the design workflow for yourself and others. Maybe learning a <em>little</em> code won’t hurt so much.</p>
<p><a href="http://ift.tt/2rgFktc"><img alt="" src="http://ift.tt/2pV7LJw"></a><a href="http://ift.tt/2rgFktc">Hidden Benefits Of Writing Sketch Plugins</a></p>
<h3><a href="http://ift.tt/2rgvhV7">6. Why I’ve moved “mostly” to Sketch to design UI.</a></h3>
<p>It’s a bit of an older comparison, but <a href="http://ift.tt/2qVVOH5">Brett Hales</a> gives us a great refresher on why he moved to Sketch, and how he’s having to convert 2 years of PSDs to Sketch — maybe <a href="http://ift.tt/2rgyEvn">Avocode’s tool</a> will come in useful!</p>
<p><a href="http://ift.tt/2pzHRd2">Sketch vs Photoshop. Why I’ve now “mostly” moved to Sketch.</a></p>
<p><a href="http://ift.tt/2oSO74f"><img alt="" src="http://ift.tt/2qXnTKy"></a><img alt="" src="http://ift.tt/2rgwE6p"></p>
<p><em>Here’s 3 featured articles from our publication:</em></p>
<h3><a href="http://ift.tt/2pV7Mgy">1. How a good user experience should make you feel!</a></h3>
<p><a href="http://ift.tt/2rgz0Sz">Thanasis Rigopoulos</a> explains user experience can be improved by focusing on learnability, affordance, consistency, and discoverability.</p>
<p><a href="http://ift.tt/2pV7Mgy"><img alt="" src="http://ift.tt/2pVk2gM"></a><a href="http://ift.tt/2pV7Mgy">How a good user experience should make you feel!</a></p>
<h3><a href="http://ift.tt/2rgyCUh">2. The lessons I learned from a logo design project</a></h3>
<p><a href="http://ift.tt/2pVk2xi">Andrew Wilshere</a> takes us through his design process for coming up with a full set of logo assets. From research and ideation, to hand off.</p>
<p><a href="http://ift.tt/2rgyCUh"><img alt="" src="http://ift.tt/2rgwZpi"></a><a href="http://ift.tt/2rgyCUh">Lessons I learned from a logo design project</a></p>
<h3><a href="http://ift.tt/2pUYJw9">3. Atomic Design in Practice — Does It Work?</a></h3>
<p><a href="http://ift.tt/2rgrd78">Browser</a> explore both the benefits and drawbacks of Brad Frosts’s Atomic Design framework, concluding that long term value can be created using it.</p>
<p><a href="http://ift.tt/2pUYJw9"><img alt="" src="http://ift.tt/2pVo494"></a><a href="http://ift.tt/2pUYJw9">Atomic Design in Practice — Does It Work?</a><img alt="" src="http://ift.tt/2rgoT02"></p>
<p>By <a href="http://ift.tt/2pV2cuj">Jason Yuan</a>:</p>
<p><a href="http://ift.tt/2q1pNMT">I Got Rejected by Apple Music… So I Redesigned It</a></p>
<p>By <a href="http://ift.tt/2phLMA8">Appsee</a>:</p>
<p><a href="http://ift.tt/2pq8fXC">User Onboarding Spotlight: Why Yummly’s UX is Absolutely Delicious</a></p>
<p>By <a href="http://ift.tt/2fiuyKX">Andrew Coyle</a>:</p>
<p><a href="http://ift.tt/2qf7Efn">Design Better Data Tables</a></p>
<p>By <a href="http://ift.tt/2gQXBoq">Nick Babich</a>:</p>
<p><a href="http://ift.tt/2pUDfQL">Floating Action Button in UX Design</a></p>
<p>By <a href="http://ift.tt/2rgMwFT">Anton Nikolov</a>:</p>
<p><a href="http://ift.tt/2qPPmia">Design principle: IKEA effect</a></p>
<p>By <a href="http://ift.tt/2rgz0Sz">Thanasis Rigopoulos</a>:</p>
<p><a href="http://ift.tt/2pnfrnj">Best Chrome extensions for designers</a></p>
<p>By <a href="http://ift.tt/2rgB5xN">Micka Touillaud</a>:</p>
<p><a href="http://ift.tt/2q0niKn">3 priceless learnings after 1 year out of Design school</a></p>
<p>By Ora:</p>
<p><a href="http://ift.tt/2rgoURE">Ora &#8211; Task management done right!</a></p>
<p>By <a href="http://ift.tt/2pVln7y">Proto.io</a>:</p>
<p><a href="http://ift.tt/2pTjQ2I">How Prototyping Can Take Your Startup to the Next Level</a></p>
<p>By Google:</p>
<p><a href="http://ift.tt/2pVqtRh">Material Components</a></p>
<p>🎧 By <a href="http://ift.tt/2rgww6V">Fragmented Podcast</a>:</p>
<p><a href="http://ift.tt/2pVqEf2">082: Airbnb&#8217;s Gabriel tells us how to animate with Lottie</a></p>
<h3>Thanks for reading</h3>
<p>For daily handpicked articles, checkout our <a href="http://ift.tt/2oSO74f">newsreader</a>:</p>
<p><a href="http://ift.tt/2oSO74f">Prototypr Newsreader: Handpicked design news, every day.</a></p>
<p><em>This update originally went out last week to our email subscriber list. If you like it, feel free to subscribe below to get our next issue without delay:</em></p>
<p><iframe src="http://ift.tt/2kZ4o5P" width="800" height="400" frameborder="0"><a href="http://ift.tt/2pIip9S">http://ift.tt/2pIip9S</a></iframe><img src="http://ift.tt/2rg8jNU" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2pUPk7O">💥 5 More Tools to Try Out, and How to Use Responsive Grids in Sketch 44</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


5 More Tools to Try Out, and How to Use Responsive Grids in Sketch 44

5 More Tools to Try Out, and How to Use Responsive Grids in Sketch 44

Top Stories