Summary

Starting with a feature rather than a layout is the most important initial decision for a new project. This approach sets the stage for future detail and development. Adam and Steve emphasize that design must begin with a strong feature, not a rigid template, which allows the design to breathe. As you proceed, the need for detailed structure emerges gradually; do not force it. Furthermore, you must avoid designing too much for the sake of completeness, as excessive complexity creates issues later. Choosing a personality helps you tailor the design to specific user needs effectively. Limit your available options to ensure focus remains on the essentials rather than trying to cover everything. A clear hierarchy is paramount because everything plays a role in the final structure. Ensure every element contributes to this hierarchy and understand that not all components have equal importance.

Size does not determine success; consider how elements relate to one another. Do not use grey text over colored backgrounds; instead, let color inform the layout. Consider how to emphasize key elements rather than simply placing them where they appear. De-emphasize important information while keeping the rest clear to enhance readability. When labeling, rely on the content rather than assuming every label is essential. Separate the visual hierarchy from the overall document hierarchy to maintain better organization.

Balance weight and contrast in different areas to create visual interest. Semantic text should be secondary to its function in navigation. Maintain a type scale that supports varying font sizes consistently. Keep line lengths within comfortable checks to improve readability. Ensure baseline is not centered; it should generally align to the page level. Use proportional line height rather than random height calculations. Do not use excessive white space as the primary rule; instead, establish your own system. Recognize that grids are overrated and should be used with caution. Understand that relative sizing may not always scale perfectly across devices. Avoid ambiguous spacing that could confuse the reader. Design text using a well-established scale and good fonts for clarity. Respect user expectations regarding link color usage. When typing text, keep spacing effective and avoid letter spacing that breaks lines. Consider where the baseline actually lies rather than assuming it is in the center.

Line-height is more important than simply setting it high. Avoid creating unnecessary depth by relying on shadows alone. Understand that shadows may serve both structural and decorative purposes. Do not overuse empty states, though they can be integrated meaningfully. Consider how borders should function within the overall layout. Use your imagination to create depth beyond simple flat designs. Remember that even a perfectly centered element can have layers and depth. Work with images to utilize their visual impact effectively. Ensure your text and images share consistent contrast levels throughout. Acknowledge that all content has an intended size. Beware of user-uploaded content that may contradict your design choices. Consider finishing touches by supercharging the default interface settings. Add color using accent borders to draw attention. Decorate your background elements meaningfully. Do not ignore empty states, as they can guide the reader. Keep your border usage minimal and strategic. Think outside the box to find unique approaches. Consider how your design can actually "level up" and exceed current standards.

The author notes that while this book will teach a significant amount, it is crucial to watch an expert do things themselves. These insights come directly from their experience. Thank you to Adam Watson and Steve Choe.

Title

Refactoring UI

Description

Refactoring UI

Keywords

book, design, view, tweet, component, like, color, make, have, gallery, team, over, read, ideas, time, great, more

NS Lookup

A 104.21.7.219, A 172.67.188.16

Dates

Created 2026-03-09

Updated 2026-04-14

Summarized 2026-04-14