Refactoring UI PDF

Adam Wathan

Scan to Download
 Refactoring UI
Master UI Design Tactics for Developers Without a
Designer's Help.
Written by Bookey
Check more about Refactoring UI Summary
Listen Refactoring UI Audiobook

Scan to Download
About the book
Unleash your creativity and transform your ideas into stunning
user interfaces, all without needing a designer. In this book,
you'll discover practical strategies tailored for developers to
craft visually appealing designs. With actionable insights and
accessible techniques, you'll learn how to elevate your UI
design skills and bring your projects to life.

Scan to Download
About the author
Adam Wathan is a prominent designer and developer known
for his expertise in creating user interfaces that merge aesthetic
appeal with functional design. With a background in web
development and a passion for enhancing the user experience,
Adam has dedicated his career to empowering others to build
visually compelling and intuitive applications. He co-created
the acclaimed "Refactoring UI" alongside Steve Schoger, a
resource that provides practical insights and design principles
tailored for developers looking to improve their design skills.
Through his work, Adam has garnered a significant following
in the tech community, sharing his knowledge through
workshops, online courses, and engaging content that bridges
the gap between coding and design.

Scan to Download
Summary Content List
Chapter 1 : Starting from Scratch

Chapter 2 : Hierarchy is Everything

Chapter 3 : Layout and Spacing

Chapter 4 : Designing Text

Chapter 5 : Working with Color

Chapter 6 : Creating Depth

Chapter 7 : Working with Images

Chapter 8 : Finishing Touches

Chapter 9 : Leveling Up

Scan to Download
Chapter 1 Summary : Starting from
Scratch

Starting from Scratch

Start with a Feature, Not a Layout

When designing a new app, focus on features rather than the

overall layout. Starting with the navigation or other structural
elements can lead to frustration. Identify a specific
functionality, like searching for flights, and base your design
around that.

Detail Comes Later

Scan to Download
In the early design stages, avoid fixating on minor details
like typography or colors. Consider using techniques like
sketching with a Sharpie to explore layouts without getting
bogged down in specifics.

Hold the Color

Delay introducing color to emphasize layout through contrast

and spacing. Designing in grayscale helps establish a clear
hierarchy that can be enriched with color later.

Don’t Over-Invest

Utilize low-fidelity sketches for quick idea exploration. They

should be viewed as disposable, allowing for fast
decision-making without falling into the trap of perfecting
every detail too soon.

Work in Cycles

Instead of designing every feature upfront, adopt a

cycle-based approach. Create a simple version of the next
feature, implement it, and iterate based on real usage and

Scan to Download
feedback. This reduces complexity and fosters improvement
through real-world testing.

Be a Pessimist

Design only what you’re prepared to build. Avoid adding

features that complicate the implementation process and
focus on delivering a functional core first.

Choose a Personality

Every design conveys a personality influenced by

typography, color, border radius, and language. Select
elements that fit your intended message, whether serious or
playful.

Limit Your Choices

Narrow down options to avoid decision paralysis. Define

systems for colors, fonts, sizes, and other design elements at
the start to streamline future decisions. Doing so saves time
and reduces fatigue.

Systematize Everything

Scan to Download
Create systems for various design aspects to enhance
efficiency and consistency. Establish guidelines for font
sizes, colors, margins, and other design decisions to simplify
the process and promote rapid iteration.
By following these principles, designers can achieve clearer,
more functional interfaces while minimizing frustration and
decision fatigue.

Scan to Download
Example
Key Point:Start with a feature to create effective
designs
Example:Imagine you’re designing a travel app; instead
of immediately mapping out the layout, begin with a
key feature like the flight search function. By focusing
on how users will input their desired travel dates and
destinations, you can ensure that the interface supports
that feature intuitively. As you develop this
functionality, consider how it interacts with the rest of
the app, adjusting the layout organically based on user
needs rather than forcing a predefined structure on your
design.

Scan to Download
 Chapter 2 Summary : Hierarchy is
Everything

Section Key Points

Hierarchy is Everything

Visual Hierarchy Visual hierarchy conveys importance of elements; de-emphasizing less important info enhances
clarity.

Size and Color Avoid using sole font size for hierarchy; employ font weight and color. Use a limited color
palette and contrast.

Emphasizing Through Reduce the emphasis on competing elements to make important elements stand out; allow
De-emphasis background visibility for clarity.

Handling Labels Avoid equalizing importance in labels; use context with values. Treat necessary labels as
secondary content.

Visual vs. Document Focus on visual hierarchy over element types; titles can be smaller for emphasis.
Hierarchy

Balancing Weight and Visual weight affects hierarchy; use contrast to balance elements' importance.
Contrast

Action Hierarchy Design actions based on hierarchy; primary actions should be prominent; manage destructive
actions with confirmation.

Hierarchy is Everything

Scan to Download
Visual Hierarchy

- Visual hierarchy is crucial for making interfaces feel

designed by showing the importance of elements relative to
each other.
- When competing elements lead to noise and chaos,
de-emphasizing less important information can enhance
clarity and appeal.

Size and Color

- Avoid relying solely on font size to convey hierarchy; use

font weight and color instead.
- Stick to a limited color palette (dark for primary, grey for
secondary, lighter grey for tertiary) and limit font weights to
two or three.
- Never use grey text on colored backgrounds—choose
contrasting colors that fit the hue of the background instead.

Emphasizing Through De-emphasis

- If important elements aren’t standing out, reduce the

emphasis on competing elements instead of increasing the

Scan to Download
prominent element’s emphasis.
- For component arrangement, allowing background to show
through can create a less cluttered interface.

Handling Labels

- Avoid naive label: value formats that equalize importance;

you can often infer meaning from the format itself.
- Combine value with context rather than using standalone
labels (e.g., "12 left in stock" instead of "In stock: 12").
- If labels are necessary, treat them as secondary content to
support the data, making them smaller and less contrasting.

Visual vs. Document Hierarchy

- Don’t let element types (like heading tags) dominate design

