Refactoring UI: Complete Summary of Adam Wathan & Steve Schoger’s System for Designing Beautiful Interfaces

Introduction: What This Book Is About

“Refactoring UI” by Adam Wathan and Steve Schoger offers a practical, actionable guide for developers and designers looking to improve their user interface design skills without needing an innate artistic talent. This book demystifies the design process by breaking it down into a series of repeatable, systematic decisions rather than relying on abstract concepts. It teaches readers how to create professional, aesthetically pleasing, and highly functional interfaces by focusing on principles like visual hierarchy, layout, spacing, typography, color, and depth.

The authors, experienced UI designers and developers, share their proven techniques and mental models, making complex design concepts accessible. This book is invaluable for anyone building web applications, software, or digital products who wants to enhance their designs, reduce decision fatigue, and build interfaces that are both beautiful and intuitive. It empowers readers to make confident design choices, transforming their work from “good enough” to “great.” This summary will provide comprehensive coverage of all key insights, ensuring you grasp the core principles and practical applications for immediate improvement.

Starting from Scratch

This chapter explores how to initiate the design process effectively by focusing on functionality rather than layout. It emphasizes that starting with the core features of an application leads to more informed and less frustrating design decisions.

Start with a Feature, Not a Layout

When beginning a new app design, avoid starting with the navigation bar or the overall shell. This common mistake leads to frustration because you lack the necessary information to make informed decisions about global layout elements. An “app” is fundamentally a collection of features. Before designing specific functionalities, you don’t have the context to decide on navigation placement (top vs. sidebar), content width (container vs. full-width), or logo positioning. This approach often results in feeling stuck and overwhelmed.

Instead, begin by designing a single piece of actual functionality. For instance, if building a flight booking service, start with the “searching for a flight” feature. This means designing the departure city field, destination city field, departure date field, return date field, and a search button. By focusing on these concrete elements, you gain clarity on the essential interface needs. This method allows you to build the core experience first, and the overall structure will emerge more naturally from these functional requirements.

Detail Comes Later

In the early stages of designing a new feature, resist getting bogged down by low-level decisions like typefaces, shadows, or icons. These details are important eventually, but they are not critical at the outset. Obsessing over minor details too early can hinder rapid exploration and ideation.

A practical trick to avoid this is to design on paper using a thick Sharpie. This forces you to focus on broad layout ideas and prevents you from getting caught up in pixel-perfect adjustments. The Sharpie’s thickness makes it impossible to refine small details, encouraging a faster, more exploratory design process. This low-fidelity approach allows for quick iteration and exploration of many different layout concepts without over-investing time in disposable mockups.

Hold the Color

Even when you are ready to refine an idea in higher fidelity, resist the temptation to introduce color immediately. By designing in grayscale, you are compelled to rely on more fundamental design principles: spacing, contrast, and size. This approach forces you to use these elements to establish a strong visual hierarchy. It is more challenging initially, but it results in a clearer interface with a robust structure. This strong foundation makes it significantly easier to enhance the design with color later, as the hierarchy is already well-defined and effective.

Don’t Over-Invest

The primary purpose of designing in low-fidelity is to move quickly. Sketches and wireframes are disposable tools for exploration, not final products. Users cannot interact with static mockups, so their value lies in helping you make decisions efficiently. Use these early designs to explore various ideas and then leave them behind once a decision has been made. The goal is to transition to building the real thing as soon as possible, leveraging the insights gained from rapid prototyping without becoming overly attached to early-stage artifacts.

Don’t Design Too Much

It is not necessary, or even advisable, to design every single feature in an app before moving to implementation. Trying to anticipate every interaction and edge case in the abstract is incredibly difficult and leads to frustration. Questions like “How should this screen look with 2000 contacts?” or “Where does the error message go?” are best answered with a working prototype.

Instead, work in short cycles. Design a simple version of the next feature you intend to build. Once satisfied with the basic design, implement it in code. You will inevitably encounter unexpected complexities during implementation, but it is easier to fix design problems in an interface you can actually use than to imagine every scenario beforehand. Iterate on the working design until all problems are solved, then return to design mode for the next feature. This iterative approach prevents overwhelm and leverages the reality of a functional product to guide design decisions.

Be a Pessimist

When designing, do not imply functionality that you are not ready to build. For example, if you plan to add file attachments to a comment system “one day,” do not include an attachments section in your initial design. This can lead to significant delays. You might discover that supporting attachments is far more work than anticipated, causing the entire comment system to be sidelined.

A comment system without attachments is still better than no comment system at all. By planning for a “nice-to-have” feature from day one, you risk having nothing shippable. Instead, expect building to be hard. Design the smallest useful version you can ship first. This significantly reduces risk and ensures you always have a functional fallback. If a part of a feature is a “nice-to-have,” design it later. Build the simple version first to guarantee something valuable can be delivered.

Choose a Personality

This chapter emphasizes that every design inherently possesses a personality, which is largely determined by concrete factors like font choice, color, border radius, and language. It guides designers on how to consciously select and maintain a consistent personality.

Font Choice

Typography plays a huge part in determining how a design feels. Different font choices can evoke distinct personalities:

• For an elegant or classic look, incorporate a serif typeface.
• For a playful look, use a rounded sans serif.
• For a plainer or neutral look, or if personality is conveyed by other elements, a neutral sans serif works great.
  The font family you select sets a fundamental tone for the entire interface, influencing how users perceive the brand and content.

Color

While there’s extensive science on color psychology, in practice, pay attention to how different colors feel to you.

• Blue often communicates safety and familiarity, rarely drawing complaints.
• Gold can suggest “expensive” and “sophisticated.”
• Pink tends to feel more fun and less serious.
  While relying solely on psychology for color choice isn’t practical, considering the emotional impact helps in understanding why a particular color might be the right fit for your design’s personality. The chosen color palette significantly influences the overall mood and perception of the interface.

Border Radius

The border radius, though a small detail, can have a big impact on the overall feel of a design.

• A small border radius is generally neutral and doesn’t convey much personality on its own.
• A large border radius starts to feel more playful.
• No border radius at all (square corners) feels more serious or formal.
  Whatever border radius you choose, consistency is crucial. Mixing square and rounded corners within the same interface almost always results in a less cohesive and less professional appearance. Maintaining a uniform border radius reinforces the chosen personality.

Language

While not a visual design technique, the words used in an interface have a massive influence on the overall personality.

• A less personal tone can make a site feel more official or professional.
• Friendlier, more casual language makes a site feel, well, friendlier.
  Words are ubiquitous in user interfaces, and selecting the right language is as important, if not more important, than choosing the right color or typeface. The tone and style of communication directly shape the user’s emotional connection and perception of the brand.

Deciding What You Actually Want

