Refactoring UI

Top 3 Quotes

“Visual hierarchy is the most effective tool you have for making something feel ‘designed’”

“If something is longer than two or three lines, it will almost always look better left-aligned.”

“It’s not uncommon to need as many as ten different colors with 5-10 shades each for a complex UI.”

Key Concepts and Strategies

Start Small and Iterate

• Focus on specific features before overall layout
• Delay font and icon decisions initially
• Use grayscale design to emphasize spacing, contrast, and size

Design Personality

• Establish consistency through font selection, color choices, and border radius adjustments

Useful Constraints

• Predefine color palettes, type scales, and font sizes
• Simplify decision-making through systematic constraints

Hierarchy

• Combine font weight, color, and spacing for visual hierarchy
• Minimize and de-emphasize labels when appropriate
• Avoid relying solely on font size

Layout and Spacing

• Begin with generous white space
• Establish proportional sizing systems
• Grids aren’t mandatory for all designs

Text Design

• Limit font size variations
• Select typefaces with multiple weights
• Control line length and height based on font size

Color Application

• Develop multiple grey and primary color shades
• Include accent colors for different components
• Use HSL notation for systematic color planning

Depth and Shadows

• Use shadows to convey elevation
• Select shadows thoughtfully rather than abundantly
• Consider z-axis positioning

Image Handling

• Prioritize high-quality imagery
• Avoid scaling icons upward or screenshots downward
• Control user-generated content consistency

Finishing Touches

• Customize default UI elements with icons and borders
• Add decorative backgrounds and gradients
• Address empty states and reduce unnecessary borders