choices based on size; focus instead on the visual hierarchy.
- Titles can often be smaller than expected for better
emphasis on content, even if semantic usage is necessary.

Balancing Weight and Contrast

- Understand how visual weight affects hierarchy; use

contrast to balance heavier elements like icons and text.

Scan to Download
- Matching weight and contrast ensures UI elements
communicate their intended importance without confusion.

Action Hierarchy

- Design actions with a focus on hierarchy rather than just

semantics, ensuring primary actions are prominent while
secondary and tertiary actions are appropriately styled.
- Destructive actions don't need to dominate visually unless
they are the primary action on the page—confirmation steps
can help manage severity.

Scan to Download
Example
Key Point:Establishing a clear visual hierarchy is
fundamental to effective UI design.
Example:Imagine you're designing a dashboard for a
financial application; the balance overview should be
large, bold, and in a prominent shade of green to
instantly convey its importance. Below it, transaction
history could use lighter grey text, creating a clear
visual distinction—an approach that makes your users
immediately aware of their account health without
sifting through cluttered details. By purposefully
de-emphasizing less critical data through color and size
choices, you help guide the user's attention right where
it’s needed most, enhancing their experience and
understanding.

Scan to Download
Critical Thinking
Key Point:The significance of visual hierarchy in
interface design is overstated.
Critical Interpretation:While the author argues that
visual hierarchy is crucial for clarity and appeal, it is
essential to question whether the emphasis on hierarchy
may oversimplify the complexities of user perception.
Not all users respond uniformly to visual cues, as
individual preferences and cultural background can
affect how elements are interpreted. Research by
Jennifer McClain and colleagues supports the notion
that cognitive load influences users’ ability to
comprehend visual information (McClain et al., 2021).
Therefore, while the author's perspective provides
valuable guidelines, it may not universally apply to all
user experiences.

Scan to Download
Chapter 3 Summary : Layout and
Spacing

Layout and Spacing

Start with Too Much White Space

- Many designers add white space to make elements feel less

cramped, but this approach often leads to minimal breathing
room.
- A better strategy is to start with excessive white space and
remove it until achieving a pleasing balance. In a complete
UI context, what may seem excessive often results in a
visually appealing design.

Dense UIs Have Their Place

- While spacious layouts feel better in general, there are

instances, like dashboards, where compact designs are
necessary.
- Decisions about white space should be intentional rather

Scan to Download
than default.

Establish a Spacing and Sizing System

- Avoid obsessing over small pixel differences. Create a

defined set of values to simplify the design process.
- A linear scale approach is ineffective; the system should
account for the relative importance of values at both ends of
the scale.

Defining the System

- Start with a sensible base value (e.g., 16px) and build a

spacing scale with closely packed small values that
progressively space out.
- This structured approach facilitates quicker design
processes and promotes consistency in layouts.

You Don’t Have to Fill the Whole Screen

- Just because space is available doesn’t mean it should be

Install
filled. Bookey
Use only what isApp to Unlock
necessary to avoidFull Text and
clutter.
Audio with a smaller canvas
- For responsive designs, beginning
often leads to more effective layouts.

Scan to Download
Chapter 4 Summary : Designing Text

Designing Text

Establish a Type Scale

Most user interfaces feature an overwhelming variety of font

sizes, leading to inconsistencies and a sluggish workflow.
Establishing a type scale is vital for maintaining uniformity.

Choosing a Scale

A linear scale is ineffective for font sizes, particularly as

larger sizes require disproportionate increments. Instead,
consider using a modular scale based on ratios like 4:5 or the
golden ratio.

Modular Scales

Modular scales produce consistent sizes but can result in

fractional values which may cause rendering issues across
browsers. For most interface designs, hand-crafted scales are

Scan to Download
recommended to ensure the availability of desired sizes
without relying on mathematical routines.

Avoid em Units

Never use em units when defining font sizes as they are

relative. Stick to px or rem for consistent application across
your type scale.

Use Good Fonts

Adopt high-quality typefaces effortlessly by:

-
Playing it Safe
: Neutral sans-serifs such as Helvetica are reliable choices.
-
Ignoring Fonts with Limited Weights
: Choose typefaces with five or more weights for greater
versatility.
-
Optimizing for Legibility
: Utilize fonts designed for their intended size.
-
Trusting Popularity

Scan to Download
: Popular fonts are generally well-accepted.
-
Inspecting Other Sites
: Gain inspiration from established design teams.

Keep Your Line Length in Check

Aim for a line length between 45 and 75 characters for

optimal readability. If mixing elements, maintain paragraph
width limits for a polished look.

Baseline, Not Center

Align different font sizes by their baseline instead of

centering to achieve a cleaner aesthetic.

Line-Height is Proportional

Adjust line-height based on line length and font size—shorter

line heights for narrow content and greater spacing for larger
text enhances readability.

Not Every Link Needs a Color

Scan to Download
Use subtle treatments for lesser links to avoid overwhelming
the user interface.

Align with Readability in Mind

Default text alignment should be left-aligned. Right-align

numerical data for easier comparison and hyphenate justified
text to avoid awkward gaps.

Use Letter-Spacing Effectively

Generally, trust the typeface designer’s spacing, but consider

adjusting for specific cases:
-
Tighten Headlines
: Decrease letter-spacing for headline text.
-
Improve All-Caps Legibility
: Increase letter-spacing to enhance readability for all-caps
text.

Scan to Download
 Chapter 5 Summary : Working with
Color
Topic Description

Working with Color

Ditch Hex for HSL HSL (Hue, Saturation, Lightness) is more intuitive than hex/RGB. Components: hue (color type),
saturation (vividness), lightness (brightness).

HSL vs. HSB HSL differs from HSB: lightness does not equal brightness. HSL is preferred in web design due to
browser support.

You Need More Colors A basic palette is insufficient. A good palette includes: greys (8-10 shades), primary colors (1-2
Than You Think colors, 5-10 shades), accent colors (highlighting states, multiple shades).

Define Your Shades Establish a fixed set of shades before design. Start with a base color, define darkest/lightest colors,
Up Front and fill with 5-10 intermediate shades.

