Les Ressources Du Web #38

Pour cette sélection, une grande liste de ressources graphiques et de design UX/UI vous attendent. Quelques belles démos CSS, et astuces en HTML, SVG et JavaScript sont également au RDV. De quoi rattraper un mois sans article de ma part :p

Retrouvez une liste de ressources graphiques, d’articles d’inspiration sur du design, du User Interface ou de l’UX, de codes CSS, HTML ou JS et tutoriels dans cette sélection d’outils et liens utiles des derniers jours ou semaines. Si vous voulez être tenus informés plus fréquemment des ressources que je dégotte sur la toile, suivez-moi sur Twitter : @geoffrey_crofte

Ressources en CSS, HTML et SVG

De l’animation, des Variables CSS, un retour sur l’intégration d’e-mail, ainsi que de la manipulation de SVG. Ready? Go!

• Gradient On Text and CSS Variables — un effet joli mais inutile de dégradé de couleurs sur un texte.
• @keyframes — une chaîne Youtube de tutoriels pour créer des animations efficaces et fluides.
• How display: contents; works — explication de la valeur contents de display.
• New to email coding? – un bon point de départ si vous démarrez en intégration d’e-mails.
• Focusing on focus styles — un bon article sur le focus en CSS. Mangez-en 🙂
• Animated SVG Radial progress bar — animez une barre de progression radiale.
• Contextual Styling — des styles contextuels grâce aux CSS Custom Properties.

Ressources en JS

Deux petites ressources bien sympathique, une librairie JS moderne ainsi qu’un gros topo sur le Lazy Loading d’images et vidéos.

• GlideJS — un slideshow en JS ES6 sans dépendance vraiment léger et efficace.
• Lazy Loading Images and Videos — un topo complet sur le lazyloading, même des images en background.

Ressources Graphiques

De l’UI Kit, de la typography ainsi que de l’inspiration pour des empty states ou de l’iconographie.

• Fancy Mobile UI Kit – un UI kit simple et sexy pour vos concepts d’applications.
• EmptyStat.es – une liste d’écran « vides » de donnée/contenu pour inspiration.
• Fontisto — une icône-fonte personnalisable et accessible aboutie.
• HueSnap — récupérer des palettes de couleurs depuis une image.
• Riviera Font – une belle typo uppercases baton ronde gratuite.

Articles de design et Inspiration

Des astuces sur de l’animation pour les rendre efficaces, de l’inspiration pour vos designs systems, quelques retours sur du redesign de marques et un beau folio animé pour votre inspiration.

• Good to Great UI Animation tips –des astuces pour faire des animations efficaces.
• Celia Lopez Portfolio — un excellent portfolio très immersif.
• Amex Brand New Logo — un article explicatif de la nouvelle marque Amex.
• Making it pretty will not make it usable — une histoire vraie de l’échec d’un projet lié à l’absence d’implication de UX Designer en amont.
• Design Systems Repo – un regroupement de repositories de Design System pour votre inspiration.
• 36 Days of Type 2018 — inspiration avec quelques animations typos.
• The Inside Story of Reddit Redesign — l’histoire du redesign de Reddit.
• Beautiful and functional interfaces — « la beauté est subjective… »

Ressources UX

Plein d’outils pour bosser encore plus efficacement en tant qu’UX Designer, ainsi que articles critiques sur l’onboarding et les Card UIs.

• UserOnBoard – une liste de cas d’onboarding sur des services variés.
• Mobile App Onboarding – les choses à faire et ne pas faire pour de l’onboarding.
• PitFalls of Card UIs — une critique des « cards » en UI. Quelques bons points.
• Proto.io — un outil de prototyping plutôt bien foutu.
• Overflow — un outil pour créer des userflows.

Très bonne lecture !