small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

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

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<p><a href="https://medium.com/dropbox-design/desktop-prototyping-a6004fb5598a">medium bookmark / Raindrop.io</a> |  </p>
<div>
<hr>
<div>
<div>
<p>At Dropbox, we design many interfaces that users experience on their desktop computers. What’s special about desktop design is that we can’t predict what the user’s screen will look like — messy desktops, noisy wallpapers, hundreds of Chrome tabs, the list goes on.</p>
<p>Despite knowing that most desktops are cluttered and full of distractions, I’m so often guilty of presenting my work as if it were on display at the MoMA.</p>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*NvcuND2iaZa7aiD2pn5wTg.png" alt="1*NvcuND2iaZa7aiD2pn5wTg.png"></div>
<p>Soft-pastel backgrounds, chromeless browsers, and no desktop noise all add up to a beautiful but unrealistic setting.</p>
<h3>Designing for the real world</h3>
<p>While it’s great to present work in a sanitized format, it’s also important to remember that those scenarios don’t actually exist. In fact, a user’s environment is usually a busy, distraction-prone space.</p>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*AZXk36qzQuJI99AsylFMpQ.png" alt="1*AZXk36qzQuJI99AsylFMpQ.png"></div>
<p>It may not be pretty, but it’s closer to what our users will actually experience.</p>
<p>New emails coming in by the minute, calendar alerts telling you to run to your next meeting, and dozens of Chrome tabs nagging you about tasks you shouldn’t forget. It’s a wonder anyone gets work done.</p>
<h4>Simulating a desktop</h4>
<p>At Dropbox, we found that simply presenting our work with a realistic desktop environment behind the design surfaced new ideas and challenged the way we thought about desktop interfaces.</p>
<p>So to make it easier for designers to place their work on a desktop surface, we created a Sketch template with a few basic macOS and Windows desktop environments.</p>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*mixN91DpCy3XwuKcP-OAuQ.png" alt="1*mixN91DpCy3XwuKcP-OAuQ.png"></div>
<p>A Sketch template to make it easy to simulate desktop environments.</p>
<p>This Sketch template made it dead-simple for designers to drop their designs into a believable macOS or Windows desktop environment before printing it out for design critiques. While the added context helped, we found it was missing a crucial aspect — ⏰ time!</p>
<h4>Adding the dimension of time</h4>
<p>What happens before, during, or after a user interacts with an interface is almost as important as the actual interface. Working on the Dropbox installation flow, here are a few questions we need to ask:</p>
<p><strong>⏮️ Before: </strong>Why are they installing Dropbox? Did an impatient client just email them a link to a Dropbox folder and they are installing Dropbox to access the folder?</p>
<p><strong>⏸ During:</strong> What applications do they need to access when they install Dropbox? Do they need to switch between Safari and Finder to complete the onboarding?</p>
<p><strong>⏭ After: </strong>What distractions pull them away from installing Dropbox? Were they mid-way through the onboarding flow when a Calendar alert reminded them to call a client call in 5 minutes?</p>
<p>Questions about what a user is experiencing before, during, and after they encounter your designs can help you prioritize. For example, if a user is installing Dropbox right after being invited to a folder, maybe the onboarding should point out that new folder.</p>
<p>Prototyping is time consuming and it’s impossible to catch <em>every </em>scenario. Don’t let that scare you off, though. Even presenting work in a single, plausible scenario can focus the type of feedback you get from teammates and can help you uncover new ways to improve your final design.</p>
<h3>A kit for prototyping</h3>
<p>Having experienced the benefits of presenting my work in a realistic desktop prototype, I wanted to encourage other designers at Dropbox to try the same.</p>
<p>My first idea was to simply expand our Sketch templates and use InVision for the prototyping portion. This didn’t quite hit the mark. The final prototypes didn’t feel realistic and basic system level actions like drag-and-drop weren’t possible.</p>
<p>Since Framer was my favorite tool for creating desktop prototypes and the Dropbox team already actively used it, I decided to make it our go-to tool for desktop prototyping. With the help of our Design Systems team, we built out a kit of reusable Framer desktop components. It included all the building blocks our team might need to prototype realistic macOS and Windows environments.</p>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*GRfJJjSSGRx5-E8zi0X2Lg.png" alt="1*GRfJJjSSGRx5-E8zi0X2Lg.png"></div>
<p>We released the kit internally a couple months ago and our design team has found it to be a great starting point for quickly creating realistic desktop prototypes. Our hope is that we continue to push each other to ask challenging questions about what happens before, during, and after our users interact with our designs.</p>
<h4>Download our Framer Desktop kit</h4>
<p>We want to see the design community benefit from the weeks of work that went into this prototyping kit, so today we’re publishing the Desktop Kit on the Framer website! Head over to <a href="http://framer.com/getstarted/resources/#community-resources"><strong>framer.com/resources</strong></a> to download it.</p>
<div><a href="http://framer.com/getstarted/resources/#community-resources"><strong>Design, code and collaborate.</strong><br /><em>Download our free UI elements and kits to easily start your next design project, or learn Framer with online courses…</em>framer.com</a></div>
<p>Here are some tips to getting started with the Desktop Kit:</p>
<h4><strong>The Design tab</strong></h4>
<p>The first thing to notice when opening the kit is that the macOS and Windows 10 applications are drawn right on the Design tab. This drastically speeds up the learning curve and gives people who are more familiar with Sketch an easy place to start.</p>
</div>
<div>
<p>In fact, each piece of desktop UI has been hand-drawn in Framer, down to the tiniest of icons. This makes customizing the kit a breeze and is a huge testament to the flexibility of Framer.</p>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*kECYi5OKTP1EsBkgk9sEYA.gif" alt="1*kECYi5OKTP1EsBkgk9sEYA.gif"></div>
<h4>The Code tab</h4>
<p>For each application, you’ll find a set of corresponding functions on the Code tab. These code snippets allow you to do things like set the operating system, open and close applications, and throw in system alerts.</p>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*OxJNJ_ORNWo8O0kU0ynJTA.gif" alt="1*OxJNJ_ORNWo8O0kU0ynJTA.gif"></div>
<p>Using the Desktop Kit’s browser functions in the Code tab</p>
<p>What’s more is that you can switch between operating systems in seconds. Every application and system alert in the Desktop Kit has both a macOS and Windows 10 version. It’s never been easier to see how your design looks in a Windows environment.</p>
</div>
<div>
<h4>A few examples to get you started</h4>
<p>In the Desktop Kit you’ll find everything you need to create the following examples. On the Code tab, just double click on an example and uncomment the code inside to activate it.</p>
<p><strong>1️⃣ Announcing a new feature<br /></strong>Imagine you’re designing a landing page for a new product, like Dropbox Showcase. It can help to understand how a user first gets to your design. For example, what if an alert prompted them to open a promotional email which then linked to your landing page.</p>
</div>
<div>
<p>2️⃣<strong> Onboarding with distractions<br /></strong>We often assume that users have <em>all day</em> to finish our beautiful onboarding flows, but real life tends to get in the way. This example simulates a busy desktop environment with an alert reminding the user of a meeting in 5 minutes. Seeing an onboarding flow under this light may help you keep your onboarding simple and to the point.</p>
</div>
<div>
<p>️3️⃣<strong> Multi-window interactions<br /></strong>In this example, a user adds their first file into the Dropbox folder which prompts them to view the synced file on dropbox.com. When designing user journeys that span multiple surface areas, it can be very helpful to see the entire experience in one place.</p>
</div>
<div>
<h4>😊 Download and enjoy!</h4>
<p><a href="http://framer.com/getstarted/resources/#community-resources">Download</a> the Desktop Kit and let us know what you think! When your next project hits the prototyping phase, you’ll be well prepared to take it to the next level.</p>
<div><a href="http://framer.com/getstarted/resources/#community-resources"><strong>Design, code and collaborate.</strong><br /><em>Download our free UI elements and kits to easily start your next design project, or learn Framer with online courses…</em>framer.com</a></div>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<p><em>Huge thanks to </em><a href="https://www.behance.net/gabriellematte"><em>Gabrielle Matte</em></a><em> for creating the perfect image for this blog post, </em><a href="https://twitter.com/ANoffsinger?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><em>Adam Noffsinger</em></a><em> for helping create the Desktop Kit, and </em><a href="https://twitter.com/saitojohn?lang=en"><em>John Saito</em></a><em> and </em><a href="https://twitter.com/angiegorden"><em>Angela Gorden</em></a><em> for helping write this post.</em></p>
<p><em>Want more from the Dropbox Design team? Follow our </em><a href="https://medium.com/dropbox-design"><em>publication</em></a><em>, </em><a href="https://twitter.com/dropboxdesign"><em>Twitter</em></a><em>, and </em><a href="https://dribbble.com/dropbox"><em>Dribbble</em></a><em>. Want to make magic together? </em><a href="https://www.dropbox.com/jobs/design?gh_src=2x3mfd1"><em>We’re hiring</em></a><em>!</em></p>
</div>
</div>
</div>
<div><a href="https://medium.com/dropbox-design/desktop-prototyping-a6004fb5598a">https://medium.com/dropbox-design/desktop-prototyping-a6004fb5598a</a></div>


Desktop prototyping – Dropbox Design – Medium

Desktop prototyping – Dropbox Design – Medium

Top Stories