{"id":7110,"date":"2019-12-31T17:34:01","date_gmt":"2019-12-31T16:34:01","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=7110"},"modified":"2020-09-02T21:05:03","modified_gmt":"2020-09-02T19:05:03","slug":"web-resources-45","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/en\/resources-tools\/web-resources-45","title":{"rendered":"Web Resources #45"},"content":{"rendered":"<p>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.<\/p>\n<p><!--more--><\/p>\n<p class=\"message remember\">You can keep <strong>up to date<\/strong> <a href=\"https:\/\/twitter.com\/geoffreycrofte\">following me on Twitter<\/a>. I tweet a bit everyday to share all those resources.<\/p>\n<h2>If I had to keep one<\/h2>\n<p><a href=\"https:\/\/leonardocolor.io\/\">LeonardoColor.io<\/a> is a tool to help you build consistent color palettes and systems by improving the accessibility of you 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 and User Research<\/h2>\n<p>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.<\/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 with this canvas to help you catch user task and activities to better understand their needs.<\/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 Experience feedback and a starter kit to download to well start your user research.<\/li>\n<li><a href=\"https:\/\/uxdesign.cc\/design-better-forms-96fadca0f49c\">Design Better Forms<\/a> \u2013 Some good advises to take away to build better forms.<\/li>\n<li><a href=\"http:\/\/batux.design\/\">BatUX<\/a> \u2013 Using a UX process to redesign Batman&#8217;s classic outfit. A good way to learn and explain design process.<\/li>\n<li><a href=\"https:\/\/www.bravostudio.app\/\">BravoStudio<\/a> \u2013 Turn Figma Prototype into native applications.<\/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 A collection of links for winter 2019-2020 by <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 Learn how to use those cards and downloadable.<\/li>\n<\/ul>\n<h2>UI Design and Visual Design<\/h2>\n<p>Great tools to help you build colorful and contrasted interfaces and illustrate those with illustration and great vector images.<\/p>\n<ul>\n<li><a href=\"https:\/\/brumm.af\/shadows\">Smooth Shadow<\/a> \u2013 A tool to build custom rich and smooth shadows. A <a href=\"https:\/\/www.figma.com\/c\/plugin\/788830704169694737\">plugin for Figma<\/a> is also available.<\/li>\n<li><a href=\"https:\/\/blog.cloudflare.com\/thinking-about-color\/\">Think about color<\/a> \u2013 How Cloudflare bring consistency into their color system.<\/li>\n<li><a href=\"https:\/\/woobro.design\/\">WooBro Vector Images<\/a> \u2013 Free vector images and scenes for commercial use.<\/li>\n<li><a href=\"https:\/\/illlustrations.co\/\">Illustrations.co<\/a> \u2013 Designed all 100 awesome illustrations during 100 days of illustration challenge.<\/li>\n<li><a href=\"https:\/\/medium.com\/microsoft-design\/the-ripple-effect-expanding-our-icon-design-system-74b4d916b7a4\">The Icon Kaleidoscope<\/a> \u2013 Redesigning over 100 icons with new colors, materials, and finishes.<\/li>\n<li><a href=\"https:\/\/www.happyhues.co\/palettes\/6\">Happy Hues<\/a> \u2013 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.<\/li>\n<li><a href=\"https:\/\/leonardocolor.io\/\">LeonardoColor.io<\/a> \u2013 <span class=\"css-901oao css-16my406 r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0\">Create an adaptative color palette for better contrasts.<\/span><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/dark-mode-favicons\/\">How to make a dark mode favicon<\/a> \u2013 A trick with SVG favicon that works really well.<\/li>\n<li><a href=\"https:\/\/twitter.com\/geoffreycrofte\/status\/1202740025290612738?s=20\">Pantone Color of the year<\/a> \u2013 We have got our color for 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 Some inspirational examples of UI Design.<\/li>\n<\/ul>\n<h2>Animating and styling with CSS<\/h2>\n<p>A lot of resources on Custom Properties (AKA CSS Variables), but also resources to learn RTL styling and animation.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.creativejuiz.fr\/blog\/en\/tutorials\/custom-counters-in-pure-css\">Pure CSS Counters<\/a> \u2013 You can count and display the counters in CSS. Did you know that?<\/li>\n<li><a href=\"https:\/\/www.rtlstyling.com\/\">Right-to-left Styling<\/a> \u2013 An extensive guide on how to style for RTL in CSS.<\/li>\n<li><a href=\"https:\/\/codepen.io\/GeoffreyCrofte\/full\/vqwdvP?editors=1000\">Experimental Menu animation<\/a> \u2013 Using animated clip-path and CSS only for animations.<\/li>\n<li><a href=\"https:\/\/css-irl.info\/7-uses-for-css-custom-properties\/\">7 Uses for CSS Variables<\/a> \u2013 7 examples on how to use CSS Custom Properties in real life.<\/li>\n<li><a href=\"https:\/\/24ways.org\/2019\/interactivity-and-animation-with-variable-fonts\/\">Interactivity and Animation with Variable Font<\/a> \u2013 That&#8217;s all in the title ;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 Yes but be careful with the performance.<\/li>\n<li><a href=\"https:\/\/www.creativejuiz.fr\/blog\/en\/tutorials\/customize-checkbox-and-radio-button-with-css\">Custom Accessible Checkbox and Radio button in CSS<\/a> &#8211; an old but still good reference.<\/li>\n<\/ul>\n<h2>JavaScript and PWA<\/h2>\n<p>Learn how JavaScript works and how to learn modern JS building a Tetris game.<\/p>\n<ul>\n<li><a href=\"https:\/\/web.dev\/maskable-icon\/\">PWA : Adaptive inc support<\/a> \u2013 A new icon format to use adaptive icons on supported platforms.<\/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 The unseen performance costs of modern CSS-in-JS libraries in React apps.<\/li>\n<li><a href=\"https:\/\/medium.com\/@michael.karen\/learning-modern-javascript-with-tetris-92d532bcd057\">Learning modern JS with Tetris<\/a> \u2013 A good case study to learn modern JavaScript.<\/li>\n<li><a href=\"https:\/\/dev.to\/lydiahallie\/javascript-visualized-the-javascript-engine-4cdf\">The JavaScript Engine<\/a> \u2013 <span class=\"css-901oao css-16my406 r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0\">Discover how the JavaScript engine works with your code.<\/span><\/li>\n<li><a href=\"https:\/\/github.com\/alyssaxuu\/flowy\">Flowy<\/a> \u2013 Minimal Library to build flowcharts.<\/li>\n<\/ul>\n<h2>Accessibility and quality<\/h2>\n<p>Some people think building accessible interfaces is for &#8220;accessibility extremists&#8221;. You would be glad to learn that is a part of the job for a proper Designer. Great readings to follow.<\/p>\n<ul>\n<li><a href=\"https:\/\/dev.to\/addyosmani\/accessibility-tips-for-web-developers-4cn0\">Accessibility Tips for Web Developers<\/a> \u2013 Good list of what you should take into account when you care about users as developer.<\/li>\n<li><a href=\"https:\/\/www.creativejuiz.fr\/blog\/en\/user-experience\/there-is-no-myths-of-color-contrast-accessibility\">There is no &#8220;Myths of Color Contrast Accessibility&#8221;<\/a> \u2013 A blog post for designers who cares about real people.<\/li>\n<li><a href=\"http:\/\/book.inclusive-components.design\/\">Inclusive Components<\/a> \u2013 All about designing inclusive web interfaces, piece by piece.<\/li>\n<li><a href=\"https:\/\/www.brucelawson.co.uk\/2019\/checklist-to-avoid-the-most-common-accessibility-errors\/\">Accessibility Checklist<\/a> \u2013 A checklist to avoid the most common accessibility errors.<\/li>\n<li><a href=\"https:\/\/uxdesign.cc\/accessibility-drives-aesthetics-5aef77b5d2aa?\">Accessibility drives aesthetics<\/a> \u2013 A good reminder on how design really works.<\/li>\n<\/ul>\n<p>Have fun and share the love!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n","protected":false},"author":4,"featured_media":7120,"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":[653],"tags":[866,867,868,865,777],"coauthors":[597],"class_list":["post-7110","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources-tools","tag-biases","tag-cards","tag-seo-en","tag-sxo","tag-ux-en"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/posts\/7110","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/comments?post=7110"}],"version-history":[{"count":3,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/posts\/7110\/revisions"}],"predecessor-version":[{"id":7529,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/posts\/7110\/revisions\/7529"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/media\/7120"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/media?parent=7110"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/categories?post=7110"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/tags?post=7110"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/coauthors?post=7110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}