Issue 19 – July 2019
Five Habits of Design Thinking, Every Layout, Prototyping Voice UI and Keyboard Accessibility, and: Shape Up.

Links

Five Habits of Design Thinking

Design Thinking is a powerful methodology. It allows you to explore research and ideas widely and helps you define the problem space. By producing a wide range of ideas and narrowing insights down to possible solutions with tests, it then helps you implement only the most viable and innovative solutions. But putting Design Thinking into practice effectively isn’t easy and requires practice and the right approaches. Otherwise, it’s just buzzword bingo. Christina Wodtke shares five habits of Design Thinking, from interviewing to critique and iteration, that will help you internalize Design Thinking and build better products.
https://medium.com/@cwodtke/five-habits-of-design-thinking-45bb61b30393

6 Things I Learned by Building My First Voice Prototype

Voice UI might still not be on your radar if you are primarily building websites or other more “classical” screen-based user interfaces. But the number of devices with voice capabilities and voice experiences like Amazon Alexa Skills is growing rapidly. Voice UI is here to stay and it’s time to get your head around the specifics of designing and prototyping voice user interfaces. Cara Neel shares her experiences from building a voice-first home security skill for Amazon Alexa called HomeSafe in Adobe XD and explains, for example, why you should talk to your prototype as much as you can and user test early and often.
https://theblog.adobe.com/6-things-learned-voice-prototyping-designing-voice-uis

Every Layout – Relearn CSS layout

With the advent of Flexbox, CSS Grid, and multi-column layout, the possibilities to solve different layout problems have changed quite substantially. CSS layout isn’t a hack anymore and it’s about time to explore the best ways to work with those powerful layout algorithms. Whether you want to implement new layout solutions in production right away or want to explore them in prototypes first, Every Layout by Andy Bell and Heydon Pickering is an invaluable resource.

“Employing algorithmic layout design means doing away with @media breakpoints, “magic numbers”, and other hacks, to create context-independent layout components. Your future design systems will be more consistent, terser in code, and more malleable in the hands of your users and their devices.”
https://every-layout.dev/

Smart Prototyping with Arduino and Framer X

Prototyping is perfect to try out new technologies and learn more about the materials we use to build our design solutions, especially when it comes to emerging technologies and web-connected hardware. In this post, Steve Ruiz walks you through the process of building a prototype that connects Framer X to an Arduino Uno and lets you control three LEDs over a slider UI. Time to buy that Arduino Starter Kit, it seems…
https://medium.com/@steveruiz/smart-prototyping-with-arduino-and-framer-x-126fc529011a

Best Practices for Prototyping Keyboard Accessibility

That we all are building interfaces and websites that are accessible to everyone should be a given – but it is still neglected far too often. One of the input methods your design should support is the good old keyboard. For many people, it is the primary method of navigating the Web and interacting with user interfaces. In this article, Oliver Lindberg shares a number of tips by four accessibility and UX experts to help you implement the keyboard operation of UI, which is also useful when you want to build prototypes to test and improve the accessibility of your interface.
https://theblog.adobe.com/best-practices-for-prototyping-keyboard-accessibility/

Prototyping with Angular

Prototyping with code and real data is incredibly powerful, especially if you want to test concepts and ideas with real users and already have a working product and a component library or design system in place. Google’s Edwin Lee writes about how he used AngularJS to prototype an improved search experience in Greentea, Google’s internal CRM, using Google Sheets as a backend database.
https://blog.angular.io/prototyping-with-angular-a83fbf0533ef?gi=5061417ad772

Prototype Showcase

If you are looking for some inspiration for your next prototyping project, take a look at Prototype Showcase by the UXPin team. It’s a nice curated gallery full of prototypes from designers around the world.
https://showcase.uxpin.com/

Books

Shape Up, by Ryan Singer

