{"id":5648,"date":"2016-08-19T08:49:33","date_gmt":"2016-08-19T06:49:33","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=5648"},"modified":"2016-08-19T08:49:33","modified_gmt":"2016-08-19T06:49:33","slug":"semaine-pixels-19-aout-2016","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-19-aout-2016\/","title":{"rendered":"La semaine en pixels \u2013 19 ao\u00fbt 2016"},"content":{"rendered":"
Comme chaque semaine, \u00a0un condens\u00e9 de mes lectures et ma veille web design et graphisme, exp\u00e9rience utilisateurs, design d’interface et mobilit\u00e9, mais aussi des outils et ressources pour le web design et de l’inspiration en tout genre : illustrations, photos, sites web, etc.<\/p>\n
Au programme : design, performance et tutoriels pour cr\u00e9er des progressive web apps, de la jolie typographie, quelques tutoriels CSS (writing-mode, cr\u00e9ation d’un langage), les principes du design centr\u00e9 utilisateur, manipulation, exp\u00e9rience utilisateur et wireframes, animations CSS et comment les communiquer au d\u00e9velopeur et les rendre fluides. Des tatouages et des illustrations du c\u00f4t\u00e9 de l’inspiration, un ours pour contr\u00f4ler vos appareils \u00e0 distance et un autre ours pour vous fournir des articles sur l’UX du c\u00f4t\u00e9 des outils ainsi qu’une petite librairie d’animation au scroll et des ic\u00f4nes SVG.<\/p>\n
Pour plus de liens chaque matin vous pouvez me suivre sur twitter<\/a>. Bonne lecture :)<\/p>\n #PWA<\/p>\n Designing Responsive Progressive Web Apps<\/a>, une excellente lecture sur les challenges non techniques qu\u2019il va falloir r\u00e9soudre quand on commence \u00e0 s\u2019interesser aux PWAs.<\/p>\n <\/p>\n #Typography<\/p>\n How to hack beautiful flourishes into your font<\/a>, petit hack typo pour avoir de jolies lettres, ligatures sur le web<\/p>\n <\/p>\n #CSS<\/p>\n CSS writing-mode<\/a>, pour changer le sens d\u2019\u00e9critur en fonction de la langue<\/p>\n <\/p>\n #Design<\/p>\n Human Centered Design & The 6 Fundamental Principles of Interaction Between Products and Users<\/a>, les 6 principes fondamentaux pour une interaction entre le produit et les utilisateurs<\/p>\n <\/p>\n #Wireframes<\/p>\n Wireframes are waste<\/a>, les wireframes utilis\u00e9s comme outil de validation avec des clients peuvent rapidement mener \u00e0 la catastrophe, mais ce sont d\u2019excellents outils de communication avec les d\u00e9veloppeurs et d\u2019autres designers<\/p>\n <\/p>\n #Design<\/p>\n Is it ever okay for designers to manipulate people?<\/a> manipuler les utilisateurs, dans quels cas est-ce acceptable ? D\u2019apr\u00e8s l\u2019auteur, lorsqu\u2019on les aide \u00e0 aller dans une direction choisie mais que leur cerveau reptilien les ralentis, mais pas pour les forcer \u00e0 faire quelque chose qu\u2019ils n\u2019ont pas envie de faire<\/p>\n <\/p>\n #PWA<\/p>\n Offline Storage for Progressive Web Apps<\/a>, du stockage offline pour les Progressive Web Apps<\/p>\n <\/p>\n #Animations<\/p>\n Communicating Animation<\/a>, communiquer un langage d\u2019animations coh\u00e9rent entre les diff\u00e9rents membres d\u2019une \u00e9quipe<\/p>\n <\/p>\n #Illustration<\/p>\n Product Vs. Marketing Illustration<\/a>, le langage des illustrations appliqu\u00e9 de mani\u00e8re diff\u00e9rente entre le marketing et le produit<\/p>\n <\/p>\n #Design<\/p>\n Anatomy of a pattern in a pattern library<\/a><\/p>\n <\/p>\n #Animations<\/p>\n Smooth as Butter: Achieving 60 FPS Animations with CSS3<\/a>, des conseils pour des animations fluides<\/p>\n <\/p>\n #Photoshop<\/p>\n Photoshop Etiquette For Responsive Web Design<\/a>, utiliser Photoshop pour le responsive, quelques conseils<\/p>\n <\/p>\n #Photo #Psychologie<\/p>\n Top 10 Profile Photo and Portrait Hacks Based on Science<\/a>, 10 conseils bas\u00e9s sur des \u00e9tudes psychologiques pour optimiser les photos sur les sites<\/p>\n <\/p>\n #UX<\/p>\n Enterprise UX Case Study: Improving Usability Under Tight Deadlines<\/a>, un case study sur l\u2019am\u00e9lioration de l’exp\u00e9rience utilisateur d\u2019un produit avec une deadline courte<\/p>\n <\/p>\n #CSS<\/p>\n You can kinda invent your own weird design language with attributes and attribute selectors<\/a>, faire son propre langage, pourquoi pas, attention \u00e0 la maintenabilit\u00e9<\/p>\n <\/p>\n #Illustration<\/p>\n Hi! My name is Vicki and I want to help empower girls and women through art!<\/a><\/p>\n <\/p>\n #Graphic Design<\/p>\n Graphicmeans.com<\/a>, l\u2019histoire du graphisme dans une courte vid\u00e9o<\/p>\n <\/p>\n #Tatouage<\/p>\n okanuckun<\/a>, mon tatoueur pr\u00e9f\u00e9r\u00e9 du moment :)<\/p>\n <\/p>\n #Mignon #Remote<\/p>\n Un petit ours pour contr\u00f4ler \u00e0 distance vos appareils<\/a><\/p>\n <\/p>\n #Edge #Notifications<\/p>\n Edge integrates a site\u2019s web notifications into Windows 10\u2019s Action Center<\/a>, les notifications web de Edge arrivent dans le notification center de Win 10<\/p>\n <\/p>\n #concours<\/p>\n a-k-apart.com<\/a> une initiative pour construire un projet de site fonctionnel, qui charge moins de 10k de ressources et fonctionne sans JavaScript<\/p>\n #PWA<\/p>\n A Beginner\u2019s Guide To Progressive Web Apps<\/a>, un guide pas \u00e0 pas pour construire une Progressive Web App<\/p>\n <\/p>\n #Mobile<\/p>\n W3C mobile checker (alpha)<\/a><\/p>\n <\/p>\n #UX<\/p>\n Introducing the UX Bear<\/a>, une interface conversationnelle qui va vous proposer des articles sur l\u2019UX<\/p>\n <\/p>\n #JS<\/p>\n scrollanim.kissui.io<\/a>, une librairie pour faire des animations au scroll en JS, attention \u00e0 ne pas en abuser<\/p>\n <\/p>\n #A11y<\/p>\ntl;dnr, s’il devait n’en rester qu’un ?<\/h2>\n
Les articles de la semaine<\/h2>\n
De l\u2019inspiration et de jolies id\u00e9es<\/h2>\n
L\u2019actualit\u00e9 webdesign<\/h2>\n
Les tutoriels de la semaine<\/h2>\n
Des ressources utiles, outils et plugins pour vous faciliter la vie<\/h2>\n