Frequently Asked Questions About Kole Jain 28-Day Design Eye Method
21 answers covering everything from basics to advanced usage.
// Basics
What exactly is a swipe file and how do I build one?
A swipe file is a curated personal collection of 20+ hero and feature sections that genuinely inspire you, used as raw reference material for cloning and pattern recognition. Build it by saving only designs you'd want to produce yourself — never random ones — from Mobbin, Dribbble, Pinterest, or direct screenshots, then organizing them by section type: hero, features, stats, nav.
What is the skeleton principle in design?
The skeleton principle says every well-designed page breaks down into the same repeatable zones — navbar, main text block, visual asset, supporting stats. Once you identify this skeleton, you can reverse-engineer and reconstruct any design. Different pages share the same skeleton despite looking visually distinct, which is why pattern recognition accelerates your learning so quickly.
What is an escape hatch in UX design?
An escape hatch is a UX element that gives users who arrive at a screen unintentionally a clear, low-friction path to an alternative destination — for example, an 'Already have an account? Log in' link on a signup screen. Always design for users who land somewhere unintentionally; every entry point should provide a way out or an alternative.
// How To
How do I annotate a design to find its skeleton?
For each design, label the four zones: main text block, navbar, primary visual asset, and any supporting stat or social-proof zones. Then annotate specific spacing values between elements, note which elements are grouped by proximity, identify where hierarchy comes from opacity versus font size, and confirm the focal point of any image isn't obstructed by overlapping text or UI.
How do I restyle a layout without changing its structure?
Take a layout you've already built and keep its structure identical while changing only visual decisions. For a warm/friendly flavor, apply warm background colors, colorful visuals, heavily rounded corners, and large bubbly buttons. For modern/premium, reduce corner rounding, shift to lower-saturation or monochromatic imagery, and optionally add noise or grain texture. Write your 2-3 target words before you start.
How do I decide which layout to use for a section?
Ask one question: what is the content trying to do? A profound statement calls for centered text, large font, and breathing room. A features list with many items calls for a bento grid so nothing is lost on scroll. Content dictates layout — never make the choice based on aesthetics alone. At any section, there are only a handful of viable options anyway.
How do I map a UX onboarding flow with a journey split?
Design shared entry screens first: name and email with an escape hatch to login, then email verification where you document whether to block progress or allow continuation. At the workspace-creation screen, capture team size — this is where the journey splits. Users who identify as part of a team route to an 'Invite team members' screen; individuals bypass it entirely. Design both post-split screens.
// Troubleshooting
Why does my design work always look the same?
This is a flavor problem, not a layout problem — you're stuck in UI, not UX. Fix it by taking any existing layout and restyling it twice without changing structure: once warm and friendly, once modern and premium. Writing the target 2-3 words before each pass is essential because flavor starts with language, not pixels. This exercise builds the ability to produce different looks on demand.
My cloned design doesn't look right — what am I doing wrong?
You're probably simplifying or 'improving' instead of cloning exactly. Go back and measure the real values: card spacing, nav height, button padding, font sizes, and opacity. Beginners commonly treat hierarchy as font-size-only and miss opacity entirely — check whether secondary text should be reduced to around 55% opacity. The whole point is confronting every micro-decision, not glossing over them.
My hero text is hard to read over the background image — how do I fix it?
Your background image is too busy for the hero section. Busy backgrounds destroy text legibility and obscure the focal point of the visual asset. Choose a calmer image, add an overlay, or restructure the layout so text and image occupy separate zones rather than overlapping. Always confirm the focal point of any image is never obstructed by text or UI.
I keep getting design paralysis — how do I make faster decisions?
Remember that layout options are finite — at any given section there are only a handful of viable choices. Hero sections resolve into a small decision tree: image-plus-text pair, full-screen image, text-top with image-bottom, and so on. Recognizing this reduces paralysis dramatically. Combine it with the content-dictates-layout question to narrow your options almost instantly.
// Comparisons
How does cloning compare to redesigning something you like?
Cloning forces you to confront every micro-decision — card spacing, nav height, button padding — while redesigning lets you skip exactly those decisions, which are the entire point of the exercise. Redesigning feels more creative but teaches you far less because you never have to reckon with why the original chose specific values. For skill-building, cloning wins decisively.
How is this method different from following Figma tutorials?
Figma tutorials teach tool mechanics; this method trains perception first, then forces real decision-making through cloning. A tutorial hands you the answers, so you never develop the eye to make choices independently. This method deliberately makes you annotate, measure, and reconstruct real designs, building durable judgment rather than tool familiarity you'll forget once the video ends.
Is UI or UX more important to learn first?
Neither is more important, but the method teaches them as distinct tracks so you don't conflate them. UI is flavor — the look and feel layer — while UX is the journey and decision-logic layer. The 28-day plan builds UI through cloning and flavor restyling in Weeks 1-3, then introduces UX flow mapping in Week 4. Mixing them up causes you to solve the wrong problem.
How does proximity-driven grouping compare to using borders or boxes?
Proximity-driven grouping uses spacing alone — closer elements are perceived as belonging together — while borders and boxes add visual weight and clutter. Intentional pixel distances like 8px versus 12px versus 32px communicate relationships without extra decoration. Spacing is the primary, most elegant tool for hierarchy; boxes are often a crutch beginners reach for when they haven't learned to control proximity.
// Advanced
Can an intermediate designer benefit from this method?
Yes — intermediate designers use it to systematically rebuild foundational instincts, especially if their work all looks the same. The flavor restyling exercises in Steps 6 and 7 directly address the inability to make a site feel premium versus playful. Even experienced designers benefit from re-training their eye through annotation and confronting micro-decisions they've been intuiting rather than understanding.
How do I use opacity to create hierarchy between same-size text?
Reduce the opacity of secondary text — around 55% is a common value — so it recedes visually while primary text stays fully opaque. This creates hierarchy between elements of identical font size without changing dimensions. It's a technique beginners consistently miss because they treat hierarchy as a font-size-only problem, but opacity is equally powerful and often more subtle.
When designing a signup flow, should I block progress on email verification?
It depends on your product's risk tolerance, and the method requires you to document your reasoning either way. Blocking progress ensures verified emails but adds friction; allowing continuation with a gentle reminder reduces drop-off but risks unverified accounts. The discipline isn't about the 'right' answer — it's about consciously deciding and articulating why, because every UX screen decision should be justified in terms of the user's journey.
How should I personalize my swipe file for a specific industry?
Curate reference designs from your target industry — SaaS, e-commerce, portfolio, and so on — so your pattern recognition develops around the conventions you'll actually design for. If you know your target style or industry upfront, weight your 20+ saves toward that context while still keeping only designs you'd genuinely want to produce. This makes your cloning exercises more directly transferable to real work.
What should I do after finishing the 28-day plan?
Begin portfolio work now that your taste has started to stabilize — this is the deliberate stopping point where 'Portfolio Last' releases its hard stop. Apply your trained eye and flavor skills to original briefs, keep cloning new patterns to expand your library, and start articulating layout and journey decisions in interviews. Your portfolio should now reflect real, developed skill rather than early ambition.
How long should each cloning exercise take?
There's no fixed time, but the value comes from measuring and matching every micro-decision precisely, so don't rush. Expect a first hero clone to take longer as you learn to inspect spacing, nav height, and opacity values. By your second, structurally different clone, you should move faster and be able to articulate the finite layout options for at least two major section types.