Refactoring UI

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.