Les ressources du Web #6

Sixième édition des Ressources du Web avec au programme pas mal de ressources en design, élements d’UI ou ergonomie ; de quoi améliorer les animations et interactions de vos sites grâce à JS ou revoir votre workflow grâce à quelques astuces et outils plus ou moins adaptés à vos méthodes de travail. « Allons-y ! »

Inspiration

• Moto360 – une montre Android élégante
• UsePanda – inspiration et news quotidiennes pour les webdesigners
• Animations de formulaires – inspiration ergonomique, les animations au service des formulaires.
• Wikipedia redesign – suggestion ergonomique pour optimiser la navigation dans wikipedia
• Flat Preloaders – des preloader/loader flat pour inspiration (ou à télécharger)
• TabPatterns – inspiration UI/UX pour design tablette

JavaScript

• ScrollDepth – plugin jQuery qui permet de relever des statistiques Google Analytics de la profondeur de navigation dans une page.
• Grid – une bibliothèque pour glisser/déposer des éléments, gérer leur taille, et responsive.
• Trianglify – bibliothèque JS pour créer des images SVG ou background composés de triangles
• ShineJS – une bibliothèque pour générer de belles ombres portées
• VelocityJS – des animations jQuery plus performantes que jamais.

Ressources code

• flexBox Grid – un grille avec Flexbox
• Embed Responsively – des services tierces (API, frame) responsive

Workflow et tutoriels

• Web mobile workflow – repenser le développement mobile
• Book of modern frontend Tooling – un bouquin collaboratif sur les outils modernes du développeur front-end
• Utiliser Steps() – utiliser steps() pour créer des étapes dans vos animations CSS (@keyframes)
• CSS vocabulary – le vocabulaire CSS résumé de manière pratique

Outils

• Iconion – faites vos icônes vous-même grâce à cet outil
• Dribbbox – créez votre portfolio Dribbble auto-hébergez (vous pouvez prévisualiser le rendu avant téléchargement)
• SchnappsForMac – créez vos clips vidéo « time-laps » avec cette application Mac
• Velositey – construisez vos wireframe rapidement (compatible CS6+)
• Reponsive Mail Patterns – des gabarits d’e-mail responsive
• RedPen.io – annotez et échangez avec votre client ou votre équipe directement sur les visuels de votre projet (payant)
• Invision App – pareil que RedPen mais en plus complet encore
• Project Naptha – de l’OCR sur les images du web, mais en mieux (copiez/collez, traduisez, etc.)
• Avocode – prévisualiser et inspecter un PSD sans Photoshop
• Project Parfait – extrayez tout ce dont vous avez besoin de vos PSDs sans Photoshop.