The team at Basecamp is known for approaching projects differently but their unique process has never been laid out for all to see – until now. With “Shape Up” Ryan Singer has written an inspiring and insightful (free) book about how to design and build products differently by creating “a spirit of prototyping and piecewise enablement among the designers and programmers” and “shaping” work in six-week cycles, on two parallel tracks.

“Shaping work is qualitatively different from building. It’s unknown in advance which ideas will turn into bettable projects and which ones won’t. Some projects are shaped quickly, some take multiple cycles, and some never come together. What’s important is to always have some good options for the betting table before each cycle.”
https://basecamp.com/shapeup

Webinars & Video Tutorials

Prototyping With React + Framer

Prototyping With React + Framer is a new online course that takes you through the creation of several UI component prototypes. Along the way, you’ll learn the basic concepts of JavaScript and React. The first two modules of the course are free to try.
https://learnreact.design/prototyping-with-react-framer

Prototyping Your Game With A Gamepad (Adobe XD Tutorial)

Adobe XD allows you to prototype interaction with gamepad triggers. In this short tutorial video, game developer Thomas Brush shows you how you can prototype a menu flow in XD with gamepad triggers and animated transitions.
https://www.youtube.com/watch?v=n0roaS5qGuU

Tools

Automate work. Bring in real data. Extend what’s possible with Figma Plugins.

Figma, the design and prototyping tool, can now be extended with plugins. Over 40 plugins are already available, ranging from utility plugins that help automate repetitive tasks to accessibility plugins.
https://www.figma.com/blog/introducing-figma-plugins/

“Alexa, Open Adobe XD”: Introducing XD’s Integration with Amazon Alexa

Voice prototyping without a line of code has been a part of Adobe XD for a few months. With a new XD plugin and an Alexa Skill, you can now also test your prototypes on real Amazon Echo devices. This is especially interesting if you are building a multi-modal UI that combines voice and touch interactions.
https://theblog.adobe.com/alexa-plugin-skill-xd-export-test-voice-prototypes-on-echo/

Introducing Framer Motion

Framer Motion is the production-ready motion library for React that powers Framer’s animations and advanced gestures. Now, Framer Motion is available as an open-source animation library!
https://www.framer.com/blog/posts/introducing-framer-motion/

A New System for Designing Motion With Both Sketch and Figma

AEUX is by Adam Plouff and the team at Google Design is a new set of panels for After Effects and Sketch and a converter for Figma that let you transfer layers into After Effects to create motion prototypes for your UI design.
https://medium.com/google-design/aeux-f79e06e01594

July 2019 Release of Adobe XD: Improved Designer-Developer Collaboration, Mobile Commenting, and More

The July release of Adobe XD brings improved designer-developer collaboration with unified links, which means that you can now share a link that includes both an interactive prototype and the design specs of your project. You can also navigate prototypes with a new grid view and view and comment on prototypes right from your mobile device.
https://theblog.adobe.com/xd-july-2019-update-unified-links-grid-view-mobile-commenting/

Smart Distribute, Cloud documents and Sketch for Teams — What’s New in Sketch?

Sketch also received another update this month. The team improved the recently added Smart Distribute feature that now also supports a grid layout. Text overrides for Symbols can be edited directly on the canvas and Sketch lets you now open and save Cloud Documents.
https://blog.sketchapp.com/smart-distribute-cloud-documents-and-sketch-for-teams-whats-new-in-sketch-4de2e21e1d6f

Import Sketch Designs into Axure RP

If you’re designing your UI in Sketch and using the new Axure RP 9 for wireframes and prototyping or also documentation, there’s now an easier way to get your work from Sketch to Axure: A plugin, that also converts your layers into Axure widgets.
https://www.axure.com/blog/import-sketch-designs-into-axure-rp

Fragments iOS Wireframe Kit

Fragments is an iOS wireframing kit that contains Figma & Sketch files with over 370 layouts in 10 categories and over 100 elements based on the GUI of iOS.
https://fragments.pixsellz.io/