{"id":1777,"date":"2013-08-09T00:37:47","date_gmt":"2013-08-08T22:37:47","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1777"},"modified":"2013-08-09T10:00:36","modified_gmt":"2013-08-09T08:00:36","slug":"des-pixels-et-du-code-74","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-74\/","title":{"rendered":"Des pixels et du code #74"},"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 c’est encore une fois l’exp\u00e9rience utilisateur qui sera mise en avant avec 4 articles sur le sujet : communiquer les fonctions \u00e0 l’utilisateur, diff\u00e9rence entre UX et UI ou encore utilisation des listes de s\u00e9lection. La section des ressources et outils est \u00e9galement tr\u00e8s fournie cette semaine : deux plugins Photoshop dont la sortie de Subtle Patterns, de jolies polices d’\u00e9critures mais \u00e9galement des outils pour pr\u00e9senter une maquette dans un mobile, ou des livrables \u00e0 un client. Bonne lecture<\/p>\n
#UX<\/p>\n
Shades of Discoverability <\/a>une analyse de diff\u00e9rents moyens de communiquer \u00e0 l\u2019utilisateur la fonction d\u2019un \u00e9l\u00e9ment d\u2019interface, de la r\u00e8gle explicite \u00e0 la d\u00e9couverte \u00e0 travers l\u2019utilisation<\/p>\n How To Use Select Boxes (Pulldown Menus)<\/a> des exemples d\u2019utilisation incorrecte de listes de s\u00e9lection et propositions d’alternatives<\/p>\n Lean Product Development: How To Validate A Feature Idea In 5 Minutes<\/a> , ou comment tester en 5minutes (avec mixpanel.com<\/a>\u00a0) si les utilisateurs souhaitent avoir la fonctionnalit\u00e9 en question. La m\u00e9thodologie de test n\u2019est pas forc\u00e9ment des plus rigoureuse, mais elle permet de se faire une premi\u00e8re id\u00e9e.<\/p>\n \u00a0#Clients<\/p>\n Client Relationships and the Multi-Device Web<\/a> propose quelques pistes pour expliquer \u00e0 un client la r\u00e9alit\u00e9 du web et la diversit\u00e9 des supports et appareils qui n\u2019est pas toujours facile \u00e0 appr\u00e9hender pour eux<\/p>\n #Conf\u00e9rence<\/p>\n Giving your first talk<\/a>, quelques petits conseils simples mais qu\u2019on noublie parfois pour sa premi\u00e8re conf\u00e9rence<\/p>\n #AdSense<\/p>\n Adsense Responsive : plusieurs m\u00e9thodes<\/a> un petit article sur les nouvelles possibilit\u00e9s d\u2019impl\u00e9mentation d\u2019Adsense pour des sites responsive<\/p>\n #Conseil<\/p>\n Branding too strong? Design in greyscale<\/a>, ou comment r\u00e9aliser un design lorsqu\u2019il y a trop de couleurs dans le logo qui viennent court-circuiter notre vision globale<\/p>\n #Design #Code<\/p>\n Le d\u00e9bat \u201cles designers devraient-ils savoir coder\u201d reprend de plus belle avec trois<\/a> articles<\/a> tout neufs<\/a>.<\/p>\n #Windows #Design<\/p>\n Think Different: Designed with Windows<\/a> \u00a0Cr\u00e9er un design et code sur Windows c\u2019est certes travailler dans un environnement pas forc\u00e9ment tr\u00e8s amical, mais c\u2019est aussi travailler sur le type d\u2019environnement que beaucoup d\u2019utilisateur finaux vont eux aussi avoir<\/p>\n #Typographie<\/p>\n Typography in ten minutes,<\/a> en 10 minutes (m\u00eame pas),5 r\u00e8gles de typographie \u00e0 respecter + Summary of key rules<\/a> , 26 r\u00e8gles suppl\u00e9mentaires (attention certaines peuvent changer d\u2019une langue \u00e0 une autre)<\/p>\n #Stop Motion<\/p>\n Latte Art <\/a>une vid\u00e9o instagram toute mignonne en stop motion (id\u00e9e sympa) sur le th\u00e8me du caf\u00e9<\/p>\n #BD #Pixelart<\/p>\n Le long voyage<\/a> une superbe illustration \u00e0 faire d\u00e9filer, tout en pixelart par Bouletcorp pleine de clins d\u2019oeil geek \u00e0 chaque coin de pixel<\/p>\n #Identit\u00e9<\/p>\n Hardcore bar<\/a> une identit\u00e9 graphique tr\u00e8s sympa pour un bar<\/p>\n #Typographie<\/p>\n typehunting.com<\/a>\u00a0un tumblr avec de jolies photos de beau lettrages<\/p>\n #Logo<\/p>\n 24 Elegant and Colorful Logos<\/a> 24 logos tr\u00e8s color\u00e9s dont vous pourrez vous inspirer pour vos compositions<\/p>\n #Illustration<\/p>\n Mi Factory, fabrique du designer<\/a>\u00a0\u00a0une superbe illustration de\u00a0Philippe Mignotte avec un niveau de d\u00e9tail hallucinant<\/p>\n #Mobilit\u00e9 #Gestes<\/p>\n Gesture Design with Javascript<\/a>, une pr\u00e9sentation de quelques possibilit\u00e9s de Hammer.js pour ajouter des contr\u00f4les au geste (swipe, pinch, etc.) \u00e0 vos applications web mobiles<\/p>\n #Typographie<\/p>\n Look Up<\/a>, une police d\u2019\u00e9criture gratuite dont les lettres sont \u00e9crites avec des petites fl\u00e8ches<\/p>\n Kraftstoff<\/a>, une police gratuite avec un c\u00f4t\u00e9 vintage<\/p>\n #Branding<\/p>\n Free Stationary Mockup PSD<\/a> un PSD gratuit pour vos pr\u00e9sentations de travail de design d\u2019identit\u00e9 graphique de marque<\/p>\n #Theme #HTML #CSS<\/p>\n Type & Grids: Free Responsive HTML5 Template<\/a>, un th\u00e8me responsive HTML\/CSS gratuit propos\u00e9 sur SmashingMagazine, avec une demo <\/a>\u00a0et diff\u00e9rentes options de m\u00e9lange de polices, couleurs et formes<\/p>\n #jQuery #Navigation<\/p>\n SimpleSlideView<\/a> un plugin pour cr\u00e9er des panneaux de navigation entre \u00e9l\u00e9ments de liste qui glissent de gauche \u00e0 droite comme les listes natives dans iOS<\/p>\n #Mobile<\/p>\n mockuphone.com<\/a> un outil en ligne qui vous permet de s\u00e9lectionner un appareil mobile, y ajouter votre maquette par drag & drop et t\u00e9l\u00e9charger l’aper\u00e7u final de votre travail dans le mobile s\u00e9lectionn\u00e9<\/p>\n #Densit\u00e9 Pixel Density Converter<\/a> un outil pour calculer directement la taille des \u00e9l\u00e9ments de design dans 4 r\u00e9solutions mobiles android \/ iOS<\/p>\n #Emmet #Livecoding<\/p>\n Emmet LiveStyle<\/a> un plugin Sublime Text pour de l\u2019\u00e9dition de code et rechargement en temps r\u00e9el bi-directionel : ce qui est \u00e9crit dans Sublime est rafra\u00eechit sur la page, ce qui est \u00e9crit dans le dev tool de Chrome est inject\u00e9 dans Sublime.<\/p>\n #Pr\u00e9sentation<\/p>\n Delivery<\/a>, un nouvel outil en ligne pour pr\u00e9senter son travail \u00e0 un client de mani\u00e8re tr\u00e8s simple et \u00e9pur\u00e9e<\/p>\n #Photoshop<\/p>\n renamy.com<\/a> un plugin Photoshop qui devrait vous permettre de renommer plus facilement les calques et surtout de renommer en une seule fois plusieurs calques s\u00e9lectionn\u00e9s<\/p>\n Subtle Patterns<\/a>, le plugin pour avoir directement les patterns propos\u00e9es par le site\u00a0subtlepatterns.com<\/a>\u00a0dans Photoshop est enfin disponible<\/p>\n #CSS<\/p>\n Formulaire de contact<\/a> un formulaire de contact qui se transforme en avion en papier qui vole une fois que l\u2019utilisateur a cliqu\u00e9 sur \u201cenvoyer\u201d<\/p>\n #CSS #liens<\/p>\n Creative Link Effects<\/a>, une s\u00e9rie d\u2019animations et transitions au survol de liens r\u00e9alisables en<\/p>\n #CSS<\/p>\n Forest Encounter<\/a> une demo sur codepen avec du filtre CSS blur <3<\/p>\n #Flash \u00a0#Music<\/p>\nInspiration<\/h2>\n
Les tutoriels de la semaine<\/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