Web Resources #45

Also available in: Français

Long time with no selection. Here is a big one with a medley of UX Design and User Research resources, but also SXO, SEO, UI Design and fun tools to compose color palettes, JavaScript and CSS demo to learn animated stuff and modern JS, and some great Accessibility resources and articles.

You can keep up to date following me on Twitter. I tweet a bit everyday to share all those resources.

If I had to keep one

LeonardoColor.io is a tool to help you build consistent color palettes and systems by improving the accessibility of you interface.

UX Design and User Research

UX Design is about knowing your users, but also knowing yourself as a biased person who tries to get a bit of empathy. Here are some resources to help you doing all of that.

• User Task Canvas – Auto-promotion with this canvas to help you catch user task and activities to better understand their needs.
• UX Starter Crash Course – Experience feedback and a starter kit to download to well start your user research.
• Design Better Forms – Some good advises to take away to build better forms.
• BatUX – Using a UX process to redesign Batman’s classic outfit. A good way to learn and explain design process.
• BravoStudio – Turn Figma Prototype into native applications.
• SEO and SXO Links Collection – A collection of links for winter 2019-2020 by Myriam Jessier.
• 52 UX Cards to Discover Cognitive Biases – Learn how to use those cards and downloadable.

UI Design and Visual Design

Great tools to help you build colorful and contrasted interfaces and illustrate those with illustration and great vector images.

• Smooth Shadow – A tool to build custom rich and smooth shadows. A plugin for Figma is also available.
• Think about color – How Cloudflare bring consistency into their color system.
• WooBro Vector Images – Free vector images and scenes for commercial use.
• Illustrations.co – Designed all 100 awesome illustrations during 100 days of illustration challenge.
• The Icon Kaleidoscope – Redesigning over 100 icons with new colors, materials, and finishes.
• Happy Hues – Not sure what colors to use in your designs or where to use them? Happy Colors is a color palette inspiration site that acts as a real world example as to how the colors could be used in your design projects.
• LeonardoColor.io – Create an adaptative color palette for better contrasts.
• How to make a dark mode favicon – A trick with SVG favicon that works really well.
• Pantone Color of the year – We have got our color for 2020 😀
• Mobile UI Design Trends in 2019 – Some inspirational examples of UI Design.

Animating and styling with CSS

A lot of resources on Custom Properties (AKA CSS Variables), but also resources to learn RTL styling and animation.

• Pure CSS Counters – You can count and display the counters in CSS. Did you know that?
• Right-to-left Styling – An extensive guide on how to style for RTL in CSS.
• Experimental Menu animation – Using animated clip-path and CSS only for animations.
• 7 Uses for CSS Variables – 7 examples on how to use CSS Custom Properties in real life.
• Interactivity and Animation with Variable Font – That’s all in the title ;p
• CSS Custom Properties to reduce CSS file size – Yes but be careful with the performance.
• Custom Accessible Checkbox and Radio button in CSS – an old but still good reference.

JavaScript and PWA

Learn how JavaScript works and how to learn modern JS building a Tetris game.

• PWA : Adaptive inc support – A new icon format to use adaptive icons on supported platforms.
• CSS-in-JS Performance Cost – The unseen performance costs of modern CSS-in-JS libraries in React apps.
• Learning modern JS with Tetris – A good case study to learn modern JavaScript.
• The JavaScript Engine – Discover how the JavaScript engine works with your code.
• Flowy – Minimal Library to build flowcharts.

Accessibility and quality

Some people think building accessible interfaces is for “accessibility extremists”. You would be glad to learn that is a part of the job for a proper Designer. Great readings to follow.

• Accessibility Tips for Web Developers – Good list of what you should take into account when you care about users as developer.
• There is no “Myths of Color Contrast Accessibility” – A blog post for designers who cares about real people.
• Inclusive Components – All about designing inclusive web interfaces, piece by piece.
• Accessibility Checklist – A checklist to avoid the most common accessibility errors.
• Accessibility drives aesthetics – A good reminder on how design really works.

Have fun and share the love!