Google Fonts : héberger vos polices pour la vitesse et le RGPD
Charger Google Fonts depuis leurs serveurs ralentit votre site et pose un problème RGPD. Comment passer à des polices auto-hébergées, légères et bien affichées.
Catégorie
Design & UI/UX
Tous les articles sur la thématique Design & UI/UX : conseils pratiques, tutoriels et retours d'expérience.
44 articles
View transitions : des transitions de page fluides en CSS
L'API View Transitions anime le passage d'une page à l'autre en quelques lignes de CSS, sans framework JavaScript. Syntaxe, exemples et compatibilité.
Container queries : des composants vraiment responsives
Les container queries adaptent un composant à la place dont il dispose, et non plus à la taille de l'écran. Syntaxe, unités cqi et cas d'usage concrets en CSS.
Footer de site : organiser le pied de page efficacement
Le footer est consulté par les visiteurs qui cherchent une information précise. Contenus utiles, organisation, mobile : bien concevoir son pied de page.
Page 404 : transformer une erreur en expérience utile
Une page 404 bien conçue retient le visiteur au lieu de le perdre. Contenu, recherche, liens utiles, ton et suivi des erreurs : les bonnes pratiques à adopter.
Hiérarchie visuelle : guider le regard sur vos pages
La hiérarchie visuelle guide le regard vers l'essentiel. Taille, contraste, couleur, espacement : les principes pour des pages claires qui convertissent.
Espace blanc : l'atout design le plus sous-estimé du web
L'espace blanc n'est pas de l'espace perdu : il améliore la lisibilité, la compréhension et l'impression de qualité. Comment bien l'utiliser sur votre site.
Animations au scroll : dynamiser sans nuire à la performance
Les animations au scroll donnent du rythme à une page, mais peuvent la ralentir. Techniques modernes, bonnes pratiques, accessibilité et erreurs à éviter.
Image hero : réussir le premier écran de votre site
L'image hero donne la première impression de votre site. Choix du visuel, message, bouton d'action, poids et performance : comment réussir ce premier écran.
Favicon : créer une icône de site nette sur tous les appareils
Le favicon apparaît dans les onglets, les favoris et les résultats Google. Formats, tailles, icône pour mobile et mode sombre : comment bien le réaliser.
Bento grid : la mise en page modulaire qui s'impose
Inspirée des boîtes à repas japonaises, la bento grid organise le contenu en blocs de tailles variées. Principes, usages et mise en œuvre en CSS.
Cartes UI : concevoir des cards lisibles et cliquables
Les cartes UI organisent articles, produits ou services en blocs autonomes. Structure, hiérarchie, zone cliquable, accessibilité : les règles clés.
Skeleton screens : mieux gérer les états de chargement
Les skeleton screens rendent l'attente plus courte en affichant la structure de la page avant le contenu. Quand les utiliser et comment les concevoir.
Logo et site web : décliner son identité sur tous les écrans
Un logo pensé pour l'impression rend mal à l'écran. Formats SVG, versions horizontale et compacte, favicon, mode sombre : décliner son logo pour le web.
Wireframing et prototypage UX : méthode complète pour les designers
Maîtrisez le wireframing et le prototypage UX : outils, méthodes, low vs high fidelity, tests utilisateurs et passage du wireframe au design final.
UX Writing : rédiger des textes d'interface qui guident les
Maîtrisez l'UX writing pour améliorer vos interfaces. Messages d'erreur, microcopy, onboarding, boutons et nomenclature : les principes pour une écriture UX
Typographie web : guide complet pour choisir et utiliser les polices
Maîtrisez la typographie web : choix des polices, hiérarchie visuelle, lisibilité, Google Fonts, font-loading et tendances typographiques pour un design
Tendances design web 2025 : les styles qui dominent les interfaces
Decouvrez les tendances design web 2025 : glassmorphism, typographie expressive, dark mode, 3D, AI design et les couleurs qui dominent les interfaces modernes.
Prototypage Figma : créer des prototypes interactifs professionnels
Maîtrisez le prototypage Figma : interactions, transitions, overlays, variables et smart animate pour créer des prototypes haute fidélité testables par vos
Palette de couleurs en design web : créer une identité visuelle forte
Créez une palette de couleurs efficace pour votre design web. Théorie des couleurs, outils, accessibilité WCAG, dark mode et tendances chromatiques pour
Onboarding UX : guider les nouveaux utilisateurs vers la valeur
Concevez un onboarding UX efficace pour réduire le churn et augmenter l'activation. Patterns, progressive disclosure, tutoriels et stratégies pour un
Navigation UX : concevoir des menus intuitifs et accessibles
Concevez une navigation UX parfaite : patterns de menu, mega-menu, navigation mobile, fil d ariane et accessibilite pour guider vos utilisateurs sans effort.
Micro-interactions UX : améliorer l'expérience avec les petits détails
Découvrez comment les micro-interactions UX transforment l'expérience utilisateur. Animations de feedback, états hover, transitions et exemples concrets pour
Landing page design : créer une page qui convertit efficacement
Concevez une landing page qui convertit grâce au bon design. Structure, hiérarchie visuelle, CTA, preuves sociales et optimisation pour maximiser votre taux de
Icônes SVG web : optimiser et intégrer des icônes dans vos interfaces
Maîtrisez les icônes SVG pour vos interfaces web. Optimisation SVGO, sprite SVG, icon fonts vs SVG, accessibilité et meilleures bibliothèques d'icônes
Grid system design web : maîtriser les systèmes de grille
Maîtrisez les systèmes de grille en design web. Grilles à 12 colonnes, CSS Grid, Bootstrap grid, grilles fluides et techniques avancées pour des mises en page
Design de formulaire UX : les meilleures pratiques pour 2025
Optimisez vos formulaires avec les meilleures pratiques UX : structure, validation, messages d'erreur, accessibilité et design mobile pour maximiser les
Associer les polices : créer des paires typographiques parfaites
Créez des paires typographiques harmonieuses pour vos designs web. Principes d association, outils, combinaisons populaires et erreurs à éviter en typographie
Design tokens : créer un langage de design cohérent et scalable
Implémentez un système de design tokens pour synchroniser vos décisions de design entre toutes les plateformes. Couleurs, typographie, espacements et outils de
Design responsive : maîtriser les breakpoints et la mise en page
Créez des designs responsives parfaits avec les bons breakpoints CSS. Mobile-first, grilles fluides, images responsive et techniques avancées pour tous les
Illustration web : integrer des visuels personnalises dans votre
Utilisez l illustration web pour enrichir votre design : styles, ressources gratuites, SVG anime, IA generative et conseils pour une identite visuelle unique.
Design email HTML : créer des emails visuellement impactants
Créez des emails HTML professionnels et responsive. Contraintes techniques, tables vs flexbox, compatibilité Outlook, dark mode et outils pour un design email
Design de dashboard et datavisualisation : guide pour les interfaces
Concevez des dashboards et datavisualisations efficaces : choix des graphiques, hiérarchie de l'information, KPIs et principes de design pour des interfaces
Psychologie des couleurs en design web : influencer sans manipuler
Utilisez la psychologie des couleurs dans votre design web. Significations culturelles, émotions, couleurs par secteur et impact sur la conversion de vos
Boutons CTA design : optimiser pour la conversion et l'UX
Concevez des boutons CTA qui convertissent : couleur, taille, formulation, placement et états visuels. Guide complet pour des call-to-action efficaces et
Accessibilité design : concevoir pour tous, y compris les daltoniens
Créez des designs accessibles à tous : WCAG, daltonisme, contraste, focus visible et techniques inclusives pour que chaque utilisateur profite pleinement de
Design system : créer une bibliothèque de composants
Construisez un design system robuste : design tokens, composants réutilisables, documentation Storybook et gouvernance pour des interfaces cohérentes.
Figma : workflow efficace entre designer et développeur
Optimisez la collaboration designer-développeur avec Figma : composants, variables, Dev Mode et export d'assets pour des intégrations sans friction.
UX Design : créer des interfaces web centrées utilisateur
Maîtrisez l'ux design pour le web : research utilisateur, wireframing, prototypage, tests et principes de Gestalt. Guide pratique pour développeurs.
Animation CSS : créer des effets visuels percutants
Maîtrisez l'animation css avec transitions, keyframes, transform, will-change et animation libraries. Des effets percutants avec des performances optimales.
Dark mode : implémenter le mode sombre en CSS et JS
Implémentez le dark mode sur votre site : CSS custom properties, prefers-color-scheme, localStorage et toggle JS. Guide complet avec exemples.
CSS Grid Layout : guide complet avec exemples
Maîtrisez css grid avec ce guide complet : grid-template, fr, auto-fit, subgrid et layouts complexes. Des exemples pratiques pour chaque cas d'usage.
Mobile-first design : concevoir pour les petits écrans
Concevoir mobile-first est incontournable : 60% du trafic vient du mobile. Découvrez la méthode mobile-first, les outils et les pièges à éviter.
Couleurs et design web : la psychologie appliquée
Comment choisir les bonnes couleurs pour votre site ? Le design web utilise la psychologie des couleurs pour influencer la conversion et la perception.