Les Ressources du Web #37

Cette semaine je vous propose une sélection d’outils pour vous simplifier la vie en CSS, JS, ou encore pour créer des gifs de qualité, des tutoriels pour créer des effets animés funs et intéressants et des ressources pour Sketch, en attendant un prochain article plus orienté outils pour UX Designer :p (teasing)

Retrouvez une liste de ressources graphiques, de codes CSS, HTML ou JS et tutoriels dans cette sélection d’outils et liens utiles des derniers jours ou semaines. Si vous voulez être tenus informés plus fréquemment des ressources que je dégotte sur la toile, suivez-moi sur Twitter : @geoffrey_crofte

Design et ressources graphiques

Quelques outils et articles pour vous aider dans vos tâches de création au quotidien. Des conseils pour débutants ou simplement de bons rappels pour nous tous et quelques outils pour vos présentations.

• GradPad – un outil pour créer des dégradés simplement et obtenir le code CSS correspondant.
• Gifski – un petit soft qui vous permet de pondre des gifs animés de qualité (ou dont vous pouvez contrôler la qualité)
• 7 Practical Tips for Cheating at Design – des conseils graphiques pour améliorer vos interfaces.
• Onboarding Design and Nightclub – comparaison entre un nightclub et du onboarding pour améliorer un design.
• Fonts.lol – des color-fonts en Open-Type SVG.

Ressources Sketch

J’utilise de plus en plus Sketch et tente de ne pas multiplier les outils au quotidien pour arriver à ce que je souhaite obtenir en terme de design et productivité, faire du prototyping et de l’animation sur Sketch serait vraiment cool :p

• Why your app looks better in Sketch – une explication sur les différences entre Sketch et le rendu réel (notamment dans le développement iOS, mais vous en aurez sur les navigateurs aussi)
• Paddy Buttons – un plugin Sketch pour faciliter la gestion des boutons (espacement des boutons)
• Protowire – pour créer des prototypes directement dans Sketch.

CSS & Javascript

CSS évolue dans le bon sens et les API JS permettent de faire des choses super vite en se cassant beaucoup moins la tête. Pas mal de bons articles en ce moment tournent sur les CSS Variables.

• Gradient hover effect – un effet de dégradé au survol en utilisant les CSS variables.
• Everything you need to know about CSS variables – le titre parle de lui-même :p
• Want to learn CSS Variables? – un article présentant un cours sur CSS Variables, je vous le conseille.
• 30 Seconds of CSS – quelques CSS snippets que vous pouvez comprendre et utiliser en moins de 30 secondes.
• Cheapass Parallax – un effet parallax en quelques lignes de JS.

Trucs funs et inspiration

• Animated SVG Avatar — un effet animé de login form vraiment sympathique utilisant GSAP.
• Elastic Range Input with SVG and anime.js – un effet cool d’animation élastique d’un range input vertical.
• Streamlines – un générateur random de lignes complétant l’espace disponible vraiment fun.

Articles de fond

• Interruption is not collaboration – un podcast sur le problème des interruptions en espaces de travail.
• The increasing nature of frontend complexity – un article sur le sujet de la complexité du front-end aujourd’hui.

C’est tout pour cette fois. N’hésitez pas à me partager des ressources sur Twitter si jamais vous en croisez des cools ou si vous écrivez 🙂