Greys Don't Have to Greys can be tinted warmer/cooler; adjust saturation for consistent color temperature across greys.
Be Grey

Accessible Doesn’t Follow contrast ratio guidelines (4.5:1 for normal text, 3:1 for larger text). Utilize dark text on light
Have to Mean Ugly backgrounds and brighter hues for colored text/backgrounds.

Don’t Rely on Color Use color as a supporting element, not the sole communication method for color-blind users.
Alone Incorporate icons and varying contrasts.

Working with Color

Ditch Hex for HSL

- HSL (Hue, Saturation, Lightness) is more intuitive for

representing colors compared to hex or RGB formats.
- Hue identifies the color type on the color wheel (e.g., red,
green, blue), saturation measures color vividness, and

Scan to Download
lightness indicates brightness or darkness.

HSL vs. HSB

- HSL differs from HSB (Hue, Saturation, Brightness):

lightness in HSL does not equal brightness in HSB.
- HSL is preferred for web design since browsers understand
it, while HSB is common in design software.

You Need More Colors Than You Think

- A basic color palette with only a few colors is insufficient

for effective design.
- A good palette should encompass:
-
Greys
: Required for text, backgrounds, and UI elements. Aim for
8-10 shades for flexibility.
-
Primary Colors
: One or two colors for primary actions with 5-10 shades for
variation.
-
Accent Colors

Scan to Download
: Additional colors for highlighting features or indicating
states (e.g., warnings or confirmations) with multiple shades.

Define Your Shades Up Front

- Avoid on-the-fly color generation to maintain consistency;

define a fixed set of shades upfront.
- Start with a base color, then establish darkest and lightest
colors based on their intended use-case (e.g., darker for text,
lighter for backgrounds).
- Fill in the gaps with intermediate shades (5-10 shades per
color is ideal).

Greys Don't Have to Be Grey

- Greys can be subtly tinted to feel warmer or cooler; this can

affect the UI's emotional impact.
- Adjust saturation for different shades to maintain consistent
color temperature across greys.

Accessible Doesn’t Have to Mean Ugly

- Adhere to contrast ratio guidelines for accessibility (4.5:1

for normal text, 3:1 for larger text).

Scan to Download
- Consider flipping the contrast: use dark text on light
backgrounds to remain visually appealing while meeting
accessibility standards.
- Enhance accessibility of colored text against colored
backgrounds by rotating hues to brighter colors.

Don’t Rely on Color Alone

- Use color as a supporting element to convey information

but not as the sole means of communication to accommodate
color-blind users.
- Implement icons or varying contrast in designs to
effectively communicate changes and distinctions.

Scan to Download
Critical Thinking
Key Point:The Preference for HSL over Hex and
RGB Colors
Critical Interpretation:The author argues strongly for the
use of HSL (Hue, Saturation, Lightness) as a more
intuitive format for color representation in design,
claiming it enhances the overall efficiency of web
development. However, this perspective, while valid in
its context, may overlook the fact that hex and RGB
formats are deeply ingrained in existing coding and
design practices, making a complete shift to HSL
impractical for some developers. For instance, according
to an article in Smashing Magazine, designers often
favor the formats that align best with their specific tools
and workflows, suggesting that recommending HSL as a
universal solution might not be inclusive of all
professional scenarios. Therefore, while HSL has its
advantages, readers should consider the diverse needs of
different design environments and be cautious of
viewing any single color format as superior.

Scan to Download
Chapter 6 Summary : Creating Depth

Creating Depth

Emulate a Light Source

Elements in interfaces can appear raised or inset based on

how light interacts with them. To create this effect,
understand that light comes from above. For raised elements,
the top edges should be lighter while the bottom edges are
darker. Conversely, inset elements will have darker tops due
to shadowing from the lip above them.

Simulating Light in a User Interface

To design raised elements like buttons, use a lighter top edge

to simulate light and a darker shadow beneath. For inset
elements, the top edge should receive light while also
incorporating a shadow above to maintain the recessed effect.

Use Shadows to Convey Elevation

Scan to Download
Shadows not only add aesthetic appeal but also create a sense
of depth. Small, tight shadows suggest slight elevation, while
larger, softer shadows indicate greater proximity to the user.
Establishing a consistent set of shadows enhances workflow.

Combining Shadows with Interaction

Utilizing shadows dynamically during user interactions helps

convey actions, such as making buttons appear pressed or
items elevated during drag-and-drop operations.

Shadows Can Have Two Parts

Using a dual-shadow strategy can enhance realism; a larger

shadow provides a soft depth effect while a tighter shadow
creates clarity around the object's edges. Adjust the visibility
of shadows based on the elevation of elements for better
control.

Even Flat Designs Can Have Depth

FlatInstall Bookey
design can App depth
still convey to Unlock
throughFull
colorText and
contrasts,
shadow use, and overlapping Audio
elements. Lighter colors appear
closer while darker shades create an inset effect. Employing

Scan to Download
Chapter 7 Summary : Working with
Images

Working with Images

Use Good Photos

- Bad photography can ruin a design. Hire a professional or

use high-quality stock photos. Avoid placeholder images.

Text Needs Consistent Contrast

- Dynamic images can make text hard to read.

-
Solution Options:

- Add a semi-transparent overlay.

- Lower the image contrast.
- Colorize the image using layers.
- Use a text shadow for subtle contrast enhancement.

Scan to Download
Everything Has an Intended Size

- Avoid scaling bitmap images larger than their original size.

-
For Icons:

- Don't scale up small icons significantly; instead, enclose

them in a shape.
-
For Screenshots:

- Don't scale down detailed screenshots; take them at a

smaller size instead or show partial screenshots.
-
For Icons:

- Avoid scaling down larger icons; create simplified

versions instead.

Beware User-Uploaded Content

- User images can disrupt design consistency.

-
Control Image Presentation:

Scan to Download
 - Display uploaded images in fixed containers to avoid
layout issues.
- Prevent background bleed by using subtle inner box
shadows instead of borders.

