Digital Design Digest #3

March 2019

Published in

UX Planet

8 min readApr 4, 2019

Spring is in the air. Spring motivates us to create something genuinely beautiful. And today I want to share a list of new tools and resources that will make it possible.

In this digest you’ll find:

🌠 6  new guidelines and frameworks
💎 10 content generators
🚀 7 tools for prototyping and testing
💪 2 productivity tools
💫 3 tools for your inspiration

But that’s not all! This issue focuses on web design tools. So you’ll find 14 great tools for web designers and developers.

Patterns, Frameworks and Guidelines

1. Checklist.design

A collection of the best UX and UI practices.

2. Framework to give better design feedback

Analyze, Discuss, Suggest A simple framework to give constructive design feedback.

3. Guide to Material Motion in After Effects

A basic sticker sheet and workflow for animating user interfaces. It will be helpful for anyone who wants to bake animation in their products.

Storybook is the world’s favorite UI component workshop. It enables structured UI development, testing, and documentation for every major view layer including React, Vue, Angular, React Native, and Ember.

5. Humane by Design

Humane by Design is a resource that provides guidance for designing ethically humane products.

6. IBM AR/VR guidelines

Virtual and augmented reality provides opportunities to empower the user like never before. IBM shares excellent guidelines on how to design for this medium.

Content collections and generators

1. Populate

170+ collections of real content to populate all your designs.

2. Friendly Faces

A fantastic little tool to generate an avatar.

3. Get avatars

Another tool for avatar creation. It allows customizing selection of hair length and color, accessories, clothing, eyes, eyebrow and skin.

4. Joe Schmoe

An illustrated avatar collection for developers and designers.

5. This Person Does Not Exist

A collection of randomly generated headshots for projects. The images are computer generated (not of real people).

6. Generative.fm

The term “generative music” describes music which changes continuously and is created by a system. Such systems often generate music for as long as one is willing to listen. This site is a collection of generative music pieces which can be listened to.

7. Speak Human

Generate human-centric microcopy for all purposes

8. Charts for Sketch

The most comprehensive collection of charts, graphs and diagrams for Sketch. Charts are grouped in categories such as area charts, bar chart and bubble charts and include three color schemes each (standard, black and wireframe).

9. Colorsupplyyy

Color picker, with previews and color schemes preselected by featured artists.

10. IconSVG

IconSVG is a collection of SVG icons that you can customize. Play with color, size and stroke width.

Prototyping and Testing

1. Mock

With Mock, you can instantly create mockups. Simply add a device frame to your videos.

2. Haiku Animator

Haiku Animator, formerly Haiku for Mac, now works on all devices. The tool allows you to animate elements for any iOS, Android or web apps. It’s possible to use Illustrator, Sketch of Figma to sync design assets and create animation without After Effects.

3. Accessible Brand Colors

This tool shows you how ADA compliant your colors are in relation to each other. By adding your brand’s colors on the right, you can generate a chart to see how they can be used together for accessibility, and find similar colors that work better.

4. BillUI

Sketch plugin — interactive artificial evolutionary tool in order to help you come up with design suggestions that are similar to your initial design.

5. Voiceflow

Voiceflow makes it easier to design, prototype, and build voice apps. Create voice apps for Amazon Alexa and Google Assistant without any coding.

6. Marvel User Testing

Marvel introduced usability testing in their prototyping tool.

7. Maze 2.0

Maze released the second version of their plugin. Maze works with InVision, Marvel & Sketch prototypes.

Productivity

1. DeckRobot

DeckRobot uses artificial intelligence to make your presentation look better. You can upload slides created in PowerPoint or Keynote, AI will learn your style and will help you.

2. AXDraft

AXDraft provides free legal documents for startups. Don’t let legal matters distract you from building your company!

Web design tools

1. HTML Periodical table

Simple periodical table for HTML 5 elements.

2. CSS Selectors Cheatsheet

This cheatsheet is designed for a quick search on CSS selectors.

3. DropCSS

A simple, thorough and fast unused-CSS cleaner

4. Flexulator

A small app to help you understand flexbox space distribution.

5. Lunar Popup

Lunar Popup is an HTML/CSS animated popup builder for your website. Every popup is responsive, customizable and works with layers for easy building and deployment.

6. Fastcharts

Fastcharts allows you to create Area, Bar, Column and Line Charts using real data.

7. Handtrack.js

Handtrack.js library allows you track a user’s hand (bounding box) from an image in any orientation, in 3 lines of code.

8. Image Distortion Effects

Three distortion effects powered by SVG filters that are applied to an image when hovering a link.

9. Text Trail Effect

A text trail effect for a slideshow inspired by the “Abstract is hiring” Dribbble shot.

10. Debucsser

Debucsser introduces a different approach for CSS debugging tools. A simple outline, class name, and IDs on hover — that’s it.

11. Aminoeditor

A live CSS editor for Chrome that lets you apply persistent user style sheets to entire domains or individual pages and access them from multiple computers.

12. Formatting JS library

A little library to format input when users are typing. Good for credit card number formatting, phone number formatting, date, time, or any other custom options. Available as ReactJS component.