La semaine en pixels – 22 janvier 2016

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

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 : un bac à sable pour jouer avec Flexbox, un condensé de lectures sur les animations d’interfaces, des articles sur le menu mobile, des conseils pour les call to action, quelques tendances typographie et design d’interface, l’audience cible d’un site et la préparation d’un pitch de projet, de très jolies illustrations du côté de l’inspiration, des tutoriels de mise en page CSS et d’animation de stroke en SVG, quelques recettes CSS incontournables, un plugin Photoshop pour gérer les templates et un site pour trouver un emploi en remote.

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

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

#Flexbox

Flexbox playground un bac à sable pour tester les propriétés flexbox

Les articles de la semaine

#Review

Yearinreview.co rassemble une liste des pages “2015, year in review” (retour sur l’année 2015)

#Mobile #Menu

A new mobile navigation menu, converting the desktop dropdown nav, un excellent retour sur la conversion d’un menu desktop vers le mobile.

#Design

How to Create Visually Effective Calls-To-Action, quelques conseils de design pour faire ressortir les call to action sur les pages

#Animations

Web Animation Trends: 31 Top Websites Deconstructed, animations CSS, JS, framework, un petit coup d’oeil sous le capot.

#UX

UX Design And Content Strategy: The Project Guide, un ebook gratuit

#Mobile

Perfection navigation for the mobile web : recherche, bouton de retour à l’accueil, les différentes options de navigation de l’utilisateur sur mobile

#Animation

What does Disney know about interface animation anyway? Est-ce que les principes d’animations de Disney ont vraiment quelque chose à voir avec le design d’interface ?

#UX

The Illusion of Completeness : il arrive que les utilisateurs pensent qu’il n’y a plus de contenu sur la page même si ce n’est pas le cas, horizontalement et verticalement. Quelques conseils pour encourager les utilisateurs à scroller et découvrir ces contenus parfois masqués

#Animations

Dissecting Motion Design with the 7 W’s: structurer ses animations grâce à la règle des 7 W (why, what, who, etc.)

#Audience

My target audience is everybody.” ma cible c’est toute la population, en êtes vous sure ?

#Design

How to Pitch a Project, des conseils pratiques, mais bon, pas forcément toujours faciles à mettre en place pour un premier rendez-vous client

 

#Tendance

The Floating Action Button – An Upcoming Popular Design Trend, la tendance inspirée de materiale design du bouton d’action flottant en bas de l’écran

#Forms

How to Get Form Validation Right un petit rappel sur la validation de formulaires

De l’inspiration et de jolies idées

#SVG

Bonne année, une jolie carte en SVG animé

#Illustrations

Un peu tard pour Noël mais les illustrations sont superbes

#Animation

StarWars BB-8 CSS Illustration, une illustration tout mignone

#Illustration

Bysusanlin.com une illustration de page d’accueil totalement adorable

#Typography

3 Typography Trends for 2016, 3 tendances typographiques pour 2016 avec de jolis exemples

Les tutoriels de la semaine

#CSS

Un retour à de l’inspiration print, grâce aux avancées en terme de support des navigateurs des nouvelles fonctionnalités CSS3 (entre autre) : Influencing Web Layouts with Print Layouts

#Font

Critical web fonts, wow ça devient franchement super compliqué d’afficher une police avec font-face aujourd’hui si vous prenez en compte la performance et l’affichage

#SVG

SVG Decoration: Strokes, une petit tutoriel sur l’utilisation des bordures stroke en SVG

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

#CSS

22 Essential CSS Recipes : blend modes, object fit, current color et plus, 22 petites astuces CSS

#Photoshop

Templay un plugin pour gérer les templates dans Photoshop

#Remote

Remotely Awesome Jobs curates the best remote tech jobs across the web., un répertoire d’offres d’emploi à distance

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

#CSS

Morning procrastination, CSS game