Scan to Download
Chapter 8 Summary : Finishing Touches

Finishing Touches

Supercharge the Defaults

Enhance existing design elements rather than adding new

ones. For example, replace standard bullets in lists with
relevant icons, and elevate testimonials by altering their size
and color. Style links distinctly by changing colors, font
weights, or applying unique underlines. Custom checkboxes
and radio buttons can bring a fresh perspective to forms.

Add Color with Accent Borders

If you lack graphic design skills, consider using colorful

accent borders to add visual interest to your UI. These can be
applied across cards, active navigation items, alert messages,
or headlines, helping to create a more polished look without
complex designs.

Decorate Your Backgrounds

Scan to Download
To break the monotony of a design, modify backgrounds by
changing colors, adding gradients, or introducing subtle
repeating patterns. Low-contrast patterns can enhance
readability, and individual graphics or geometric shapes can
enrich backgrounds without overwhelming the primary
content.

Don’t Overlook Empty States

Designing for features that rely on user-generated content

means paying special attention to empty states. Use engaging
visuals or illustrations and clear calls-to-action to guide users
toward generating content. Avoid clutter by hiding
unnecessary UI elements until the user has created content.

Use Fewer Borders

Instead of defaulting to borders for element separation,

explore alternatives like box shadows, different background
colors, or increased spacing. These can create distinction
subtly, reducing visual clutter.

Think Outside the Box

Scan to Download
Challenge conventional designs by innovating components
like dropdowns or tables. Consider alternative formats, such
as dynamic dropdown sections, images in tables, or
interactive cards instead of traditional radio buttons. Embrace
creativity to elevate design functionality and aesthetic appeal.

Scan to Download
Chapter 9 Summary : Leveling Up

Leveling Up

Continuing to Improve Your Design Skills

After engaging with this book, you should feel more

confident in crafting appealing designs independently.
However, the journey of learning does not end here. Below
are two effective methods to further enhance your design
abilities:

1. Analyze Unconventional Design Choices

Whenever you encounter an inspiring design, reflect on the

unconventional decisions made by the designer. Consider
aspects like background color inversions, button placements
within text inputs, or the use of contrasting font colors.
Observing these unique choices can lead to new ideas
InstalltoBookey
applicable your ownAppwork.to Unlock Full Text and
Audio
2. Recreate Favorite Interfaces

Scan to Download
Best Quotes from Refactoring UI by
Adam Wathan with Page Numbers
View on Bookey Website and Generate Beautiful Quote Images

Chapter 1 | Quotes From Pages 6-28

1.Start with a feature, not a layout
2.Detail comes later
3.Don’t design too much
4.Be a pessimist
5.Choose a personality
6.Limit your choices
Chapter 2 | Quotes From Pages 29-54
1.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”.
2.Instead of leaving all of the heavy lifting to font size alone,
try using font weight or color to do the same job.
3.When you run into situations like this, instead of trying to
further emphasize the element you want to draw attention

Scan to Download
 to, figure out how you can de-emphasize the elements that
are competing with it.
4.When presenting data to the user (especially data from the
database), it’s easy to fall into the trap of displaying it
using a naive label: value format.
5.Pick elements for semantic purposes and style them
however you need to create the best visual hierarchy.
Chapter 3 | Quotes From Pages 55-86
1.One of the easiest ways to clean up a design is to
simply give every element a little more room to
breathe.
2.A better approach is to start by giving something way too
much space, then remove it until you’re happy with the
result.
3.Just because you have the space, doesn’t mean you need to
use it.
4.Don’t be a slave to the grid — give your components the
space they need and don’t make any compromises until it’s
actually necessary.

Scan to Download
5.Let go of the idea that everything needs to scale
proportionately — giving yourself the freedom to fine-tune
things independently makes it a hell of a lot easier to
design for multiple contexts.

Scan to Download
Chapter 4 | Quotes From Pages 87-117
1.Most interfaces use way too many font sizes.
2.Choosing font sizes without a system is a bad idea for two
reasons: 1. It leads to annoying inconsistencies in your
designs. 2. It slows down your workflow.
3.A more practical approach is to simply pick values by
hand.
4.When you’re mixing font sizes like this, your instinct
might be to vertically center the text for balance... A better
approach is to align mixed font sizes by their baseline.
5.Line-height is proportional... Not every link needs a color.
6.If a font is popular, it’s probably a good font.
Chapter 5 | Quotes From Pages 118-148
1.Ditch hex for HSL
2.You need more colors than you think
3.Define your shades up front
4.Don’t let lightness kill your saturation
5.Accessible doesn’t have to mean ugly
6.Don’t rely on color alone

Scan to Download
Chapter 6 | Quotes From Pages 149-172
1.Light comes from above.
2.Use shadows to convey elevation.
3.Even flat designs can have depth.
4.Don’t get carried away.
5.Shadows can have two parts.

Scan to Download
Chapter 7 | Quotes From Pages 173-190
1.Bad photos will ruin a design, even if everything
else about it looks great.
2.If you want more control, another solution is to lower the
contrast of the image itself.
3.Everything has an intended size.
4.Beware user-uploaded content.
5.Instead of trying to solve this with a border, try using a
subtle inner box shadow.
Chapter 8 | Quotes From Pages 191-214
1.Don’t overlook empty states
2.Use fewer borders
3.Think outside the box
4.Add color with accent borders
5.Decorate your backgrounds
Chapter 9 | Quotes From Pages 215-218
1.Look for decisions you wouldn’t have made
2.Rebuild your favorite interfaces

Scan to Download
Refactoring UI Questions
View on Bookey Website

Chapter 1 | Starting from Scratch| Q&A

1.Question
What is the first step to take when designing a new app,
and why is it important?
Answer:Start with a feature, not a layout. This
approach prevents frustration and helps focus on
the functionality that drives design decisions.

2.Question
Why should you avoid getting distracted by low-level
design details in the early stages?
Answer:Focusing on low-level details like typefaces and
colors can hinder the design process. It's more productive to
concentrate on the core functionality with high-level outlines.

