Wichtige Erkenntnisse
1. Beginnen Sie mit einer Funktion, nicht mit einem Layout
Der einfachste Weg, frustriert und festgefahren zu sein, wenn Sie an einem neuen Design arbeiten, besteht darin, zu versuchen, „die App zu gestalten“.
Fokussieren Sie sich zuerst auf die Funktionalität. Beginnen Sie damit, ein spezifisches Feature oder eine Funktionalität zu entwerfen, anstatt das gesamte Layout oder die „Hülle“ der App zu gestalten. Dieser Ansatz ermöglicht es Ihnen, informierte Entscheidungen über Navigation und Struktur basierend auf tatsächlichen Inhalten und Benutzerbedürfnissen zu treffen. Wenn Sie beispielsweise einen Flugbuchungsdienst entwerfen, beginnen Sie mit den wesentlichen Elementen wie Abflug- und Zielorten, Datumswählern und einem Suchbutton.
Vermeiden Sie voreilige Entscheidungen. Indem Sie sich zuerst auf Funktionen konzentrieren, verhindern Sie, dass Sie uninformierte Entscheidungen über Navigation, Layout und andere strukturelle Elemente treffen. Diese Methode hilft Ihnen, ein benutzerzentriertes Design zu entwickeln, das sich natürlich aus der Kernfunktionalität Ihrer Anwendung entwickelt.
2. Entwerfen Sie in Graustufen, bevor Sie Farbe hinzufügen
Durch das Entwerfen in Graustufen sind Sie gezwungen, Abstände, Kontraste und Größen zu nutzen, um die gesamte Arbeit zu leisten.
Betonen Sie Struktur und Hierarchie. Das anfängliche Entwerfen in Graustufen zwingt Sie dazu, sich auf die grundlegenden Aspekte Ihres Designs zu konzentrieren: Layout, Abstände und Kontrast. Dieser Ansatz stellt sicher, dass die Kernstruktur Ihres Designs solide ist, bevor Sie die Komplexität von Farben einführen.
Verfeinern Sie ohne Ablenkung. Das Arbeiten in Graustufen ermöglicht es Ihnen, kritische Entscheidungen über Hierarchie und Betonung zu treffen, ohne die potenzielle Ablenkung durch Farben. Sobald Sie eine starke Grundlage geschaffen haben, können Sie Farbe strategisch einführen, um das Design zu verbessern, anstatt sich darauf zu verlassen, dass sie Struktur oder Bedeutung schafft.
- Beginnen Sie mit grundlegenden Wireframes oder Skizzen
- Verfeinern Sie Layout und Abstände in Graustufen
- Etablieren Sie eine klare visuelle Hierarchie mithilfe von Kontrast und Größe
- Fügen Sie Farbe erst hinzu, wenn das Kern-Design solide ist
3. Etablieren Sie visuelle Hierarchie durch Größe, Gewicht und Kontrast
Visuelle Hierarchie bezieht sich darauf, wie wichtig die Elemente in einer Benutzeroberfläche im Verhältnis zueinander erscheinen, und es ist das effektivste Werkzeug, das Sie haben, um etwas „gestaltet“ erscheinen zu lassen.
Verwenden Sie mehrere Techniken. Schaffen Sie Hierarchie, indem Sie Schriftgrößen, Gewichte und Farben variieren. Verlassen Sie sich nicht nur auf die Schriftgröße; die Kombination verschiedener Techniken führt oft zu besseren Ergebnissen. Verwenden Sie beispielsweise ein fetteres Schriftgewicht oder eine dunklere Farbe, um wichtige Elemente zu betonen, während Sie die Schriftgrößen angemessen halten.
Berücksichtigen Sie den Kontext. Passen Sie Ihre Hierarchie basierend auf den spezifischen Bedürfnissen jedes Interface-Elements an. Zum Beispiel:
- Überschriften: Größere Größe, fetteres Gewicht
- Fließtext: Mittlere Größe, reguläres Gewicht
- Unterstützender Text: Kleinere Größe, hellere Farbe
- Call-to-Action-Buttons: Kontrastierende Farbe, fetter Text
Denken Sie daran, dass Hierarchie nicht nur darum geht, Dinge hervorzuheben – es geht auch darum, weniger wichtige Elemente zu entwerten, um einen klaren visuellen Pfad für den Benutzer zu schaffen.
4. Schaffen Sie Tiefe mit Schatten und Schichtung
Schatten können mehr sein als nur ein auffälliger Effekt – wenn sie durchdacht eingesetzt werden, ermöglichen sie es Ihnen, Elemente auf einer virtuellen Z-Achse zu positionieren und ein bedeutungsvolles Gefühl von Tiefe zu erzeugen.
Verwenden Sie Schatten gezielt. Schatten können in Ihrer Benutzeroberfläche Höhe und Bedeutung vermitteln. Etablieren Sie ein System von Schattengrößen und -intensitäten, um unterschiedliche Höhen konsistent in Ihrem Design darzustellen.
- Kleine Schatten: Leicht erhöhte Elemente (z. B. Buttons)
- Mittlere Schatten: Schwebende Elemente (z. B. Dropdown-Menüs)
- Große Schatten: Modale Dialoge oder prominente Elemente
Schichten Sie Elemente für Tiefe. Überlappen Sie verschiedene Komponenten, um ein Gefühl von Schichtung in Ihrem Design zu erzeugen. Diese Technik kann visuelles Interesse hinzufügen und Informationen hierarchisch organisieren. Zum Beispiel:
- Versetzen Sie Karten, um Hintergründe zu überlappen
- Lassen Sie Elemente über ihre Container hinausreichen
- Verwenden Sie „unsichtbare Ränder“, um überlappende Bilder zu trennen
5. Verwenden Sie ein konsistentes Abstands- und Größensystem
Ein einfacher Ansatz besteht darin, mit einem sinnvollen Basiswert zu beginnen und dann eine Skala unter Verwendung von Faktoren und Vielfachen dieses Wertes zu erstellen.
Etablieren Sie eine Skala. Erstellen Sie ein Abstands- und Größensystem, das auf einer konsistenten Skala basiert. Dieser Ansatz sorgt für visuelle Harmonie und beschleunigt den Designprozess, indem er die Auswahlmöglichkeiten einschränkt. Beginnen Sie mit einem Basiswert (z. B. 16px) und erstellen Sie eine Skala unter Verwendung von Vielfachen oder Faktoren dieses Wertes.
Konsistent anwenden. Verwenden Sie Ihre etablierte Skala für verschiedene Aspekte Ihres Designs:
- Ränder und Abstände
- Elementgrößen (Buttons, Eingabefelder usw.)
- Rasterabstände
- Typografie (Zeilenhöhe, Absatzabstände)
Durch die Einhaltung eines konsistenten Systems schaffen Sie ein kohärenteres Design und reduzieren die Entscheidungserschöpfung während des Designprozesses. Denken Sie daran, dass Ihre Skala genügend Optionen bieten sollte, um flexibel zu sein, aber nicht so viele, dass sie überwältigend wird.
6. Wählen Sie Schriftarten weise und etablieren Sie eine Schriftgröße-Skala
Für UI-Design ist Ihre sicherste Wahl eine recht neutrale serifenlose Schrift – denken Sie an etwas wie Helvetica.
Wählen Sie geeignete Schriftarten. Wählen Sie Schriftarten, die in verschiedenen Größen lesbar sind und für den Zweck Ihres Designs geeignet sind. Für Benutzeroberflächen sind neutrale serifenlose Schriften oft die beste Wahl. Berücksichtigen Sie Faktoren wie:
- Lesbarkeit bei kleinen Größen
- Verfügbare Gewichte und Stile
- Vollständigkeit des Zeichensatzes
- Lizenz- und Nutzungsrechte
Erstellen Sie eine Schriftgröße-Skala. Etablieren Sie eine konsistente Reihe von Schriftgrößen, die Sie in Ihrem Design verwenden. Dies hilft, visuelle Harmonie aufrechtzuerhalten und beschleunigt den Designprozess.
- Beginnen Sie mit einer Basisgröße (z. B. 16px für Fließtext)
- Erstellen Sie eine Skala von 5-8 Größen für verschiedene Zwecke (Überschriften, Bildunterschriften usw.)
- Verwenden Sie eine nicht-lineare Skala für mehr Flexibilität (z. B. 12, 14, 16, 20, 24, 32, 48px)
7. Entwickeln Sie eine umfassende Farbpalette
Sie können eine gute Farbpalette in drei Kategorien unterteilen.
Bauen Sie eine vielseitige Palette auf. Erstellen Sie ein umfassendes Farbsystem, das Folgendes umfasst:
- Grautöne: 8-10 Schattierungen für Text, Hintergründe und UI-Elemente
- Primärfarben: 5-10 Schattierungen für Hauptmarkenfarben und Aktionen
- Akzentfarben: Zusätzliche Farben für Highlights, Warnungen und Datenvisualisierung
Berücksichtigen Sie Farbpsychologie. Wählen Sie Farben, die mit Ihrer Markenpersönlichkeit übereinstimmen und die richtigen Emotionen hervorrufen. Zum Beispiel:
- Blau: Vertrauen, Professionalität
- Grün: Wachstum, Positivität
- Rot: Dringlichkeit, Bedeutung
Denken Sie daran, Ihre Palette auf Barrierefreiheit zu testen und sicherzustellen, dass ein ausreichender Kontrast zwischen Text- und Hintergrundfarben besteht.
8. Optimieren Sie Bilder für Lesbarkeit und Wirkung
Um dieses Problem zu lösen, müssen Sie die Dynamik im Bild reduzieren, um den Kontrast zwischen dem Text und dem Hintergrund konsistenter zu gestalten.
Verbessern Sie den Bild-Text-Kontrast. Wenn Sie Text über Bilder platzieren, stellen Sie die Lesbarkeit sicher, indem Sie das Bild anpassen oder Überlagerungen hinzufügen:
- Reduzieren Sie den Bildkontrast
- Fügen Sie halbtransparente Überlagerungen hinzu
- Verwenden Sie Farbfilter, um das Bild mit Ihrem Design zu vereinheitlichen
- Wenden Sie subtile Textschatten oder Glühen an
Kontrollieren Sie nutzergenerierte Inhalte. Wenn Sie mit von Benutzern hochgeladenen Bildern arbeiten:
- Erzwingen Sie konsistente Seitenverhältnisse und Größen
- Verwenden Sie subtile Ränder oder Schatten, um Bilder von Hintergründen zu trennen
- Implementieren Sie Fallback-Stile für fehlende oder problematische Bilder
Diese Techniken helfen, die Designintegrität aufrechtzuerhalten, während sie variablen Inhalt berücksichtigen.
9. Achten Sie auf kleine Details für ein poliertes Aussehen
Sie müssen nicht immer neue Elemente zu einem Design hinzufügen, um es aufzupeppen – es gibt viele Möglichkeiten, eine Seite durch das „Superladen“ dessen, was bereits vorhanden ist, aufzupeppen.
Heben Sie Standardelemente hervor. Verbessern Sie gängige UI-Komponenten, um visuelles Interesse hinzuzufügen:
- Ersetzen Sie Standardpunkte durch benutzerdefinierte Symbole
- Gestalten Sie Anführungszeichen in Testimonials
- Erstellen Sie benutzerdefinierte Checkbox- und Radio-Button-Stile
- Fügen Sie Akzent-Ränder zu Karten oder Abschnitten hinzu
Verwenden Sie subtile Hintergrunddekorationen. Brechen Sie die Monotonie in Ihren Designs auf, indem Sie:
- Subtile Verläufe oder Muster auf Hintergründen anwenden
- Verschiedene Hintergrundfarben verwenden, um Abschnitte zu unterscheiden
- Leichte Texturen oder subtile Illustrationen hinzufügen
Diese kleinen Akzente können das Gesamtbild und die Professionalität Ihres Designs erheblich verbessern, ohne dass größere Layoutänderungen erforderlich sind.
Zuletzt aktualisiert:
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.
Rezensionen
Refactoring UI erhält überwältigend positive Bewertungen, da Leser den praktischen und prägnanten Ansatz zur UI-Gestaltung loben. Viele empfinden es als besonders wertvoll für Entwickler, die ihre Designfähigkeiten verbessern möchten. Das Buch wird für seine klaren Beispiele, nützlichen Tipps und die Fähigkeit, komplexe Konzepte einfach zu erklären, geschätzt. Die Leser schätzen den Fokus auf die Schaffung konsistenter, funktionaler Designs und den Aufbau effektiver Designsysteme. Während einige erfahrene Designer es als grundlegend empfinden, betrachten die meisten es als eine unverzichtbare Ressource für alle, die in der Web- oder App-Entwicklung tätig sind, unabhängig von ihrem Designhintergrund.
Similar Books
