{"id":6488,"date":"2018-04-16T21:50:59","date_gmt":"2018-04-16T19:50:59","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=6488"},"modified":"2018-04-16T21:50:59","modified_gmt":"2018-04-16T19:50:59","slug":"les-ressources-du-web-38","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/ressources-telechargements\/les-ressources-du-web-38","title":{"rendered":"Les Ressources Du Web #38"},"content":{"rendered":"<p>Pour cette s\u00e9lection, une grande liste de ressources graphiques et de design UX\/UI vous attendent. Quelques belles d\u00e9mos CSS, et astuces en HTML, SVG et JavaScript sont \u00e9galement au RDV. De quoi rattraper un mois sans article de ma part :p<\/p>\n<p><!--more--><\/p>\n<p>Retrouvez une liste de ressources graphiques, d&rsquo;articles d&rsquo;inspiration sur du design, du <em>User Interface<\/em> ou de l&rsquo;UX, de codes CSS, HTML ou JS et tutoriels dans cette s\u00e9lection d&rsquo;outils et liens utiles des derniers jours ou semaines. Si vous voulez \u00eatre tenus inform\u00e9s plus fr\u00e9quemment des ressources que je d\u00e9gotte sur la toile, suivez-moi sur Twitter : <a href=\"https:\/\/twitter.com\/geoffreycrofte\">@geoffrey_crofte<\/a><\/p>\n<h2>Ressources en CSS, HTML et SVG<\/h2>\n<p>De l&rsquo;animation, des Variables CSS, un retour sur l&rsquo;int\u00e9gration d&rsquo;e-mail, ainsi que de la manipulation de SVG. <em>Ready? Go!<\/em><\/p>\n<ul>\n<li><a href=\"https:\/\/codepen.io\/CreativeJuiz\/full\/VXKYvm\">Gradient On Text and CSS Variables<\/a> \u2014 un effet joli mais inutile de d\u00e9grad\u00e9 de couleurs sur un texte.<\/li>\n<li><a href=\"https:\/\/www.youtube.com\/channel\/UCtmYk7H-NNYLEe_LgBRYomA\">@keyframes<\/a> \u2014 une cha\u00eene Youtube de tutoriels pour cr\u00e9er des animations efficaces et fluides.<\/li>\n<li><a href=\"https:\/\/bitsofco.de\/how-display-contents-works\/amp\/\">How <code>display: contents;<\/code> works<\/a> \u2014 explication de la valeur <code>contents<\/code> de <code>display<\/code>.<\/li>\n<li><a href=\"https:\/\/explore.reallygoodemails.com\/new-to-email-coding-heres-where-to-start-2494422f0bd4\">New to email coding?<\/a> \u2013 un bon point de d\u00e9part si vous d\u00e9marrez en int\u00e9gration d&rsquo;e-mails.<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/focusing-on-focus-styles\/\">Focusing on focus styles<\/a> \u2014 un bon article sur le focus en CSS. Mangez-en \ud83d\ude42<\/li>\n<li><a href=\"https:\/\/daverupert.com\/2018\/03\/animated-svg-radial-progress-bars\/\">Animated SVG Radial progress bar<\/a> \u2014 animez une barre de progression radiale.<\/li>\n<li><a href=\"http:\/\/simurai.com\/blog\/2018\/04\/01\/contextual-styling\">Contextual Styling<\/a> \u2014 des styles contextuels gr\u00e2ce aux CSS Custom Properties.<\/li>\n<\/ul>\n<h2>Ressources en JS<\/h2>\n<p>Deux petites ressources bien sympathique, une librairie JS moderne ainsi qu&rsquo;un gros topo sur le Lazy Loading d&rsquo;images et vid\u00e9os.<\/p>\n<ul>\n<li><a href=\"https:\/\/glidejs.com\/\">GlideJS<\/a> \u2014 un slideshow en JS ES6 sans d\u00e9pendance vraiment l\u00e9ger et efficace.<\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/lazy-loading-guidance\/images-and-video\/\">Lazy Loading Images and Videos<\/a> \u2014 un topo complet sur le lazyloading, m\u00eame des images en background.<\/li>\n<\/ul>\n<h2>Ressources Graphiques<\/h2>\n<p>De l&rsquo;UI Kit, de la typography ainsi que de l&rsquo;inspiration pour des empty states ou de l&rsquo;iconographie.<\/p>\n<ul>\n<li><a href=\"https:\/\/project365.design\/2018\/03\/02\/day-61-iblocks-ios-wireframe-kit-sketch-freebie\/\">Fancy Mobile UI Kit<\/a> \u2013 un UI kit simple et sexy pour vos concepts d&rsquo;applications.<\/li>\n<li><a href=\"http:\/\/emptystat.es\/\">EmptyStat.es<\/a> \u2013 une liste d&rsquo;\u00e9cran \u00ab\u00a0vides\u00a0\u00bb de donn\u00e9e\/contenu pour inspiration.<\/li>\n<li><a href=\"http:\/\/www.fontisto.com\/icons\">Fontisto<\/a> \u2014 une ic\u00f4ne-fonte personnalisable et accessible aboutie.<\/li>\n<li><a href=\"https:\/\/www.huesnap.com\/\">HueSnap<\/a> \u2014 r\u00e9cup\u00e9rer des palettes de couleurs depuis une image.<\/li>\n<li><a href=\"https:\/\/www.behance.net\/gallery\/34111822\/Riviera-free-font\">Riviera Font<\/a> \u2013 une belle typo uppercases baton ronde gratuite.<\/li>\n<\/ul>\n<h2>Articles de design et Inspiration<\/h2>\n<p>Des astuces sur de l&rsquo;animation pour les rendre efficaces, de l&rsquo;inspiration pour vos designs systems, quelques retours sur du redesign de marques et un beau folio anim\u00e9 pour votre inspiration.<\/p>\n<ul>\n<li><a href=\"https:\/\/uxdesign.cc\/good-to-great-ui-animation-tips-7850805c12e5\">Good to Great UI Animation tips<\/a> \u2013des astuces pour faire des animations efficaces.<\/li>\n<li><a href=\"http:\/\/celialopez.fr\/\">Celia Lopez Portfolio<\/a> \u2014 un excellent portfolio tr\u00e8s immersif.<\/li>\n<li><a href=\"https:\/\/www.underconsideration.com\/brandnew\/archives\/new_logo_and_identity_for_american_express_by_pentagram.php\">Amex Brand New Logo<\/a> \u2014 un article explicatif de la nouvelle marque Amex.<\/li>\n<li><a href=\"https:\/\/the-pastry-box-project.net\/stephanie-walter\/2018-april-10\">Making it pretty will not make it usable<\/a> \u2014 une histoire vraie de l&rsquo;\u00e9chec d&rsquo;un projet li\u00e9 \u00e0 l&rsquo;absence d&rsquo;implication de UX Designer en amont.<\/li>\n<li><a href=\"https:\/\/designsystemsrepo.com\/\">Design Systems Repo<\/a> \u2013 un regroupement de repositories de Design System pour votre inspiration.<\/li>\n<li><a href=\"https:\/\/dribbble.com\/animography\/projects\/679848-36-Days-of-Type-2018\">36 Days of Type 2018<\/a> \u2014 inspiration avec quelques animations typos.<\/li>\n<li><a href=\"https:\/\/www.wired.com\/story\/reddit-redesign\/\">The Inside Story of Reddit Redesign<\/a> \u2014 l&rsquo;histoire du redesign de Reddit.<\/li>\n<li><a href=\"https:\/\/uxplanet.org\/beautiful-and-functional-interfaces-f293ea2b367f\">Beautiful and functional interfaces<\/a> \u2014 \u00ab\u00a0la beaut\u00e9 est subjective\u2026\u00a0\u00bb<\/li>\n<\/ul>\n<h2>Ressources UX<\/h2>\n<p>Plein d&rsquo;outils pour bosser encore plus efficacement en tant qu&rsquo;UX Designer, ainsi que articles critiques sur l&rsquo;onboarding et les Card UIs.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.useronboard.com\/user-onboarding-teardowns\/\">UserOnBoard<\/a> \u2013 une liste de cas d&rsquo;onboarding sur des services vari\u00e9s.<\/li>\n<li><a href=\"https:\/\/www.shopify.com\/partners\/blog\/mobile-app-onboarding\">Mobile App Onboarding<\/a> \u2013 les choses \u00e0 faire et ne pas faire pour de l&rsquo;onboarding.<\/li>\n<li><a href=\"https:\/\/daverupert.com\/2018\/04\/pitfalls-of-card-uis\/\">PitFalls of Card UIs<\/a> \u2014 une critique des \u00ab\u00a0cards\u00a0\u00bb en UI. Quelques bons points.<\/li>\n<li><a href=\"https:\/\/proto.io\/\">Proto.io<\/a> \u2014 un outil de prototyping plut\u00f4t bien foutu.<\/li>\n<li><a href=\"https:\/\/overflow.io\/\">Overflow<\/a> \u2014 un outil pour cr\u00e9er des userflows.<\/li>\n<\/ul>\n<p>Tr\u00e8s bonne lecture !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pour cette s\u00e9lection, une grande liste de ressources graphiques et de design UX\/UI vous attendent. Quelques belles d\u00e9mos CSS, et astuces en HTML, SVG et JavaScript sont \u00e9galement au RDV. De quoi rattraper un mois sans article de ma part :p<\/p>\n","protected":false},"author":4,"featured_media":5931,"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":[120,482,683,765,578],"coauthors":[597],"class_list":["post-6488","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ressources-telechargements","tag-animation","tag-inspiration","tag-sketch","tag-ui-kit","tag-ux"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6488","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=6488"}],"version-history":[{"count":3,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6488\/revisions"}],"predecessor-version":[{"id":6522,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6488\/revisions\/6522"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/5931"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=6488"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=6488"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=6488"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=6488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}