3.Question
How can designing in grayscale benefit the design
process?
Answer:Designing in grayscale forces you to prioritize

Scan to Download
spacing, contrast, and size, enabling you to create a clear
interface and strong visual hierarchy before introducing
color.

4.Question
What does it mean to 'work in cycles' in the design
process?
Answer:Instead of designing everything at once, focus on
one feature at a time. Build a working version, address any
complexities, then move on to the next feature.

5.Question
What should you do to avoid over-investing in design?
Answer:Create low-fidelity sketches and wireframes to
explore ideas quickly. Once a decision is made, move on and
implement without getting bogged down in unused designs.

6.Question
Why is it crucial to design a 'smallest useful version' of a
feature?
Answer:Designing a simplified version allows for quicker
implementation and reduces the risk of over-complicating the
project, ensuring that something functional can be delivered

Scan to Download
earlier.

7.Question
How does the choice of typography influence the
personality of a design?
Answer:Typography strongly conveys emotion in
design—serif for elegance, rounded sans serifs for
playfulness, or neutral sans serifs for straightforwardness.

8.Question
What is the impact of color choice on the design's
personality?
Answer:Different colors evoke different feelings; for
example, blue feels safe and familiar, while gold conveys
sophistication. These associations can significantly impact
user perception.

9.Question
What strategies can help reduce decision fatigue in
design?
Answer:Establish defined systems for choices like color
palettes and typography beforehand, which minimizes the
number of decisions needed while designing.

Scan to Download
10.Question
Why is it beneficial to limit the number of design choices?
Answer:Fewer options streamline the decision-making
process and reduce the paralysis that can come from too
many similar choices, allowing for more confident and faster
decisions.

11.Question
How can designing using a constrained set of values aid
decision-making?
Answer:It simplifies comparisons between choices, allowing
designers to easily identify the best option without getting
overwhelmed by excessive alternatives.

12.Question
What is meant by 'designing with systems'?
Answer:Establishing guidelines for aspects like font size,
color, and spacing ensures consistency in design and
accelerates the process by reducing repetitive
decision-making.
Chapter 2 | Hierarchy is Everything| Q&A
1.Question

Scan to Download
What is visual hierarchy and why is it important in
design?
Answer:Visual hierarchy refers to how the
importance of elements in an interface appears in
relation to one another. It is crucial because it helps
organize information, guiding the user's attention to
what matters most, and makes the overall design
feel intentional and well thought out.

2.Question
What effects do different font sizes and weights have on
visual hierarchy?
Answer:Relying solely on font size for hierarchy can lead to
disproportionate emphasis on elements. Instead, using font
weight and color can effectively communicate importance;
for instance, using bold text for primary elements allows for
smaller yet impactful font sizes.

3.Question
How can color be used to improve text hierarchy against
backgrounds?

Scan to Download
Answer:Using grey text on colored backgrounds can reduce
readability. Instead, a better approach is to select a color that
matches the background's hue, adjusting its saturation and
lightness to maintain visibility while creating hierarchical
emphasis.

4.Question
What is the strategy for emphasizing elements by
de-emphasizing others?
Answer:Instead of making an element stand out more,
consider softening the competing elements. For example,
using lighter colors for inactive items makes the active item
more prominent, effectively achieving emphasis by contrast.

5.Question
Why should labels be treated as secondary elements in
design?
Answer:Labels can often dilute the importance of the data
they describe. When data can be perceived without labels or
combined with descriptive text, the design feels cleaner and
emphasizes the data more effectively.

Scan to Download
6.Question
What is the relationship between weight and contrast in
design elements?
Answer:Bold elements generally carry more visual weight,
which can be balanced by reducing the contrast of adjacent
elements. This ensures that heavier elements do not
overpower lighter ones visually.

7.Question
How does semantic markup influence visual hierarchy in
design?
Answer:Semantic markup helps in providing structure and
meaning, but it can lead to poor visual hierarchy if styling is
not thoughtfully applied. Titles often act more like labels;
thus, they should not overshadow essential content.

8.Question
What considerations should be made for button designs
based on their hierarchical importance?
Answer:Buttons must reflect their importance in a hierarchy:
primary actions need to be clear and bold, secondary actions
should be discernible yet unobtrusive, and tertiary actions

Scan to Download
can have less emphasis, typically styled like links.

9.Question
How should destructive actions be designed in user
interfaces?
Answer:Destructive actions do not have to be
overwhelmingly styled unless they are the primary focus. It’s
effective to style them less prominently unless a confirmation
step is in place, where they can then be emphasized.

10.Question
In what ways can hierarchy in UI design improve user
experience?
Answer:A well-thought-out hierarchy leads to a cleaner, less
chaotic interface where users can quickly identify priorities
and interact with the interface more efficiently, ultimately
enhancing usability and satisfaction.
Chapter 3 | Layout and Spacing| Q&A
1.Question
Why is it important to start with too much white space in
design?
Answer:Starting with too much white space allows

Scan to Download
elements to breathe and ensures that the design is
cleaner and more aesthetically pleasing. Instead of
settling for a cramped layout, giving elements extra
space helps identify the right amount of padding and
creates a more approachable interface. As all
elements typically don’t get equal breathing room,
relying on an initial excess of white space encourages
a more thoughtful reduction until the desired
harmony is achieved.

2.Question
What is the significance of establishing a spacing and
sizing system?
Answer:Having a predefined spacing and sizing system
streamlines the design process. It minimizes the indecision of
choosing exact measurements by relying on a consistent
scale, which speeds up design iterations and fosters a more
cohesive visual experience. A system built on a sensible base
value, like 16px, aids designers in making quick adjustments
while maintaining visual consistency and reducing

Scan to Download
complexity.

3.Question
How does one effectively manage space when working
with responsive designs?
Answer:Instead of filling the entire width of the screen,
designers should focus on providing just enough space for
elements. This can mean designing smaller interfaces first,
like a mobile layout on a constrained canvas, then adapting to
larger screens. By prioritizing optimal size over
maximization of available screen real estate, the resulting
layouts can be both user-friendly and visually pleasing.

