Des pixels et du code #55
Une semaine de liens qui devraient beaucoup plaire aux graphistes et webdesigner puisque beaucoup de tutoriels et d’outils en rapport avec Illustrator, la typographie ainsi que des réflexions sur le métier de designer en général et l’ergonomie. Des tutotoriels CSS et des démonstrations impressionnantes ne laisseront pas nos amis intégrateurs en reste et toujours autant de ressources utiles sur le responsive webdesign, difficile de passer à coté de l’optimisation des sites pour mobile aujourd’hui. Bonne lecture et fin de semaine à tous :)
Les tutoriels de la semaine
#CSS
Increasing the Clickable Area of Inline Links une petite astuce CSS à base de padding et position relative pour agrandir les zones cliquables des liens pour le “touch”
#Icon
Combining icon font glyphs to create complex mega-icons. l’idée intéressante de combiner plusieurs icônes d’une font-icon pour ajouter de la couleur, mais c’est peut-être pousser un peu loin l’idée là sachant que background-clip: text; n’est que peu supporté, des sprites SVG seraient peut-être plus efficaces ici.
#Illustrator
How-to-make-a-repeatable-pattern-in-illustrator un petit tutoriel bien pratique pour réaliser facilement des patterns de fond qui vont se répéter sur Illustrator
Des ressources utiles
#Veille
staying current, une liste de podcasts, blogs, sites et compte twitter à suivre pour faire de la veille
#Flat
Fltdsgn.com une galerie qui rassemble des design “flat” pour votre inspiration
flat UI, un kit d’UI qui se grèffe sur Foundation de Zurb.
#Typographie et #Mobile
Tinytype un tableau comparatif des polices disponibles sur chaque plateforme mobile
#Typographie
Fontseek.info un ensemble de belles polices d’écritures qui ne sont pas proposées dans les fonderies classiques avec à chaque fois le lien pour les télécharger ou les acheter
Les outils et plugins pour vous faciliter la vie
#jQuery
Jresponsive.is-great.net un petit plugin jQuery qui ressemble à mansonry et permet de ré-ordonner des blocs au redimensionnement de la page et de les placer de manière “optimale” en fonction de la place disponible
#Illustrator
Drawscript est un plugin pour Illustrator qui permet de générer du script à partir de formes vectorielles
Les articles à lire
#Mobile #UX
5 Ways to Handle Long Drop-Downs In Mobile Forms une petite étude de cas avec des exemples réels de comment certains sites gèrent les longues listes déroulantes (+15 entrées dans la liste) sur mobile
UX Techniques Bank une liste de termes et techniques utilisées en ergonomie et design d’expérience utilisateur avec leurs définitions (en anglais) et quand elles sont utilisées
#Ergonomie
Put the logo below the fold: Breaking design rules for profit. placer le logo sous la ligne de flottaison, utiliser un bouton vert certes esthétiquement horrible mais qui attire l’attention, l’auteur explique comment en allant à l’encontre des “règles” il essaie de monter le taux de conversion de la page. J’aime beaucoup la phrase “I don’t care if Cascade wins design awards. It doesn’t matter if other designers like the page. It’s not for them. “
Two-Column Mobile Layouts Outperform Three-Columns by 29% une petite étude qui montre qu’un design en colonnes est plus efficace que 3 colonnes (pour des listes de participants ici)
#Responsive #E-commerce
Web responsive & E-Commerce : un seul site pour tous les devices ? une petite présentation slideshare si vous vous intéressez à l’e-commerce et au responsive webdesign
#Webdesign
Don’t be your own client (if you can afford it) le retour d’expérience sur un designer de logo qui a engagé un autre designer pour faire son identité et ne regrette pas une seule seconde ce choix
Nobody is an Expert – “Nobody is an expert. There are some people that just shout a bit louder than other people.” – “Personne n’est un expert, il y a simplement des gens qui parlent plus fort que d’autres.”
Inspiration
#Cafééé
Coffitivity.com des études ont montré que les bruits ambiants des cafés aident à la créativité, ce petit service propose un bruit de fond de café à mettre en plus de votre musique. A tester :)
Les démos sympas et impressionnantes
#CSS
Andrevv.com scrollez la page, et faites courir la panthère, juste en CSS, impressionnant :)
#Canvas
Flat-surface-shader une petite demo de formes géométriques qui bougent en canvas ou en SVG, à vous de choisir. Vous pouvez aussi jouer avec le rendu et les couleurs.
Et s’il devait n’en rester qu’un ?
#Responsive Webdesign
Optimisation mobile et responsive webdesign – mise à jour 2013 un peut d’auto-promotion cette semaine pour finir avec la mise à jour de mon cours sur l’optimisation mobile et le responsive webdesign
