Newsletters > Issue 14: ๐Ÿ™Œ Responsive Grids in Sketch 44 and How a Good User Experience Should Make You Feel!










๐Ÿ™Œ Responsive Grids in Sketch 44 and How a Good User Experience Should Make You Feel!








Prototypr.io

Design, Prototyping and Inspiration

Last week, readers loved our list of new tools on the prototyping radar, so we’ve got more tools for you this week in issue #14. Here’s the 3 sections we’ll cover:

  1. 5 Products and Tools to Try
  2. 6 Articles on Sketch – Tutorials and Updates
  3. 3 from the Publication

๐ŸŽ Also, if you haven’t tried it yet, check out our web app for hand picked design news and inspiration every day.

โญ๏ธ 5 Tools to Try Out

New Tools to Try Out:

Check these out for your design workflow – from CSS to collaboration:

1. Introducing iotaCSS

“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 Dimitris Psaropoulos!


Check it out!

2. Meet Ludus: PowerPoint for the 21st Century

Who likes powerpoint? Ludus is a new presentation tool for creative people, see it as PowerPoint for the 21st century” ๐Ÿค” Looks cool, Vincent Battaglia explains all.


Meet Ludus

3. Purple: Flexible project boards

A tool to keep your whole project in one place – from Sketch files to Marvel prototypes. “Flexible project boards for designers and creators”.


Find out more

Updates to Try:

For 4 and 5, here’s a couple tools that have recently added new features:

4. Zeplin now generates React Native code snippets

Generate React Native code snippets for colors, text and text styles (for iOS and Android projects). If you’re a big Zeplin user, let us know what you think!


Read the Tweet

5. Introducing Figma Mirror for Android

Figma have stopped neglecting Android users, making their Mirror App available for Android devices ๐Ÿ™Œ โ€“ real time mirroring for everybody.


Read more

๐Ÿ’Ž 6 on Sketch!

Here’s 6 articles teaching us something about Sketch – including everything you need to know about Sketch 44 Beta:

1. Prototyping with Sketch & Principle

Marc Andrew is back, with a full chapter excerpt from his book, Sketch App Essentials. He shows us how to create a beautiful user profile animation using Principle & Sketch ๐Ÿ‘Œ


Learn some Principle

2. Sketch 44 Betaโ€Š (In Depth) โ€“ Creating a Responsive Grid

Isaac Minogue 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.


Find out about Sketch 44

3. Sketch Process for Beginners

Jessica Jiang runs us through a few tips on how she uses Sketch, along with some amazing articles that helped her get started.


Learn now

4. Sketch 44 Resizing: How does it work???

Jon Moore keeps on smashing it at UX Power Tools. This time he’s teaching us how Sketch 44 Beta’s resizing feature works.


Find out more!

5. The Hidden Benefits Of Writing Sketch Plugins

Vince Schwidder, Co-Founder & Designer at @Yummygum, explains the benefits of building Sketch plugins to improve the design workflow for yourself and others. Maybe learning a little code won’t hurt so much.


Read now

6. Why Iโ€™ve moved โ€œmostlyโ€ to Sketch to design UI.

It’s a bit of an old comparison, but Brett Hales 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 Avocode’s tool will come in useful!


Read now

โค๏ธ 3 from the Publication

Here’s 3 featured articles from our publication:

1. How a good user experience should make you feel!

Thanasis Rigopoulos explains user experience can be improved by focusing on learnability, affordance, consistency, and discoverability.


Read now

2. The lessons I learned from a logo design project

Andrew Wilshere takes us through his design process for coming up with a full set of logo assets. From research and ideation, to hand off.


Read now

3. Atomic Design in Practiceโ€Šโ€”โ€ŠDoes It Work?

Browser explore both the benefits and drawbacks of Brad Frosts’s Atomic Design framework, concluding that long term value can be created using it.


Read now

๐Ÿ”ฅ More Links this Week

More great links that are well worth your time ๐Ÿ‘Œ:

I Got Rejected by Apple Musicโ€ฆ So I Redesigned It โ€“ Startup Grind โ€“ Medium

I’d like to preface this case study by stating that my intentions behind redesigning Apple Music were in no way driven by indignation or spite.Earlier this year I applied and interviewed for a graphic design internship at Apple Music (an opportunity of a lifetime), and was turned down with a very kind letter stating that although they liked my work, they wanted to see more growth and training.At first, I was frustrated — Northwestern University …

Design Better Data Tables The ingredients of a successful data table user interface design