Often, you’ll have a gut feeling for the personality you’re aiming for. If not, a great way to simplify the decision is to examine other sites used by your target audience.

• If their preferred sites are “serious business,” your site might benefit from a similar look.
• If they are more playful with humor, that might be a better direction.
  Avoid borrowing too much from direct competitors to prevent your site from appearing as a “second-rate version” of something else. The goal is to find a distinct yet appropriate personality that resonates with your users.

Limit Your Choices

This chapter argues that an abundance of choices in design, such as millions of colors or thousands of fonts, can be paralyzing. It advocates for defining constrained systems in advance to streamline decision-making and ensure consistency.

Define Systems in Advance

Having limitless options for design elements like font sizes, box shadows, or avatar dimensions is often a paralyzing curse. Agonizing over minor decisions, such as whether text should be 12px or 13px, wastes time and leads to inconsistent designs. When designing without constraints, decision-making is torturous because there are always multiple “right” choices that are indistinguishable to the eye.

Instead, start with a smaller, predefined set of options. For colors, don’t use a color picker every time; choose from 8-10 shades picked out ahead of time. Similarly, for font sizes, define a restrictive type scale in advance and use that for all future font size decisions. When you build systems like this, you only perform the hard work of picking initial values once, saving significant decision fatigue down the road. This upfront effort results in a faster and more consistent workflow.

Designing by Process of Elimination

When designing with a constrained set of values, decision-making becomes significantly easier due to fewer “right” choices. For instance, if you’re choosing an icon size and your system offers only 12px, 16px, 24px, and 32px, you can pick the best option through elimination. Start by guessing, say 16px. Then, try values on either side (12px and 24px) for comparison.

Often, two options will be obviously bad choices. If the outer options are bad, the middle one is the correct choice. If an outer option looks best, use it as the new “middle” and compare again. This approach works for any systematized design element. When limited to options that are noticeably different, picking the best one is straightforward.

Systematize Everything

The more systems you have in place, the faster you will be able to work, and the less you will second-guess your own decisions. Systems should be defined for a wide range of design properties, including:

• Font size
• Font weight
• Line height
• Color
• Margin
• Padding
• Width
• Height
• Box shadows
• Border radius
• Border width
• Opacity

You don’t need to define everything upfront. Instead, approach design with a system-focused mindset. Actively look for opportunities to introduce new systems as you make decisions, and strive to avoid making the same minor decision twice. Designing with systems is a recurring theme that will be explored in finer detail in later chapters.

Hierarchy is Everything

This section explains that visual hierarchy is the most effective tool for making a design feel “designed.” It emphasizes that not all elements are equal and that deliberately de-emphasizing secondary information is crucial for clarity.

Not All Elements Are Equal

Visual design is not just about “styling things so they look good”; a major factor in aesthetics is visual hierarchy. This refers to how important the elements in an interface appear in relation to one another. When all elements compete for attention, the interface feels noisy and chaotic, like a “wall of content” where importance is unclear.

However, when you deliberately de-emphasize secondary and tertiary information and highlight the most important elements, the result is immediately more pleasing. This improvement occurs even if the color scheme, font choice, and layout remain unchanged. Establishing a clear hierarchy is fundamental to creating a “designed” feel and ensuring users can easily interpret what matters most.

Size Isn’t Everything

Relying too much on font size alone to control hierarchy is a mistake, often leading to overly large primary content and excessively small secondary content. Instead, leverage font weight or color to achieve the same effect more effectively. For example, making a primary element bolder allows for a more reasonable font size while still clearly communicating its importance. Similarly, using a softer color for supporting text makes it clear that the text is secondary, without sacrificing readability by making it tiny.

Sticking to two or three colors is generally sufficient for UI work:

• A dark color for primary content (e.g., article headlines).
• A grey for secondary content (e.g., publication date).
• A lighter grey for tertiary content (e.g., copyright notices).

For font weights, two are usually enough:

• A normal font weight (400 or 500) for most text.
• A heavier font weight (600 or 700) for emphasized text.

Avoid font weights under 400 for UI work, as they are too difficult to read at smaller sizes. If you need to de-emphasize text, use a lighter color or smaller font size instead of a lighter font weight.

Don’t Use Grey Text on Colored Backgrounds

While using lighter grey text is effective for de-emphasizing content on white backgrounds, it does not work well on colored backgrounds. The perceived effect of grey on white is actually reduced contrast. On colored backgrounds, the goal is to make the text closer to the background color, not simply grey.

Using white text with reduced opacity to achieve this often results in dull, washed-out, or disabled-looking text. Moreover, this approach causes the background image or pattern to show through the text, further degrading readability. A better method is to hand-pick a new color based on the background color. Choose a color with the same hue as the background, then adjust its saturation and lightness until the contrast is appropriately reduced without the text appearing faded. This ensures the text remains vibrant and clear while achieving the desired hierarchical effect.

Emphasize by De-Emphasizing

Sometimes, when a main element isn’t standing out enough, adding more to it doesn’t help. Instead, figure out how to de-emphasize the elements that are competing with it. For example, if an active navigation item isn’t “popping” despite a different color, give the inactive items a softer color so they recede into the background.

This principle applies to larger interface sections too. If a sidebar competes with your main content, don’t give it a background color. Instead, let its content sit directly on the page background. By reducing the visual weight of competing elements, the intended focus naturally becomes more prominent, creating a clearer and more effective hierarchy.

Labels Are a Last Resort

When presenting data, especially from a database, it’s easy to fall into the trap of a naive label: value format. This approach makes it difficult to establish any visual hierarchy, as every piece of data is given equal emphasis.

You might not need a label at all. Often, the format alone indicates the data type (e.g., an email address or phone number). Context can also provide clarity; “Customer Support” below a name clearly indicates a department. Presenting data without labels allows for easier emphasis of important information, making the interface more user-friendly and “designed.”

When a label is needed for clarity, combine labels and values. For example, instead of “In stock: 12,” use “12 left in stock.” Or “Bedrooms: 3” becomes “3 bedrooms.” Combining them into a single unit allows for meaningful styling without sacrificing clarity.

When labels are truly necessary, treat them as supporting content. The data itself is paramount. De-emphasize the label by making it smaller, reducing contrast, or using a lighter font weight.

However, emphasize a label when the user is actively looking for it, such as on information-dense pages like technical specifications. In these cases, users scan for labels like “depth” rather than values like “7.6mm.” Even then, don’t de-emphasize the data too much; a darker color for the label and a slightly lighter color for the value is often sufficient.

Separate Visual Hierarchy from Document Hierarchy

It’s crucial to use semantic HTML markup (e.g., h1, h2, h3) for accessibility on the web. By default, browsers assign progressively smaller font sizes to these heading elements. While this is helpful for document-style content like articles, it can lead to poor design decisions in application UIs.