4.Question
Why should designers avoid being slaves to grid systems?
Answer:Although grid systems like a 12-column layout
provide structure, they shouldn't dictate every design choice.
Rigid adherence to grids can lead to misalignment and
inadequate space for elements that would benefit from a
fixed size. Designers should opt for flexible widths or fixed
widths based on content needs instead of rigid percentages,

Scan to Download
allowing for a more practical and balanced use of space.

5.Question
How should the relationships between different UI
elements be treated?
Answer:Elements in an interface should be sized
independently and responsibilities must not be rigidly
proportional. For instance, font sizes and corresponding
padding should grow distinctly to ensure that each element
feels appropriately sized in its context rather than merely
scaled. This independence enables more nuanced designs that
respect the unique needs of differing screen sizes and
resolutions.

6.Question
What is the best practice for creating clear visual
distinctions between grouped elements?
Answer:To avoid ambiguity in design, create explicit
separations among groups of elements using increased
margins or borders. This ensures that users can easily
interpret forms and complex layouts without confusion, thus

Scan to Download
enhancing user experience. Implementing noticeable space
between groups while maintaining tighter spacing within the
group improves usability significantly.

Scan to Download
Chapter 4 | Designing Text| Q&A
1.Question
Why is it important to establish a type scale for a design
system?
Answer:Establishing a type scale is crucial because
it helps maintain consistency across designs and
speeds up the workflow. Without a defined system,
you're likely to end up with various font sizes that
can lead to inconsistencies and make it difficult to
make design decisions.

2.Question
What is a modular scale and why might it not be suitable
for all design situations?
Answer:A modular scale uses a mathematical ratio to define
font sizes, creating a structured hierarchy. However, it can
result in fractional sizes that might not align perfectly with
pixels, and the limited size options may not cater to all the
needed variations for UI design.

3.Question
How can designers choose a type scale that suits their

Scan to Download
needs?
Answer:Designers can handcraft their type scales by
choosing specific sizes that fit their design needs. This
approach allows for more flexibility and avoids issues with
subpixel rounding that come with mathematically generated
sizes.

4.Question
What is the drawback of using 'em' units when defining a
type scale?
Answer:Using 'em' units can lead to computed font sizes that
don't conform to the defined type scale because 'em' is
relative to the font size of the parent element, causing
unpredictable variations.

5.Question
What are some guidelines for selecting high-quality fonts
for UI design?
Answer:To select good fonts, aim for neutral sans-serifs,
ensure the typeface has multiple weights (preferably 10+),
optimize for legibility, trust popular choices, and draw

Scan to Download
inspiration from other well-designed sites.

6.Question
What is the recommended line length for optimal reading
experience, and why?
Answer:The ideal line length is between 45 and 75
characters. This range helps readers effortlessly follow lines
of text while minimizing the risk of losing their place when
reading.

7.Question
Why is baseline alignment preferred over center
alignment when mixing different font sizes?
Answer:Baseline alignment is preferred as it aligns text
based on the imaginary line where letters rest, creating a
cleaner, more visually appealing look than center alignment,
especially when text sizes vary.

8.Question
How does line-height relate to readability, and how
should it be adjusted depending on content?
Answer:Line-height affects readability by aiding in the visual
separation of lines. It should be adjusted according to line

Scan to Download
length and font size—shorter for narrow text and longer for
wide text to assist the reader in locating the next line.

9.Question
Why should not every link in a design have a distinct
color?
Answer:Overemphasizing links can create visual clutter.
Instead, ancillary links can be downplayed with subtle styles,
ensuring they are discoverable without competing for
attention with primary actions.

10.Question
What are the effects of letter-spacing, and when should it
be adjusted?
Answer:Letter-spacing can enhance readability, particularly
for all-caps text and headlines. It should generally be left to
the typeface designer but can be tightened for headlines or
increased for all-caps to improve legibility.
Chapter 5 | Working with Color| Q&A
1.Question
Why should I choose HSL over hex or RGB for web
design?

Scan to Download
Answer:HSL represents colors in a way that aligns
with human perception – using hue, saturation, and
lightness. Unlike hex or RGB, where visually similar
colors look different in code, HSL allows designers
to manipulate color attributes intuitively, making it
easier to achieve the desired visual appearance.

2.Question
What are the three essential categories for creating a
comprehensive color palette?
Answer:A good color palette should consist of greys, primary
colors, and accent colors. Greys are used for backgrounds
and text; primary colors define the site's overall look; accent
colors highlight specific elements or statuses.

3.Question
How many shades of grey should I include in my palette?
Answer:Aim for 8-10 shades of grey to provide enough
options without excessive decision-making. This number
ensures flexibility while preventing a cluttered palette.

4.Question
What should I consider when defining shades for my

Scan to Download
color palette?
Answer:Define a fixed set of shades up front using a
systematic approach. Start with a base color, then choose
your darkest and lightest shades based on their potential
context of use, filling in the gaps with intermediate shades.

5.Question
What is the significance of color temperature in greys?
Answer:Color temperature affects how greys are perceived –
they can feel warm or cool based on the subtle hues (like
yellow or blue) added. This saturation creates a more visually
appealing interface.

6.Question
How can I ensure my designs are accessible while still
being attractive?
Answer:To meet accessibility standards, keep a high contrast
ratio between text and background. You can flip the contrast
by using dark text on a light background, which maintains
visual appeal without compromising readability.

7.Question
What should I do to accommodate users with color

Scan to Download
blindness in my design?
Answer:Never rely solely on color to convey information.
Include text labels or icons alongside color cues to ensure
clarity, especially for users with color vision deficiencies.

8.Question
What's a practical tip for adjusting the brightness of
colors without losing their intensity?
Answer:Instead of adjusting lightness, consider rotating the
hue towards a brighter color to maintain saturation. For
instance, to darken yellow, rotate towards orange to enrich
the shade.

