{"id":7146,"date":"2020-02-02T15:58:18","date_gmt":"2020-02-02T14:58:18","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=7146"},"modified":"2020-02-02T15:59:07","modified_gmt":"2020-02-02T14:59:07","slug":"les-ressources-du-web-45","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/ressources-telechargements\/les-ressources-du-web-45","title":{"rendered":"Les Ressources du Web #45"},"content":{"rendered":"<p>Cela fait un moment que je n&rsquo;ai pas fait de s\u00e9lection. En voici une grande avec un ensemble de ressources sur l&rsquo;UX Design et la recherche utilisateurs, mais aussi des outils SXO, SEO, UI Design et des outils amusants pour composer des palettes de couleurs, une d\u00e9mo JavaScript et CSS pour apprendre \u00e0 faire des choses anim\u00e9es, ainsi que des ressources et des articles sur l&rsquo;accessibilit\u00e9.<\/p>\n<p><!--more--><\/p>\n<p class=\"message remember\">Vous pouvez rest\u00e9s \u00e0 jour <a href=\"https:\/\/twitter.com\/geoffreycrofte\">en me suivant sur Twitter<\/a>. Je tweet un petit peu tous les jours pour partager toutes ces ressources.<\/p>\n<h2>Si je devais n&rsquo;en retenir qu&rsquo;un<\/h2>\n<p><a href=\"https:\/\/leonardocolor.io\/\">LeonardoColor.io<\/a> est un outil qui vous aide \u00e0 construire des palettes de couleurs et des syst\u00e8mes coh\u00e9rents en am\u00e9liorant l&rsquo;accessibilit\u00e9 de votre interface.<\/p>\n<p><a href=\"https:\/\/leonardocolor.io\/?colorKeys=%236fa7ff&amp;base=ffffff&amp;ratios=3%2C4.5%2C5.50&amp;mode=CAM02\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-7113\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/12\/leonardo-color-contrast.png\" alt=\"Leonardo Color Contrast Tool\" width=\"2876\" height=\"1560\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/12\/leonardo-color-contrast.png 2876w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/12\/leonardo-color-contrast-300x163.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/12\/leonardo-color-contrast-600x325.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/12\/leonardo-color-contrast-768x417.png 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/12\/leonardo-color-contrast-1536x833.png 1536w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/12\/leonardo-color-contrast-2048x1111.png 2048w\" sizes=\"(max-width: 2876px) 100vw, 2876px\" \/><\/a><\/p>\n<h2>UX Design et Recherche Utilisateur<\/h2>\n<p>L&rsquo;UX Design consiste \u00e0 conna\u00eetre ses utilisateurs, mais aussi \u00e0 se conna\u00eetre soi-m\u00eame, et s&rsquo;identifier comme une personne biais\u00e9e qui essaie d&rsquo;obtenir un peu d&#8217;empathie. Voici quelques ressources pour vous aider \u00e0 faire tout cela.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.creativejuiz.fr\/blog\/en\/resources-tools\/user-task-canvas-collect-users-activities-tasks-needs\">User Task Canvas<\/a> \u2013 Auto-promotion avec ce canvas pour vous aider \u00e0 saisir les t\u00e2ches et les activit\u00e9s des utilisateurs afin de mieux comprendre leurs besoins.<\/li>\n<li><a href=\"https:\/\/stephaniewalter.design\/blog\/ux-starter-crash-course-a-workshop-free-ux-kit-templates\/\">UX Starter Crash Course<\/a> \u2013 Un retour d&rsquo;exp\u00e9rience et un kit de d\u00e9marrage \u00e0 t\u00e9l\u00e9charger pour bien d\u00e9marrer votre recherche d&rsquo;utilisateurs.<\/li>\n<li><a href=\"https:\/\/uxdesign.cc\/design-better-forms-96fadca0f49c\">Design Better Forms<\/a> \u2013 Quelques bons conseils \u00e0 emporter pour construire de meilleurs formulaires.<\/li>\n<li><a href=\"http:\/\/batux.design\/\">BatUX<\/a> \u2013 Utilisation d&rsquo;un proc\u00e9d\u00e9 UX pour redessiner la tenue classique de Batman. Un bon moyen d&rsquo;apprendre et d&rsquo;expliquer le processus de design.<\/li>\n<li><a href=\"https:\/\/www.bravostudio.app\/\">BravoStudio<\/a> \u2013 Transformer les prototypes Figma en applications natives.<\/li>\n<li><a href=\"https:\/\/stephaniewalter.design\/blog\/myriams-seo-sxo-and-everything-in-between-links-for-winter-2019\/\">SEO and SXO Links Collection<\/a> \u2013 Une collection de liens pour l&rsquo;hiver 2019-2020 par <a href=\"https:\/\/www.myriamjessier.com\/\">Myriam Jessier<\/a>.<\/li>\n<li><a href=\"https:\/\/stephaniewalter.design\/blog\/52-ux-cards-to-discover-cognitive-biases\/\">52 UX Cards to Discover Cognitive Biases<\/a> \u2013 Apprenez \u00e0 utiliser ces cartes et t\u00e9l\u00e9chargez-les.<\/li>\n<\/ul>\n<h2>UI Design et Visual Design<\/h2>\n<p>D&rsquo;excellents outils pour vous aider \u00e0 construire des interfaces color\u00e9es et contrast\u00e9es et \u00e0 les agr\u00e9menter d&rsquo;illustrations et de superbes images vectorielles.<\/p>\n<ul>\n<li><a href=\"https:\/\/brumm.af\/shadows\">Smooth Shadow<\/a> \u2013 Un outile pour cr\u00e9er de belles ombres, douces et travaill\u00e9es. Un <a href=\"https:\/\/www.figma.com\/c\/plugin\/788830704169694737\">plugin pour Figma<\/a> est aussi disponible.<\/li>\n<li><a href=\"https:\/\/blog.cloudflare.com\/thinking-about-color\/\">Think about color<\/a> \u2013 Comment le Cloudflare apporte de la coh\u00e9rence dans leur syst\u00e8me de couleurs.<\/li>\n<li><a href=\"https:\/\/woobro.design\/\">WooBro Vector Images<\/a> \u2013 Images et sc\u00e8nes vectorielles gratuites pour un usage commercial.<\/li>\n<li><a href=\"https:\/\/illlustrations.co\/\">Illustrations.co<\/a> \u2013 Cr\u00e9ation de 100 illustrations pendant les 100 jours du d\u00e9fi d&rsquo;illustration.<\/li>\n<li><a href=\"https:\/\/medium.com\/microsoft-design\/the-ripple-effect-expanding-our-icon-design-system-74b4d916b7a4\">The Icon Kaleidoscope<\/a> \u2013 Redessiner plus de 100 ic\u00f4nes avec de nouvelles couleurs, effets et finitions.<\/li>\n<li><a href=\"https:\/\/www.happyhues.co\/palettes\/6\">Happy Hues<\/a> \u2013 Vous ne savez pas quelles couleurs utiliser dans vos dessins ou o\u00f9 les utiliser ? Happy Colors est un site d&rsquo;inspiration sur les palettes de couleurs qui proposer des exemples concrets sur la fa\u00e7on dont les couleurs peuvent \u00eatre utilis\u00e9es dans vos projets de design.<\/li>\n<li><a href=\"https:\/\/leonardocolor.io\/\">LeonardoColor.io<\/a> \u2013\u00a0Cr\u00e9er une palette de couleurs adaptative pour de meilleurs contrastes.<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/dark-mode-favicons\/\">How to make a dark mode favicon<\/a> \u2013 Une astuce pour vos favicons SVG qui fonctionne tr\u00e8s bien.<\/li>\n<li><a href=\"https:\/\/twitter.com\/geoffreycrofte\/status\/1202740025290612738?s=20\">Pantone Color of the year<\/a> \u2013 Nous avons la couleurs 2020 \ud83d\ude00<\/li>\n<li><a href=\"https:\/\/uxplanet.org\/mobile-ui-design-trends-in-2018-ccd26031dfd8?\">Mobile UI Design Trends in 2019<\/a> \u2013 Quelques exemples inspirants de desing d&rsquo;interface utilisateur.<\/li>\n<\/ul>\n<h2>Animer et styler en CSS<\/h2>\n<p>Beaucoup de ressources sur les propri\u00e9t\u00e9s personnalis\u00e9es (alias variables CSS), mais aussi des ressources pour apprendre l&rsquo;animation et les styles RTL.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.creativejuiz.fr\/blog\/en\/tutorials\/custom-counters-in-pure-css\">Pure CSS Counters<\/a> \u2013 Vous pouvez compter et afficher les compteurs en CSS. Le saviez-vous ?<\/li>\n<li><a href=\"https:\/\/www.rtlstyling.com\/\">Right-to-left Styling<\/a> \u2013 Un guide d\u00e9taill\u00e9 sur la fa\u00e7on de styliser pour le <span lang=\"en\">Right-To-Left<\/span> en CSS.<\/li>\n<li><a href=\"https:\/\/codepen.io\/GeoffreyCrofte\/full\/vqwdvP?editors=1000\">Experimental Menu animation<\/a> \u2013 Utilisation du clip-path anim\u00e9 et du CSS pour les animations.<\/li>\n<li><a href=\"https:\/\/css-irl.info\/7-uses-for-css-custom-properties\/\">7 Uses for CSS Variables<\/a> \u20137 exemples sur la fa\u00e7on d&rsquo;utiliser les propri\u00e9t\u00e9s personnalis\u00e9es CSS dans la vie r\u00e9elle.<\/li>\n<li><a href=\"https:\/\/24ways.org\/2019\/interactivity-and-animation-with-variable-fonts\/\">Interactivity and Animation with Variable Font<\/a> \u2013 Tout est dans le titre :p<\/li>\n<li><a href=\"https:\/\/codyhouse.co\/blog\/post\/using-css-custom-properties-to-reduce-the-size-of-your-css\">CSS Custom Properties to reduce CSS file size<\/a> \u2013 Ok, mais attention avec les performances.<\/li>\n<\/ul>\n<h2>JavaScript et PWA<\/h2>\n<p>Apprenez comment fonctionne JavaScript et comment apprendre le JS moderne en construisant un jeu Tetris.<\/p>\n<ul>\n<li><a href=\"https:\/\/web.dev\/maskable-icon\/\">PWA : Adaptive inc support<\/a> \u2013 Un nouveau format d&rsquo;ic\u00f4ne permettant d&rsquo;utiliser des ic\u00f4nes adaptatives sur les plateformes prises en charge.<\/li>\n<li><a href=\"https:\/\/calendar.perfplanet.com\/2019\/the-unseen-performance-costs-of-css-in-js-in-react-apps\/\">CSS-in-JS Performance Cost<\/a> \u2013 Les co\u00fbts invisible de la performance des biblioth\u00e8ques modernes CSS-in-JS dans les applications React.<\/li>\n<li><a href=\"https:\/\/medium.com\/@michael.karen\/learning-modern-javascript-with-tetris-92d532bcd057\">Learning modern JS with Tetris<\/a> \u2013 Une bonne \u00e9tude de cas pour apprendre le JavaScript moderne.<\/li>\n<li><a href=\"https:\/\/dev.to\/lydiahallie\/javascript-visualized-the-javascript-engine-4cdf\">The JavaScript Engine<\/a> \u2013\u00a0D\u00e9couvrez comment le moteur JavaScript fonctionne avec votre code.<\/li>\n<li><a href=\"https:\/\/github.com\/alyssaxuu\/flowy\">Flowy<\/a> \u2013 Un biblioth\u00e8que minimale pour construire des organigrammes.<\/li>\n<\/ul>\n<h2>Accessibilit\u00e9 et qualit\u00e9<\/h2>\n<p>Certains pensent que la construction d&rsquo;interfaces accessibles est r\u00e9serv\u00e9e aux \u00ab\u00a0extr\u00e9mistes de l&rsquo;accessibilit\u00e9\u00a0\u00bb. Vous seriez heureux d&rsquo;apprendre que cela fait partie du travail d&rsquo;un bon designer. De bonnes lectures \u00e0 suivre.<\/p>\n<ul>\n<li><a href=\"https:\/\/dev.to\/addyosmani\/accessibility-tips-for-web-developers-4cn0\">Accessibility Tips for Web Developers<\/a> \u2013 Bonne liste de ce que vous devez prendre en compte lorsque vous vous souciez des utilisateurs en tant que d\u00e9veloppeur.<\/li>\n<li><a href=\"https:\/\/www.creativejuiz.fr\/blog\/en\/user-experience\/there-is-no-myths-of-color-contrast-accessibility\">There is no \u00ab\u00a0Myths of Color Contrast Accessibility\u00a0\u00bb<\/a> \u2013 Un billet de blog pour les designers qui se soucient des personnes r\u00e9elles. (oui je vais essayer de prendre du temps pour le traduire un jour,\u00a0<span lang=\"en\"><em>stay tuned<\/em><\/span> :D)<\/li>\n<li><a href=\"http:\/\/book.inclusive-components.design\/\">Inclusive Components<\/a> \u2013 Tout sur la conception d&rsquo;interfaces web inclusives, pi\u00e8ce par pi\u00e8ce.<\/li>\n<li><a href=\"https:\/\/www.brucelawson.co.uk\/2019\/checklist-to-avoid-the-most-common-accessibility-errors\/\">Accessibility Checklist<\/a> \u2013 Une checklist pour \u00e9viter les erreurs d&rsquo;accessibilit\u00e9 les plus courantes.<\/li>\n<li><a href=\"https:\/\/uxdesign.cc\/accessibility-drives-aesthetics-5aef77b5d2aa?\">Accessibility drives aesthetics<\/a> \u2013 Un bon rappel sur la fa\u00e7on dont le design fonctionne vraiment.<\/li>\n<\/ul>\n<p>Amusez-vous bien et bonne lecture !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cela fait un moment que je n&rsquo;ai pas fait de s\u00e9lection. En voici une grande avec un ensemble de ressources sur l&rsquo;UX Design et la recherche utilisateurs, mais aussi des outils SXO, SEO, UI Design et des outils amusants pour composer des palettes de couleurs, une d\u00e9mo JavaScript et CSS pour apprendre \u00e0 faire des [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":7121,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[50],"tags":[554,578],"coauthors":[597],"class_list":["post-7146","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ressources-telechargements","tag-ui","tag-ux"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/7146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=7146"}],"version-history":[{"count":3,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/7146\/revisions"}],"predecessor-version":[{"id":7150,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/7146\/revisions\/7150"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/7121"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=7146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=7146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=7146"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=7146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}