For example, using an h1 tag for a page title like “Manage Account” makes semantic sense. However, the ingrained belief that h1 elements must be large often leads to these titles being bigger than they need to be. In many UIs, section titles function more like labels than headings; they are supportive content and shouldn’t steal all attention. Often, the content within the section should be the focus, not the title. This means that titles should frequently be quite small.

In extreme cases, you might even include semantic section titles in your markup for accessibility but completely hide them visually if the content is self-explanatory. The key is to not let the semantic element influence its styling. Pick elements for their semantic purpose and style them independently to create the best visual hierarchy.

Balance Weight and Contrast

The reason bold text feels emphasized is that it covers more surface area, using more pixels for text than background in the same space. This relationship between surface area and hierarchy has implications for other UI elements.

Using contrast to compensate for weight is important when working with icons. Icons, especially solid ones, are generally “heavy” and cover significant surface area. When placed next to text, icons tend to feel emphasized. Since you cannot change an icon’s “weight,” you must de-emphasize it by lowering its contrast with a softer color. This effectively counterbalances the icon’s weight, making it feel lighter without changing its intrinsic form.

Conversely, using weight to compensate for contrast helps emphasize low-contrast elements. For instance, if thin 1px borders are too subtle with a soft color, but darkening the color makes the design harsh, increasing the border width adds emphasis without losing the soft aesthetic. This technique is useful for elements that need a subtle presence but still require clear visibility.

Semantics Are Secondary

When a page has multiple user actions, it’s easy to design them based purely on their semantics. While semantics are important for buttons, they should not override visual hierarchy. Every action on a page occupies a place in a pyramid of importance: typically one primary action, a couple of secondary actions, and a few seldom-used tertiary actions.

It’s crucial to communicate this hierarchy visually:

• Primary actions should be obvious, using solid, high-contrast background colors.
• Secondary actions should be clear but not prominent, using outline styles or lower-contrast background colors.
• Tertiary actions should be discoverable but unobtrusive, often styled like links.
  A hierarchy-first approach to designing actions results in a less busy and more clearly communicative UI.

For destructive actions, being high-severity does not automatically mean a button should be big, red, and bold. If it’s not the primary action, a secondary or tertiary button treatment is often better. Combine this with a confirmation step where the destructive action is primary, and apply the bold, red styling there.

Layout and Spacing

This chapter focuses on optimizing layout and spacing for cleaner, more intuitive designs. It introduces the concept of starting with excessive white space and then refining it, and advocates for a systematic approach to spacing and sizing.

Start with Too Much White Space

One of the simplest ways to clean up a design is to give every element more room to breathe. The common mistake is to add white space only when something looks “cramped,” resulting in designs that have only the minimum necessary breathing room. To make something look truly great, more white space is usually needed.

A better approach is to start by giving elements way too much space, then gradually remove it until you are satisfied. While this might seem counterintuitive, what feels like “a little too much” when focused on an individual element often translates to “just enough” in the context of a complete UI. This deliberate over-spacing ensures elements are never cramped and always have sufficient visual separation.

Dense UIs Have Their Place

While interfaces with ample breathing room typically feel cleaner and simpler, there are situations where a more compact design makes sense. For example, in a dashboard where a large amount of information needs to be visible simultaneously, packing information together to fit on one screen might be justified, even if it makes the design feel busier. The crucial point is that this should be a deliberate decision, not the default. It is much easier to identify when white space needs to be removed than when it needs to be added.

Establish a Spacing and Sizing System

You should not nitpick between arbitrary pixel values like 120px and 125px for element sizes. Painfully trialing arbitrary values pixel by pixel will drastically slow down your workflow and lead to inconsistent, ugly designs. Instead, limit yourself to a constrained set of values defined in advance.

A linear scale won’t work for spacing and sizing. A naive “multiple of 4px” approach doesn’t help choose between 120px and 125px. For a system to be truly useful, it must account for relative differences between adjacent values. At the small end (e.g., icon size, button padding), a couple of pixels makes a huge difference (e.g., 12px to 16px is a 33% increase). At the large end (e.g., card width, hero vertical spacing), a couple of pixels is imperceptible (e.g., 500px to 520px is only a 4% difference). Ensure no two values in your scale are closer than about 25% relative difference.

To define the system, start with a sensible base value, like 16px, as it divides nicely and is a common default font size. Build a scale using factors and multiples of this value. Values at the small end should be packed closer, progressively spacing out as you move up the scale. An example of a practical scale might include values like 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px, 192px, 256px.

Using the system significantly speeds up design, especially when designing in the browser. When adding space or sizing an element, you grab a value from your scale. If it’s not quite enough, the next value is likely perfect. This systematic approach not only improves workflow but also introduces a subtle, consistent aesthetic that was previously absent, making designs cleaner with less effort.

You Don’t Have to Fill the Whole Screen

The common practice of designing for wide desktop displays (1200-1400px) often leads to filling all available space. However, just because you have the space doesn’t mean you need to use it. If your content only needs 600px, use 600px. Spreading elements out unnecessarily wide makes an interface harder to interpret, while extra space around the edges never hurts. This applies to individual sections too; not everything needs to be full-width just because the navigation is. Give each element only the space it needs, avoiding compromises to match other elements.

Shrink the Canvas

If you struggle to design a small interface on a large canvas, shrink the canvas. Designing something small is often easier when the constraints are real. For responsive web applications, try starting with a ~400px canvas and design the mobile layout first. Once satisfied, bring it to a larger screen and adjust only what felt like a compromise on smaller screens. You’ll likely find fewer changes are needed than anticipated.

Thinking in Columns

If a narrower width works best for a specific design element but feels unbalanced in a wider UI, consider splitting it into columns instead of simply making it wider. For example, a narrow form layout can have its supporting text broken out into a separate column. This approach makes the design feel more balanced and consistent without compromising the optimal width for the primary form.

Don’t Force It

Just as you shouldn’t feel obligated to fill the entire screen, you also shouldn’t cram everything into a small area unnecessarily. If a design needs a lot of space, use it. The key is to avoid feeling obligated to fill space you don’t need, or to constrain space when it would benefit the design to expand.

Grids Are Overrated

While a 12-column grid system can simplify layout decisions and provide a sense of order, outsourcing all layout decisions to a grid can do more harm than good. Fundamentally, a grid system assigns fluid, percentage-based widths.

Not all elements should be fluid. For example, a traditional sidebar layout might be given 25% width (3 columns) and the main content 75% (9 columns). However, when the screen resizes, the sidebar might become too wide, taking up space better used by main content, or shrink too much, causing awkward text wrapping. In such cases, it makes more sense to give the sidebar a fixed width optimized for its contents. The main content area can then flex to fill the remaining space, using its own internal grid. This principle applies within components too: don’t use percentages to size something unless you actually want it to scale.

