Des pixels et du code #68
Les liens de la semaine qu’il ne fallait surtout pas manquer, avec d’excellents articles sur l’UX mobile et les bonnes pratiques du domaine en général, du street art et des illustrations pour votre inspiration. Du côté des outils vous trouverez de quoi nettoyer vos fichiers SVG pour en faire de jolies icônes et font-icons, des tutoriels CSS3 pour des transition de modales et styler des checkboxes. Dans les ressources utiles, un petit rappel de quelques nouveautés Photoshop CC très sympathiques, des boutons ainsi que des émulateurs pour tester les site sur mobile. Sur ce bonne lecture, moi je vais manger des kiwis aujourd’hui ;)
Les articles à lire
#SVG
Work with SVG, un petit guide pour travailler avec du SVG aujourd’hui (le générer avec Illustrator) qui contient quelques liens utiles pour nettoyer le code généré (voir dans les commentaires également)
#Web
This is a webpage un très joli texte à lire sur ce qu’est au final le web
#UX #Mobile
Tools for Mobile UX Design l’auteur revient sur son workflow de design d’expérience utilisateur et sur les outils utilisés, aussi surprenants soient ils parfois comme un simple e-mail
12 usability flaws that are spoiling the mobile web une petite liste non exhaustive de 12 problèmes que l’on peut retrouver sur des sites mobile qui endommagent l’expérience utilisateur
Mobile Web Problems and How to Avoid Them une collection de screenshots qui illustrent les problèmes de certains sites mobiles et des propositions de solution pour y remédier
#Processus
Enabling Excellence in Custom Type Logos through Selectivity – l’auteur y expose son processus de choix de client et processus créatif pour du logo en typo, où il dit souvent “non” à des projets et clients potentiels
#Changements
There are no small changes – ou comment un petit changement qui prend 2min (apparemment) peut se transformer en quelques heures de développement en plus Attention l’article ne dit pas qu’il ne faut PAS faire le changement, mais juste être conscient des implications :)
#Mobilité #Fragmentation
iOS, Android, Fragmentation and You un article qui détaille la fragmentation du marché mobile d’Apple par OS et appareil, qui montre qu’au final si on détaille OS et appareil par appareil elle est plus importante que ce que l’on pourrait penser quand on lit que 93% des utilisateurs ont la version 6 d’iOS
Inspiration
#Streetart
Outdoor le folio de Aryz qui fait entre autre du street art de grande classe
#Illustration
Momoandsprits.com de jolies illustrations pleines de couleur
#Typographie
Webfontscorner.com une galeries de polices d’écritures sur différents sites web pour vous aider à faire votre choix d’assemblage de polices
Les tutoriels de la semaine
#CSS3 animations
CSS3 Transitions And Transforms From Scratch, parce qu’un tutoriel technique qui ressemble à quelques chose avec de jolies illustrations, ça mérite d’être relevé
#Checkbox
Personnaliser l’aspect de boutons radio et checkbox en CSS un petit tutoriel pour personnaliser les checkboxes en pure CSS
Des ressources utiles
#Placeholder
Placeimg.com une solution de placeholder d’images avec différentes catégories (nature, animaux, tech) et tailles possibles
#Mobilité
Mobile Emulators & Simulators: The Ultimate Guide une liste très complète de simulateurs pour tester vos sites mobiles
#Bouttons
Buttons – A CSS button library built with Sass & Compass une librairie de boutons créée et avec Sass et Compass pour vos projets
#Photoshop CC
Photoshop CC, it’s better quelques nouveautés très sympathiques dans Photoshop CC, personnellement j’ai un faible pour l’isolation des calques qui rend possibles une édition des formes plus facile (comme sur Illustrator)
Les outils et plugins pour vous faciliter la vie
#SVG
Svgo-gui un outil pour nettoyer et optimiser les SVG automatiquement
#Responsive
Dimensionsapp.com un outil en ligne pour tester un site responsive avec un “preview mode” qui permet de visualiser dans différentes tailles d’appareil
Les démos sympas et impressionnantes
#One Layer
Une fois n’est pas coutume, dans les démos je vous proposer un peu de design, avec le concept de “One layer”, des images réalisées avec un seul calques et pleins d’effets sous Photoshop. Impressionnant d’un point de vu technique.
Et s’il devait n’en rester qu’un ?
#Graphisme
Wearegraphicdesigners.be un collectif qui dont la démarche est de promouvoir le métier de Graphiste dans sa globalité
