Des pixels et du code #74
Comme chaque semaine, je vous propose un condensé de mes lectures et ma veille Web Design et graphisme, expérience utilisateurs, HTML, CSS, outils, ressources et inspiration. Cette semaine c’est encore une fois l’expérience utilisateur qui sera mise en avant avec 4 articles sur le sujet : communiquer les fonctions à l’utilisateur, différence entre UX et UI ou encore utilisation des listes de sélection. La section des ressources et outils est également très fournie cette semaine : deux plugins Photoshop dont la sortie de Subtle Patterns, de jolies polices d’écritures mais également des outils pour présenter une maquette dans un mobile, ou des livrables à un client. Bonne lecture
Les articles à lire
#UX
Shades of Discoverability une analyse de différents moyens de communiquer à l’utilisateur la fonction d’un élément d’interface, de la règle explicite à la découverte à travers l’utilisation
How To Use Select Boxes (Pulldown Menus) des exemples d’utilisation incorrecte de listes de sélection et propositions d’alternatives
Lean Product Development: How To Validate A Feature Idea In 5 Minutes , ou comment tester en 5minutes (avec mixpanel.com ) si les utilisateurs souhaitent avoir la fonctionnalité en question. La méthodologie de test n’est pas forcément des plus rigoureuse, mais elle permet de se faire une première idée.
#Clients
Client Relationships and the Multi-Device Web propose quelques pistes pour expliquer à un client la réalité du web et la diversité des supports et appareils qui n’est pas toujours facile à appréhender pour eux
#Conférence
Giving your first talk, quelques petits conseils simples mais qu’on noublie parfois pour sa première conférence
#AdSense
Adsense Responsive : plusieurs méthodes un petit article sur les nouvelles possibilités d’implémentation d’Adsense pour des sites responsive
#Conseil
Branding too strong? Design in greyscale, ou comment réaliser un design lorsqu’il y a trop de couleurs dans le logo qui viennent court-circuiter notre vision globale
#Design #Code
Le débat “les designers devraient-ils savoir coder” reprend de plus belle avec trois articles tout neufs.
#Windows #Design
Think Different: Designed with Windows Créer un design et code sur Windows c’est certes travailler dans un environnement pas forcément très amical, mais c’est aussi travailler sur le type d’environnement que beaucoup d’utilisateur finaux vont eux aussi avoir
#Typographie
Typography in ten minutes, en 10 minutes (même pas),5 règles de typographie à respecter + Summary of key rules , 26 règles supplémentaires (attention certaines peuvent changer d’une langue à une autre)
Inspiration
#Stop Motion
Latte Art une vidéo instagram toute mignonne en stop motion (idée sympa) sur le thème du café
#BD #Pixelart
Le long voyage une superbe illustration à faire défiler, tout en pixelart par Bouletcorp pleine de clins d’oeil geek à chaque coin de pixel
#Identité
Hardcore bar une identité graphique très sympa pour un bar
#Typographie
typehunting.com un tumblr avec de jolies photos de beau lettrages
#Logo
24 Elegant and Colorful Logos 24 logos très colorés dont vous pourrez vous inspirer pour vos compositions
#Illustration
Mi Factory, fabrique du designer une superbe illustration de Philippe Mignotte avec un niveau de détail hallucinant
Les tutoriels de la semaine
#Mobilité #Gestes
Gesture Design with Javascript, une présentation de quelques possibilités de Hammer.js pour ajouter des contrôles au geste (swipe, pinch, etc.) à vos applications web mobiles
Des ressources gratuites
#Typographie
Look Up, une police d’écriture gratuite dont les lettres sont écrites avec des petites flèches
Kraftstoff, une police gratuite avec un côté vintage
#Branding
Free Stationary Mockup PSD un PSD gratuit pour vos présentations de travail de design d’identité graphique de marque
#Theme #HTML #CSS
Type & Grids: Free Responsive HTML5 Template, un thème responsive HTML/CSS gratuit proposé sur SmashingMagazine, avec une demo et différentes options de mélange de polices, couleurs et formes
Les outils et plugins pour vous faciliter la vie
#jQuery #Navigation
SimpleSlideView un plugin pour créer des panneaux de navigation entre éléments de liste qui glissent de gauche à droite comme les listes natives dans iOS
#Mobile
mockuphone.com un outil en ligne qui vous permet de sélectionner un appareil mobile, y ajouter votre maquette par drag & drop et télécharger l’aperçu final de votre travail dans le mobile sélectionné
#Densité Pixel Density Converter un outil pour calculer directement la taille des éléments de design dans 4 résolutions mobiles android / iOS
#Emmet #Livecoding
Emmet LiveStyle un plugin Sublime Text pour de l’édition de code et rechargement en temps réel bi-directionel : ce qui est écrit dans Sublime est rafraîchit sur la page, ce qui est écrit dans le dev tool de Chrome est injecté dans Sublime.
#Présentation
Delivery, un nouvel outil en ligne pour présenter son travail à un client de manière très simple et épurée
#Photoshop
renamy.com un plugin Photoshop qui devrait vous permettre de renommer plus facilement les calques et surtout de renommer en une seule fois plusieurs calques sélectionnés
Subtle Patterns, le plugin pour avoir directement les patterns proposées par le site subtlepatterns.com dans Photoshop est enfin disponible
Les démos sympas et impressionnantes
#CSS
Formulaire de contact un formulaire de contact qui se transforme en avion en papier qui vole une fois que l’utilisateur a cliqué sur “envoyer”
#CSS #liens
Creative Link Effects, une série d’animations et transitions au survol de liens réalisables en
#CSS
Forest Encounter une demo sur codepen avec du filtre CSS blur <3
#Flash #Music
Seaquence, une expérience musicale basée sur des petites créatures moléculaires qui se créent à l’aide de sons, difficile à expliquer le mieux reste de tester ;) (attention la page a le son activé)
Et s’il devait n’en rester qu’un ?
UX is not UI, la confusion entre UI (user interface) et UX (user expérience) est fréquente, l’auteur explique ici en quoi le designer d’interface n’est qu’une toute petite partie de l’expérience utilisateur. “UX is the intangible design of a strategy that brings us to a solution.”