Don’t Shrink an Element Until You Need To

When designing a login card, you might initially set its width to 6 columns (50%) with a 3-column offset on each side. On medium screens, if the card feels too narrow despite available space, you might switch it to 8 columns. The flaw is that due to fluid column widths, the card could be wider on medium screens than large ones.

Instead of grid-based sizing, give elements a max-width so they don’t become too large. Only force them to shrink when the screen size truly necessitates it. Don’t be a slave to the grid; give components the space they need and avoid compromises until absolutely necessary.

Relative Sizing Doesn’t Scale

It’s tempting to believe that all interface elements should scale proportionally, meaning if element A shrinks by 25%, element B should too. For example, defining a headline size as 2.5em (2.5 times the body copy font size) might seem efficient. However, relationships defined this way cannot remain static. A 2.5em headline might be perfect on desktop (45px for 18px body copy) but too large on small screens (35px for 14px body copy).

A better headline size for small screens might be 20px-24px, which is only 1.5-1.7 times the 14px body copy. This demonstrates there’s no fixed relationship, and no real benefit in defining headline size relative to body copy size across all screen sizes. As a general rule, elements that are large on large screens need to shrink faster than elements that are already small. The difference between small and large elements should be less extreme at smaller screen sizes.

This principle extends to relationships within elements too. A button with 16px font, 16px horizontal padding, and 12px vertical padding might seem to scale perfectly if padding is defined in em units. However, this often results in buttons that just look like zoomed versions. Instead, allow padding to become more generous at larger sizes and disproportionately tighter at smaller sizes. This makes large buttons feel genuinely larger and small buttons genuinely smaller, rather than just scaled. Let go of the idea that everything needs to scale proportionately; fine-tuning independently makes designing for multiple contexts much easier.

Avoid Ambiguous Spacing

When groups of elements are explicitly separated by borders or background colors, their belonging is clear. However, without visible separators, ambiguous spacing can make elements feel disconnected or hard to interpret. For example, if the margin below a form label is the same as the margin below its input, the form group won’t feel obviously “connected.” This forces the user to work harder to understand the UI and risks incorrect data entry.

The solution is to increase the space between each form group so it’s clear which label belongs to which input. This problem also appears in article design with insufficient space above section headings, or in bulleted lists where space between bullets matches line-height. Whenever relying on spacing to connect elements, always ensure there’s more space around the group than within it. Interfaces that are hard to understand always look worse.

Designing Text

This chapter provides comprehensive guidance on text design, from establishing a type scale to effectively using letter-spacing. It emphasizes readability and consistency as core principles.

Establish a Type Scale

Most interfaces use too many font sizes, leading to annoying inconsistencies and slowing down workflow. Choosing font sizes without a system is a bad idea.

A linear scale won’t work for type. Smaller jumps are useful at the bottom of the scale, but you don’t want to waste time deciding between 46px and 48px for a large headline. Modular scales, calculated using ratios (e.g., 4:5, 2:3, golden ratio), start with a base value (e.g., 16px) and apply the ratio repeatedly. However, modular scales often produce fractional values (e.g., 31.25px), which browsers handle inconsistently, making pixel rounding necessary. Also, they often don’t provide enough sizes for interface design; the jumps can be too limiting.

For interface design, a more practical approach is to hand-pick values. This avoids subpixel rounding errors and gives total control over which sizes exist. An example scale that works well and aligns with spacing systems might be: 12px, 14px, 16px, 18px, 20px, 24px, 30px, 36px, 48px, 64px. This scale is constrained enough to speed up decision-making but flexible enough to provide useful sizes.

Avoid em units for defining type scale sizes. Because em units are relative to the current font size, nested elements’ computed font sizes often fall outside your defined scale. For example, if 1.25em is 20px, then a nested .875em element becomes 17.5px, not a scale value. Stick to px or rem units to guarantee adherence to your system.

Use Good Fonts

Choosing from thousands of typefaces can be intimidating. While developing an eye for typeface details takes years, a few tricks help pick high-quality typefaces immediately.

Play it safe with a fairly neutral sans-serif like Helvetica for UI design. If unsure of your taste, rely on the system font stack (-apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue). It’s not ambitious but is familiar to users.

Ignore typefaces with less than five weights. Generally, fonts with more weights are crafted with greater care. Many font directories allow filtering by “number of styles” (weights + italics). Setting this to 10+ styles significantly narrows options, often eliminating 85% of choices.

Optimize for legibility. Fonts are designed for specific purposes. Headline fonts have tighter letter-spacing and shorter x-heights, while small-size fonts have wider letter-spacing and taller lowercase letters. Avoid condensed typefaces with short x-heights for main UI text.

Trust the wisdom of the crowd. Popular fonts are usually good fonts. Sorting by popularity on font directories helps limit choices, especially when picking non-neutral typefaces like serifs with personality.

Steal from people who care. Inspect well-designed sites and see what typefaces they use. Many great design teams have strong opinions on typography and choose excellent fonts you might not find otherwise. This helps develop your intuition, turning you into a “type snob” over time.

Keep Your Line Length in Check

When styling paragraphs, a common mistake is fitting text to the layout rather than optimizing for readability. This often results in lines that are too long, making text harder to read. For the best reading experience, paragraphs should fit between 45 and 75 characters per line. On the web, a width of 20-35em (relative to current font size) will generally achieve this range. Going slightly wider than 75 characters can sometimes work, but staying within the 45-75 range is safer for optimal readability.

When mixing paragraph text with images or other large components, you should still limit the paragraph width even if the overall content area needs to be wider for other elements. While it might seem counterintuitive to use different widths in the same content area, the result almost always looks more polished and professional. This ensures that the reading experience remains optimal regardless of surrounding content.

Baseline, Not Center

When mixing multiple font sizes on a single line to create hierarchy (e.g., a large title and smaller actions in a card), your instinct might be to vertically center the text for balance. While this might not look obviously bad with ample space, the awkward alignment becomes more noticeable when text is close together.

A better approach is to align mixed font sizes by their baseline, the imaginary line letters rest on. Aligning by baseline leverages a natural alignment reference that your eyes already perceive. This results in a simpler, cleaner look compared to centering, which often offsets the baselines and creates visual disharmony.

Line-Height Is Proportional

The advice that a line-height of about 1.5 is good for readability is a starting point, but choosing the right line-height is more complex and depends on context.

Accounting for line length: Line spacing helps readers find the next line easily. If lines are too tightly spaced, it’s easy to lose your place, especially with long lines. The further your eyes must jump horizontally, the harder it is to track. Therefore, line-height and paragraph width should be proportional. Narrow content can use a shorter line-height like 1.5, but wide content might need a line-height as tall as 2.

