{"id":5775,"date":"2016-10-07T08:44:54","date_gmt":"2016-10-07T06:44:54","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=5775"},"modified":"2016-10-10T08:46:06","modified_gmt":"2016-10-10T06:46:06","slug":"la-semaine-en-pixels-7-octobre-2016","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-7-octobre-2016\/","title":{"rendered":"La semaine en pixels \u2013 7 octobre 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 : exp\u00e9rience utilisateur (onboarding, formulaires, patterns, personas, recrutement, recherche utilisateur, sketching, dimensions cognitives et mod\u00e8les mentaux des utilisateurs), analytics et architecture d’information, designer des syst\u00e8mes, un cas pratique utilisant atomic design et\u00a0r\u00e9duction de\u00a0la complexit\u00e9 de nos interfaces. Du motion et des pixels vs des vexels du c\u00f4t\u00e9 de l’inspirations, des tutoriels CSS pour faire des graphiques, des labels flottants, un flexbox hack et une introduction \u00e0 Adobe XD. Pour finir, une collection de patterns SVG, un Style Guide PSD\u00a0\u00e0 t\u00e9l\u00e9charger et des boutons de loader.<\/p>\n
Pour plus de liens chaque matin vous pouvez me suivre sur twitter<\/a>. Bonne lecture :)<\/p>\n #Mobile<\/p>\n Why your client needs a responsive website \u2014 not an app<\/a> : pourquoi votre client a dans presque tous cas besoin d\u2019un site web responsive et pas forc\u00e9ment d\u2019une application mobile, \u00e0 base de comparaison avec le chou kale :D<\/p>\n #UX<\/p>\n Designed Inconveniences: UX Patterns That Can\u2019t Be Taught<\/a>, ces patterns d\u2019interface qui peuvent ralentir ou amener les utilisateurs l\u00e0 o\u00f9 le souhaitez. Attention cependant, la ligne avec le dark pattern peut-\u00eatre tr\u00e8s rapidement franchie \u00e0 mon avis.<\/p>\n #Onboarding<\/p>\n Onboarding never stops<\/a>, l\u2019onboarding ne s\u2019arr\u00eate en r\u00e9alit\u00e9 jamais et continue tout au long du cycle de vie du produit<\/p>\n #Form #UX<\/p>\n How to Design Effective Registration Forms<\/a>, des conseils int\u00e9ressants pour le design de formulaires<\/p>\n #Space<\/p>\n Space in Design Systems<\/a> – travailler avec les grilles et les espaces, en design et\u00a0en CSS<\/p>\n #Atomic Design<\/p>\n How we used Atomic Design Principles while redesigning BrowserStack<\/a>, un petit retour d\u2019exp\u00e9rience sur l\u2019utilisation d\u2019Atomic Design pour le redesign de Browserstack<\/p>\n #Bot #Messenger<\/p>\n The killer feature of messaging no one\u2019s talking about<\/a>, une int\u00e9ressante lecture sur le futur des chatbots et interfaces dans les messengers et comment elles permettraient \u00e0 l\u2019utiliser d\u2019avoir tout \u00e0 un seul endroit<\/p>\n #UX<\/p>\n The Problem with Personas and Some Solutions<\/a>, les probl\u00e8mes potentiels des m\u00e9thode de persona et quelques id\u00e9es pour y faire face<\/p>\n #UX #Job<\/p>\n What Recruiters Wish That UX Design Applicants Knew Before Applying<\/a>, des conseils pour postuler \u00e0 un emploi d\u2019UX designer<\/p>\n #UX #Survey<\/p>\n Pros And Cons Of Requiring Survey Responses<\/a>, avantages et inconv\u00e9nients des r\u00e9ponses obligatoires dans un questionnaire. En r\u00e9sum\u00e9, ce n\u2019est pas forc\u00e9ment probl\u00e9matique d\u2019avoir des questions obligatoires contrairement \u00e0 ce qu\u2019on a tendance \u00e0 penser<\/p>\n #UX<\/p>\n 7 Steps To Conducting Better Qualitative Research<\/a>, 7 \u00e9tapes pour conduire des recherches quantitatives<\/p>\n #UX #IA<\/p>\n 5 Information Architecture Warning Signs in Your Analytics Reports<\/a>, utiliser les analytics pour v\u00e9rifier que son architecture d\u2019information fonctionne bien (et la rectifier le cas \u00e9ch\u00e9ant)<\/p>\n #Design<\/p>\n Things you can learn from redesigns<\/a>, un retour d\u2019exp\u00e9rience tr\u00e8s int\u00e9ressant sur du design de filtres complexes<\/p>\n #UX #Sketching<\/p>\n Everything You Need to Know about UX Sketching<\/a>, de bons conseils sur le sketching d\u2019interface<\/p>\n #UX<\/p>\n Breadcrumb Navigation: Good for Website Usability or Not?<\/a> le fil d\u2019Ariane, outil indispensable de navigation, mais attention au type choisi<\/p>\n #Usability #Cognition<\/p>\n A Usable Guide to Cognitive Dimensions<\/a>, un framework de 14 dimensions auxquelles il faut faire attention quand on design un syst\u00e8me d\u2019interactions<\/p>\n #Design<\/p>\n Reducing complexity<\/a> r\u00e9duire la complexit\u00e9 avec le\u00a0mobile first, le progressive disclosure et le progressive enhancement The 8 Questions Every Website Visitor Wants Answered in 10 Seconds<\/a>, les 10 questions que vos utilisateurs vont se poser en voyant votre site<\/p>\n #Sexisme<\/p>\n Computer scientist shuts down mansplainer who told her to learn Java<\/a>, ou comment une d\u00e9veloppeuse Java s\u2019est fait mansplain sur twitter<\/p>\n #CSS<\/p>\n Can we stop bad-mouthing CSS in developer talks, please?<\/a>, de la facilit\u00e9 \u00e0 trasher le language CSS dans la communaut\u00e9 web<\/p>\n #User #Sketching<\/p>\n Understanding your users\u2019 mental model<\/a>, un simple petit dessin et sketch peut permettre d\u2019en apprendre beaucoup sur les mod\u00e8les mentaux de nos utilisateurs<\/p>\n #Motion<\/p>\n Motion Periodic table<\/a>, un tableau p\u00e9riodique adapt\u00e9 au motion design<\/p>\n #pixels<\/p>\n Pixels and voxels, the long answer<\/a> un article inspirant qui explique tr\u00e8s bien le pixel art vs les voxels et pleins de techniques de videos et mod\u00e9lisation 3D<\/p>\n #Maps<\/p>\n A Technical Follow-Up: How We Built the World\u2019s Prettiest Auto-Generated Transit Maps<\/a>, un joli article sur la g\u00e9n\u00e9ration de cartes de transport<\/p>\n #CSS<\/p>\n Column Charts in CSS<\/a>, un graphique b\u00e2ton fait totalement en CSS<\/p>\n #CSS #Typography<\/p>\n Pas sure que modifier le kerning d\u2019une font soit toujours une super id\u00e9e, mais si vous en avez besoin : Methods for Controlling Spacing in Web Typography<\/a><\/p>\n #CSS #jQuery<\/p>\n Accessible floating labels<\/a>, \u00a0des labels flottants accessibles<\/p>\n #Adobe XD<\/p>\n Getting started with Adobe Experience Design\u200a\u2014\u200aPart I<\/a>, et Part II<\/a> : d\u00e9couvrez l\u2019utilisation d\u2019Adobe XD<\/p>\n #CSS #Flexbox<\/p>\n Flex-grow 9999 Hack<\/a><\/p>\n #HTML<\/p>\n Alternative Text and Images<\/a>, les diff\u00e9rentes fa\u00e7on de remplir l\u2019attribut alt des images<\/p>\n <\/p>\n #SVG<\/p>\n heropatterns.com<\/a>, une collection de motifs \u00e0 utiliser en image de fond, le tout en SVG <\/p>\n #Styleguide<\/p>\ntl;dnr, s’il devait n’en rester qu’un ?<\/h2>\n
<\/p>\n
Les articles de la semaine<\/h2>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
#UX<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
De l\u2019inspiration et de jolies id\u00e9es<\/h2>\n
<\/p>\n
<\/p>\n
<\/p>\n
Les tutoriels de la semaine<\/h2>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
Des ressources utiles, outils et plugins pour vous faciliter la vie<\/h2>\n
<\/p>\n