{"id":4542,"date":"2015-10-23T08:00:50","date_gmt":"2015-10-23T06:00:50","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=4542"},"modified":"2015-10-22T21:04:01","modified_gmt":"2015-10-22T19:04:01","slug":"la-semaine-en-pixels-23-octobre-2015","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-23-octobre-2015\/","title":{"rendered":"La semaine en pixels \u2013 23 octobre 2015"},"content":{"rendered":"
Comme chaque semaine, \u00a0je vous propose un 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 webdesign et inspiration en tout genre (illustrations, photos, sites web, etc.).<\/p>\n
Au programme cette semaine : optimisation de conversion de formulaires, biais cognitifs \u00e0 utiliser \u00e0 son avantage, le retour du mythe de la ligne de flottaison, des erreurs d’utilisabilit\u00e9 \u00e0 \u00e9viter et des conseils pour optimiser l’UX des sites. De jolies photos et illustrations du c\u00f4t\u00e9 de l’inspiration, des tutoriels CSS et SVG ainsi qu’un outil d’optimisation d’image et un petit jeu CSS en fin d’article.<\/p>\n
Pour plus de liens vous pouvez me suivre sur twitter<\/a>. Bonne lecture :)<\/p>\n #SVG #Brand<\/p>\n Simpleicons.org<\/a>, 110 + ic\u00f4nes de marques, produit et services rassembl\u00e9es \u00e0 un seul et m\u00eame endroit<\/p>\n <\/p>\n #Cognition #Conversion<\/p>\n 18 Cognitive Biases You Can Use for Conversion Optimization<\/a>, 18 biais cognitifs \u00e0 utiliser pour influencer la conversion de vos sites<\/p>\n <\/p>\n #Design #Erreurs<\/p>\n Interaction Design Mistakes That Drive Us Nuts<\/a> : des erreurs de design et d\u2019ergonomie \u00e0 ne pas commettre sous peine d\u2019exasp\u00e9rer vos utilisateurs (modales, menus inutilisables, manque de contraste, etc.)<\/p>\n <\/p>\n <\/p>\n #Usability<\/p>\n Ensure High Contrast for Text Over Images<\/a> – si vous placez du texte au dessus d\u2019une image de fond, assurez-vous qu\u2019il y ai assez de contrastes<\/p>\n <\/p>\n #CSS<\/p>\n Never mix lo\u00adcally in\u00adstalled fonts and web fonts in @font-face rules<\/a>, attention si vous d\u00e9clarez une police locale et la m\u00eame en webfont aux soucis que \u00e7a peut engendrer<\/p>\n <\/p>\n #UX<\/p>\n Why You’re Over-Thinking Your UI\/UX<\/a>, une super conf\u00e9rence sur des m\u00e9thodos d\u2019UX simples \u00e0 appliquer pour des projets<\/p>\n <\/p>\n #UX<\/p>\n Object-Oriented UX<\/a> – \u00ab\u00a0To me, mobile first simply means forced prioritization\u00a0\u00bb : une r\u00e9flexion sur l\u2019application de m\u00e9thodologies orient\u00e9es objet pour designer des syst\u00e8mes d\u2019architecture d\u2019information plus coh\u00e9rents. En bref : orienter le design autour des objets du contenu par lesquels l\u2019utilisateur naviguera<\/p>\n <\/p>\n #Layout #Usability<\/p>\n Is Your New Website Layout Killing Your Engagement?<\/a> un retour sur la refonte d\u2019un site d\u2019une mise en page horizontale \u00e0 une mise en page verticale et la perte d\u2019engagement utilisateur qui a suivi<\/p>\n <\/p>\n #Formulaires<\/p>\n Should You Really Reduce Form Fields?<\/a> Malgr\u00e9 ce que vous avez pu lire dans certaines \u00e9tudes datant de 7 – 8 ans, parfois r\u00e9duire le nombre de champs d\u2019un formulaire \u00e0 l\u2019effet inverse que celui souhait\u00e9 et risque de faire baisser la conversion : attention \u00e0 ce que vous retirez comme champ.<\/p>\n <\/p>\n #Mobile<\/p>\n [\u00c9TUDE COMPL\u00c8TE] Comment utilise-t-on notre #smartphone ?<\/a><\/p>\n <\/p>\n #Fold #Mythe<\/p>\n Is Above the Fold Really That Important?<\/a>, le retour du mythe \u201cau dessus de la ligne de flottaison\u201d dans un article tr\u00e8s bien illustr\u00e9 de quand faut-il s\u2019en soucier ou pas<\/p>\n #Train<\/p>\n Le projet NY train project<\/a> illustres les affichages des noms de stations du m\u00e9tro New Yorkais<\/p>\n <\/p>\n #Photos<\/p>\n Tonki.com<\/a>, vos photos imprim\u00e9es sur du carton solide qui servira \u00e9galement de cadre. Une jolie id\u00e9e tout en un<\/p>\n <\/p>\n #WebDesign<\/p>\n Page Stack Navigation<\/a>, une d\u00e9mo sympa de transition de pages web<\/p>\n <\/p>\n #Photos<\/p>\n Paperboyo<\/a>, ce photographe ajoute un petit \u00e9l\u00e9ment papier sur ses photo pour raconter de jolies histoires<\/p>\n <\/p>\n #CSS #Animations<\/p>\n Animate Elements on a Path with CSS<\/a>, cr\u00e9er une animation CSS qui suit un chemin gr\u00e2ce \u00e0 motion-path<\/p>\n <\/p>\n #CSS<\/p>\n Reverse Text Color Based on Background Color Automatically in CSS<\/a> – une d\u00e9mo CSS sympa : utiliser le blend mode CSS pour cr\u00e9er un loader dont les couleurs s\u2019inversent<\/p>\n <\/p>\n #Image #Optimisation<\/p>\n optimizilla.com<\/a> un outil d\u2019optimisation en ligne (meilleur que kraken.io<\/a> sur certaines images, mais pas sur tout donc difficile de juger)<\/p>\n <\/p>\n <\/p>\n #Color<\/p>\n The Ultimate List of Online Colour Palette Generators for Web Design<\/a>, une liste de g\u00e9n\u00e9rateurs de palette de couleur<\/p>\n <\/p>\n #Resume<\/p>\n Un outil en ligne pour g\u00e9n\u00e9rer un joli cv<\/a>, \u00e7a pourrait plaire \u00e0 certains \u00e9tudiants \u00e7a<\/p>\n <\/p>\n #CSS<\/p>\n Procrastination time : \u00e0 quel point connaissez-vous le nom des couleurs CSS<\/a> ? Perso je suis une peu nulle \u00e0 ce jeu, mais \u00e7a devrait vous occuper ce matin :)<\/p>\n <\/p>\n #CSS<\/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
Les tutoriels de la semaine<\/h2>\n
Des ressources utiles, outils et plugins pour vous faciliter la vie<\/h2>\n
<\/h2>\n
Pour le fun: jeux et d\u00e9mos sympas et impressionnantes<\/h2>\n