Accounting for font size: Font size also significantly impacts line-height needs. For small text, extra line spacing is crucial for readability as it helps the eyes track lines. However, for larger text, like headlines, less help is needed. This means for large headline text, a line-height of 1 is perfectly fine. Line-height and font size are inversely proportional: use a taller line-height for small text and a shorter line-height for large text.

Not Every Link Needs a Color

When a link is embedded within a block of non-link text, it’s crucial for it to stand out and appear clickable. However, in interfaces where almost everything is a link, using a treatment designed to make links “pop” in paragraph text can be overbearing and visually noisy.

Instead, for most links in an interface, emphasize them in a more subtle way. This can be achieved by simply using a heavier font weight or a darker color. Some links, particularly those that are ancillary and not part of a user’s main path through the application, might not even need default emphasis. For these, consider adding an underline or changing the color only on hover. This makes them discoverable to users who try, without competing for attention with more important actions on the page.

Align with Readability in Mind

In general, text should be aligned to match the direction of the language it’s written in. For English, this means the vast majority of text should be left-aligned. Other alignment options have their place but must be used effectively.

Don’t center long-form text. Center-alignment can look great for headlines or short, independent blocks of text (two or three lines at most). However, if text is longer than this, it will almost always look better left-aligned. If you have centered text blocks and one is too long, the easiest fix is to rewrite the content to make it shorter. This not only resolves the alignment issue but also makes the design more consistent.

Right-align numbers in tables. When the decimal points in a list of numbers are consistently aligned, they are much easier to compare at a glance. This improves scannability and comprehension for numerical data.

Hyphenate justified text. Justified text can look good in print or for a formal web look, but without special care, it often creates awkward gaps between words. To avoid this, always enable hyphenation when justifying text. Justified text works best for mimicking a print aesthetic, such as in online magazines or newspapers, though left-aligned text remains a strong alternative.

Use Letter-Spacing Effectively

While much effort goes into getting text weight, color, and line-height right, letter-spacing is often overlooked. As a general rule, trust the typeface designer and leave letter-spacing alone. However, there are two common situations where adjusting it can improve designs.

Tightening headlines: Font families like Open Sans are designed for legibility at small sizes, so their built-in letter-spacing is wide. If using such a family for headlines or titles, decreasing the letter-spacing can mimic the condensed look of purpose-built headline fonts like Oswald. Avoid trying to make headline fonts work at small sizes by increasing letter spacing; they rarely look good.

Improving all-caps legibility: Default letter-spacing is optimized for “sentence case” text, which has visual variety from ascenders and descenders. All-caps text lacks this diversity, as every letter is the same height, making it harder to read due to fewer distinguishing characteristics. For this reason, it often makes sense to increase the letter-spacing of all-caps text to improve readability. This adds necessary visual separation between uniform characters.

Working with Color

This chapter delves into effective color management, advocating for HSL over Hex, explaining the need for a comprehensive color palette, and offering nuanced advice on saturation, perceived brightness, and accessibility.

Ditch Hex for HSL

Hex and RGB are common color formats on the web, but they are not the most useful. Colors that are visually similar can look completely different in Hex or RGB code. HSL (Hue, Saturation, Lightness) solves this by representing colors using attributes the human eye intuitively perceives.

• Hue is a color’s position on the color wheel, measured in degrees (0° red, 120° green, 240° blue). It allows us to identify colors as “blue” even if they vary slightly.
• Saturation indicates how colorful or vivid a color is. 0% saturation is grey (no color), and 100% saturation is vibrant. Without saturation, hue is irrelevant.
• Lightness measures how close a color is to black or white. 0% is pure black, 100% is pure white, and 50% is a pure color at the given hue.

Don’t confuse HSL with HSB (Hue, Saturation, Brightness). Lightness in HSL is different from brightness in HSB. In HSB, 0% brightness is always black, but 100% brightness is only white when saturation is 0%. At 100% saturation, 100% brightness in HSB is equivalent to 100% saturation and 50% lightness in HSL. While HSB is more common in design software, browsers understand HSL, making it the preferred choice for web design.

You Need More Colors Than You Think

Relying on a simple color palette generator that provides five “perfect” colors is extremely seductive but not very useful for building real interfaces. You cannot build anything substantial with just five hex codes; you need a much more comprehensive set of colors.

A good color palette breaks down into three categories:

• Greys: Text, backgrounds, panels, form controls—almost everything in an interface uses grey. You need more greys than you think, typically 8-10 shades, to avoid compromises. Start with a really dark grey (true black often looks unnatural) and increment steadily to white.
• Primary color(s): Most sites need one or two primary colors for actions, active navigation, etc. These define the site’s overall look. You need a variety (5-10) of lighter and darker shades. Ultra-light shades work for tinted backgrounds (e.g., alerts), while darker shades are great for text.
• Accent colors: These are used for communicating different things to the user. You might use a vibrant color (yellow, pink, teal) to highlight new features, or semantic colors like red for destructive actions, yellow for warnings, or green for positive trends. Multiple shades are needed for these too, even if used sparingly. For distinguishing similar elements (graphs, calendars, tags), you might need even more accent colors.

In total, a complex UI might require as many as ten different colors, each with 5-10 shades.

Define Your Shades Up Front

When creating lighter or darker variations of a color, avoid using CSS preprocessor functions like “lighten” or “darken” on the fly. This leads to numerous slightly different blues that look identical. Instead, define a fixed set of shades upfront that you can choose from.

To put together a palette:

1. Choose the base color first: This is the middle color from which lighter and darker shades are derived. For primary and accent colors, pick a shade that works well as a button background. There are no strict rules like “start at 50% lightness”; rely on your eyes as every color behaves differently.
2. Finding the edges: Next, pick your darkest and lightest shades. Consider their intended use: darkest for text, lightest for subtle background tints (e.g., an alert component combines both). Start with a color matching the base hue, then adjust saturation and lightness.
3. Filling in the gaps: With base, darkest, and lightest shades (e.g., 900, 500, 100), fill in the remaining gaps. Nine shades is a good number for balance. Start with shades 700 and 300, aiming for a perfect compromise between their neighbors. Then fill 800, 600, 400, and 200. This creates a balanced set of options without feeling limiting.

For greys, the base color is less critical, but the process is similar: define darkest (for text) and lightest (for subtle backgrounds), then fill the gaps.

It’s not a science: While systematic, don’t rely purely on math. A systematic approach helps, but don’t be afraid to make small tweaks to saturation or lightness once you see colors in your designs. Trust your eyes, not the numbers. Be diligent about limiting your palette; otherwise, you might as well have no color system at all.

Don’t Let Lightness Kill Your Saturation

