{"id":4335,"date":"2015-08-28T08:37:24","date_gmt":"2015-08-28T06:37:24","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=4335"},"modified":"2015-08-28T08:38:34","modified_gmt":"2015-08-28T06:38:34","slug":"la-semaine-en-pixels-28-aout-2015","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-28-aout-2015\/","title":{"rendered":"La semaine en pixels \u2013 28 ao\u00fbt 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 : exp\u00e9rience utilisateur, biais cognitifs, typographie, optimiser le touch et l’espace pour les grands \u00e9crans, navigations alternatives au burger menu, fonts et performance web, du langage corporel, de jolis esperluettes, un peu de musique, un tutoriels sur CSS element(), du SVG, des loaders CSS, et pour le fun un peu d’email, de canvas et de CSS.<\/p>\n
Pour plus de liens vous pouvez me suivre sur twitter<\/a>. Bonne lecture :)<\/p>\n #Ampersands<\/p>\n My Top 30 Fonts with the Sexiest Ampersands<\/a>, de jolies esperluettes<\/p>\n #Design<\/p>\n The Cognitively Biased Designer<\/a>, prendre conscience des diff\u00e9rents biais cognitifs auxquels on fait parfois face pour mieux s\u2019en abstraire<\/p>\n <\/p>\n #Typography<\/p>\n Guidelines for Letterspacing Type<\/a>, un guide du letter-spacing pour la typographie sur le web avec des exemples illustr\u00e9s en CSS.<\/p>\n #Touch<\/p>\n Il n\u2019y a pas que les mobiles qui ont des \u00e9crans tactiles, voici quelque \u00e9l\u00e9ments \u00e0 prendre en compte pour l\u2019optimisation au touch de grands \u00e9crans : Very Large Touchscreens: UX Design Differs From Mobile Screens<\/a><\/p>\n #Manipulation<\/p>\n How I Increased Lonely Planet\u2019s In-App Purchase Revenue By 30% (Case Study Inside)<\/a>, ou comment influencer les utilisateurs vers un choix en ajoutant une 3e option facilement comparable<\/p>\n <\/p>\n #Performance<\/p>\n The @font-face dilemma<\/a>, le dilemme des font-face et quelques exemples et solutions<\/p>\n <\/p>\n #Font<\/p>\n J’adore ce genre d’articles : Why the Wingdings font exists<\/a><\/p>\n #E-Commerce #Grands \u00e9crans<\/p>\n J\u2019aime beaucoup l\u2019id\u00e9e de profiter de l\u2019espace des grands \u00e9crans pour ajouter intelligemment des \u00e9l\u00e9ments sur les sites e-commerce, parce que le responsive \u00e7a va dans les deux sens : 11 Ideas for Large-Screen E-Commerce Design<\/a><\/p>\n #Mobile<\/p>\n Supporting Mobile Navigation in Spite of a Hamburger Menu<\/a>, proposer des navigations alternatives (recherche, liens en bas de page, liens dans le texte, etc.) sur mobile au cas o\u00f9 les utilisateurs ne verraient\/n\u2019utiliseraient pas le burger menu.<\/p>\n #Performance<\/p>\n Experiments in Loading – How Long Will You Wait?<\/a>, Viget a cr\u00e9\u00e9 diff\u00e9rents loaders pour voir combien de temps les gens sont pr\u00eats \u00e0 attendre avant de quitter la page et si le type de loader influence ce temps d\u2019attente<\/p>\n #Performance<\/p>\n Optimizing Markup and Styles<\/a>, ou comment optimiser le code HTML, la s\u00e9mantique, les webfonts, nettoyer son CSS et bien plus pour un site performant<\/p>\n #UI<\/p>\n How to fix a bad user interface<\/a> et le concept de \u201cUI stack\u201d, ou comment ne pas oublier diff\u00e9rents \u00e9tats de l\u2019interface (\u00e9tat vide, en chargement, partiel, erreurs, \u00e9tat id\u00e9al quand tout va bien et tout est rempli)<\/p>\n #Fun<\/p>\n Umlaut \u2013 The Uber of punctuation. Th\u00e4nks.<\/a> un article humoristique sur le concept \u201cc\u2019est le Uber du\u2026\u201d<\/p>\n #Design #Talk<\/p>\n Patterns of Card UI Design<\/a>, une conf\u00e9rence sur les diff\u00e9rents type de \u201ccartes\u201d et comment les utiliser dans le design moderne<\/p>\n #TED #Langage corporel<\/p>\n Amy Cuddy: Your body language shapes who you are<\/a>, une conf\u00e9rence passionnant sur le langage corporel et comment hacker son cerveau pour avoir confiance en soi<\/p>\n #Pattern<\/p>\n La flat n\u2019a pas totalement tu\u00e9 les sites avec des motifs de fond, voici une petite collection plut\u00f4t sympa<\/a>. J\u2019aime beaucoup certains motifs discr\u00e8tement anim\u00e9s.<\/p>\n <\/p>\n #Music<\/p>\n Si toi aussi tu t\u2019es toujours demand\u00e9 ce qu\u2019est le liquid funk, le vintage reggae ou encore le necrogrind, maintenant tu peux savoir : everynoise.com<\/a><\/p>\n #hangout<\/p>\n hangouts.google.com<\/a> Google Hangout a enfin sa webapp d\u00e9di\u00e9e, il \u00e9tait temps !<\/p>\n #CSS<\/p>\n CSS element() function<\/a> avec de jolies petites d\u00e9mos<\/p>\n #SVG<\/p>\n Tight Fitting SVG Shapes, the Present and Future<\/a> par Ana Tudor, passionnant \u00e0 lire, par contre buvez un caf\u00e9 avant et r\u00e9visez vos cours de maths ;)<\/p>\n #CSS<\/p>\n Une collection d\u2019animations de chargement en CSS, on sait jamais \u00e7a pourrait servir : cssload.net<\/a> and spinkit<\/a><\/p>\n #Translation<\/p>\n Huhuhu, Google Translate vs. \u201cLa Bamba\u201d<\/a><\/p>\n #Image<\/p>\n Un million d\u2019images qui repr\u00e9sentent plus de 300 ans mis \u00e0 disposition en CC0 par la British Library<\/a><\/p>\n #JS #Color<\/p>\n React Color<\/a>, 7 color pickers dans des styles diff\u00e9rents \u00e0 utiliser pour vos projets web<\/p>\n <\/p>\n #JS #Canvas<\/p>\n Un petit pantin en canvas<\/a>, totalement fonctionnel, procrastination dans 3, 2, 1 \u2026<\/p>\n #Email<\/p>\n Un email qui change d’apparence en fonction de client dans lequel vous l\u2019ouvrez sous forme de petit jeu<\/a><\/p>\n #Maths<\/p>\n Cycloid Drawing Machine<\/a>, la machine qui vous dessine des cyclo\u00efdes (vous vous souvenez des spirographes?)<\/p>\n #Cubes<\/p>\n Procrastination time avec cette petit d\u00e9mo de cubes iso<\/a><\/p>\n #CSS<\/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
De l\u2019inspiration et de jolies id\u00e9es<\/h2>\n
<\/p>\n
<\/p>\n
<\/p>\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
<\/p>\n
<\/p>\n
<\/p>\n
Pour le fun: jeux et d\u00e9mos sympas et impressionnantes<\/h2>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n