Frequently Asked Questions About Kole Jain UI/UX Design Fundamentals Skill
21 answers covering everything from basics to advanced usage.
// Basics
What does 'good UI signals how it works' actually mean?
It means every state — selected, inactive, hoverable, pressed — is communicated visually through containers, color, opacity, or tooltips, so users never guess what an element does or affords. If your design needs written instructions to be usable, the UI has failed. Visual signifiers should carry the meaning that instructional copy would otherwise handle.
What is the four-point grid system and why multiples of four?
The four-point grid means all spacing and sizing values are multiples of 4. It's not that 4 inherently looks better — it's that you can always split values in half, which creates consistent, predictable relationships throughout a design. This discipline keeps spacing coherent whether you're at 8px, 16px, or 32px.
What is a color ramp and how do I build one?
A color ramp is a systematic range of tints and shades derived from your primary brand color. Build a partial one by lightening the primary for backgrounds and darkening it for text. Large companies use full ramps to build chips, states, charts, and components consistently. Layer semantic colors on top for purposeful meaning.
What are ghost buttons and when should I use them?
Ghost buttons have no background fill — just a border or text — until the user hovers. Use them for secondary CTAs alongside a filled primary button, and for sidebar navigation links. They keep hierarchy clear because the filled primary CTA always wins the eye while the ghost button stays visually subordinate.
// How To
How do I apply visual hierarchy to a data card?
Rank each element by importance. Make the most important item large and bold near the top. Move a key metric like price to the top-right in your primary brand color to draw the eye through contrast. Put supporting details smaller and lower in neutral color. Add an image for color and scannability, and replace verbose labels with icons.
How do I set icon sizes correctly?
Match icon size to the line height of the adjacent text. If your line height is 24px, set the icon to 24px. Icons are almost always too large by default, which breaks alignment and hierarchy. Sizing icons to line height keeps them integrated with the text rather than competing with it.
How do I choose button padding?
Use a padding ratio where width is roughly double the height — a 2:1 ratio. Keep buttons that sit side by side the same height, and use icon-matched sizing if icons are included. This produces balanced, professional-looking buttons and keeps a button group visually consistent.
How many font sizes should a landing page use?
Cap yourself at six font sizes with a wide range for landing pages and websites. For dashboards, shrink that range and rarely exceed 24px because of information density. Never use more than one typeface — you almost never need more than a single sans-serif font for any design.
// Troubleshooting
My dark mode cards look flat — how do I fix them?
Remove high-contrast light borders and stop using shadows, which are invisible against dark backgrounds. Make card backgrounds slightly lighter than the page background to create depth. Then desaturate and dim any bright chips, and flip their text to a brighter version of the same hue to keep internal hierarchy intact.
My shadow looks harsh — what am I doing wrong?
If the shadow is the first thing you notice, you're overdoing it. Reduce the opacity and increase the blur. Cards need only subtle shadows; reserve stronger shadows for popovers and overlaid content. Shadows should quietly lift elements off the background, not announce themselves.
Why does my interface feel unresponsive even though it works?
You're probably designing interactions with only a default state, or confusing a state change with action confirmation. A hover shows state, but users also need feedback that an action completed — a success message, a spinner during fetches, or a micro interaction like a chip sliding up after a copy. Close the feedback loop.
My text on an image is hard to read — what should I do?
Don't place text directly on an image. Skip full-screen flat overlays too, since they kill the image. Add a linear gradient so the image shows clearly at the top and smoothly becomes a readable background where the text sits. For a more modern look, layer progressive blur on top of the gradient.
// Comparisons
How does this methodology compare to just copying a Dribbble design?
Copying a Dribbble shot gives you a surface result you can't adapt; this methodology teaches the reasoning so you can design anything. When your content or brand differs, principles like hierarchy, semantic color, and mode-specific depth let you make deliberate decisions. Copying breaks the moment your requirements diverge from the reference.
How is a micro interaction different from a hover state?
A hover state is a state change that shows an element is interactive. A micro interaction is feedback turned up a notch — it confirms an action actually completed, like a chip sliding up after copying. State change tells you something can happen; the micro interaction confirms it did. Both matter, but only the micro interaction closes the loop.
Should I always use a 12-column grid like most tutorials say?
No. The 12-column grid is a guideline for responsive, repeating-content layouts like galleries and blogs — not a universal rule. For most designs, consistent four-point-multiple spacing and generous white space matter more than strict column adherence. Treating the grid as mandatory is a common pitfall that leads to cramped, over-structured layouts.
How does semantic color differ from brand color?
Semantic colors carry fixed meaning as signifiers — blue for trust, red for danger, yellow for warning, green for success — and are used for chips, states, and alerts. Your brand color is reserved for emphasis and hierarchy, drawing the eye to key elements. Both must carry purpose; neither should be used as decorative wallpaper.
// Advanced
How do I build a full color system from one brand color?
Start with your primary color, lighten it for backgrounds and darken it for text to create a partial ramp. Then layer semantic colors purposefully: blue for trust, red for danger, yellow for warning, green for success. Use these for chips, badges, states, and alerts only — never decoration. In dark mode, desaturate and dim bright accents.
When is progressive blur worth using over a plain gradient?
Use progressive blur when you want a more modern, premium look on image-text overlays. Layer it on top of a linear gradient so the image is crisp at the top and gradually blurs into a readable text background at the bottom. A plain gradient is the reliable default; progressive blur elevates it stylistically.
How do I keep hierarchy in dark-mode chips after desaturating?
After desaturating and dimming a chip's background, flip the chip text to a brighter version of the same hue. This preserves the internal hierarchy between the chip surface and its label without the harsh brightness that makes chips painful in dark mode. Keeping hue consistent while shifting brightness maintains the semantic meaning.
What's the full state set an input field needs?
Inputs require more states than buttons: default, focus (on click), error (red border plus message), and an optional warning state for non-blocking issues. Pair these with global patterns — loading spinners when data fetches, success messages when actions complete. Mapping every interactive element to its full state set ensures no interaction is silent.
How should I adapt typography between a landing page and a dashboard?
Landing pages can use up to six font sizes with a wide range for dramatic hierarchy. Dashboards, being information-dense, need a compressed range and rarely exceed 24px. In both cases, use only one sans-serif typeface, and apply the header tightening technique (–2% to –3% letter-spacing, 110%–120% line-height) to any large display text.