Key Takeaways
1. Start with a feature, not a layout
The easiest way to find yourself frustrated and stuck when working on a new design is to start by trying to "design the app."
Focus on functionality first. Begin by designing a specific feature or piece of functionality rather than the overall layout or "shell" of the app. This approach allows you to make informed decisions about navigation and structure based on actual content and user needs. For example, when designing a flight booking service, start with the essential elements like departure and destination fields, date selectors, and a search button.
Avoid premature decisions. By focusing on features first, you prevent yourself from making uninformed choices about navigation, layout, and other structural elements. This method helps you build a more user-centric design that evolves naturally from the core functionality of your application.
2. Design in grayscale before adding color
By designing in grayscale, you're forced to use spacing, contrast, and size to do all of the heavy lifting.
Emphasize structure and hierarchy. Designing in grayscale initially forces you to focus on the fundamental aspects of your design: layout, spacing, and contrast. This approach ensures that your design's core structure is solid before introducing the complexity of color.
Refine without distraction. Working in grayscale allows you to make critical decisions about hierarchy and emphasis without the potential distraction of color. Once you've established a strong foundation, you can then introduce color strategically to enhance the design rather than relying on it to create structure or meaning.
- Start with basic wireframes or sketches
- Refine layout and spacing in grayscale
- Establish clear visual hierarchy using contrast and size
- Introduce color only after the core design is solid
3. Establish visual hierarchy through size, weight, and contrast
Visual hierarchy refers to how important the elements in an interface appear in relation to one another, and it's the most effective tool you have for making something feel "designed".
Use multiple techniques. Create hierarchy by varying font sizes, weights, and colors. Don't rely solely on font size; combining different techniques often yields better results. For example, use a bolder font weight or darker color to emphasize important elements while keeping font sizes reasonable.
Consider context. Adapt your hierarchy based on the specific needs of each interface element. For instance:
- Headlines: Larger size, bolder weight
- Body text: Medium size, regular weight
- Supporting text: Smaller size, lighter color
- Call-to-action buttons: Contrasting color, bold text
Remember that hierarchy isn't just about making things stand out—it's also about de-emphasizing less important elements to create a clear visual path for the user.
4. Create depth with shadows and layering
Shadows can be more than just a flashy effect — used thoughtfully, they let you position elements on a virtual z-axis to create a meaningful sense of depth.
Use shadows purposefully. Shadows can convey elevation and importance in your interface. Establish a system of shadow sizes and intensities to represent different levels of elevation consistently throughout your design.
- Small shadows: Slightly raised elements (e.g., buttons)
- Medium shadows: Floating elements (e.g., dropdown menus)
- Large shadows: Modal dialogs or prominent elements
Layer elements for depth. Overlap different components to create a sense of layering in your design. This technique can add visual interest and help organize information hierarchically. For example:
- Offset cards to overlap backgrounds
- Allow elements to extend beyond their containers
- Use "invisible borders" to separate overlapping images
5. Use a consistent spacing and sizing system
A simple approach is to start with a sensible base value, then build a scale using factors and multiples of that value.
Establish a scale. Create a spacing and sizing system based on a consistent scale. This approach ensures visual harmony and speeds up the design process by limiting choices. Start with a base value (e.g., 16px) and create a scale using multiples or factors of that value.
Apply consistently. Use your established scale for various aspects of your design:
- Margins and padding
- Element sizes (buttons, input fields, etc.)
- Grid gaps
- Typography (line height, paragraph spacing)
By adhering to a consistent system, you create a more cohesive design and reduce decision fatigue during the design process. Remember that your scale should provide enough options to be flexible but not so many that it becomes overwhelming.
6. Choose typefaces wisely and establish a type scale
For UI design, your safest bet is a fairly neutral sans-serif — think something like Helvetica.
Select appropriate typefaces. Choose typefaces that are legible at various sizes and suitable for your design's purpose. For user interfaces, neutral sans-serif fonts are often the best choice. Consider factors such as:
- Readability at small sizes
- Available weights and styles
- Character set completeness
- License and usage rights
Create a type scale. Establish a consistent set of font sizes to use throughout your design. This helps maintain visual harmony and speeds up the design process.
- Start with a base size (e.g., 16px for body text)
- Create a scale of 5-8 sizes for different purposes (headings, captions, etc.)
- Use a non-linear scale for more flexibility (e.g., 12, 14, 16, 20, 24, 32, 48px)
7. Develop a comprehensive color palette
You can break a good color palette down into three categories.
Build a versatile palette. Create a comprehensive color system that includes:
- Greys: 8-10 shades for text, backgrounds, and UI elements
- Primary colors: 5-10 shades each for main brand colors and actions
- Accent colors: Additional colors for highlights, warnings, and data visualization
Consider color psychology. Choose colors that align with your brand personality and evoke the right emotions. For example:
- Blue: Trust, professionalism
- Green: Growth, positivity
- Red: Urgency, importance
Remember to test your palette for accessibility and ensure sufficient contrast between text and background colors.
8. Optimize images for legibility and impact
To solve this problem, you need to reduce the dynamics in the image to make the contrast between the text and the background more consistent.
Enhance image-text contrast. When placing text over images, ensure legibility by adjusting the image or adding overlays:
- Reduce image contrast
- Add semi-transparent overlays
- Use color filters to unify the image with your design
- Apply subtle text shadows or glows
Control user-generated content. When dealing with user-uploaded images:
- Enforce consistent aspect ratios and sizes
- Use subtle borders or shadows to separate images from backgrounds
- Implement fallback styles for missing or problematic images
These techniques help maintain design integrity while accommodating variable content.
9. Pay attention to small details for a polished look
You don't always have to add new elements to a design to add flare — there are a lot of ways to liven up a page by "supercharging" what's already there.
Elevate standard elements. Enhance common UI components to add visual interest:
- Replace default bullets with custom icons
- Style quotation marks in testimonials
- Create custom checkbox and radio button styles
- Add accent borders to cards or sections
Use subtle background decorations. Break up monotony in your designs by:
- Applying subtle gradients or patterns to backgrounds
- Using different background colors to distinguish sections
- Adding light textures or subtle illustrations
These small touches can significantly improve the overall polish and professionalism of your design without requiring major layout changes.
Last updated:
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.
Review Summary
Refactoring UI receives overwhelmingly positive reviews, with readers praising its practical, concise approach to UI design. Many find it especially valuable for developers looking to improve their design skills. The book is lauded for its clear examples, useful tips, and ability to explain complex concepts simply. Readers appreciate its focus on creating consistent, functional designs and building effective design systems. While some experienced designers find it basic, most consider it an essential resource for anyone involved in web or app development, regardless of their design background.
Similar Books








Download PDF
Download EPUB
.epub
digital book format is ideal for reading ebooks on phones, tablets, and e-readers.