La semaine en pixels – 29 avril 2016

This article is also available in English: us us

Comme chaque semaine,  un condensé de mes lectures et ma veille web design et graphisme, expérience utilisateurs, design d’interface et mobilité, mais aussi des outils et ressources pour le web design et de l’inspiration en tout genre : illustrations, photos, sites web, etc.

Au programme cette semaine : wireframes et workflow, accessibilité et performance, une alternative au burger menu, design d’interface en “card design” et conseils généraux d’UI, expérience utilisateur des formulaires d’inscription, vendre des systèmes de design cohérents, et techniques de cache. De très jolies illustration, des petits détails d’interface mobile en vidéo, des boutons CSS et de la couleur du côté de l’inspiration. Enfin des les ressources, cheatsheet Bootstrap 4, plugin de productivité Sketch, une checklist pour l’UX des sites et apps, un plugin Photoshop et Sketch pour les Google Fonts et un plugin de modal accessible. Ne manquez également pas le petit jeu en Three.js.

Pour plus de liens chaque matin vous pouvez me suivre sur twitter. Bonne lecture :)

tl;dnr, s’il devait n’en rester qu’un ?

#Design

Selling Design Systems, faire comprendre à ses clients l’importance que peut avoir un système de design cohérent et unifié pour leur image

Les articles de la semaine

#Workflow

Designing a Better Notes App : j’aime beaucoup le fait de montrer les différents niveaux de fidélité au produit final utilisés dans le processus de design

#Accessibilité

Accessibility and Performance des slides d’une conférence sur comment la performance va avoir des impactes sur l’accessibilité

#Burger

Designing an Alternative to the Hamburger, une solution intéressante d’alternative au burger menu.

#Card #UX

Using Card-Based Design To Enhance UX, utiliser du design en cartes (Pinterest like) pour améliorer l’expérience utilisateur

#Usability #Form

5 Registration Form Usability Guidelines 5 guidelines pour l’utilisabilité des formulaires d’inscription, attention au point 4 pensez à l’accessibilité des couleurs quand même

#Cache

J’aime beaucoup comment @jaffathecake utilise des conversations pour expliquer des bonnes pratiques de cache et max-age

#UI

6 Pillars of UI Design, 6 principes de base pour des interfaces utilisables + The 5 Most Common UI Design, 5 erreurs à éviter en design d’interface

De l’inspiration et de jolies idées

#Illustration

handsoffmydinosaur.com des illustrations drôles et adorables, je suis fan de la série sur les monstres

#Colors

Colorlisa.com une liste de palette de couleurs basées sur les oeuvres d’arts d’artistes célèbres

#CSS

cssbuttons.tumblr.com une collection de boutons CSS pour vous inspirer

#App

Mobile app design details with small videos, des détails d’application en petites vidéos

L’actualité webdesign

#Safari

Safari WebKit’s new policy is to implement experimental features unprefixed, behind a runtime flag, c’est à dire que les préfixes dans Safari vont disparaître au profit de propriétés disponibles derrière un flag.

Les tutoriels de la semaine

#Illustration

Une jolie introduction à l’utilisation de textures dans les illustrations Salt & Pepper — The Art of Illustrating Texture

#Responsive #iframes

Making IFrames Responsive

Des ressources utiles, outils et plugins pour vous faciliter la vie

#Outils

Une liste d’outils pour faire des sites web

ebsite-builder

#Bootstrap

Ça pourrait servir à certains d’entre vous : Bootstrap 4 Cheat Sheet

#Sketch

Sketchrunner.com un petit outil pour améliorer votre workflow si vous utilisez Sketch (on dirait un peu Alfred sur mac)

#UX

User experience checklist for creating websites and applications, une checklist UX pour vous aider à concevoir des sites webs et des applications

#CSS

Diffee un outil en ligne pour comparer visuellement deux sites

#Font #Tool

fontea un plugin Photoshop (et Sketch) pour choisir et utiliser des Google Fonts directement dans votre outil de design

#Modal

Modaal un petit script de modal accessible

Pour le fun: jeux et démos sympas et impressionnantes

#Three.js

Mignon : Animating a Basic 3D Scene with Three.js

Besoin d'un design de site, d'interface ou d'application mobile ? De conseils en ergonomie ou en expérience utilisateur ? Envie de travailler ensemble ? N'hésitez pas à consulter mes réalisations et à me contacter directement.

Les commentaires sont fermés.