{"id":4567,"date":"2015-11-06T08:04:35","date_gmt":"2015-11-06T07:04:35","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=4567"},"modified":"2022-03-17T20:47:33","modified_gmt":"2022-03-17T19:47:33","slug":"la-semaine-en-pixels-6-novembre-2015","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-6-novembre-2015\/","title":{"rendered":"La semaine en pixels \u2013 6 novembre 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, double ration puisque j’\u00e9tais \u00e0 BlendWebMix la semaine derni\u00e8re. Am\u00e9liorer l\u2019exp\u00e9rience utilisateur gr\u00e2ce \u00e0 des tests d’utilisabilit\u00e9, am\u00e9liorer les performances de votre site, les formulaires ou designer pour l’accessibilit\u00e9 des couleurs. Toujours de jolis illustrations pour vous inspirer, et quelques tutoriels de haut niveau m\u00e9langeant de la manipulation d’image CSS (blend mode, border, cr\u00e9ation d’angles) et du SVG. Ne manquez \u00e9galement pas une ressource pour la navigation responsive.<\/p>\n
Pour plus de liens vous pouvez me suivre sur twitter<\/a>. Bonne lecture :)<\/p>\n #Mobile #Strat\u00e9gie<\/p>\n Strat\u00e9gies d\u2019adaptation mobile : ergonomie, UX et performance en milieu p\u00e9rilleux, les slides de ma conf\u00e9rence \u00e0 Blendwebmix 2015<\/a><\/p>\n <\/p>\n #Design<\/p>\n Detox Your Design: 8 UI Elements to Eliminate<\/a>, des \u00e9l\u00e9ments \u00e0 \u00e9liminer de vos design avec des propositions d\u2019alternatives plus utilisables<\/p>\n <\/p>\n #Design #Color<\/p>\n How To Design With Monochromatic Colors [With Expert Tips From A Designer]<\/a> des conseils pour designer avec des palettes monochrome<\/p>\n <\/p>\n #Security<\/p>\n Stop forcing your arbitrary password rules on me<\/a>, quand un mot de passe simple \u00e0 lire et retenir est plus s\u00e9curis\u00e9 qu\u2019une suite alphanum\u00e9rique random<\/p>\n <\/p>\n <\/p>\n #Hover #Product<\/p>\n Product Lists: Display Extra Information on Hover<\/a> afficher des informations secondaires au survol de la liste de produit (et que faire de ces informations sur les mobiles qui n\u2019ont pas de survol)<\/p>\n <\/p>\n #Forms<\/p>\n Designing More Efficient Forms<\/a>, des astuces pour am\u00e9liorer le design de formulaire<\/p>\n <\/p>\n #Usability testing<\/p>\n 5 usability tasks you haven’t tried so far<\/a>, 5 types de t\u00e2ches \u00e0 demander dans un test utilisateur auxquelles vous n\u2019avez peut-\u00eatre pas encore pens\u00e9.<\/p>\n <\/p>\n #A11y<\/p>\n Designing a landing page for color-blind people<\/a>, designer une landing page pour les personnes daltonienes<\/p>\n <\/p>\n #Mobile #Strategy<\/p>\n Solving Common Mobile Usability Problems<\/a>, corriger des probl\u00e8mes d\u2019utilisabilit\u00e9 mobile, le point 2 sur l\u2019utilisation <\/p>\n #CSS #Pattern<\/p>\n From Pages to Patterns: An Exercise for Everyone<\/a>, apprendre \u00e0 d\u00e9composer les pages en modules et \u00e9l\u00e9ments pour \u00e9crire un CSS plus modulaire<\/p>\n <\/p>\n <\/p>\n #Mobile #UX<\/p>\n List vs. Grid View: When to Use Which on Mobile<\/a>, quand utiliser une vue en liste ou en grille sur mobile<\/p>\n <\/p>\n #UX #Empathy<\/p>\n Adapting empathy maps for UX design<\/a> une adaptation des cartes d\u2019empathie avec des segments plus adapt\u00e9s au design d\u2019exp\u00e9rience utilisateur<\/p>\n <\/p>\n #Usability<\/p>\n 10 of the Best Slide Decks for Usability Optimization<\/a>, 10 pr\u00e9sentations sur l\u2019optimisation de l\u2019utilisabilit\u00e9 des interfaces<\/p>\n <\/p>\n #UX<\/p>\n 5 Digital Experiences That Drive Users Crazy<\/a>, 5 petits trucs bien exasp\u00e9rants pour vos utilisateurs. Bon le 5e c\u2019est le navigateur on peut rien y faire h\u00e9las.<\/p>\n <\/p>\n #Performance<\/p>\n How AD-networks are slowing down your site<\/a>, ou comment les publicit\u00e9s ralentissent vos sites web<\/p>\n #Performance<\/p>\n Design + Performance<\/a> les slides de la conf\u00e9rence de \u00a0Steve Souders \u00e0 Beyond Tellerand<\/p>\n #inspiration #motion<\/p>\n Covers <\/a>, une s\u00e9rie de 55 couvertues de livre vintage anim\u00e9es<\/p>\n <\/p>\n #Illustration #Inspiration<\/p>\n There are only 2 kinds of people in this world<\/a>, dans le monde, il y a deux types de personnes …<\/p>\n <\/p>\n #Desk<\/p>\n refold.co<\/a>, un bureau debout tout en carton<\/p>\n <\/p>\n #Devtool<\/p>\n devtoolschallenger.com<\/a> explorez les secrets des oc\u00e9ans et par la m\u00eame occasion ceux de l\u2019outil de d\u00e9veloppement de Firefox \u00a0<3<\/p>\n <\/p>\n #Monstres #Illustration<\/p>\n The Monster Gallery<\/a>, plus de 100 illustrations de monstres bas\u00e9es sur des dessins d\u2019enfants \u00e0 travers le monde<\/p>\n <\/p>\n #Illustration<\/p>\n Microsoftut propose un logiciel de dessin d\u2019animations qui permet de pr\u00e9dire la prochaine \u00e9tape \u00e0 dessiner<\/a><\/p>\n <\/p>\n #Design #Diversit\u00e9<\/p>\n Just a Brown Hand<\/a>, slack a utilis\u00e9 une main de couleur pour un de ses designs et le geste a \u00e9t\u00e9 tr\u00e8s bien accueilli par la communaut\u00e9<\/p>\n <\/p>\n #CSS<\/p>\n Angled Edges with CSS Masks and Transforms<\/a> cr\u00e9er des \u00e9l\u00e9ments \u00e0 angle en CSS gr\u00e2ce aux masques et transformations<\/p>\n <\/p>\n #SVG<\/p>\n Interactive Color Photo Highlight Effect In SVG<\/a>, un effet de survol sur certaines parties de l\u2019image avec du SVG<\/p>\n <\/p>\n #CSS #Blend<\/p>\n CSS Image Effects #5: Lomography<\/a>, des effets de lomographie sur les images en utilisant le blend mode CSS et des filtres<\/p>\n <\/p>\n #CSS #Border<\/p>\n Understanding border-image<\/a>, comprendre la propri\u00e9t\u00e9 border-image: <source> <slice> <width> <outset> <repeat><\/p>\n <\/p>\n #CSS<\/p>\n Chrome Devtools Tips & Tricks<\/a><\/p>\n #CSS #Instagram<\/p>\n CSSgram<\/a> une librairie CSS pour recr\u00e9er les filtres instagram avec des modes de fusion<\/p>\n <\/p>\n #Navigation<\/p>\n A la recherche d\u2019id\u00e9es, de scripts ou de d\u00e9monstrations pour une navigation responsive ? Voil\u00e0 qui devrait vous aider : navnav.co<\/a> \u00a0:) Et en bonus les slides de la conf\u00e9rence\u00a0Concevoir la navigation sur mobile<\/a><\/p>\n <\/p>\n #iOS<\/p>\n Designing for iOS 9, iOS 9 Design Guidelines for iPhone and iPad<\/a>, des lignes directrices de design pour iOS9<\/p>\n <\/p>\n #CSS #Gameboy<\/p>\n La d\u00e9mo cool de la semaine : CSS Gameboy Animation<\/a><\/p>\n <\/p>\n #CSS #SVG<\/p>\n SVG and CSS animated map<\/a><\/p>\n <\/p>\n #Lego<\/p>\ntl;dnr, s’il devait n’en rester qu’un ?<\/h2>\n
Les articles de la semain<\/h2>\n
\npour extraire des pages avec des t\u00e2ches particuli\u00e8rement orient\u00e9es mobile est int\u00e9ressant.<\/p>\nDe 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
Pour le fun: jeux et d\u00e9mos sympas et impressionnantes<\/h2>\n