9.Question
How do I choose my primary color(s) effectively?
Answer:Select primary colors based on their effectiveness as
button backgrounds and overall branding. A good rule is to
ensure they represent the core actions of your site, like
Facebook's 'blue'.

10.Question
Why is it important to avoid using CSS functions like
'lighten' or 'darken' for color shades?

Scan to Download
Answer:Using functions can lead to inconsistencies in your
palette, resulting in shades that look similar and detracting
from the overall design. It’s better to define shades explicitly
to maintain clarity.
Chapter 6 | Creating Depth| Q&A
1.Question
What is the fundamental rule for creating depth in UI
design?
Answer:The fundamental rule is to emulate a light
source, understanding that light comes from above.
By mimicking how light interacts with elements, you
can create the perception of depth.

2.Question
How can we visually distinguish raised elements from
inset elements in a design?
Answer:Raised elements should have lighter colors on their
top edges and darker colors on the bottom edges, simulating
light hitting from above. Inset elements should appear darker
on top while lighter at the bottom, indicating a recessed

Scan to Download
appearance.

3.Question
What techniques can be used to create the illusion of
elevation through shadows?
Answer:You can use small shadows with a tight blur for
slight elevation, and larger, softer shadows for elements that
need to feel significantly closer to the user. Combining
different shadow sizes and styles can create a clearer sense of
depth.

4.Question
Why is it important not to overdo shadow effects in a
design?
Answer:While shadows add depth, overusing them can make
the interface appear busy and unclear. It's essential to
maintain simplicity and clarity instead of striving for
photo-realism.

5.Question
How can shadows be employed to enhance user
interaction with elements?
Answer:By changing the shadow on an element when a user

Scan to Download
interacts with it, such as lifting a shadow when dragging an
item or reducing it when clicking a button, you can create
clear visual cues that enhance the interaction experience.

6.Question
What is the benefit of using two shadows on a single
element?
Answer:Using two shadows allows for greater control over
how depth is perceived; the first shadow can be larger and
softer to simulate general ambient light, while the second
shadow can be sharper and darker, representing areas that are
less illuminated.

7.Question
How does color influence the perception of depth in flat
design?
Answer:In flat design, lighter colors can make objects feel
closer while darker colors can give the perception of
distance, similar to 3D environments. This color
manipulation is a tool for conveying depth even without
traditional shadowing effects.

Scan to Download
8.Question
What are effective methods for overlapping elements to
add depth?
Answer:To create depth through overlapping, design
elements so they cross boundaries between backgrounds or
adjust their height to extend past their parent components,
creating the appearance of multiple layers.

Scan to Download
Chapter 7 | Working with Images| Q&A
1.Question
Why is it important to use high-quality images in design?
Answer:Good photos can significantly enhance the
visual appeal of a design, while bad photos can
detract from even the best layouts. Hiring a
professional or using high-quality stock images
ensures that your design communicates effectively
and maintains a polished and professional look.

2.Question
What are the primary ways to ensure text stands out
against a background image?
Answer:To ensure text is readable over images, you can add a
semi-transparent overlay, reduce the image's contrast,
colorize the image, or apply a text shadow. Each approach
helps create a consistent contrast between text and
background, making it easier for users to read.

3.Question
What should you consider when scaling bitmap images?
Answer:Scaling bitmap images larger than their original size

Scan to Download
can cause them to appear fuzzy and lose definition. It's
essential to use images at their intended size to maintain
clarity. For vector images like icons, although they can scale
without losing quality, very small icons shouldn't be scaled
up excessively, as they can look unprofessional.

4.Question
How should you handle user-uploaded images to maintain
design integrity?
Answer:Control the display of user-uploaded images by
centering them in fixed containers and cropping as needed to
maintain layout consistency. Use techniques like background
images with proper sizing or inner shadows to prevent
backgrounds from bleeding into your UI.

5.Question
What is a practical solution for showcasing detailed app
screenshots without compromising readability?
Answer:Instead of scaling down detailed app screenshots,
take the screenshots at smaller screen sizes that suit your
design layout better, or consider using partial screenshots.

Scan to Download
This way, the essential details remain legible without forcing
viewers to squint.

6.Question
What are the drawbacks of using placeholder images
during the design process?
Answer:Relying on placeholder images often leads to a
disconnect between design and final content, as the
placeholder images can create a false sense of how the design
will look. They lack the impact and quality that real images
provide, potentially undermining the overall aesthetic once
actual images are substituted.

7.Question
How can you make small icons work in a larger design
context?
Answer:Instead of scaling small icons up to fit a larger space,
enclose them in larger shapes that correspond to the design
requirements. This maintains the integrity of the icon's size
while appropriately filling the visual space.

8.Question
What can be done to avoid issues with poor resolution in

Scan to Download
icons when scaling?
Answer:Redraw simplified versions of icons at the target size
instead of scaling down larger icons. This ensures that the
icons remain clear and maintain their visual impact, avoiding
the muddiness that comes from excessive scaling.

9.Question
Why should you avoid scaling down screenshots or
user-uploaded images?
Answer:Scaling down can diminish readability and detail,
making elements like text too small for effective
communication. It's better to use properly sized content to
ensure that all elements are visually accessible and legible.

10.Question
What design techniques can prevent user-uploaded
images from disrupting your layout?
Answer:Using CSS to center images within fixed containers
can help maintain a tidy layout, and applying subtle inner
shadows can ensure that images don’t blend into your
background, thus preserving their distinct boundaries.

Scan to Download
Chapter 8 | Finishing Touches| Q&A
1.Question
How can we add flair to existing designs without
introducing new elements?
Answer:You can supercharge existing elements by
using icons instead of standard bullets in lists,
enhancing testimonials visually, or styling links with
custom underlines. For forms, introducing custom
checkboxes and radio buttons in brand colors adds
polish and vibrancy.

2.Question
What is a simple way to make bland UI components more
visually appealing?
Answer:Adding colorful accent borders can significantly
enhance the visual appeal of UI components. This can be
applied to cards, navigation items, or headings, effectively
encouraging a more designed look without complex design
skills.

3.Question
How can background decorations contribute to a design's