In the HSL color space, as a color approaches 0% (black) or 100% (white) lightness, the impact of saturation weakens. The same saturation value appears less colorful at 90% lightness than at 50% lightness. To prevent lighter and darker shades from looking washed out, you need to increase the saturation as the lightness moves further away from 50%. This subtle detail significantly impacts the vibrancy of large UI sections.

Use perceived brightness to your advantage: Different hues have inherent perceived brightness. For example, yellow appears lighter than blue, even if they have the same HSL lightness. This is due to how the human eye perceives color. Perceived brightness can be calculated from RGB components. Understanding this allows for a powerful technique: changing brightness by rotating hue.

Normally, you adjust lightness to make a color lighter or darker, but this often reduces intensity, making the color closer to white or black. Since hues have different perceived brightness, you can make a color lighter by rotating its hue towards a brighter hue (60°, 180°, or 300° – yellow, cyan, magenta). Conversely, make a color darker by rotating its hue towards a darker hue (0°, 120°, or 240° – red, green, blue). This is useful for light colors like yellow; rotating towards orange as lightness decreases makes darker shades warm and rich instead of dull brown. You can combine hue rotation with lightness adjustment. This technique changes brightness without affecting intensity, but use it in small doses (no more than 20-30° rotation) to avoid the color looking entirely different.

Greys Don’t Have to Be Grey

By definition, true grey has 0% saturation, meaning no actual color. However, many colors we perceive as grey are actually quite saturated. This saturation gives some greys a cool feel and others a warm feel.

Color temperature: Similar to light bulbs (warm white vs. cool white), saturating greys in a UI can influence temperature.

• To make greys feel cool, saturate them with a bit of blue.
• To give greys a warmer feel, saturate them with a bit of yellow or orange.

To maintain consistency, increase the saturation for lighter and darker shades. If not, these shades will appear washed out compared to greys closer to 50% lightness. The degree of saturation is up to you: a little for a slight temperature tip, or more for a strong lean in one direction.

Accessible Doesn’t Have to Mean Ugly

To ensure accessibility, Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for normal text (under ~18px) and at least 3:1 for larger text. This is easy for dark text on light backgrounds but tricky with color.

Flipping the contrast: When using white text on a colored background, the color often needs to be surprisingly dark to meet the 4.5:1 ratio. This can create hierarchy issues, as dark backgrounds grab too much attention. The solution is to flip the contrast: use dark colored text on a light colored background. The color still supports the text but is less intrusive and doesn’t interfere with other page actions.

Rotating the hue: Colored text on a colored background is even harder. If you simply adjust lightness and saturation of the background color for secondary text in a dark panel, it’s hard to meet contrast without getting too close to pure white, making it indistinguishable from primary text. Since some colors are inherently brighter, rotate the hue towards a brighter color (cyan, magenta, or yellow) to increase contrast without losing color or getting too close to white. This makes text accessible while keeping it colorful.

Don’t Rely on Color Alone

Color is fantastic for enhancing information, but never rely on it solely, as users with color blindness will struggle to interpret your UI. For example, metric cards using only red/green to indicate better/worse performance are inaccessible to red-green colorblind users. An easy fix is to also communicate information in another way, like adding icons (e.g., up/down arrows).

For graphs where each trend line has a different color, rely on contrast instead of completely different colors. It’s much easier for colorblind individuals to distinguish between light and dark variations than between distinct hues. Always use color to support something your design is already saying; never use it as the only means of communication.

Creating Depth

This chapter explores various techniques for creating a sense of depth in UI design, from emulating light sources and using shadows to conveying elevation, even in flat designs, and leveraging overlapping elements.

Emulate a Light Source

Some UI elements appear raised, while others seem inset. This effect is achieved by understanding one fundamental rule: light comes from above. Observing how light interacts with real-world objects, like door panels, reveals that top edges facing upwards are lighter, and bottom edges angled away are darker. This visual cue informs our perception of raised or inset forms. To create depth in designs, mimic how a light source would interact with the element’s shape.

Simulating Light in a User Interface

To make an element appear raised or inset, first define its desired profile, then simulate light interaction.

Raised elements: For a button to appear raised with flat top/bottom edges, only the top edge would be visible from a slight downward view. Make this top edge slightly lighter than the button’s face using a top border or an inset box shadow with a slight vertical offset. Hand-picking the lighter color is better than using semi-transparent white, which can desaturate the color. Next, account for the shadow cast below the element by adding a small dark box shadow with a slight vertical offset, ensuring the shadow appears only below the element. Keep the blur radius tight; these shadows should have sharp edges, like real-world object shadows.

Inset elements: For a “well” component recessed into the page, only the bottom lip would be visible from a slight downward view. Give this bottom edge a slightly lighter color using a bottom border or inset shadow with a negative vertical offset. The area above the well should block light from its very top, so add a small dark inset box shadow with a slight positive vertical offset to prevent it from poking through at the bottom. This treatment also works for text inputs and checkboxes.

Don’t get carried away: While simulating light can be fun, over-tinkering can lead to busy and unclear interfaces. Borrowing visual cues adds depth, but there’s no need for photo-realism.

Use Shadows to Convey Elevation

Shadows are more than just flashy effects; they allow you to position elements on a virtual z-axis, creating a meaningful sense of depth. Small shadows with a tight blur radius make an element feel slightly raised, while larger shadows with a higher blur radius make it feel much closer to the user. The closer an element appears, the more it will attract focus.

• A smaller shadow is suitable for buttons, making them noticeable without dominating the page.
• Medium shadows are useful for dropdowns, which need to sit slightly above the UI.
• Large shadows are excellent for modal dialogs, where you want to capture the user’s full attention.

Establishing an elevation system: Like color and typography, defining a fixed set of shadows (around five options) speeds workflow and ensures consistency. Start by defining the smallest and largest shadows, then fill the middle with linearly increasing sizes.

Combining shadows with interaction: Shadows are also great for providing visual cues during user interaction. For example, adding a shadow to a draggable list item when clicked makes it pop forward, indicating it can be dragged. Conversely, making a button feel pressed into the page when clicked can be achieved by switching to a smaller shadow or removing it altogether. Using shadows meaningfully like this helps determine the appropriate shadow based on the element’s intended z-axis position.

Shadows Can Have Two Parts

Inspecting well-designed shadows often reveals they use two shadows, each serving a specific purpose. This method provides more control than a single shadow.

The first shadow is larger and softer, with a considerable vertical offset and large blur radius. This simulates the shadow cast behind an object by a direct light source.

The second shadow is tighter and darker, with less vertical offset and a smaller blur radius. This simulates the shadowed area underneath an object where ambient light struggles to reach.

Using two shadows allows you to keep the larger, direct-light shadow subtle while making the shadow closer to the element’s edges nice and defined.

