Des pixels et du code #54

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

Entre les tutoriels avancés qui vont vous permettre de créer des effets sympas en CSS, les collections de polices d’écriture et les frameworks responsive, que vous soyez orientés code ou design vous devriez trouver des outils qui vous seront utiles cette semaine. Pour les articles de fond, beaucoup d’ergonomie et d’expérience utilisateur avec le tris de cartes (ou « card sorting »), l’utilisabilité des formulaires ainsi que quelques idées préconçues sur le « touch » en mobilité. Du côté de l’inspiration, un peu de typographie et un petit projet photo qui met en scène de la nourriture sous forme de pantonnier. Et pour finir, un superbe article sur l’intégration et l’humilité, à lire absolument si ce n’est pas déjà fait.

Les tutoriels de la semaine

#CSS

Css-only Alternative to the Select Element un tutoriel pour créer un faux élément de liste de selection en utilisant des boutons radios à la place d’une balise select, l’idée étant d’avoir un plus grand contrôle sur le design en CSS des boutons radios. Par contre ça ne fonctionne pas avec une navigation au clavier comme l’a souligné PhilippeVay dans les commentaires.

Thumbnail Grid with Expanding Preview un tutoriel HTML/CSS/JS pour créer un système de grilles d’images responsive qui s’adapte avec un petit aperçu textuel qui s’ouvre au clique.

Style Textarea Resizers une technique CSS (qui ne fonctionne que sur webkit hélas) qui permet de prendre le contrôle et styler les “poignée de redimensionnement” des textareas en CSS

More fun with WebKit pseudoelements: -webkit-search-cancel-button (or: Pseudoclass Inception) pour rester dans le webkit only, un moyen de styler la petite croix de webkit sur les input-type=search.

#SEO #Indexation

Arrêtez d’indexer les environnements de préprod un mini guide des démarches à suivre si vous voulez être sûres que votre environnement de test ne soit pas indexé par Google et ses amis.

Des ressources utiles

#Outils

Webplatformtools.org un petit site qui rassemble au même endroit une liste de différents services et outils en ligne pour designer et développeurs. Les services sont classés par catégorie, il est donc très facile de trouver ce qu’on y cherche. Attention ce n’est pas du tout affilié à webplatform malgré leur nom.

#Font

25-old-school-and-retro-fonts 25 polices dans un style “old school” sélectionnée à télécharger gratuitement

Les outils et plugins pour vous faciliter la vie

#Responsive Webdesign #framework

Groundwork.sidereel.com un autre framework responsive avec un système de grilles bien pensé

#Bootstrap

Bootstrap select un petit ajout à Bootstrap qui permet de styler des listes déroulantes comme des boutons

Les articles à lire

#Font-icon

The Era of Symbol Fonts si vous n’étiez pas encore convaincus que les font-icons c’est génial, un petit article qui devrait finir de vous convaincre

#Logo

4 essential rules of effective logo design un petit article qui résume le rôle d’un logo et quelques bonnes pratiques pour créer des logos réussis

#Wireframe

Wireframes: A good communication tool, a poor design tool L’auteur compare les wireframes à la paperasse administrative : nécessaire pour mettre tout le monde d’accord, mais le processus de “design” commence bien en amont. Selon lui leurs intérêt resterait limité dans le domaine du design, mais ils restent d’excellents outils pour communiquer les idées sur un projet. La nuance est subtile j’en conviens.

#Ergonomie

Using Card Sorting To Test Information Architecture un petit articles qui décrit l’usage de la technique du “card sorting” en ergonomie, quand l’utiliser et comment pour des résultats exploitables sur un site web

#Responsive

On Responsive Layout and Grids, une petit explication très simple et illustrée d’un système de grilles responsive sans avoir à passer par un framework (type Bootstrap et autre).

#UX #Mobile

Mobile Form Usability: Place Labels Above the Field l’article répond à l’éternelle question des labels des formulaires : où les placer pour un utilisateur sur un mobile.

Common Misconceptions About Touch taille idéales des boutons, des liens, et quelques mythes et contre vérités sur les mobile à écran touch suites aux analyses d’un consultant en UX design

Inspiration

#Pantone

Pantone food pairing une petite série d’images de nourriture sous forme de couleur pantone

#Typographie

What’s Your Process une petits vidéos où Dave Coleman présente son processus de design pour une typographie

#UX UI Mobile

30 Menu Navigation Designs for Mobile User Interface une petite sélection de menus de navigation d’application mobile pour votre inspiration

#Mobile

5 Things to Know When Designing for iOS prendre en compte le média, designer sur l’appareil, ou encore animer l’interface, des conseils valables aussi bien pour iOS que pour n’importe quelle autre plateforme

Les démos sympas et impressionnantes

#CSS3

Peeling sticker une petite démo en full CSS3 d’un sticker avec un effet très sympa au survol

#JavaScript

Un démo codepen d’une petite toile en JavaScript que vous pourrez déchirer avec un effet très réaliste, le tout en JavaScript. C’est impressionnant de réalisme.

Et s’il devait n’en rester qu’un ?

#Integration web

L’intégration web, cette leçon d’humilité l’article qu’il vous faut lire, que vous soyez intégrateur web mais également designer, chef de projet, développeur, une superbe analyse sur notre métier, nos incertitudes au quotidien et l’humilité dont nous devrions faire preuve.

Et le petit site “troll” de la semaine : Skeuomorphism.it qui vous proposer de télécharger un plugin Photoshop pour transformer vos designs en flat design.