Des pixels et du code #50

Ce contenu a été rédigé il y a 12 ans. Il se peut qu'il ne soit plus à jour.

Ma petite sélection de liens de la semaine à ne pas manquer va tout particulièrement plaire aux graphistes qui s’intéressent à la typographie et l’expérience utilisateur avec beaucoup d’articles de fond et d’outils et d’astuces, au design mobile et à l’accessibilité. Et pour les intégrateurs quelques liens sur l’utilisation de Bootstrap, Sublime Text et le support des sélecteurs CSS sur mobile.

Les tutoriels de la semaine

#Illustrator #Typographie

How to Create Calligraphic Ampersand Symbols in Illustrator un petit tutoriel pour créer des “Ampersands” (le sigle &) sur Illustrator

#Android

How To Design For Android Devices un petit résumé de quelques bonnes pratiques pour commencer le design Android, même si l’utilisation d’un bouton “retour en arrière” reste assez flou même dans les guidelines officielles

#Icônes

This is how I’m creating web font icon fonts une vidéo rapide de tutoriel sur comment créer des font-icons avec IcoMoon en quelques cliques

Des ressources utiles

#Typographie

25 Free Comic Fonts to Use Instead of Comic Sans, car oui on peut avoir besoin d’utiliser une font “comic” sans passer par la comic sans, 25 polices “comic” pour la remplacer

ifontyou.com un site qui rassemble des combinaisons de police d’écriture qui fonctionnent bien, si jamais vous manquez d’idées

#UX

http://darkpatterns.org/ un site consacré aux “dark patterns” ou ces éléments de l’interface qui forcent les utilisateurs à faire des actions qu’ils ne veulent pas faire (comme les publicités déguisées, les frais cachés, etc)

#SublimeText

colorsublime.com un petit site qui vous permet d’avoir un aperçu d’un thème Sublime Text pour différents langages avant de l’installer chez vous

#CSS
Mobile.html un petit tableau de compatibilité des sélecteurs CSS sur mobile

#CV

represent.io un service en ligne qui vous permet de monter rapidement un petit CV en ligne

#Photoshop

Pixel Perfect Precision™ (PDF) un condensé de bonnes pratiques de graphisme dans Photoshop

Les outils et plugins pour vous faciliter la vie

#Sublime Text #WordPress

WordPress Extensions for Sublime Text 2 un article qui listes quelques plugins utiles pour travailler avec WordPress dans Sublime Text 2

#Touch

touchSwipe un plugin jQuery pour récupérer les events de touch et swipe sur mobile

#A11Y

Correcteur d’accessibilité de tableaux un outil en ligne qui vous permet de corriger l’accessibilité de vos tableaux HTML en copiant/ collant le code directement

Les articles à lire

#Design mobile

Design decisions: Projects on Basecamp for iPhone un retour d’expérience et analyse sur les décisions prises pour le design de l’application de Basecamp pour iPhone

Mobile-design-information-architecture plusieurs gabarits d’agencement des informations sur mobile/ tablette expliqués

Native Mobile Apps are the New Flash avec les avancées en terme de HTML et CSS des sites web, l’auteur émet la théorie qu’à terme les applications seront comme pour le Flash, uniquement utilisées pour des jeux qui requièrent ce type de technologies

#Ergonomie

Choisir la taille de police : px ? cm ? em ? rem ? En situation de mobilité ? Sur navigateur de bureau ? Au final le choix n’est pas aussi simple que l’on pourrait le croire.

Pimkie, une page d’accueil… surprenante une analyse d’un point de vue ergonomie de la nouvelle page d’accueil de Pimkie avec du carrousel automatique qui défile trop vite et un menu déroulant déroulé au chargement de la page.

Mobile Form Usability: Avoid Splitting Single Input Entities un article sur l’ergonomie des formulaires et les champs qui sont séparés, la partie sur la séparation nom // prénom est particulièrement intéressante. Apparemment séparer nom et prénom en deux champs perturberait beaucoup d’utilisateurs.

#Design

So God Made a Designer Parody Video un vidéo parodique de “So God made a farmer” qui explique pourquoi Dieu aurait créés les designers. Quelques jolies vérités dedans.

#A11Y

Pour lire la suite, cliquez ici un excellent article de Victor Brito sur l’accessibilité des liens “lire la suite”, cliquez ici”. La partie particulièrement intéressante concerne l’explication très détaillée du contexte des liens dans différents cas d’utilisation.

#Boutons

Principles for Successful Button Design 10 principe de base pour créer des boutons facilement utilisables sur votre site web

#Bootstrap

Please stop using Twitter Bootstrap un article qui résumé très bien le fond de ma pensée, la lassitude de voir encore et encore les mêmes designs bootstrap sans originalité et remet Bootstrap à sa place qui du proptotype rapide et du dashboard d’administration de site.

#UX

How To Sell Your UX Design Solution To Clients ou comment vendre des prestations d’ergonomie et d’analyse d’expérience aux clients qui de prime abord ne comprennent pas forcement pourquoi ils devraient payer pour quelques wireframes tout gris qui ne sont même pas “du design”

Baymardcom , des articles dédiés à l’ergonomie, expérience utilisateur et au e-commerce

Inspiration

#Typographie

9 amazing type designers to inspire you 9 designers de polices et de typographie à suivre si vous manquez d’inspiration

#Couleurs

Guidelinecolours Ce petit site rassemble des guidelines des principaux réseaux sociaux, grosses marques et services en ligne classés par couleur

Les démos sympas et impressionnantes

#Parallaxe

Channel experience un site en parallaxe uniquement pour présenter quelques modèles de montre Chanel