Accounting for elevation: As an object moves further from a surface, the small, dark ambient light shadow gradually disappears. Therefore, when using this two-shadow technique, make the second shadow more subtle for elements representing higher elevation. It should be distinct for the lowest elevation but almost (or completely) invisible at the highest elevation.

Even Flat Designs Can Have Depth

When people refer to “flat design,” they usually mean design without shadows, gradients, or real-world light effects. However, the most effective flat designs still convey depth, just in different ways.

Creating depth with color: Generally, lighter objects feel closer to us, and darker objects feel further away, especially with shades of the same color. Make an element lighter than the background to make it feel raised, or darker to make it feel inset like a well. Color is another tool for conveying distance, even in non-flat designs.

Using solid shadows: Another way to communicate depth in a flat design is to use short, vertically offset shadows with no blur radius. This creates a subtle “pop” effect for cards or buttons without sacrificing the flat aesthetic.

Overlap Elements to Create Layers

One of the most effective ways to create depth is to overlap different elements to make a design feel like it has multiple layers. For example, instead of containing a card entirely within another element, offset it so it crosses the transition between two different backgrounds. You can also make an element taller than its parent so it overlaps on both sides. Overlapping elements can add depth to smaller components too, such as controls on a carousel.

Overlapping images can also work well, but without special consideration, they can clash. A simple trick to avoid this is to give the images an “invisible border” that matches the background color. This creates a slight gap between images, maintaining the appearance of layers without ugly clashing.

Working with Images

This chapter provides essential guidelines for effectively incorporating images into UI designs, focusing on quality, consistent text contrast, intended sizing, and handling user-uploaded content.

Use Good Photos

Bad photos will ruin a design, even if everything else looks great. If your design requires photography and you’re not a talented photographer, you have two options:

1. Hire a professional photographer: For very specific photos, entrust a professional. Great photography involves skills like lighting, composition, and color that take years to develop.
2. Use high-quality stock photography: For more generic needs, there are many resources for purchasing great stock photos, or free sites like Unsplash.

Whatever you do, don’t design using placeholder images with the expectation of replacing them with smartphone photos later. This approach rarely works because the quality and aesthetic will not match professional standards.

Text Needs Consistent Contrast

Trying to place a headline on a hero image often results in text that’s hard to read, regardless of color. The problem isn’t the text; it’s the image’s inconsistent dynamics. Photos can have very light and very dark areas, causing white text to get lost in light areas and dark text to get lost in dark areas. To solve this, you must reduce the image’s dynamics to create consistent contrast between text and background.

Add an overlay: A common solution is to add a semi-transparent overlay to the background image. A black overlay will tone down light areas and help light text stand out, while a white overlay brightens dark areas for dark text.

Lower the image contrast: Overlays affect the entire image. For more control, lower the contrast of the image itself. This changes the overall lightness/darkness, so adjust brightness to compensate.

Colorize the image: To help text stand out and integrate with brand colors, colorize the image with a single hue. This can be done by lowering contrast, desaturating, and then adding a solid fill with a “multiply” blend mode.

Add a text shadow: To preserve more of the image’s dynamics, a subtle text shadow can increase contrast only where needed. Use a large blur radius and no offset to create a “glow” effect. Combine this with slightly reduced image contrast for best results.

Everything Has an Intended Size

Everyone knows that scaling bitmap images larger than their original size makes them “fuzzy.” However, scaling issues extend beyond bitmaps.

Don’t scale up icons: While SVGs are vector images and don’t degrade in quality when scaled, icons drawn at 16-24px will look unprofessional and “chunky” when blown up to 3x or 4x their intended size. They lack detail for larger display. If only small icons are available, enclose them inside another shape with a background color. This keeps the icon closer to its intended size while filling larger space.

Don’t scale down screenshots: Shrinking a full-size app screenshot by 70% to fit a design will cram too much detail into too little space. A 16px font in the app becomes a 4px font in the screenshot, making it unreadable. To include a detailed screenshot, take it at a smaller screen size (e.g., tablet layout) and reserve ample space for it. Alternatively, take a partial screenshot to display it without significant scaling. If a whole-app screenshot must fit a tight space, draw a simplified version of the UI with details removed and small text replaced with simple lines. This communicates the big picture without forcing users to squint.

Don’t scale down icons, either: Icons designed for larger sizes look choppy and fuzzy when scaled down. This is most evident with favicons. Shrinking a 128px logo to favicon size (16px) results in a blurry mess. A better approach is to redraw a super simplified version of the logo at the target size, controlling the compromises instead of leaving it to the browser.

Beware User-Uploaded Content

When relying on user-uploaded images, you lose the luxury of fine-tuning contrast, adjusting colors, or cropping for perfection. While you’re somewhat at their mercy, you can take steps to prevent their content from undermining your design.

Control the shape and size: Displaying user-uploaded images at their intrinsic aspect ratio can disrupt a layout, especially with many images. Instead, center their images inside fixed containers, cropping out anything that doesn’t fit. This is easily done with CSS by making the image a background image and setting background-size to cover.

Prevent background bleed: When a user’s image has a background color similar to your UI’s background, the image can blend in and lose its shape. Instead of a border, try a subtle inner box shadow. Borders often clash with image colors, while the shadow is barely noticeable. If an “inset” look from a box shadow is undesirable, a semi-transparent inner border also works well.

Finishing Touches

This chapter explores advanced design techniques for adding polish and flair to interfaces, moving beyond fundamental principles to subtle enhancements that elevate the overall user experience.

Supercharge the Defaults

You don’t always need to add new elements to a design to add flair; often, you can liven up a page by “supercharging” what’s already there.

• For bulleted lists, replace default bullets with icons. Checkmarks and arrows are generic choices, but specific icons (e.g., a padlock for security features) can add context.
• For testimonials, “promote” quotes into visual elements by increasing their size and changing their color.
• Links are great candidates for special styling. This can be as simple as changing color and font weight, or as elaborate as a thick, colorful custom underline that partially overlaps the text.
• For forms, using custom checkboxes and radio buttons is an easy way to add color. Simply using one of your brand colors for selected states instead of browser defaults can transform a boring element into something polished and well-designed.

These small, thoughtful changes to default elements can significantly enhance the visual appeal and professionalism of your UI without requiring extensive graphic design talent.

Add Color with Accent Borders

If you lack graphic design talent for beautiful photography or illustrations, a simple yet effective trick to add visual flair is to add colorful accent borders to parts of your interface that feel bland.

This technique can be applied in various ways:

• Across the top of a card.
• To highlight active navigation items.
• Along the side of an alert message.
• As a short accent underneath a headline.
• Even across the top of your entire layout.

Adding a colored rectangle requires no graphic design talent but can significantly contribute to making something feel more “designed” and visually appealing.

Decorate Your Backgrounds

