Book Summaries | Refactoring UI - Finishing Touches and Leveling Up

January 7th, 2024

Refactoring UI - Finishing Touches and Leveling Up (Chapters 8 & 9)

This summary will serve to further cement my learnings taken when reading the eighth and ninth chapters of Refactoring UI, titled Finishing Touches and Leveling Up, and I hope will provide some learnings to you as well.

Supercharge the Defaults

• Enhance existing design elements by replacing bullets with icons.
• Promote quotes, add styles to links, and customize form elements to add visual appeal without introducing new components.

Add Color with Accent Borders

• Use colorful accent borders to elevate UI elements’ visual appeal.
• Apply accent borders strategically across cards, navigation items, alerts, headlines, or entire layouts.

Decorate Your Backgrounds

• Break the monotony by changing background colors, adding repeatable patterns, or incorporating simple shapes.
• Including subtle graphics or illustrations in specific positions can enhance backgrounds without overwhelming the design.

Don’t Overlook Empty States

• Prioritize designing engaging empty states, incorporating images or illustrations.
• Encourage user interaction with clear call-to-action elements in empty states.

Use Fewer Borders

• Avoid overusing borders for element separation; consider alternatives for a cleaner design.
• Box shadows, two different background colors, or increased spacing can effectively distinguish elements without borders.

Think Outside the Box

• Challenge conventional component designs, such as dropdown menus and tables.
• Experiment with unconventional layouts, multiple columns, supporting text, or colorful icons to add creativity to common UI components.

Continuous Learning

• Gain confidence in design skills by exploring new ideas and learning continuously.
• Recognize that there will always be more to learn, and embrace opportunities for improvement.

Learn from Others

• Analyze designs you admire and question decisions made by designers that you wouldn’t have considered.
• Pay attention to unintuitive design choices as a source of inspiration for your own projects.

Rebuild Favorite Interfaces

• Enhance your design skills by recreating interfaces you admire from scratch.
• Avoid peeking at developer tools to understand the intricacies of polished designs, discovering tricks and nuances independently.

Long-term Improvement

• Develop a meticulous eye for design by consistently studying and appreciating inspiring work.
• Accumulate design tricks over time by actively engaging with and understanding the details of well-crafted interfaces.