Frequently Asked Questions About Kole Jain UI/UX Design Fundamentals Skill
23 answers covering everything from basics to advanced usage.
// Basics
What is visual hierarchy and why is it the most important UI design concept?
Visual hierarchy is the use of size, position, and color to rank content by importance so users' eyes travel to the right element first. It's the most important concept because without it, every element competes for attention and the interface reads like a spreadsheet. The hierarchy is created through contrast — the difference between big and small, colorful and neutral — not by making everything large or bold.
What is a color ramp in UI design?
A color ramp is a systematic range of tints and shades derived from a single primary brand color. Lighten the primary for backgrounds; darken it for text. Large companies use color ramps to build consistent chips, states, charts, badges, and alerts across an entire design system. Starting from one brand color and expanding outward ensures visual cohesion without requiring you to pick dozens of ad hoc colors.
What is a ghost button and when should I use one?
A ghost button has no background fill — only a border or text — until the user hovers over it. Use ghost buttons as secondary CTAs placed alongside a filled primary button (e.g., 'See Demo' next to 'Start Free Trial'). Keep ghost buttons in a neutral or muted tone so the primary CTA always wins the visual hierarchy. Ghost buttons still require all four states: default, hovered, active/pressed, and disabled.
Can I use more than one typeface in a UI design?
You almost never need more than one font. Using a single sans-serif typeface and differentiating with size, weight, and color creates cleaner, more cohesive designs. Adding a second typeface introduces complexity without proportional benefit. If you feel you need a second font, first exhaust the hierarchy options within your chosen typeface: bold vs. regular, large vs. small, colored vs. neutral. One font is almost always enough.
What semantic colors should I use in my UI and what do they mean?
Blue signals trust (common for primary CTAs and links), red signals danger or urgency (errors, destructive actions), yellow signals warnings (non-critical issues), and green signals success (confirmations, completed states). These associations are deeply ingrained in user expectations. Use semantic colors for chips, states, badges, and alerts — never for decoration. Your primary brand color handles emphasis and hierarchy; semantic colors handle meaning.
What progressive blur is and how to use it on hero images
Progressive blur is a blur effect layered on top of a gradient overlay on an image. The image appears sharp at the top and gradually blurs toward the bottom where text sits. Combined with a linear gradient from transparent to solid, it creates a modern look that preserves the image's impact while making text fully readable. It's the polished alternative to flat dark overlays that kill the image entirely.
// How To
How do I size icons correctly next to text?
Match the icon size to the line height of the adjacent text. If the text's line height is 24px, set the icon to 24px. Icons are almost always too large when designers size them by gut feeling. This rule ensures icons feel proportional and integrated with the text rather than oversized or floating. It applies to inline icons, navigation icons, and button icons alike.
How do I set button padding for a professional look?
Use a padding ratio of approximately 2:1 width-to-height for standalone buttons. This means horizontal padding should be roughly double the vertical padding. For example, if your vertical padding is 12px, horizontal padding should be about 24px. This ratio produces buttons that feel balanced and clickable. Combined with the four required states (default, hover, active, disabled), this creates professional, usable buttons.
How do I put text on top of an image without ruining readability?
Never place text directly on an image without an overlay. Avoid full-screen flat overlays because they kill the image. Instead, use a linear gradient that lets the image display fully at the top and smoothly transitions into a solid, text-readable background at the bottom. For a more modern look, layer a progressive blur on top of the gradient. This preserves the image's visual impact while ensuring text remains legible.
How do I apply the header tightening technique in Figma?
Select your large display or header text in Figma. Set letter-spacing to –2% to –3% (in Figma's text properties panel). Set line-height to 110%–120% of the font size. For example, a 48px header would get line-height around 53–58px and letter-spacing around –1% to –1.5px. This instantly makes large text look tighter, more professional, and more editorial. Only apply it to large display text, not body copy.
How do I convert a light mode design to dark mode step by step?
First, swap the page background to a deep, dark color — consider deep purples or muted greens, not just navy or gray. Make card backgrounds slightly lighter than the page to create depth. Remove or reduce light borders. Eliminate drop shadows entirely. Take bright accent chips: desaturate and dim the background, then brighten the text to a lighter version of the same hue. Test for sufficient contrast. This preserves hierarchy without relying on light-mode techniques.
How do I handle sidebar navigation styling in this methodology?
Treat sidebar navigation links as ghost buttons — they have no background fill until the user hovers or selects them. The active/selected page link gets a subtle container or background fill to signal the current state. Size the nav icons to match the adjacent text's line height. Keep nav text in one or two sizes at most. Use opacity or color to distinguish between active, hovered, and inactive states as visual signifiers.
// Troubleshooting
Why do my dark mode designs look flat even after I add shadows?
Shadows are invisible against dark surfaces — they disappear into the dark background. In dark mode, create depth by making card backgrounds slightly lighter than the page background instead of relying on shadows. Remove high-contrast light borders, which create jarring contrast. Desaturate bright accent chips and flip their text to a brighter version of the same hue. Dark mode requires a fundamentally different depth strategy than light mode.
Why does my UI design still look like a spreadsheet after adding content?
A spreadsheet appearance usually means you haven't applied visual hierarchy. All text is likely the same size, weight, and color. Fix this by ranking elements by importance: make the primary element large and bold, use your brand color on the key metric or CTA, shrink supporting details, and add an image for color and scannability. Replace verbose text labels with icons where possible. Add generous white space between groups using 4pt-multiple spacing.
My shadows look heavy and distracting — how do I fix them?
If the shadow is the first thing you notice, reduce opacity and increase blur. Subtle card shadows should have low opacity (5–15%) and high blur (16–32px). Popovers and overlaid content can use stronger shadows, but they should still feel natural, not like a thick border. The shadow's job is to create a sense of elevation, not to draw attention to itself. In dark mode, skip shadows entirely and use lighter card backgrounds.
Why are my accent chips painfully bright in dark mode?
Bright chips that worked in light mode become glaring in dark mode because surrounding surfaces are dark, amplifying the contrast. Fix this by desaturating and reducing the brightness of the chip background color. Then flip the chip text to a brighter, lighter version of the same hue to maintain internal hierarchy. The chip should feel muted but readable, not like a neon sign against a dark canvas.
// Comparisons
How does the Kole Jain UI/UX methodology compare to Material Design?
Material Design is a complete design system with specific components, tokens, and platform guidelines from Google. The Kole Jain method is a universal design methodology — principles and a workflow that apply regardless of what design system you use. You can apply Kole Jain's hierarchy, spacing, color, and interaction-state rules within Material Design, Tailwind, or any custom system. It fills the strategic gap that component libraries leave open.
How is this different from just following Tailwind UI or Shadcn components?
Tailwind UI and Shadcn provide pre-built components but don't teach you why certain decisions work. The Kole Jain method teaches the underlying design reasoning: how to create hierarchy, when to use ghost buttons, how to size icons to line height, why dark mode needs different depth techniques. You can use Tailwind or Shadcn components and still apply this methodology to make better layout, color, hierarchy, and interaction-state decisions.
// Advanced
Should I always use a 12-column grid for my designs?
No. Use a 12-column grid only for highly structured, repeating-content pages like image galleries, blog listings, or product grids where responsive behavior across 12-column desktop, 8-column tablet, and 4-column mobile matters. For most other designs — landing page heroes, settings screens, dashboards — default to consistent 4pt-multiple spacing and generous white space. The 12-column grid is a guideline for specific layouts, not a universal rule.
How do I decide between six font sizes for a landing page versus a dashboard?
For landing pages and marketing websites, use up to six font sizes with a wide range (e.g., 14px to 72px) because you need dramatic contrast between hero headlines and body text. For dashboards, shrink the range — rarely exceed 24px because information density is high and oversized text wastes space. In both cases, use only one typeface and apply the header tightening technique (–2% letter-spacing, 110–120% line-height) to large display text.
How many interaction states should an input field have?
An input field needs at minimum three states beyond default: focus (activated on click, showing a highlighted border), error (red border plus an error message), and warning (for optional issues). You can also add filled, disabled, and read-only states depending on the context. Inputs are more state-heavy than buttons. Every state must be visually distinct so users instantly understand what the input expects from them.
What's the difference between a micro interaction and a regular hover state?
A hover state is a basic feedback signal — it tells the user an element is interactive. A micro interaction goes further: it confirms that a specific action has completed. For example, a button changing color on hover is a state change; a chip sliding up after pressing a copy button is a micro interaction. Micro interactions close the feedback loop. State changes signal affordance; micro interactions confirm execution.
Do I need micro interactions for every button in my app?
No. Reserve full micro interactions for the 1–3 most critical user actions — submit, copy, delete, toggle. These are the moments where users most need confirmation that their action completed. For standard buttons, the four required states (default, hover, active, disabled) plus a loading spinner for async actions provide sufficient feedback. Micro interactions should feel special and purposeful, not routine.