Even with excellent hierarchy, spacing, and typography, a design can sometimes feel plain. A great way to break up monotony without drastically altering the design is to add excitement to a few backgrounds.

Change the background color: Simply changing the background color can add excitement. This works well for emphasizing individual panels or distinguishing entire page sections. For a more energetic look, use a slight gradient, ideally with two hues no more than 30° apart.

Use a repeating pattern: Add a subtle repeatable pattern, like those from Hero Patterns. You don’t have to repeat it across the entire background; a pattern designed to repeat along a single edge can also look great. Keep the contrast between the background and pattern low to ensure readability.

Add a simple shape or illustration: Instead of decorating the entire background, include individual graphics in specific positions. Simple geometric shapes or small chunks of a repeatable pattern work well. More complex elements, like a simplified world map, can also be effective. As with full background patterns, keep the contrast low to avoid interfering with content.

Don’t Overlook Empty States

When designing a new app feature, it’s easy to focus on crafting perfect sample data and a beautiful, electrifying screen. However, if your design depends on user-generated content, the empty state should be a priority, not an afterthought.

When an excited user clicks a new navigation item and sees a blank screen, it’s a missed opportunity. Instead, incorporate an image or illustration to grab attention, and emphasize the call-to-action to encourage the user to take the next step. If there’s supporting UI like tabs or filters, consider hiding them entirely in the empty state; there’s no point presenting actions that do nothing until content is created. Empty states are often a user’s first interaction with a new product or feature. Use them as an opportunity to be interesting and exciting, rather than plain and boring.

Use Fewer Borders

When you need to create separation between two elements, resist immediately reaching for a border. While borders distinguish elements, using too many can make your design busy and cluttered.

Use a box shadow: Box shadows can outline an element like a border but are more subtle and less distracting. This works best when the element’s color differs from the background.

Use two different background colors: Giving adjacent elements slightly different background colors is often sufficient to create distinction. If you’re already using different background colors and a border, try removing the border; you might not need it.

Add extra spacing: The simplest way to create separation is to increase the space between elements. Spacing things further apart effectively distinguishes groups of elements without introducing any new UI.

Think Outside the Box

Many people have preconceived notions about how certain components should look, but these beliefs can limit design. Just because we’re conditioned to expect a particular design doesn’t mean it’s the only way.

For example, a dropdown menu is typically envisioned as a white box with a shadow and a list of links. However, a dropdown is just a floating box; you can do anything you want with it. Break it into sections, use multiple columns, add supporting text, or include colorful icons. Do something fun with it!

This applies to tables too. Instead of columns with single data points, if a column doesn’t need to be sortable, combine it with a related column and introduce interesting hierarchy. Table content doesn’t have to be plain text either; add images or color to enrich existing data.

Even simple elements like radio buttons, often seen as boring stacks of labels with circles, can be reimagined. If a set of radio buttons is important to the UI, try selectable cards instead.

Don’t let existing beliefs constrain your designs. While constraints are powerful, a bit of freedom is sometimes exactly what’s needed to take an interface to the next level.

Leveling Up

This final section offers advice on how to continue honing UI design skills after finishing the book, emphasizing continuous learning through observation and practical recreation.

Look for Decisions You Wouldn’t Have Made

To continue honing your skills, whenever you encounter a design you admire, ask yourself: “Did the designer do anything here that I never would have thought to do?” This could be:

• The way they inverted the background color on a datepicker.
• The way they positioned a button within a text input instead of outside.
• Something as simple as using two different font colors for a headline.

Paying attention to these unintuitive decisions is an excellent way to discover new ideas and expand your design toolkit, which you can then apply to your own projects.

Rebuild Your Favorite Interfaces

The absolute best way to notice the subtle details that make a design truly polished is to recreate that design from scratch, without peeking at the developer tools. As you attempt to replicate the design and inevitably encounter discrepancies between your version and the original, you’ll discover crucial tricks on your own. This might include realizing the need to reduce line height for headings, add letter-spacing to uppercase text, or combine multiple shadows. By continually studying inspiring work with a careful eye and hands-on recreation, you will pick up design tricks for years to come.

Key Takeaways: What You Need to Remember

Core Insights from Refactoring UI

• Start with functionality, not layout, to guide design decisions organically.
• Delay details like color and specific fonts until later stages, focusing on structure first.
• Limit design choices by defining comprehensive systems for spacing, sizing, color, and typography.
• Establish clear visual hierarchy by de-emphasizing secondary information and highlighting primary elements.
• Balance visual weight and contrast across all UI elements, including icons and borders.
• Prioritize readability in text design through appropriate line length, alignment, and letter-spacing.
• Utilize HSL for color management to intuitively control hue, saturation, and lightness.
• Build comprehensive color palettes with multiple shades of greys, primaries, and accents.
• Create depth by emulating light sources, using shadows to convey elevation, and overlapping elements.
• Ensure images are high quality and text on images has consistent, accessible contrast.
• Supercharge default UI elements and decorate backgrounds to add visual flair.
• Design empty states as a critical part of the user experience, not an afterthought.
• Reduce reliance on borders by using spacing, background colors, and subtle shadows for separation.
• Challenge preconceived notions about component design to unlock creative solutions.

Immediate Actions to Take Today

• Define a spacing and sizing system using a non-linear scale (e.g., 4px, 8px, 12px, 16px, 24px, etc.) to streamline layout decisions.
• Create a hand-picked type scale for your project, avoiding em units for font sizes to ensure consistency.
• Convert your color palette to HSL and define 8-10 shades for each primary, accent, and grey color.
• Review your current UI for ambiguous spacing and increase the space between groups of related elements.
• Identify one key UI element (e.g., a button or card) and apply the two-part shadow technique to add depth.
• Choose a consistent border radius for your UI elements and apply it uniformly.
• Examine your primary actions and ensure they use solid, high-contrast background colors.
• Select a high-quality font for your UI, ensuring it has at least five weights for flexibility.

Questions for Personal Application

• What is the single most important feature of my current project, and how can I design that first, before worrying about the overall layout?
• Am I currently relying too heavily on font size alone for hierarchy? How can I use font weight and color more effectively to de-emphasize secondary content?
• How many different font sizes, margins, or paddings am I currently using? Can I consolidate these into a more constrained system?
• Are there any instances of grey text on colored backgrounds in my design that could be improved by hand-picking a new color with the same hue?
• How can I incorporate subtle accent borders or background decorations to add visual flair without cluttering my interface?
• What are the empty states in my application, and how can I make them more engaging and action-oriented for users?
• Where can I reduce the number of borders in my UI by using alternative separation methods like background colors or increased spacing?
• What are some preconceived notions I have about how a specific UI component (e.g., a table or dropdown) should look, and how can I challenge that to create a more unique design?