Points clés
1. Commencez par une fonctionnalité, pas par la mise en page
La manière la plus simple de se retrouver frustré et bloqué lors de la création d’un nouveau design est de commencer par essayer de « concevoir l’application » dans son ensemble.
Concentrez-vous d’abord sur la fonctionnalité. Commencez par imaginer une fonctionnalité précise plutôt que la mise en page globale ou la « coquille » de l’application. Cette méthode vous permet de prendre des décisions éclairées concernant la navigation et la structure, en vous appuyant sur le contenu réel et les besoins des utilisateurs. Par exemple, pour un service de réservation de vols, débutez par les éléments essentiels : champs de départ et d’arrivée, sélecteurs de dates, bouton de recherche.
Évitez les décisions prématurées. En vous focalisant d’abord sur les fonctionnalités, vous évitez de faire des choix hasardeux sur la navigation, la mise en page ou d’autres éléments structurels. Cette approche favorise un design centré sur l’utilisateur, qui se développe naturellement à partir du cœur fonctionnel de votre application.
2. Concevez en niveaux de gris avant d’ajouter la couleur
Concevoir en niveaux de gris vous oblige à utiliser l’espacement, le contraste et la taille pour assurer toute la structure.
Mettez l’accent sur la structure et la hiérarchie. Travailler d’abord en niveaux de gris vous pousse à vous concentrer sur les aspects fondamentaux du design : la disposition, l’espacement, le contraste. Cela garantit que la structure de base est solide avant d’introduire la complexité de la couleur.
Affinez sans distraction. Le travail en niveaux de gris vous permet de prendre des décisions cruciales sur la hiérarchie et la mise en valeur sans être distrait par la couleur. Une fois cette base établie, vous pouvez alors intégrer la couleur de manière stratégique pour renforcer le design, sans compter sur elle pour créer la structure ou le sens.
- Commencez par des wireframes ou croquis simples
- Affinez la mise en page et l’espacement en niveaux de gris
- Établissez une hiérarchie visuelle claire grâce au contraste et à la taille
- Introduisez la couleur uniquement lorsque le design de base est solide
3. Établissez une hiérarchie visuelle par la taille, le poids et le contraste
La hiérarchie visuelle désigne l’importance relative des éléments dans une interface, et c’est l’outil le plus efficace pour donner un aspect « conçu » à votre travail.
Multipliez les techniques. Créez la hiérarchie en jouant sur la taille des polices, leur graisse et leur couleur. Ne vous fiez pas uniquement à la taille : combiner plusieurs techniques donne souvent de meilleurs résultats. Par exemple, utilisez une graisse plus marquée ou une couleur plus foncée pour mettre en avant les éléments importants tout en gardant des tailles raisonnables.
Adaptez au contexte. Ajustez la hiérarchie selon les besoins spécifiques de chaque élément :
- Titres : taille plus grande, graisse plus forte
- Texte courant : taille moyenne, graisse normale
- Texte secondaire : taille plus petite, couleur plus claire
- Boutons d’appel à l’action : couleur contrastée, texte en gras
Gardez en tête que la hiérarchie ne consiste pas seulement à faire ressortir certains éléments, mais aussi à atténuer ceux qui sont moins importants pour guider clairement l’œil de l’utilisateur.
4. Créez de la profondeur avec ombres et superpositions
Les ombres ne sont pas qu’un simple effet esthétique : utilisées avec soin, elles permettent de positionner les éléments sur un axe z virtuel et de créer une véritable sensation de profondeur.
Utilisez les ombres à bon escient. Les ombres traduisent l’élévation et l’importance des éléments dans votre interface. Mettez en place un système cohérent de tailles et d’intensités d’ombres pour représenter différents niveaux d’élévation dans tout votre design.
- Petites ombres : éléments légèrement surélevés (boutons, par exemple)
- Ombres moyennes : éléments flottants (menus déroulants)
- Grandes ombres : fenêtres modales ou éléments très en avant
Superposez les éléments pour plus de profondeur. Faites se chevaucher différents composants pour créer un effet de couches dans votre design. Cette technique ajoute de l’intérêt visuel et aide à organiser l’information hiérarchiquement. Par exemple :
- Décalez des cartes pour qu’elles dépassent des arrière-plans
- Laissez certains éléments dépasser de leur conteneur
- Utilisez des « bordures invisibles » pour séparer des images qui se chevauchent
5. Adoptez un système cohérent d’espacement et de dimensions
Une méthode simple consiste à partir d’une valeur de base raisonnable, puis à construire une échelle en utilisant des multiples ou des facteurs de cette valeur.
Établissez une échelle. Créez un système d’espacement et de tailles basé sur une échelle cohérente. Cela garantit une harmonie visuelle et accélère le processus de conception en limitant les choix. Par exemple, partez d’une valeur de base (16 px) et créez une échelle avec des multiples ou des facteurs de cette valeur.
Appliquez-le de manière constante. Utilisez cette échelle pour différents aspects de votre design :
- Marges et paddings
- Tailles des éléments (boutons, champs de saisie, etc.)
- Espacements de grille
- Typographie (hauteur de ligne, inter-paragraphes)
En respectant un système cohérent, vous obtenez un design plus harmonieux et réduisez la fatigue décisionnelle. Veillez à ce que votre échelle offre assez d’options pour être flexible, sans devenir trop complexe.
6. Choisissez judicieusement vos polices et établissez une échelle typographique
Pour le design d’interface, la valeur sûre reste une police sans-serif assez neutre — pensez à quelque chose comme Helvetica.
Sélectionnez des polices adaptées. Optez pour des polices lisibles à différentes tailles et adaptées à la finalité de votre design. Pour les interfaces, les polices sans-serif neutres sont souvent préférables. Prenez en compte :
- La lisibilité à petite taille
- La disponibilité des graisses et styles
- La complétude du jeu de caractères
- Les droits d’utilisation et licences
Créez une échelle typographique. Définissez un ensemble cohérent de tailles de police à utiliser dans tout votre design. Cela maintient l’harmonie visuelle et accélère la conception.
- Commencez par une taille de base (par exemple 16 px pour le corps de texte)
- Créez une échelle de 5 à 8 tailles pour différents usages (titres, légendes, etc.)
- Privilégiez une échelle non linéaire pour plus de souplesse (ex. : 12, 14, 16, 20, 24, 32, 48 px)
7. Développez une palette de couleurs complète
Une bonne palette de couleurs se décompose en trois catégories.
Construisez une palette polyvalente. Créez un système de couleurs complet comprenant :
- Des gris : 8 à 10 nuances pour le texte, les fonds et les éléments d’interface
- Des couleurs primaires : 5 à 10 nuances chacune pour les couleurs principales de la marque et les actions
- Des couleurs d’accentuation : couleurs supplémentaires pour les mises en avant, alertes et visualisations de données
Tenez compte de la psychologie des couleurs. Choisissez des couleurs en accord avec la personnalité de votre marque et les émotions que vous souhaitez susciter. Par exemple :
- Bleu : confiance, professionnalisme
- Vert : croissance, positivité
- Rouge : urgence, importance
N’oubliez pas de tester votre palette pour l’accessibilité et assurez un contraste suffisant entre le texte et les fonds.
8. Optimisez les images pour la lisibilité et l’impact
Pour résoudre ce problème, il faut réduire la dynamique de l’image afin de rendre le contraste entre le texte et le fond plus homogène.
Améliorez le contraste texte-image. Lorsque vous placez du texte sur des images, assurez la lisibilité en ajustant l’image ou en ajoutant des superpositions :
- Réduisez le contraste de l’image
- Ajoutez des calques semi-transparents
- Utilisez des filtres colorés pour harmoniser l’image avec votre design
- Appliquez des ombres ou lueurs subtiles au texte
Maîtrisez le contenu généré par les utilisateurs. Pour les images téléchargées par les utilisateurs :
- Imposer des ratios et tailles cohérents
- Utiliser des bordures ou ombres discrètes pour séparer les images du fond
- Prévoir des styles de secours pour les images manquantes ou problématiques
Ces techniques préservent l’intégrité du design tout en s’adaptant à des contenus variables.
9. Soignez les petits détails pour un rendu soigné
Il n’est pas toujours nécessaire d’ajouter de nouveaux éléments pour dynamiser un design — il existe de nombreuses façons de « booster » ce qui est déjà présent.
Valorisez les éléments standards. Améliorez les composants d’interface courants pour apporter du relief :
- Remplacez les puces classiques par des icônes personnalisées
- Stylisez les guillemets dans les témoignages
- Créez des styles personnalisés pour cases à cocher et boutons radio
- Ajoutez des bordures d’accentuation aux cartes ou sections
Utilisez des décorations de fond subtiles. Rompez la monotonie en :
- Appliquant des dégradés ou motifs discrets en arrière-plan
- Utilisant des couleurs de fond différentes pour distinguer les sections
- Ajoutant des textures légères ou illustrations discrètes
Ces petites touches améliorent considérablement la finition et le professionnalisme de votre design sans nécessiter de modifications majeures de la mise en page.
Dernière mise à jour:
FAQ
What's "Refactoring UI" about?
- Design principles for developers: "Refactoring UI" by Adam Wathan provides practical design advice specifically tailored for developers who may not have formal design training.
- Focus on UI improvement: The book emphasizes improving user interfaces by focusing on hierarchy, layout, color, and typography.
- Actionable tips and techniques: It offers actionable tips and techniques to make interfaces more visually appealing and user-friendly.
- Systematic approach: The book encourages a systematic approach to design, helping readers create consistent and efficient UI designs.
Why should I read "Refactoring UI"?
- Enhance design skills: If you're a developer looking to improve your design skills, this book provides clear, practical guidance.
- Bridge the gap: It helps bridge the gap between development and design, making it easier to create aesthetically pleasing and functional interfaces.
- Time-saving techniques: The book offers time-saving techniques and systems that streamline the design process.
- Real-world examples: It includes real-world examples and case studies that illustrate the application of design principles.
What are the key takeaways of "Refactoring UI"?
- Start with features: Begin designing with a focus on features rather than the overall layout to avoid frustration and inefficiency.
- Hierarchy is crucial: Establish a clear visual hierarchy to make interfaces more intuitive and user-friendly.
- Limit choices: Define systems for colors, fonts, and spacing to reduce decision fatigue and maintain consistency.
- Emphasize simplicity: Avoid over-designing and focus on creating the simplest useful version of a feature.
How does "Refactoring UI" suggest starting a design?
- Feature-first approach: Start with a specific feature rather than the entire layout to gather necessary information for design decisions.
- Example of flight booking: For a flight booking service, begin with the search functionality, including fields for departure and destination cities.
- Avoid shell design: Avoid starting with the app's shell, such as navigation bars, until features are defined.
- Iterative process: Use an iterative process to refine features and layout as more information becomes available.
What does "Refactoring UI" say about visual hierarchy?
- Not all elements are equal: Recognize that not all elements in an interface hold the same importance and should be styled accordingly.
- Use size wisely: Avoid relying solely on size to establish hierarchy; use font weight and color to emphasize important elements.
- De-emphasize to emphasize: Sometimes, de-emphasizing less important elements can make the main elements stand out more.
- Separate visual and document hierarchy: Ensure that visual hierarchy is distinct from document hierarchy to maintain clarity.
How does "Refactoring UI" recommend using color?
- Ditch hex for HSL: Use HSL color values for more intuitive adjustments based on hue, saturation, and lightness.
- More colors than expected: Prepare a comprehensive palette with multiple shades for greys, primary, and accent colors.
- Define shades upfront: Establish a fixed set of shades to avoid inconsistencies and maintain a cohesive color scheme.
- Accessible design: Ensure color choices meet accessibility standards without compromising aesthetics.
What does "Refactoring UI" suggest about layout and spacing?
- Start with too much space: Begin with excessive white space and reduce it to achieve a clean and balanced design.
- Establish a spacing system: Use a non-linear scale for spacing and sizing to simplify decisions and maintain consistency.
- Don't fill the screen: Avoid using the entire screen width unnecessarily; give elements the space they need.
- Grids are overrated: Use fixed widths for elements when appropriate, rather than relying solely on fluid grid systems.
How does "Refactoring UI" address typography?
- Establish a type scale: Define a type scale with a range of font sizes to ensure consistency and speed up decision-making.
- Avoid em units: Use px or rem units for font sizes to maintain consistency across different contexts.
- Good font selection: Choose fonts with multiple weights and optimize for legibility, especially for UI text.
- Line length and alignment: Keep line lengths between 45-75 characters and align text for readability.
What are some design systems recommended in "Refactoring UI"?
- Color systems: Define a comprehensive color palette with multiple shades for each color to maintain consistency.
- Typography systems: Establish a type scale with specific font sizes and weights to streamline text styling.
- Spacing systems: Use a non-linear scale for spacing and sizing to simplify layout decisions.
- Shadow systems: Define a set of shadows to convey elevation and depth consistently across the UI.
How does "Refactoring UI" suggest creating depth in design?
- Emulate a light source: Use light and shadow to create the illusion of depth, making elements appear raised or inset.
- Shadows for elevation: Use shadows to position elements on a virtual z-axis, enhancing the sense of depth.
- Flat design depth: Even in flat designs, use color and solid shadows to convey depth without relying on gradients or textures.
- Overlap elements: Create layers by overlapping elements, adding a sense of depth and complexity to the design.
What does "Refactoring UI" say about working with images?
- Use high-quality photos: Choose professional or high-quality stock photos to enhance the design.
- Consistent text contrast: Ensure text on images maintains consistent contrast for readability.
- Intended size for images: Use images at their intended size to avoid quality loss and maintain clarity.
- User-uploaded content: Control the shape and size of user-uploaded images to maintain layout integrity.
What are the best quotes from "Refactoring UI" and what do they mean?
- "Start with a feature, not a layout": Focus on designing specific features first to gather necessary information for layout decisions.
- "Hierarchy is everything": Establishing a clear visual hierarchy is crucial for making interfaces intuitive and user-friendly.
- "Limit your choices": Define systems for design elements to reduce decision fatigue and maintain consistency.
- "Accessible doesn’t have to mean ugly": Ensure designs meet accessibility standards without compromising aesthetics.
Avis
Refactoring UI recueille des avis extrêmement positifs, les lecteurs saluant son approche pratique et concise du design d’interface utilisateur. Beaucoup le jugent particulièrement utile pour les développeurs souhaitant perfectionner leurs compétences en design. L’ouvrage est reconnu pour ses exemples clairs, ses conseils pertinents et sa capacité à expliquer des concepts complexes de manière simple. Les lecteurs apprécient son accent mis sur la création de designs cohérents et fonctionnels ainsi que sur la mise en place de systèmes de design efficaces. Si certains designers expérimentés le trouvent un peu basique, la majorité le considère comme une ressource incontournable pour quiconque intervient dans le développement web ou d’applications, quel que soit son niveau en design.
Similar Books
