{"id":1787,"date":"2013-08-16T09:24:17","date_gmt":"2013-08-16T07:24:17","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1787"},"modified":"2013-08-16T09:24:17","modified_gmt":"2013-08-16T07:24:17","slug":"des-pixels-et-du-code-75","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-75\/","title":{"rendered":"Des pixels et du code #75"},"content":{"rendered":"
Comme chaque semaine, \u00a0je vous propose un condens\u00e9 de mes lectures et ma veille Web Design et graphisme, exp\u00e9rience utilisateurs, HTML, CSS, outils, ressources et inspiration. Cette semaine je vous propose une grand s\u00e9lection d’articles orient\u00e9s sur le m\u00e9tier et processus de travail du Designer Web : perfection au pixel pr\u00e8s, checklist de designer et incidence d’outils d’automatisation de code dans nos m\u00e9tiers. \u00a0Vous trouverez \u00e9galement la rubrique des ressources utiles et outils tr\u00e8s fournie cette semaine : acc\u00e8s \u00e0 Typekit depuis le bureau, outils pour le retina, plugins Photoshop pour les grilles verticales et g\u00e9n\u00e9rateur de faux \u00ab\u00a0utilisateur\u00a0\u00bb pour vos projets. Enfin n’oubliez pas l’article \u00e0 lire absolument cette semaine qui traite d’exp\u00e9rience utilisateur. Bonne lecture.<\/p>\n
#Responsive<\/p>\n
A Responsive Web Design Process<\/a> un excellent article sur le processus de cr\u00e9ation d\u2019un site responsive : commencer par le contenu, \u00a0penser au mobile d\u00e8s le d\u00e9part, mais ne pas forc\u00e9ment commencer le design dans Photoshop avec le mobile<\/p>\n #Webdesign<\/p>\n What\u2019s wrong with \u201cPixel Satisfaction\u201d? <\/a>la recherche de la perfection et du pixel perfect est une chose louable dans nos m\u00e9tiers, mais on oublie bien trop souvent que le PSD n\u2019est qu\u2019il \u00e9tape parmi tant d\u2019autres. J\u2019aime beaucoup la citation Designers checklist advices <\/a>plusieurs petites lites de conseils pour les webdesigner<\/p>\n Why designers are talking about the wrong thing<\/a>, plut\u00f4t qu\u2019un r\u00e9sum\u00e9 je vous propose une citation : \u00ab\u00a0You know what I don’t give a shit about? Design tools. (…) HTML, CSS & JAVASCRIPT bring your painting to life\u00a0\u00bb<\/p>\n Laziness & The Web Designer<\/a> l\u2019avis d\u2019un designer sur les outils comme Macaw ou CSS3hat qui exportent automatiquement du code et rendent les designer paresseux selon lui<\/p>\n Donner de la valeur au design,<\/a> montrer le processus cr\u00e9atif pour rassurer le client mais \u00e9galement montrer la valeur ajout\u00e9e \u00e0 son travail<\/p>\n #Logo<\/p>\n Hawt Sauce<\/a>, un tr\u00e8s joli design de logo pour de la sauce tomate fait maison<\/p>\n #Packaging<\/p>\n Lacy Kuhn<\/a> un packaging de c\u00e9r\u00e9ales avec un concept adorable et original<\/p>\n #Typography<\/p>\n Fantastic Shoppe Fronts<\/a>, un tumblr qui rassemble de tr\u00e8s belles photos de deventures avec de jolies lettres<\/p>\n #Art<\/p>\n The Zoom Quilt it<\/a> un project d\u2019art collaboratif avec un concept de zoom infini dans une illustration. Et dans le m\u00eame style \u201cInfinite Oz<\/a>\u201d.<\/p>\n #Interractions<\/p>\n The perils at Great Falls\u00a0<\/a>un article interactif sur le Washington Post pour pr\u00e9senter les dangers de diff\u00e9rents courants<\/p>\n #CSS<\/p>\n Absolute Center<\/a> , centrer verticalement et horizontalement une modale en CSS.<\/p>\n #Responsive<\/p>\n Multi-Level Push Menu<\/a>\u00a0un menu responsive \u00ab\u00a0Off-screen\u00a0\u00bb avec plusieurs niveaux de profondeur<\/p>\n #Ghithub<\/p>\n A guide to using Github Pages<\/a>, un guide simple \u00e0 l\u2019utilisation de github<\/p>\n #Illustrator<\/p>\n Adobe Illustrator CS6 Shortcuts Cheat Sheet<\/a> , pour conna\u00eetre vos raccourcits sur le bout des doigts<\/p>\n #Adobe CC<\/p>\n Early access to Typekit and file sync in Adobe CC<\/a>, un acc\u00e8s en avant premi\u00e8re aux fonctionnalit\u00e9s de synchronisation et polices sur bureau de Typekit<\/p>\n #Mobile<\/p>\n Are you making any of these 8 common (and wrong) assumptions about mobile performance?<\/a> un article d\u00e9taill\u00e9 et illustr\u00e9 d\u2019\u00e9tudes chiffr\u00e9es qui va \u00e0 l\u2019encontre de certains mythes sur la mobilit\u00e9<\/p>\n #Retina<\/p>\n How to test a website for Retina on Windows without an actual Retina display?<\/a> ou comment utiliser Firefox pour avoir un premier aper\u00e7u de votre site en retina<\/p>\n #Mockup #Mobile<\/p>\n PixelSign HTML5 device mockups<\/a> des maquettes de mobiles en HTML pour pr\u00e9senter un design d\u2019application directement dans un appareil<\/p>\n #Font<\/p>\n Dense typeface<\/a> \u00a0une \u00e9l\u00e9gante police g\u00e9om\u00e9trique \u00e0 t\u00e9l\u00e9charger et utiliser gratuitement pour vos projets<\/p>\n #Grid<\/p>\n modulargrid.org<\/a>\u00a0un outil en ligne et plugin Photoshop pour cr\u00e9er une grille verticale pour aligner la typographie<\/p>\n #Utilisateur<\/p>\n randomuser.me<\/a>\u00a0vous propose un faux nom, photo et adresse mail pour cr\u00e9er des utilisateurs al\u00e9atoires pour vos designs et bases de donn\u00e9es<\/p>\n #Ic\u00f4nes<\/p>\n 60 SEO Service icons<\/a> un kit de 60 ic\u00f4nes qui pr\u00e9sentent diff\u00e9rents services \u201cSEO\u201d mais peuvent \u00e9galement \u00eatre utilis\u00e9es pour beaucoup de prestations et services web.<\/p>\n #Flat UI<\/p>\n flatuimaps.com<\/a>\u00a0je n\u2019aime vraiment pas les couleurs du kit \u201cFlat UI Pro\u201d, mais si ce n\u2019est pas votre cas, ce g\u00e9n\u00e9rateur de cartes Google Maps pourrait vous plaire<\/p>\n #CSS<\/p>\n une ic\u00f4ne d\u2019appareil photo<\/a> dans un style iOS, faite \u00e0 partir d\u2019un seule \u00e9l\u00e9ment HTML, \u00e0 savoir body.<\/p>\n #Jeu<\/p>\n LittleAlchemy<\/a>, \u00a0un petit jeu dans le navigateur o\u00f9 il faut combiner des \u00e9l\u00e9ments pour en cr\u00e9er de nouveaux<\/p>\n Babbit<\/a>\u00a0un autre jeu de procrastination matinale o\u00f9 il faut attraper les carottes avec le lapinou<\/p>\n #Canvas<\/p>\n
\n\u201cAiming for excellence in the final product is always the goal. However, when presenting a mockup, it should be ok if an element is a few pixels off, especially if it saves you (and your client\u2019s budget) an hour of work\u201d<\/p>\nInspiration<\/h2>\n
Les tutoriels de la semaine<\/h2>\n
Des ressources utiles<\/h2>\n
Des ressources gratuites<\/h2>\n
Les outils \u00a0et plugins pour vous faciliter la vie<\/h2>\n
Les d\u00e9mos sympas et impressionnantes<\/h2>\n