Des pixels et du code #52
Les liens à ne pas manquer cette semaine, avec toujours d’excellentes ressources pour du design responsive, pour utiliser des SVGs dans vos projets, des templates produit, des kits de papiers, ainsi que quelques petites nouveautés côté code avec Foundation qui passe à Zepto et mobile first pour sa version 4 et quelques plugins jQuery et outils toujours utiles. Du côté des articles cette semaine un concept de workflow qui change de l’ordinaire sans validation de maquette client avant, des media queries CSS level 4 et ce qu’il vaut mieux éviter d’inclure dans votre portfolio. Consciente que notre temps à tous est limité, j’introduis la section « et s’il devait en rester qu’un » dans laquelle je publierai à chaque fois l’article qui m’a le plus marqué cette semaine, à lire absolument ou qui a fait couler beaucoup d’encre. Bonne lecture :)
Les tutoriels de la semaine
#Flatdesign
makemydesignflat.com le tutoriel le plus simple du monde pour transformer votre site en site “flat design” ^^
#Responsive #langue
Responding to Language les mots étant plus long en allemand qu’en anglais, une proposition d’utiliser l’attribut :lang() pour changer la taille des blocs en fonction de la langue du site.
#SVG
Using SVG un article très détaillé et complet sur l’utilisation du SVG aujourd’hui, en “image” ou en CSS et les possibilités offertes par ce format.
#Photoshop
Making the Most of Photoshop Layers un petit article pleins de bons conseils et astuces pour utiliser les calques de Photoshop de manière productive
Des ressources utiles
#Product design
Blank Print Templates des templates de cartes de visite, poster, calendrier “vides” pour créer des designs de produit
#Papier
Paperkit.net un petit site pour customiser du papier, choisir la taille des grilles et ensuite le télécharger pour l’imprimer
#CSS #Flat design
Flat UI un kit graphique d’UI en “flat design” (design plat) qui est codé en HTLM/CSS. Depuis quelques jours seul le PSD est disponible en raison de problème supposés de copyright sur certains éléments. Edit : le HTML est à nouveau disponible ici
#Framework
Foundation 4 la nouvelle version du framework de Zurb qui est passée de jQuery à Zepto et mobile fisrt
#A11y
WP Accessibility Plugin un plugin pour traquer les erreurs simples d’accessibilité des thèmes WordPress
Les outils et plugins pour vous faciliter la vie
#Navigation Responsive
Sidr, un plugin jQuery pour créer des navigations off canvas ainsi que des modales responsive (ils l’appellent “responsive menu”)
#Hack Navigateur
Browserhacks.com rassemble tous les hacks navigateur (avec une fonction de recherche pour aller plus vite).
#UI
Uifaces.com un petit outil en ligne qui permet de générer des « fausses » images d’avatar et en choisir les tailles pour de design d’interface
#E-mailing
The Automatic CSS Inliner Tool un outil proposé par MailChimp (sans avoir besoin d’avoir un compte) qui permet de convertir le CSS du header en CSS inline pour la création d’email en HTML
#Couleurs
The Colour Bookmark un bookmarklet pour extraire la palette de couleur du site que vous êtes entrain de visiter
#Dessin
Awwapp.com un petit outil de dessin en ligne, collaboratif qui fonctionne également sur mobile et tablette.
Les articles à lire
#Workflow
Conception responsive : obtenir une validation sans maquettes un article où Matt Griffin explique leur processus de design sans validation des maquettes “Photoshop” du client, à base de wireframe directement dans le navigateur et de “style guide”
#CSS3
CSS3 Layout une présentation sur les modules de layout CSS3, avec pas mal de propriétés qui vont nous faciliter la vie dans le future pour gérer les flottants, les colonnes, et la mise en page des sites
#CSS level 4
The Good & Bad of Level 4 Media Queries un petit tour d’horizon des nouvelles media queries en CSS level 4 : detection de la disponibilité du JS via script, détection de la luminosité via luminosity, de la précision du pointer via pointer et de la possibilité d’utiliser un état de survol avec hover.
#Portfolio
Things you should never include in your portfolio ce qu’il vaudrait mieux éviter de mettre dans votre portfolio pour différentes raisons : âge, adresse, le fait que vous êtes étudiant, votre maîtrise des outils/langage sous forme de graphiques (en barre, avec des étoiles, etc)
#UX #Navigation
Breaking down Amazon’s mega dropdown une analyse de l’UX très intelligente du menu déroulant d’amazon très rapide au survol avec un delais pour que l’utilisateur puisse atteindre le second niveau même en éloignant un peu la souris et une reproduction de l’effet en jQuery (les gifs animés de l’article expliquent mieux que mes mots).
Inspiration
#Plagiat
Le plagiat (Tu n’en veux pas)? En voilà ! , l’inspiration mais un peu trop : une sélection de quelques jolis plagiats dans l’histoire de la publicité / communication, et le tumblr http://www.joelapompe.net qui va avec.
#Packaging
30 Amazing Examples of Package Design des exemples de packaging qui envoient du lourd
#Typographie
Coullon.com le travaille de Claire Coullon, typographe française résident à Pragues, impressionnant et de très jolies formes
Les démos sympas et impressionnantes
#CSS
:focus tooltip une démonstration d’un tooltip qui apparait uniquement au moment où l’utilisateur met le focus sur l’input
Et s’il devait n’en rester qu’un ?
#Webdesign
Design Over Style “il nous faut plus de designer web, et moins de “stylistes du web” (traduction plus qu’aproximative de “ we need more web designers and less web stylists.”) qui met l’accent sur le fait qu’un site web est plus qu’un joli “style” : accessibilité, contenu, hiérarchie, organisation d’information, etc.
Et pour finir la vidéo fun de la semaine, la vie sexuelle des jeux vidéos.. Et pour finir, le lien inutile mais fun donc indispensable, un site qui crée une palette de couleurs à partir de votre IP.
