SVG, la syntaxe Path
L'élément path de SVG est l'outil de dessin le plus perfectionné qui soit, mais sa syntaxe ne semble pas aisée. Chris Coyier décortique brillamment ce langage, pas si compliqué finalement.
Comment travailler avec des icônes en SVG
Un bel article de notre frenchie Florens Verschelde qui a fait le buzz et a été repris par l'excellent CSS-Tricks. Explications claires du process et réflexions pour aller plus loin.
Backgrounds SVG : hexagones et écailles
Dudley Storey poursuit sa passionnante série sur les backgrounds SVG, ici avec des motifs en tuiles hexagonales et en écailles. On y apprend quelques petites astuces relatives à l'encodage base64.
Techniques Flexbox, 4: conception d'une page produits
Levin Mejia, adepte de l’apprentissage par la pratique, nous propose de créer un layout flexible et responsif avec Flexbox. On s’amuse à apprendre ses concepts et propriétés fondamentales.
Les bases de SVG : Propriétés de style
Suite des bases de SVG par Dudley Storey : les styles de SVG sont souvent similaires à ceux de CSS, parfois identiques mais souvent juste assez différents pour créer la confusion.
Motifs SVG maoris
En hommage à nos amis néo-zélandais, voici un article de la série sur les backgrounds SVG consacré aux motifs maoris, à la fougère argentée, aux fractales et à l’ethnomathématique.
Les bases de SVG : Groupes
Suite des bases de SVG par Dudley Storey : les groupes SVG ressemblent aux éléments div des pages web mais il existe des différences qu’il est important de bien comprendre.
Diagrammes circulaires flexibles avec CSS et SVG
Lea Verou vient de publier un livre extraordinaire proposant des techniques CSS et SVG originales. Cet article est technique, mais l'approche, la méthode, la créativité sont une sacrée source d'inspiration!
Créer de superbes diagrammes avec SVG et Blend Modes
Une nouvelle association de SVG et CSS Blend Modes pour de nouveaux effets créatifs. De quoi vous faire regretter le bureau, les graphiques et les diagrammes en camembert. Merci Dudley!
Backgrounds Pop-Art avec SVG et Blend Modes
Dudley Storey nous a appris à dessiner avec SVG. Ces lignes peuvent devenir complexes, on peut les mélanger à des images via Blend Modes pour créer des backgrounds “pop art”
Motifs SVG japonais
Pour le plaisir, Dudley Storey a réalisé deux nouveaux backgrounds SVG dérivés des motifs géométriques traditionnels japonais. Un approfondissement de la série sur SVG, mine de rien, ça devient sérieux!
Backgrounds SVG : les rayures
Dans la continuité des articles sur les bases de SVG, Dudley Storey commence une série sur les motifs et les backgrounds. SVG permet de réaliser des choses impossibles en CSS.
Diagonales et motifs SVG en background
Lorsque nous comprenons les bases des motifs SVG, c'est un monde de créativité qui s'ouvre. Après les bases de SVG, Dudley Storey nous montre comment créer des backgrounds en SVG.
Guide de Flexbox : space-between, l'oublié
Tout comprendre sur space-between, le héros oublié de Flexbox. Noah Blon propose un cas pratique d'utilisation de cette valeur de justify-content dans Flexbox, super pratique pour vos mises en page.
Guide de Flexbox : n'oubliez pas flex-shrink
Un article sympa de Noah Blon sur l'un des aspects les plus sacrément pénibles de flexbox. Un bon complément de l'excellent article sur les mises en page sur 12 colonnes.
Layout sur 12 colonnes avec Flexbox
La suite de la série de Landon Schropp sur Flexbox. Après avoir découvert les bases avec un simple dé, nous nous lançons dans les mises en page sur 12 colonnes.
Les bases de SVG : Lignes simples et multiples
Nous avons vu les formes de base de SVG, Dudley Storey présente maintenant les lignes, simples et multiples et.. ce n’est pas simple. Mais avec Dudley, tout devient clair.
Autocomplétion native en HTML5
Dans ce bref article, nous allons voir comment mettre en oeuvre une zone de saisie avec auto-complétion, sans recourir à jQuery ni à JavaScript, en pur HTML5. Par Steve Pear.
Créer un logo avec Sketch 3
Dans ce tutoriel hyper-précis, Jeremy Osborn présente quelques-unes des fonctionnalités essentielles de Sketch et nous apprend à créer un logo à partir d'un croquis importé puis traduit en formes vectorielles.
Background révélé par des images coulissantes en CSS
Encore un tutoriel sympa de Dudley Storey : créez des images coulissantes révélant un background, en pur CSS, grâce à clip-path et transform / translate. Un effet simple, construit astucieusement comme toujours!
Les bases de SVG : Polygones
Dudley Storey termine la série d'articles sur les formes de bases SVG avec les polygones : triangles, étoiles et autres formes plus complexes — dans une présentation claire et simple comme toujours.
L'ajustement optique
Luke Jones le dit : les designers ne doivent pas compter sur les seuls logiciels pour faire le travail d'ajustement, mais également sur leurs yeux et leur instinct. Preuves à l'appui.
Sketch 3 : l'outil Scissors
L'application de dessin vectoriel Sketch brille par sa simplicité. Peter Nowell présente l'outil "ciseaux", moins connu que d'autres, et fait un point très intéressant sur les formes et les lignes.
Les bases de SVG : Rectangles et Carrés
Après les cercles, voici les rectangles ! Dudley Storey reconstitue un célèbre tableau de Mondrian et nous montre chemin faisant tout ce qu'il faut savoir pour créer des rectangles en SVG.
Les bases de SVG : Cercles et Ellipses
Même lorsqu’on utilise un logiciel de création graphique pour créer des SVG, la connaissance de la syntaxe permet de créer plus rapidement et efficacement des formes simples. Dudley Storey.
Flexbox, un coup de dés
Ce brillant article est le premier d’une série conçue par Landon Schropp pour expliquer Flexbox. Une méthode originale pour comprendre les fondamentaux de Flexbox et les mettre en pratique.
Scroll avec background révélé en pur CSS
Le défilement faisant apparaître des backgrounds différents est une technique populaire aujourd'hui, souvent réalisée via de fortes doses de JavaScript. Dudley Storey en propose une version moderne en pur CSS.
Brood X : le principe des cigales en CSS
Un texte étrange et poétique dans lequel Dudley Storey l'enchanteur nous entraîne dans l'univers fantastique de Magicicada Septemdecim. Ou comment les nombres premiers peuvent stimuler notre imaginaire et notre créativité.
Comprendre les dégradés linéaires CSS
Patrick Brosset a écrit sur Medium un article super clair pour vraiment comprendre les dégradés linéaires CSS et s'épargner des migraines. Évidemment, La Cascade se devait de traduire notre Frenchie.
Comprendre Clip Path
La propriété Clip-Path de CSS est un super outil pour réaliser des effets de style. Dans cet article clair, Drew Minns présente son utilisation en détail, ainsi qu'un cas pratique.
3 raisons d'utiliser HSL pour vos couleurs
Maintenant que nous connaissons mieux HSL, Dudley Storey passe en revue quelques situations où HSL peut vraiment vous changer la vie. Designer devient plus simple, plus facile et plus rapide.
Utiliser HSL pour vos couleurs
La méthode HSL de création de couleurs est bien connue des designers mais négligée par les codeurs. Dans cet article en deux parties, Dudley Storey nous montre tout son intérêt.
11 Astuces de prototypage avec Sketch
Si vous êtes designer, vous connaissez forcément Sketch, une application Mac idéale pour vos travaux de maquettage. Andy Orsow propose quelques astuces pour vous rendre la vie (encore) plus facile.
Appropriation culturelle : utiliser les collections des musées
Les musées exposent de plus en plus leurs collections en ligne et en permettent souvent l'utilisation gratuite. Dudley Storey nous invite à une promenade à travers quelques belles collections internationales.
Typographie du site Advertising Age
Jeremiah Shoaf, responsable de l'indispensable site Typewolf se lance dans une nouvelle série d'articles où il décortique un site du point de vue de sa typographie. Clair, pédagogique et passionnant.
Créer un player audio en HTML5, 2 : le prototype
Bon allez, on se lance dans la création de notre player audio personnalisé ! Dudley Storey utilise une approche par petits pas — ou plutôt par petits tests — pour construire un prototype.
Créer un player audio en HTML5, 1 : fonctionnalités et design
Aujourd'hui, nous pouvons créer nos propres player media avec HTML5 et JavaScript, et personnaliser leur apparence avec CSS. Dudley Storey nous entraîne par étapes dans la construction d'un super player.
Guide des animations SVG (SMIL)
Armez-vous de courage, voi ch'entrate... Voici le fameux guide de Sara Soueidan, pour tout savoir sur les animations SVG avec SMIL. Les animations SMIL permettent des choses impossibles avec CSS.
CSS animation, une introduction
Une présentation claire et vivante des animations CSS par Rachel Cope, avec exemples de code et présentation live sur CodePen. Un bon article pour apprendre ou pour réviser ses classiques.
Dompter son critique intérieur
Vous connaissez le syndrome de l'imposteur n'est-ce pas ? Ce n'est qu'une des nombreuses manifestations de votre critique intérieur. Denise Jacobs nous présente ce vilain petit monstre, parfois utile malgré tout.
Découvrir Susy
Susy vous permet de créer vos layouts à partir de grilles. Fonctionnant avec Sass, Susy est incroyablement flexible et devrait répondre à tous vos besoins. Introduction claire par Zell Liew
Sketch 3 : Maîtriser les courbes de Bézier
L'utilisation des courbes de Bézier est souvent compliquée. Peter Nowell nous introduit au fonctionnement et à la pratique des courbes de Bézier avec Sketch, dans ce tutoriel clair et détaillé.
Créer une interface de Login avec Sketch
Sketch est une excellente application pour le design d'interface. Armando Sotoca nous conduit pas à pas dans la réalisation du design d'une interface de connexion, une excellente introduction à Sketch3.
Théorie des couleurs, 3 : Créer votre palette
Troisième et dernier article de notre série sur la théorie des couleurs. Nous connaissons la signification et la terminologie des couleurs, passons maintenant à la création des schémas de couleurs.
Théorie des couleurs, 2 : Concepts et terminologie
Suite de notre mini-feuilleton: pour utiliser efficacement les couleurs, il est utile de connaître quelques concepts et la terminologie des couleurs. L'article de Cameron Chapman est illustré de nombreux exemples.
Sketch et les vecteurs
Sketch3 est un outil merveilleux, il brille tout particulièrement dans le domaine des formes vectorielles. Dans ce tutoriel bien fait, Peter Nowell établit les bases, puis nous apprend quelques astuces.
Théorie des couleurs, 1 : Signification de la couleur
C'est la saison, voici le feuilleton de l'été. Une série de trois articles sur la théorie des couleurs: signification des couleurs, concepts, application, le tout bien illustré. Par Cameron Chapman.
Créer une icône flat avec Sketch
Le succès du précédent tutoriel Sketch 3 imposait une suite. Dans ce nouveau tutoriel très clair, Abhijeet Wankhade réalise une icône simple, permettant de montrer quelques fonctionnalités essentielles de Sketch.
Continuum
Jeremy Keith, dans la continuité du célèbre Tao du Webdesign, défend l'idée du web comme un continuum - un espace ouvert à l'expérimentation, soucieux d'accessibilité au contenu. Engagé, constructif, définitif.
Animer un dégradé SVG
Dans son article précédent, Joni Trythall décrivait les dégradés SVG. Passons maintenant à l'étape suivante, leur animation ! Une bonne introduction aux notions les plus basiques, à partir d'exemples simples.
Sketch, tutoriel 01
Sketch 3, pour Mac, est une alternative sérieuse à Photoshop et Illustrator. Sébastien Gabriel, Frenchie designer chez Google propose dans ce tutoriel hyper-détaillé de passer en revue ses caractérisques principales.
Créer un guide de style
Les guides de style sont utilisés par les grandes entreprises pour assurer la cohérence de leur site et gagner en efficacité, mais tout designer exigeant peut s'inspirer de cette démarche.
La console, une introduction
Ah, la console ! Terrain de jeu pour certains, écran terrifiant pour d'autres, il devient chaque jour plus indispensable d'en connaître au moins les rudiments. Par John Long, bienfaiteur des designers.
Les dégradés CSS
Chris Coyier a mis à jour ses articles d'introduction aux dégradés CSS, linéaires, radiaux, répétés, une bonne occasion de réviser ses classiques en compagnie d'un guide toujours clair et concis.
Stratégie responsive
On sait assez bien ce qu'est le design responsif, mais comment le mettre en place, surtout lorsque votre site est déjà ancien ? Brad Frost fait le tour des principales stratégies.
Flexbox, guide complet
Le module Flexbox Layout fournit une façon plus efficace de disposer, aligner et distribuer l'espace entre les éléments de votre page. 4 riches articles de Chris Coyier sont réunis ici.
De la Typographie Web
Être designer demande une compréhension profonde de la typographie et de la sélection et de l'association des polices de caractères. Le grand Jason Santa Maria l'explique avec intelligence et sensibilité.
Design atomique
La création de systèmes de design a été au coeur de nombreux débats passionnés. Brad Frost propose ici sa vision, basée sur une comparaison avec les atomes et les molécules.
Style vs Design
Dans cet article qui n'a pas pris une ride, le grand Jeffrey Zeldman nous rappelle les risques qu'il y a à confondre Style et Design, la surface et la substance.