Web Resources #43

Also available in: Français

Long time no see. This selection offers a lot of Design resources to help you build ideation session, test interface during user testing sessions or exploit your user biaises to build better products. Alongside those resources, development tools, articles and tutorial will help you with new CSS and JS stuff. Also, I need you help at the end of the article :p

Design resources

You want to exploit your user biaises to build better product? Or test high fidelity mockup on your user without sacrifice rich interaction? Read this selection on UX, UI and Design System!

• Origami Studio – A design tool to help you build High Fidelity interactive mockup for better user testing phases.
• 84 cognitive biaises… – A list of cognitive biases you should exploit to design better products.
• Marking Required Fields – Should you mark the required fields in a form? If most fields in the form are required, should we still mark them? The short answer is yes. But read this article for more detail.
• How to get buy-in for building a Design System – How to start the conversation with stakeholders and get a design system off the ground.
• Micro Design System – breaking the monolith. It’s time for us to mature our design systems and prepare for the future.
• Interview of Stéphanie Walter about accessibility – “for me, it’s also part of the designer’s job to make sure products and services are accessible.”
• Undesign – Collection of free design tools and resources for makers, developers and designers.
• Tarotelling to help you ideate – I tested this method (and the cards are so beautiful) during the last Flupa UX Days at Paris (June 2019).

Development resources

If you are into Flex and Grid in CSS, if you want to now more on performance with lazy loading, or if you want to build Apps with Google Drive API, take a look at this selection.

• DialogFlow – Build natural and rich conversational experiences.
• CSS Subgrids – CSS Sub Grids is a new part of Grid Layout, supported in Firefox Nightly for the moment.
• CSS Variable Performance – An article on CSS Custom Properties usage and performance.
• Breaking a new row with flexbox – Trips and tricks with flexbox to create a new row.
• Grids for Gutenberg – Quickly manage all the features of your posts created with the WordPress Block Editor, from design to proportions, in real time!
• Sheety – Turn any Google sheet into an API instantly, for free. Power websites, apps, or whatever you like, all from a spreadsheet. Changes to your spreadsheet update your API in realtime. Neat.
• Did You Know: defaultValue in JS – A little article of mine on a specific part of JavaScript, defaultValue and how to handle it.
• Native Lazyloading – A Deep Dive into Native Lazy-Loading for Images and Frames.

Graphic resources

Some icons and new type of fonts.

• Love, Death & Robots Icons – After watching “Love, Death + Robots”, the Netflix anthology by David Fincher, two designers – Michael Chernyak and Ofer Ariel, set out to recreate the original icons used in the show.
• 240 LGBT Icons for free – 240 vector illustrations in 3 styles: Multicolour, Duotone, Monotone.
• Color Fonts – Color fonts represent a key evolution in digital typography, introducing rich graphic features into font files.

Applications & Other resources

Phone comparison, game and a little bit of Mac applications.

• Recents for Mac – Recents is a file launcher designed for Mac. It boosts productivity by putting your recent files at your fingertips.
• Gadgets Now Compare – A tool I used last week to compare phones before changing for a new one.
• PhoneArena – Another tool I used to compare phone dimensions.
• Game: Menja – A mini game that reminds me Fruit Ninja.
• Notre-Dame de Paris 3D Project – Tribute to Notre Dame de Paris.

Questions for you

2 tweets I need your help with 😀 Thanks!

• Can you name this component? – A simple question: I give you a component (screenshot), you name it. Should be easy, but it looks like it is not.
• How do you read on screen? – Some people use the edge of the screen to help them while reading, do you?

Good reading and have fun!