Designing the future of global trade @Flexport Join us: https://www.flexport.com/careersMay 7Data is useless without the ability to visualize and act on it. The success of future industries will couple advanced data collection with a better user experience, and the data table comprises much of this user experience.Good data tables allow users to scan, analyze, compare, filter, sort, and manipulate information to derive insights and commit actions. This article presents a list of design …

Floating Action Button in UX Design โ€“ UX Planet

I’m a software developer, tech enthusiast and UI/UX lover. http://babich.bizby Nick BabichFloating Action Button (FAB) is a very commonly used control in Android apps. Shaped like a circled icon floating above the UI, it’s a tool for designers to call out the key parts of the app’s product story. FAB is quite simple and easy to implement UI element, but designers often incorrectly incorporate it into designs.In this article you’ll find answers on following …

A bit about the IKEA effect

The IKEA effect is a cognitive bias that can influence the outcome and perceived value of products to a big degree. People tend to place high value on products they partially have created. Hence, the name IKEA effect. It is derived from the Swedish furniture retailer famous for products that require to be assembled by the customers.Products designed by IKEA and LEGO are great examples of this psychological effect. Designers must have the IKEA effect in mind when designing solutions and …

Best Chrome extensions for designers

Mobile Ui/Ux Designer at Tripsta,travelplanet24,airtickets – Start-up enthusiast – Early Adopter – Product hunterApr 17So recently I switched from Safari to Chrome and I found out that extensions in Chrome are growing at a much faster rate than in Safari were extensions are gradually dying.As you may imagine with great enthusiasm I started looking for the best plug-ins that may come handy to a designer like myself.Well after some hours of searching and testing if the plug-ins are doing …

3 priceless learnings after 1 year out of Design school Real world is always different from your schโ€ฆ

12 months after my last day as a Design student, I thought it was interesting to share some insights I’ve learned during this time in between Paris and the Silicon Valley.It is also what I was curious to know as a student before. How can I make the best first step? How should I prepare myself? Even if my major was dedicated to my current position, we all know that things can never be similar from school to the real world. Hence, it is important to understand how real world is …

Your team’s new workspace

https://ora.pm/?ref=prototyprio

User Onboarding Spotlight: Why Yummlyโ€™s UX is Absolutely Delicious

A simple & powerful qualitative app analytics platform that enables you to measure, understand & improve the user experience in your mobile apps. www.Appsee.comWe love to shine the spotlight on apps that deliver stellar user experiences- and today is no different. Today, we’d like to highlight an app that has completely satisfied our craving for good UX: Yummly.In short, Yummly is a one-of-a-kind recipe app that allows users to discover, index, and share recipes from all …

How Prototyping Can Take Your Startup to the Next Level

Build high-fidelity fully interactive mobile app prototypes quickly. No coding required. Get a 15-day free trial at: www.proto.ioIf you’re an entrepreneur who’s trying to get your startup off the ground, prototyping a mobile app might be the last thing on your mind. Perhaps you’re hoping to generate some income before you venture into mobile app development because, well, you’re not a mobile app developer and you’ll need to hire one.Listen, we …

Google is developing a mysterious new mobile operating system called Fuchsia

Google seems to be building a replacement for Android called Fuchsia. Yesterday, they revealed what their new Armadillo user interface looks like (see photo above, courtesy of Ars Technica).Here’s what we know about Fuchsia so far:It’s written partially in Dart, an open source programming language developed by Google, which compiles to JavaScriptUnlike Chrome OS and Android, Fuchsia doesn’t use the Linux kernel. Instead, it has its own microkernel called Magenta.You …

About Material Components

The Material Design guidelines contain evolving visual, interactive, and motion guidance that can be customized to your app and website. Material Components provide a reliable development environment for apps and websites across Android, iOS, and the web. Components are updated as the Material Design system evolves, ensuring consistent pixel-perfect implementation and adherence to Google’s front-end development standards, such as internationalization and accessibility support. …

082: Airbnbโ€™s Gabriel tells us how to animate with Lottie

It’s pretty awesome, when you use a third party library, love using it and finally get to talk to the person who actually helped build it. In this episode, we talk to Gabriel Peal. Besides having quite the illustrious career in Android development, Gabriel now works at Airbnb and helped build Lottie – an animation library. What is Lottie, how do you use Lottie? why is so Lottie so cool? how does it actually work under the hood? Listen to this episode and find …

๐Ÿ‘‹ Thanks for reading

For more regular updates, follow us on Twitter and Facebook. Share with your friends, by hitting forwards. And respond to this email if you want to get in touch.

Facebook

Twitter

Prototypr

Coming to you with <3 from Gibraltar.


SHARE


TWEET


FORWARD