Scan to Download
impact?
Answer:Changing the background color or using gradients
adds energy, while subtle repeating patterns can add texture
without overwhelming the text. Individual graphics or simple
shapes can also serve as creative accents, enhancing the
overall aesthetic.

4.Question
Why are empty states important in user interface design?
Answer:Empty states should be prioritized since they
represent a user's first interaction with a feature. By
incorporating illustrations and strong call-to-actions, you can
provide guidance and encourage users to engage with the
product instead of facing a plain screen.

5.Question
What alternatives can we use instead of borders to
distinguish UI elements?
Answer:Consider using box shadows for subtle separation,
different background colors between adjacent elements, or
simply increasing spacing. These methods can create clarity

Scan to Download
without the clutter of excessive borders.

6.Question
How can we challenge conventional design norms?
Answer:It's essential to think outside the box and not
conform to preconceived notions of what components should
look like. For instance, dropdowns can be more dynamic
with sections or icons, and tables can feature combined
columns or visual data representations. This ensures designs
remain engaging and relevant.
Chapter 9 | Leveling Up| Q&A
1.Question
How can I continue to improve my design skills after
reading this book?
Answer:There are two primary methods to enhance
your design skills:
1. Look for design decisions you wouldn't have
made: When you see a design you admire, analyze it
for choices or techniques that might be outside your
typical design approach. This could include

Scan to Download
innovative layouts, color combinations, or
typography decisions. For example, if you notice a
button integrated within a text input field instead of
outside, consider how that changes user interaction
and aesthetics.

2. Rebuild your favorite interfaces: Try recreating

inspiring designs from scratch without access to
developer tools. This exercise forces you to think
critically about the design and helps you uncover
subtle techniques, such as adjusting line height or
adding letter-spacing. This kind of hands-on
practice is invaluable for recognizing minute details
that contribute to a polished appearance.

2.Question
What can I learn from recreating a favorite design?
Answer:Recreating a favorite design allows you to discover
specific techniques that contribute to its aesthetic appeal. For
instance, while replicating, you might find that reducing the

Scan to Download
line height makes headings more readable, or that adding
letter-spacing gives uppercase text a crisp look. This process
not only sharpens your technical skills but also enhances
your ability to notice and implement these nuances in your
own work.

3.Question
Why is it important to notice unintuitive design
decisions?
Answer:Noticing unintuitive design decisions is crucial
because it opens your eyes to creative solutions and
alternatives you might not have considered. By
understanding what makes certain designs stand out—like
using contrasting colors for text to create hierarchy or
changing the position of UI elements—you can expand your
design toolkit and improve your own project outcomes.

4.Question
How can studying designs that inspire me influence my
work?
Answer:Studying inspiring designs fosters a continuous

Scan to Download
learning mindset. By paying close attention to details and
practices employed by successful designs, you develop a
deeper understanding of aesthetics, user experience, and
functionality. Over time, this knowledge will enable you to
incorporate innovative ideas into your projects, leading to
significant improvements in your design capabilities.

5.Question
What is the benefit of asking, 'Did the designer do
anything here that I never would have thought to do?'
Answer:Asking this question challenges your preconceived
notions about design. It encourages you to critically analyze
and break from habitual thinking, which can lead to creative
breakthroughs. It prompts exploration of new techniques that
may enhance your designs, ultimately enriching your style
and effectiveness in presenting information visually.

Scan to Download
Refactoring UI Quiz and Test
Check the Correct Answer on Bookey Website

Chapter 1 | Starting from Scratch| Quiz and Test

1.When designing a new app, it is better to start with
overall layout instead of a specific feature.
2.Designing in grayscale should be avoided to ensure the
right hierarchy is established.
3.It's important to fixate on minor details like typography and
colors in the early design stages.
Chapter 2 | Hierarchy is Everything| Quiz and Test
1.Visual hierarchy is crucial for making interfaces
feel designed by showing the importance of
elements relative to each other.
2.It is acceptable to use grey text on colored backgrounds as
it enhances readability.
3.Designing actions should prioritize semantics over visual
hierarchy to ensure functionality.
Chapter 3 | Layout and Spacing| Quiz and Test
1.Starting with too much white space often leads to a

Scan to Download
 cramped design.
2.Dense UIs, like dashboards, do not require intentional
decisions about white space.
3.Using a defined spacing and sizing system simplifies the
design process and promotes consistency.

Scan to Download
Chapter 4 | Designing Text| Quiz and Test
1.Establishing a type scale is important for
maintaining uniformity in user interfaces.
2.A linear scale is the best choice for font sizes as it provides
consistent increments for all sizes.
3.You should always use em units for defining font sizes to
ensure consistency across displays.
Chapter 5 | Working with Color| Quiz and Test
1.HSL format is more intuitive for representing
colors compared to Hex or RGB formats.
2.Lightness in HSL is the same as brightness in HSB.
3.A basic color palette with only a few colors is sufficient for
effective design.
Chapter 6 | Creating Depth| Quiz and Test
1.Light comes from below in user interface design to
create a raised effect.
2.Using shadows dynamically during user interactions can
help convey actions such as pressing buttons.
3.Flat designs cannot convey depth and only appear as flat

Scan to Download
designs.

Scan to Download
Chapter 7 | Working with Images| Quiz and Test
1.Bad photography can enhance a design.
2.User-uploaded images can disrupt design consistency.
3.Icons should be scaled up significantly for better visibility.
Chapter 8 | Finishing Touches| Quiz and Test
1.Enhancing existing design elements is preferable
to adding new elements in UI design.
2.Using colorful accent borders requires advanced graphic
design skills.
3.Backgrounds should be left empty to avoid overwhelming
the primary content.
Chapter 9 | Leveling Up| Quiz and Test
1.Engaging with the book 'Refactoring UI' will
make you completely confident in your design
skills, eliminating the need for further learning.
2.One method to enhance design skills is to analyze
unconventional design choices made by others.
3.Recreating favorite interfaces from scratch is not beneficial
for understanding polished design nuances.

Scan to Download