This set of notes comes from Sajid's UI video tutorial (in the Will's Design Notes resource section), covering 7 topics. It and Refactoring UI: A Practical UI Handbook for Non-Designers (Hierarchy · White Space and Spacing · Color Systems · Typography · Depth and Shadows · Image Handling · Final Polish · Practical Teardowns) are the same kind of thing —followable rules for "people without artistic talent"— but Sajid's flavor is more "anti-chicken-soup": he starts by advising you to stop pursuing beauty, because beauty is often a newbie obsession; websites that actually make money are all plain.
Three core mantras that run through the whole piece and best represent Sajid's position (also what distinguishes it from Refactoring UI):
- Function > Beauty— A website is a tool to achieve goals (traffic/sales/subscriptions), not a work of art.
- Copy great work > Originality— Every design you see is a remix; your job is to "execute better", not "invent out of thin air".
- Typography accounts for 80% of UI— Most interfaces are essentially text + buttons; get typography right, and the interface is more than halfway done.
This article and Refactoring UI: A Practical UI Handbook for Non-Designers (Hierarchy · White Space and Spacing · Color Systems · Typography · Depth and Shadows · Image Handling · Final Polish · Practical Teardowns): Refactoring UI is a full handbook of 50+ tips (eight chapters on hierarchy/spacing/color/typography/shadows/images/final polish + practical teardowns), with granularity down to the pixel. This article: Refactoring UI is a complete handbook of 50+ tips (eight chapters covering hierarchy/spacing/color/typography/shadows/images/final polish + practical teardowns), with granularity down to the pixel. This article does not rewrite those overlapping details on spacing/color/typography, but instead highlights what is unique to Sajid: ① three core mantra positions; ② the idea of treating UI as a "minimal variable system"; ③ two exclusive practical tricks —Fixing boring UI with HSL lightness layering and the Motion Contract motion delivery method. For overlapping parts I will clearly point you to the corresponding chapters in Refactoring UI.
Suggested reading order: First read chapters 1 and 2 of this article to build the mindset of "don't fetishize beauty and originality", then read the specific selection methods in chapters 3~7, and finally chapter 8 (motion) is entirely new content not covered at all in Refactoring UI.
1. Only newbies obsess over building "beautiful" websites (Only Noobs Build Beautiful Websites)
Topic:The purpose of design is to solve problems, not to look good. This is the foundation of Sajid's entire set of notes, and also his most "counterintuitive" chapter.
1.1 Design is Not Art
Mantra: A website exists to accomplish a specific goal — get traffic, generate sales, increase subscriptions.Why: If you are making a website to win design awards or turn in homework to a teacher, then by all means pursue visual splendor; but if you want it to actually bring commercial results, functionality and usability must come before "looking good".
Counterintuitive evidence: Go to Semrush (an SEO data website) and look at the highest-traffic websites in every industry; you can barely find one with "gorgeous design".
| Website | Monthly visits | Appearance |
|---|---|---|
| Indian Railways | 132 million | Plain, even tacky |
| Mercury (bank) | 150 million | Simple |
| Chase (bank) | 193 million | Simple |
| Craigslist (classifieds) | About 10 million/day | Slow and ugly |
Why big companies "deliberately" make things plain: They can afford the best designers, yet they choose simple or even "boring" design, because the goal is profit. Designers' promotions also revolve around data metrics(conversion rate/visits) rather than "whether the page is pretty".
Life analogy for PMs: It's like the most profitable stall in a wet market is often not the one with the fanciest decor, but the one that "has everything, is easy to find things in, and checks out fast". Users come to your website with a task (learn/shop/watch videos); your job is to let them complete the task as fast as possible, not make them stop and admire it.
1.2 What Users Actually Want
What people want is simplicity and ease of use. Companies have done research, so they deliberately make websites simple. Three real-world constraints:
- Attention economy: Users' time and attention are the most valuable; whoever has the best experience retains users and makes money.
- Responsive is the bottom line: A website must work on computer/tablet/phone. Many pretty websites fail exactly here — too many decorations make it hard to achieve true multi-device adaptation; if it doesn't work on mobile, users will be very frustrated.
- Technical reality: All websites run in browsers (HTML + JS). Pretty websites usually have lots of images and decorations → slow loading, messy small-screen layout, complex code → worse experience.
1.3 Five Pillars of User-Friendly Websites
Sajid breaks a good website into 5 pillars,do these 5 things well and you will succeed(note: "pretty" is not among them):
| Pillar | Core points | Where it is expanded in this article/Refactoring UI |
|---|---|---|
| Layout | Build with a "rows and columns" mindset;Rule of 4= use numbers divisible by 4 as much as possible for all sizes and spacing (4/8/12/16…); repeat layout/typography/colors → visual consistency reduces cognitive load; go component-based (React/Vue are both based on this) | See Chapter 4 of this article + Refactoring UI: A Practical UI Handbook for Non-Designers (Hierarchy · White Space and Spacing · Color Systems · Typography · Depth and Shadows · Image Handling · Final Polish · Practical Teardowns) spacing system |
| Typography | Use only one typeface across the whole site as much as possible (the more fonts, the easier it is to make mistakes); recommended Inter / Montserrat / DM Sans / Raleway / Roboto; build a typescale (font size ratio system) | See Chapter 3 of this article (the 80% chapter) |
| Colors | The fewer the better: black and white as main + 1 primary color + 1 background color + 1 accent color (used only in 5%–10% of places) + dark version of accent color (for hover) | See Chapter 7 of this article |
| Images | Use clear images, compress before uploading; don't fill pages with irrelevant images; too many images slow down the website (get assets from icons8 / unsplash) | Refactoring UI: A Practical UI Handbook for Non-Designers (Hierarchy · White Space and Spacing · Color Systems · Typography · Depth and Shadows · Image Handling · Final Polish · Practical Teardowns) image handling chapter |
| Content | The most important pillar— content is the core driver of traffic and sales | See 1.4 below |
Why emphasize the "Rule of 4" and "repetition": The human brain is wired to look for patterns, and feels "comfortable, predictable" when it sees repeated structures. So when similar elements (buttons/cards/headings) look the same, users learn once and can use the whole site, directly reducing cognitive load. This is the same thing as Refactoring UI: A Practical UI Handbook for Non-Designers (Hierarchy · White Space and Spacing · Color Systems · Typography · Depth and Shadows · Image Handling · Final Polish · Practical Teardowns)'s "systematize everything".
1.4 Content is King + Websites are a trial-and-error process
Why content is most important: Craigslist is slow and ugly, with about 10 million visits a day — because users have a clear purpose, and its content meets the need. If you make a course site, make the best courses; if you make a blog, write high-quality articles; if you do e-commerce, provide transparent information + images + reviews.
Ask yourself before starting: Why do you need this website? Then ask users more about what they want, and give them exactly what they want.
Websites are trial-and-error (iterative): They won't be perfect at the start. After launch, collect feedback, optimize based on data, and keep improving. (This point fully echoes Refactoring UI: A Practical UI Handbook for Non-Designers (Hierarchy · White Space and Spacing · Color Systems · Typography · Depth and Shadows · Image Handling · Final Polish · Practical Teardowns) §1.3 "Work in cycles + be a pessimist" — first build the simplest version that works.)
2. Original Ideas are Overrated
Topic:Everything is a remix. You don't need to invent new things from scratch — take existing ideas and execute them in a better/faster/cleaner way, or re-execute them for a different audience. This is Sajid's antidote for people who are "afraid they aren't creative enough".
2.1 What you think is "original" is all copied
Sajid lists a long string of designs that "look very original but actually have predecessors", the core is to make you let go of the psychological burden of "having to be original":
| Design | Real origin |
|---|---|
| Flat design | Originated from minimalism in print graphic design (reduce decoration, emphasize function and layout) |
| Skeuomorphism | Imitates real-world objects, uses familiar appearances to lower learning cost |
| Glassmorphism | Not a new concept — popularized by iOS 7 in 2013, but Windows Vista's Aero Glass already used translucency back in 2006 |
| Hamburger menu icon ☰ | Designed by Norm Cox for the Xerox Star in 1981, lay dormant for decades then popularized by mobile apps in the 2010s |
| Pull to refresh | Invented by Loren Brichter in Tweetie in 2009, only became widespread after Twitter acquired it |
| Infinite scroll | Proposed by Aza Raskin in 2006, popularized by social feeds |
| Like button | It was not invented by Facebook — Vimeo had it in 2005 and FriendFeed in 2007; FB only launched the "thumbs up" in 2009. What was impressive was pushing it to a global scale. |
| Popups / Breadcrumbs / Tab bars | They came respectively from desktop software / file system paths / physical folder tabs (this was already done in the library era) |
2.2 Innovation lies in "execution", not "being first" (The point is everything is a remix)
Core principle: Great products all take several existing ideas and combine + execute them better:
| Product | What it remixed | The real innovation |
|---|---|---|
| Existing crawler technology from AltaVista/Lycos | PageRank restructured "relevance" ranking (inspired by citations in academic papers) | |
| Friendster's social network + MySpace personal profiles + college directories | Executed these better | |
| Text messages (SMS) + blogs | Created the new form of "microblogging" | |
| Uber → Lyft/Grab/Didi/Bolt | Traditional taxi dispatch + mobile app + GPS | Essentially the same concept; the differences lie in execution and brand/localization |
| Notion / Slack / Figma | Wiki + database + notes / email → real-time channels / Sketch + collaboration on the Web | The key differentiator of integration / efficiency / collaboration |
| Airbnb | Homestays + hotel booking convenience + stranger sharing + classified ads | Trust mechanism + reviews + payment protection— solving the biggest pain point of "daring to stay" |
Usage for PMs: Next time you build a new feature, don't dismiss yourself just because "someone on the market has already done it". The question shouldn't be "Is this original?", but "Can I execute it better/faster/cleaner, or serve an overlooked group of people?". This is also the same spirit as Refactoring UI: A Practical UI Handbook for Non-Designers (Hierarchy · Whitespace and Spacing · Color Systems · Typography · Depth and Shadows · Image Processing · Final Polish · Practical Teardowns) §10 "Rebuild interfaces you like" and "Find decisions you wouldn't have made that way" —learn from others openly.
III. Typography Accounts for 80% of UI (The 80% of UI Design - Typography)
Thesis:Most UIs are essentially text + buttons + a small number of icons. So what really determines interface quality is typography. This is Sajid's most signature argument.
3.1 An experiment: Remove all font styling, and the interface falls apart
Flatten all font styling (font size / font weight / color differences) of any UI, compare before and after, and you will find:You can't tell which tab is selected, buttons lose distinction, information has no hierarchy, and the whole interface looks like a blob of text. This directly proves:Typography almost single-handedly determines the user experience.
3.2 Three levers for building information hierarchy (Building visual hierarchy)
You can create hierarchy using only three dimensions,without touching the layout structure:
| Lever | How to use it | Why |
|---|---|---|
| Size | Headings are larger and bolder than body text | The most intuitive hierarchy signal |
| Color / Lightness | Primary text at 100% lightness, secondary text at 60% lightness | Naturally separates primary from secondary without adding any decoration |
| Spacing | Add spacing between a heading and the information group below it | Use the "Law of Proximity" (close together = same group) to make the heading structurally independent |
Practical tip: Put content into a card, give the card a background at 10%–20% lightness, and you can lift that block out of the page.Self-check method: Shrink the design to look at the whole, confirm headings are prominent enough and text is readable; it's best to test with real users, or ask friends if that's not possible. (Corresponds to Refactoring UI: A Practical UI Handbook for Non-Designers (Hierarchy · Whitespace and Spacing · Color Systems · Typography · Depth and Shadows · Image Processing · Final Polish · Practical Teardowns) §2 Visual Hierarchy chapter — which has more complete details such as "three levels of buttons" and "labels are a last resort".)
3.3 You don't need many font sizes (You don't need many font sizes)
Core principle: For 99% of applications,using only three font sizes + weight variations + color variations is enough to build the entire interface.
Specific recipe:
- Pick a base font size(14px or 16px) + regular weight + 100% lightness as the baseline.
- When you really need variation,only adjust ±2px from the base— that is your type scale.
- Use rem rem instead of px for font size (follow accessibility guidelines: when users increase the default font size in the system, the whole site scales accordingly).
Compared to Refactoring UI: A Practical UI Handbook for Non-Designers (Hierarchy · Whitespace and Spacing · Color Systems · Typography · Depth and Shadows · Image Processing · Final Polish · Practical Teardowns) §5.1: That article also covers hand-picking a type scale and using px/rem instead of em. Sajid's unique additions are the±2px micro-adjustment method and the minimalist claim that "3 font sizes are enough" — more suitable for PMs to quickly set levels when prototyping without overthinking.
3.4 line-height brings its own "breathing room" — Sajid's exclusive point
Core principle: Headings look "premium" not just because they are large or bold, but because they visually have breathing room— this space lets the brain recognize them as an independent information block. And this space,is largely provided by line-height, no extra margin needed.
Key technique: use rem for font size, em for line-height:
| Unit | Relative to what | Why choose this |
|---|---|---|
| Font size uses rem rem | Relative to the root element (html) | Globally controllable + accessibility compliant + scales overall when users adjust browser font size |
| Line-height uses em em | Relative to the current element's own font-size | Line-height automatically follows font size — when text gets bigger, line-height scales proportionally, and buffer space aligns automatically |
Example:font-size: 1.125rem1.125rem (=18px) paired with line-height: 1em line-height: 1em, then 1em = 18px, and this line carries 18px of visual buffer on its own.line-height ≈ internal line spacing of text + external visual buffer zone.
Plain language for PMs: Many people manually add margin
margin-bottomto "push out" headings when making them, resulting in inconsistency everywhere. Sajid's trick is — let line-height bring out the buffer space itself; you only need to make font styles into global variables (such as h1, h2, body)--h1), apply them directly when used, and don't manually adjust spacing everywhere.
3.5 UI = a minimalist variable system (not "writing styles", but "defining rules")
Sajid's core worldview: The entire interface can be built using only 4 font variables + 3 gray variables. The essence of UI design is not writing styles one by one, but defining a set of rules, then reusing them everywhere.
Order of building a font system: weight → size → line-height → font family (among which line-height has the biggest impact on readability). Any mainstream font is sufficient.Usage: Use common sense to judge which piece of text users will actually pay attention to, then emphasize that piece.
IV. Five Rules for Designing Top-Tier Websites (The Easy Way to Design Top Tier Websites)
Thesis: String "cognitive reshaping → principles → systems → creativity process" into a closed loop. One core sentence:Design is not emotional expression, but a structured, methodical decision-making process.
Rule 1: Good design = as little design as possible (As Little Design As Possible)
Core principle: The core of design is not piling on elements, but reducing unnecessary content. Being "creative" is not being the first to think of an idea, but connecting existing ideas— top designers don't start from zero either.
Common mistake: Starting from the header and working down, obsessing over structure first (how many sections? how wide? how to design buttons?) — too many questions slow momentum and drain creativity.Correct starting point: First ask "What is the core function/selling point of this website?". (= Refactoring UI: A Practical UI Handbook for Non-Designers (Hierarchy · Whitespace and Spacing · Color Systems · Typography · Depth and Shadows · Image Processing · Final Polish · Practical Teardowns) §1.1 "Start with functionality, not layout".)
Rule 2: Law of Similarity & Proximity
The human brain sees the whole before details; a page must be scannable within seconds. Two Gestalt principles:
| Principle | Practice | Effect |
|---|---|---|
| Similarity | Group using shape/size/color | Similar elements look like they belong to the same category; the page is more consistent and easier to implement |
| Proximity | Group using spacing | Elements placed close together are understood as related |
Simplicity is not an aesthetic preference, but aligned with how the human brain processes information. For the cognitive science principles behind this, see NNGroup Visual Design Principles · Gestalt Grouping · Visual Hierarchy · Typography · Color · Imagery (19 articles · Five major visual principles / Gestalt proximity-similarity-closure-common region / Visual hierarchy-grid-golden ratio / Typography terminology-pairing-reading fonts / Color 60-30-10 / Picture superiority effect-photos-imagery / Aesthetics-usability effect / Glossary).
Rule 3: Spacing between elements is more than you think
Core principle: When you focus intently on a single element, whitespace feels like too much; but users scan the whole before looking at details.Practice: Start with enough spacing, observe the whole, then slowly reduce until it feels right. (= Refactoring UI: A Practical UI Handbook for Non-Designers (Hierarchy · Whitespace and Spacing · Color Systems · Typography · Depth and Shadows · Image Processing · Final Polish · Practical Teardowns) §3.1 "Start with too much whitespace".)
Rule 4: Use a Design System (Use a Design System)
A design system = a unified set of rules and component collection. Simple websites only need to define a few key elements; complex UIs require a detailed system.
- Spacing system: Build a system divisible by 4 (4/8/12/16/20/24/40…).Spacing must be designed with real content— using lorem ipsum dummy data is bad practice, because different content needs different space. The role of the system is to help you pick values quickly, not trial-and-error randomly.
- Fonts and colors: There is no absolute science to choosing fonts,don't blindly believe in "color psychology". Practice: pick 1 font + a suitable type scale; pick 1 dark color for text, 1 light color for background; then pick 2 more colors to add personality. The prerequisite is clear readability and no eye strain.
- Key components: Start with links and buttons; usually two types are needed — primary action and secondary action. (For button grading details, see Refactoring UI: A Practical UI Handbook for Non-Designers (Hierarchy · Whitespace and Spacing · Color Systems · Typography · Depth and Shadows · Image Processing · Final Polish · Practical Teardowns) §2.7. )
Rule 5: Hierarchy is everything (Hierarchy Is Everything)
Emphasize what is most important, keep the rest restrained. Use size/weight/color to emphasize, but don't over-emphasize at the start— small changes often have big effects.
One exception — break restraint moderately: You can use shadows, gradients, and cards to add layers and personality. This is not rejecting minimalism, but adding expressive tension within a minimalist framework. (This leads directly to Chapter 5 "Fixing Boring UIs".)
Five-step creativity process (Creativity Process)
| Step | What to do | Why |
|---|---|---|
| 1 Lay the foundation | Systematically learn to improve cognition | Without a foundation there is no creativity to speak of |
| 2 Find inspiration | Go to Mobbin(mobbin.com) to look at single pages/flows/interactions of real launched products by sector | Copy mature work (echoes Chapter 2) |
| 3 Step away for a while | After you have initial ideas, don't rush to build; go do something else | The brain will organize information in the background, and new ideas often pop up when you come back; if you still have no inspiration you may be too tired / not sleeping well |
| 4 Execute | Start building, don't hesitate or be a perfectionist; it's okay if it's not done well | The key is to finish |
| 5 Don't fall in love with your own design | Show it to friends/colleagues first, then test with real users, and revise based on feedback | You may make three versions and in the end only one small module from the third version is useful; that's normal —first finish, then perfect |
V. Fixing Boring UIs: HSL Lightness Layering + Shadows (The Easy Way to Fix Boring UIs) 【Exclusive Technique】
Thesis:Use several different lightness levels of the same color to create "layers", then add shadows, and you can quickly elevate an interface from "ordinary" to "good-looking". This is Sajid's signature method that Refactoring UI does not cover as a standalone chapter, with extremely high ROI.
Core ROI judgment: Going from "ordinary" to "good design" only requires color layering + shadows, with obvious returns; but going from "good" to "top-tier" requires a huge amount of time polishing details, while the improvement in user perception is limited.So when PMs make prototypes, spending 80% of effort on layering + shadows is enough.
5.1 Hierarchy handling for tabs / dropdown menus
- First add a background that is slightly lighter than the page; brighten the selected tab — but text and icons will become hard to read, so brighten the text and icons together as well.
- to highlight dropdown menus (they are core UI elements).
- Use gradients + light top inner shadow to add depth to panels — simulating "light shining from above, so the top is brighter than the bottom" (real-world lighting logic).
5.2 Making Radio Buttons not boring
- Wrap all options in a brighter card, highlight the selected option + increase spacing, and add extra emphasis to the selected one.
- Adjust typography and content order to establish a clearer visual hierarchy.
- Add a bit of depth (shadow)to the selected card.
(Making radio buttons card-style is also a trick from Refactoring UI: A Practical UI Handbook for Non-Designers (Hierarchy · Whitespace & Spacing · Color Systems · Typography · Depth & Shadows · Image Handling · Final Polish · Practical Breakdowns) §8.6.)
5.3 Full practical walkthrough: From ordinary to noticeably better (11-step review)
For a clean but mediocre interface where "all content is crammed onto the same plane with no front-back relationship", Sajid's fix order is:
| Step | Action | Why |
|---|---|---|
| 1 | Set the page background to a darker base color as the "foundation" | So that subsequent cards can "float" above the page, instead of all sticking to the same layer |
| 2 | Use backgrounds from the same color system with different lightness values for different areas (bottom layer darkest / middle layer cards / top layer controls brightest) | Use lightness to distinguish the upper, middle, and lower three layers |
| 3 | Use brighter backgrounds + larger rounded corners + subtle shadows for interactive elements | Let users know at a glance "these are clickable", and lift them slightly out of the background |
| 4 | First give the second card a "card feel" (rounded corners + padding + basic shadow),ignore content details for now | First make it visually stand as an independent card |
| 5 | After the card is established, clean up redundant decorations: remove the border from the bordered "Pro" label,and use a brighter background to highlight it instead | When hierarchy already exists, borders appear redundant or even distracting |
| 6 | Progress bar: Add a light inner shadow to the background to make it look "recessed", so the actual progress bar "floats on top" | Subtly tells the user: the background is the container, the progress is the current state, which is more important |
| 7 | Optimize typography: Give important information a clearer hierarchy within the card | Don't let key points mix with ordinary explanatory text |
| 8–10 | The last block has two radio buttons: Use a brighter background to distinguish options (not just when selected), add icons to aid understanding, adjust button positions to unify the visual language, and delete redundant titles for self-explanatory areas | When content is self-explanatory, titles are redundant instead |
| 11 | Put the three areas together for an overall check, and raise the billing area that is too short | Balance the modules in terms of hierarchy / rhythm / visual weight |
Core mental model: Imagine the interface as a multi-story building with height — elements closer to the user (more important) are brighter + have more shadow; background containers are darker + recessed. Light comes from above, so the top is bright and the bottom is dark. Master this rule, and boring interfaces can be fixed in batches. For more detailed rules on depth/shadows (double-layer shadows, 5-level shadow scale), see Refactoring UI: A Practical UI Handbook for Non-Designers (Hierarchy · Whitespace & Spacing · Color Systems · Typography · Depth & Shadows · Image Handling · Final Polish · Practical Breakdowns) §6.
Six, The Easy Way to Pick Perfect Spacing
Theme:Use a system, not feeling, to determine spacing. If you can only adjust by feeling "should this be bigger or smaller", it means you lack judgment criteria.
6.1 Core idea: Anchor spacing to font size using rem
Common mistake designers make: Designing on a 27-inch large screen, where spacing and font sizes feel comfortable, but users are on laptops or smaller screens, making the spacing feel awkward.
New approach:
- Use rem rem instead of px for both font sizes and spacing, and set the most commonly used font size as the baseline (1rem = 16px for most interfaces).
- All spacing is scaled in multiples of this baseline (regular values like 0.5 / 0.75 / 1 / 1.25 / 1.5 rem,do not use arbitrary values like 13px, 17px).
- This way font sizes naturally relate to spacing, making the proportions of the entire interface more coordinated.
Remember two properties of rem: ① rem follows the "font baseline",not the screen size — it is 16px on both large and small screens, and does not scale proportionally; ② If the user increases the default font size in the system, spacing set with rem will also increase together (accessibility-friendly).
Words for PMs to remind developers: This rem mindset needs to be "consciously adopted" at the frontend style layer. If engineers casually hardcode px values
16px/24px/32px, the rem relationships in your design will not take effect automatically. It must be agreed in engineering: base font = 1rem; padding/margin should prioritize using rem; when adjusting font sizes, only change the base font, and the rest will follow.
6.2 Six spacing rules (Sajid's do/don't)
| Rule | Content | Why |
|---|---|---|
| Distinguish body text vs headings | 1rem between list items; increase spacing between headings and lists(headings are not part of the list) | Use spacing to express "who belongs to whom" |
| Inside group < Outside group | Tightly group strongly related elements with minimal spacing, and increase distance between groups (1rem, can be 2rem if space allows) | If spacing is all the same, users have to think extra "which button belongs to which group" (= Law of Proximity) |
| Inside button < Outside button | Spacing between icon ↔ text inside the button < the button's left/right padding / outer margin | Never let outer spacing be less than inner spacing, otherwise the hierarchy will be disrupted; Example: Leave large spacing between like ↔ dislike to indicate they are two independent actions |
| Button top/bottom padding < left/right padding | 90% of scenarios: 0.5–0.75rem top/bottom, 1–1.5rem left/right | Eyes scan left to right; letters have varying widths (W is wide, I is narrow) creating more visual noise that needs more space; character height is stable, too much top/bottom padding makes it look "tall, fat, and bulky" |
| Give cards sufficient padding | Layouts with many vertical elements use 1.25rem padding on all sides; reducing to 1rem makes it cramped and oppressive | Dense content makes it hard for users to focus |
| Button groups: Spacing = horizontal padding looks cleanest | Button spacing 1rem, left/right padding also 1rem | "Visual rhythm consistency" — the eye looks for the smallest repeating unit; consistent rhythm feels stable and even, inconsistency feels "something's off but I can't say what" |
6.3 Direction for choosing spacing: Reduce from large to small, don't add from small to large
Mindset: Every time you choose spacing,start with a larger value(such as 1.5rem), then gradually reduce as needed.Why: People are far more sensitive to "cramped" than to "loose" — when text and buttons are squeezed together, the brain has to work extra hard to parse the structure, and you will instinctively feel tired, messy, and unwilling to look; while slightly larger spacing almost never causes negative emotions, it just feels "a bit loose", which actually frees up the brain's energy to think about information relationships. (= Refactoring UI: A Practical UI Handbook for Non-Designers (Hierarchy · Whitespace & Spacing · Color Systems · Typography · Depth & Shadows · Image Handling · Final Polish · Practical Breakdowns) §3.1 same principle, Sajid adds the cognitive explanation that "cramped is more harmful than loose".)
Supplement: The first principle of spacing is consistency(being consistent) — even if using 0.5rem everywhere looks crowded, as long as it is consistent, it is better than random. The rem mindset can also be applied to defining rounded corners.
space-between(flex justify-between) is not "adjusting spacing", but declaring structural roles("information subject + corresponding actions": what I am reading on the left, what I can do on the right).
Seven, The Easiest Way to Pick Colors: HSL Lightness to Build Color Scales (The Easy Way to Pick UI Colors)
Theme:Color is the easiest part of UI, the hard part is knowing when to stop and just pick a "usable" scheme. Don't over-academicize it.
7.1 A reusable color structure (three categories of colors)
| Category | Use |
|---|---|
| Neutral | Backgrounds, text, borders, and a large number of basic elements — the skeleton of the UI |
| Brand / Primary | Main actions, add a bit of character — emphasize key points |
| Semantic | Express states: Success (green) / Warning (yellow) / Error (red) |
7.2 Color in UI is essentially "shades" — why use HSL instead of hex
You will see shade applications everywhere (button hover, gradient backgrounds). For three visually similar grays, when represented with hex hex at the code level they are completely irregular and hard to maintain;HSL HSL, each numerical change corresponds to a clear visual change, suitable for building systematic color scales.
Three components of HSL:
| Component | Meaning | Key point |
|---|---|---|
| H Hue | Position on the color wheel, 0–360 | —— |
| S Saturation | 0–100, color intensity | When saturation is 0, regardless of hue you get a neutral color (gray) |
| L Lightness | Brightness/darkness of the color | Only adjusting L allows you to create a whole set of harmonious color scales with very simple math, no guessing needed |
Relationship with Refactoring UI: A Practical UI Handbook for Non-Designers (Hierarchy · Whitespace & Spacing · Color Systems · Typography · Depth & Shadows · Image Handling · Final Polish · Practical Breakdowns) §4.1: That article also advocates "use HSL not hex". Sajid's unique take is the trick of "only adjusting L lightness" — the following three-layer lightness for dark mode is his most practical recipe.
7.3 Building backgrounds & text with HSL (dark mode practice)
(Sajid mentioned that 83% of users prefer Dark Mode, so he uses dark interfaces as examples.)
Backgrounds: Keep hue and saturation at 0, only adjust lightness to divide into three layers:
| Lightness | Use |
|---|---|
| 0% lightness | Base color (bottommost layer) |
| 5% lightness | Surface elements such as cards |
| 10% lightness | Emphasize the most important, elevated elements |
Principle: Brighter elements appear closer to the front, closer to the user → use them on more important elements. Light usually comes from above, so the top is brightest, the bottom is darkest.
Text: Same logic — headings and key text use high contrast, other text uses slightly softer shades.But do not use 100% lightness for headings, as that will hurt the eyes (for light mode, reverse the lightness, then fine-tune by feel).
Naming convention (Sajid's little trick):
- Backgrounds have an upper/lower layer concept(the higher up, the closer to the light source, the lighter) → name using elevation/layer terms
BG-Dark/BG-Light. - Text has no upper/lower spatial layer concept → name using weight/contrast terms, with weaker text named
Text/Text-muted(muted).
More complete color rules (grays with warm/cool tones, increasing saturation when brightening, shifting hue to prevent graying when brightening, WCAG 4.5:1/3:1 contrast, not relying solely on color but pairing with icons) can be found in Refactoring UI: A Practical UI Handbook for Non-Designers (Hierarchy · Whitespace & Spacing · Color Systems · Typography · Depth & Shadows · Image Handling · Final Polish · Practical Breakdowns) §4. This article only highlights Sajid's minimum usable recipe of "only adjusting lightness + three-layer dark mode".
Eight, The Easy Way to Do Web Animations: Motion Contract Delivery Method【Exclusive · Not covered in Refactoring UI】
Theme:Translate "feel-based motion" into clear instructions that both AI and developers can execute precisely. This does not teach you to write animation code, but teaches PMs/designers to deliver motion using a set of parameterized, enumerable, cross-tech-stack constraint tables — Sajid calls this the Motion Contract.This is content completely absent from Refactoring UI, and is of high value to PMs who need to collaborate with AI/developers.
8.1 Why we need Motion Contract
The animation specification that UX gives to tech is essentially not an "effect description", but an implementable motion constraint table. A qualified table must meet 4 conditions:
- Parameterized(give numerical values, not adjectives like "make it natural")
- Enumerable(take from fixed options, not free improvisation)
- Cross-tech-stack(works with CSS / Lottie / Framer Motion)
- It is a constraint, not a suggestion
Plain language for PMs:If you tell developers "make this animation natural and smooth," the results will definitely be all over the place. If you instead say "duration 1200ms, ease-in-out, horizontal displacement ≤10%, only translate allowed, infinite loop with matching start and end states, attention weight Background," the results you get from developers and AI will be basically consistent.Turning adjectives into parameters is the entire value of this chapter.
8.2 A complete motion description must cover 6 dimensions
| Dimension | Question | Example |
|---|---|---|
| 1 Animation purpose (Why) | What role does this animation play in the user experience | Status cue / spatial hint / light guidance (does not serve as information explanation, does not act as a visual focal point) |
| 2 Trigger and lifecycle (When) | When it starts and how long it lasts | Auto-triggers after the element appears, no interaction required, loops continuously while the page is visible |
| 3 Time parameters (How long) | Single-cycle duration | About 2 seconds (strictly written as the 1.8–2.2 second range), relatively slow rhythm |
| 4 Spatial change (What moves) | What moves and by how much | Single-dimension horizontal displacement, amplitude < 10% of the element size, no scaling/rotation/transparency change |
| 5 Rhythm curve (How it feels) | How the speed changes | Slow at first → accelerates in the middle → decelerates at the end, close to natural inertia rather than mechanical constant speed |
| 6 Boundaries and constraints (Constraints) | What is not allowed | Consistent start and end with no jumps, does not affect text readability, prioritize content clarity when conflicting with readability |
Combined "single-paragraph" natural language Prompt (can be fed directly to AI):
"Please add a restrained looping animation for status indication to this element. It starts automatically after appearing and plays continuously while the page is visible. A single cycle is about 2 seconds, with a relatively slow rhythm. It only contains small horizontal displacement, with the amplitude controlled within 10% of the element size. The rhythm is slow first, then fast, then slow again, with slight dynamism in the middle and a smooth finish at the end. The start and end states are consistent, with no jumps in the loop. It maintains low presence overall, does not interfere with reading, and does not act as a visual focal point."
8.3 Value table for the six enumerable dimensions (for selecting values)
Break motion effects into 6 dimensions, each with fixed levels + corresponding "control language for feeding AI":
① Duration(perception of speed):
| Range | Experience | Typical semantics |
|---|---|---|
| ≤ 300ms | Instant, strong feedback | Click trigger |
| 300–600ms | Fast response | Operation confirmation |
| 600–1200ms | Perceivable but not rushed | UI feedback |
| 1200–1800ms | Smooth transition | State change |
| 1800–2500ms | Slow, backgrounded | System-level |
| ≥ 2500ms | Lengthy and distracting | ❌ Avoid |
② Easing rhythm(motion "personality"): linear = mechanical, no emotion / ease-in = restrained, slow start / ease-out = decisive, stable finish / ease-in-out = natural and realistic (most commonly used) / soft cubic-bezier = premium and delicate / aggressive bezier/spring = strong and lively.
③ Spatial Change amplitude:≤5% almost imperceptible (background animation) / 5–10% slight cue (status hint) / 10–15% clear change (UI feedback) / 15–25% emphasis (guidance to focus) / ≥25% strong (emotion/brand). Direction semantics: horizontal = process panning / vertical = level appearance and disappearance / Z-axis = importance change.
④ Properties Scope allowed properties(complexity): translate only = extremely low risk / translate+opacity = low / translate+scale = medium (pay attention to readability) / full transform set = high (easily grabs attention) / +blur/filter = ❌ Avoid.
⑤ Loop Policy:no loop (operation feedback) / finite loop 2–3 times (tutorial guidance) / infinite loop with matching start and end (system status background) / infinite loop with different start and end = ❌ will cause jumps.
⑥ Attention Weight:Background (almost ignored, system-level) / Supportive (perceivable but not attention-grabbing) / Primary (clear attention, key feedback) / Dominant (forced attention, brand emotion).
8.4 Three constraint tables actually handed to developers (graded by scenario)
| Dimension | System-level / Low Motion | Interaction feedback / Medium | Brand emotion / High |
|---|---|---|---|
| Duration | 1800–2500ms (forbidden <1500ms) | 600–1200ms (recommended 800ms) | 300–800ms (forbidden >800ms) |
| Easing | ease-in-out (linear forbidden) | ease-out (must settle at the end) | custom/spring (overshoot allowed) |
| Spatial | ≤10%(translateX/Y only) | ≤5% (slight scale allowed) | ≤15% (multi-axis combinable) |
| Properties | transform only (opacity/rotate forbidden) | translate+scale (rotate forbidden) | full transform set (rotate allowed) |
| Loop | infinite with matching start and end (from==to) | once (loop forbidden) | once (infinite strictly forbidden) |
| Attention | Background (does not steal attention from the main thread) | Supportive (does not cover main content) | Primary/Dominant (clear focal point) |
Professional wording:Tell developers "I'm not providing specific animation implementations here, but a set of Motion constraints. Different scenarios can only take values within these dimensions and ranges; the implementation method is technically free, but do not cross levels or mix them." This turns "motion based on feeling" into a deliverable, verifiable contract.
Appendix: Sajid vs Refactoring UI quick reference (to avoid repeated lookups)
| Topic | Sajid's unique perspective (see this article) | Full detailed rules (see Refactoring UI: A Practical UI Handbook for Non-Designers (Hierarchy · Whitespace and Spacing · Color Systems · Typography · Depth and Shadows · Image Processing · Final Polish · Practical Breakdowns)) |
|---|---|---|
| Mindset/Getting started | Function > aesthetics, originality is overrated, copy mature works (Chapters 1 and 2) | §1 Opening mindset (start from function, go black-and-white first, iterative workflow) |
| Typography | Accounts for 80% of UI, 3 font sizes ±2px, line height uses em for natural breathing, UI = minimalist variable system (Chapter 3) | §5 Complete type scale / line length / line height / alignment / letter spacing |
| Spacing | Anchor spacing to font size with rem, inside-group < outside-group, vertical < horizontal padding, reduce from large to small (Chapter 6) | §3 Whitespace and spacing systems, avoiding ambiguous spacing, grids are overrated |
| Color | Only adjust L lightness, dark mode 0/5/10% three layers, BG/Text naming convention (Chapter 7) | §4 8–10 gray steps + 9 steps of primary color, lighten by shifting hue, WCAG contrast |
| Depth/Fixing boring UI | HSL lightness layering + shadows, biggest return from ordinary to good, 11-step practice (Chapter 5) | §6 Dual-layer shadows, 5-level shadow table, flat design can also create depth |
| Motion | Motion Contract: 6-dimensional parameterized constraints for feeding AI/developers (Chapter 8) | (Not covered in Refactoring UI) |
| Cognitive science principles | Law of similarity / law of proximity (Chapter 4) | —— → See NNGroup Visual Design Principles · Gestalt Grouping · Visual Hierarchy · Typography · Color · Images (19 articles · Five major visual principles / Gestalt proximity-similarity-closure-common region / visual hierarchy-grid-golden ratio / typography terminology-pairing-reading fonts / color 60-30-10 rule / picture superiority effect-photos-imagery / aesthetics-usability effect / glossary) |
Sourced from will-design-notes / Sajid Code UI (Will's Design Notes resource section, mixed Chinese-English notes for Sajid's UI video tutorials, 7 topics across 8 articles). The supporting tutorial videos (with audio tracks) and a large number of before/after comparison screenshots are kept in sources; because the path contains spaces and is already gitignored, they are not embedded in this wiki. Read alongside Refactoring UI: A Practical UI Handbook for Non-Designers (Hierarchy · Whitespace and Spacing · Color Systems · Typography · Depth and Shadows · Image Processing · Final Polish · Practical Breakdowns): This article = Sajid's unique mindset and stance + two exclusive techniques: lightness layering and motion contracts; that article = a handbook of 50+ fully actionable tips. For the underlying cognitive science principles, see NNGroup Visual Design Principles · Gestalt Grouping · Visual Hierarchy · Typography · Color · Images (19 articles · Five major visual principles / Gestalt proximity-similarity-closure-common region / visual hierarchy-grid-golden ratio / typography terminology-pairing-reading fonts / color 60-30-10 rule / picture superiority effect-photos-imagery / aesthetics-usability effect / glossary).
Sources and related materials
- Refactoring UI: A Practical UI Handbook for Non-Designers (Hierarchy · Whitespace and Spacing · Color Systems · Typography · Depth and Shadows · Image Processing · Final Polish · Practical Breakdowns)
- NNGroup Visual Design Principles · Gestalt Grouping · Visual Hierarchy · Typography · Color · Images (19 articles · Five major visual principles / Gestalt proximity-similarity-closure-common region / visual hierarchy-grid-golden ratio / typography terminology-pairing-reading fonts / color 60-30-10 rule / picture superiority effect-photos-imagery / aesthetics-usability effect / glossary)