A design-first learning repository where I practice UI design daily as a Frontend Developer.
This repo is not about pixel‑perfect designs. It is about building design intuition — spacing, alignment, hierarchy, and typography — and translating them into real frontend code.
As a frontend developer, writing code is not enough. Good UIs are:
- easy to scan
- visually balanced
- readable
- intentional
This repository documents my daily UI design practice, inspired by challenges like Daily UI, and focuses on design principles developers must know.
Whitespace is not empty space — it is a design tool.
What I focus on:
- spacing between sections (macro whitespace)
- padding inside components (micro whitespace)
- line-height for readability
Key mindset:
If everything is loud, nothing is important.
Alignment creates order and clarity.
What I practice:
- grid-based layouts
- consistent margins & paddings
- avoiding “almost aligned” elements
Rule:
If two elements relate, align them perfectly.
Visual hierarchy controls what users notice first.
I work with:
- font size & weight
- color contrast
- spacing
- CTA priority
Goal:
Users should understand the UI without thinking.
Typography defines how professional a UI feels.
What I focus on:
- font-size scales
- line-height & readability
- limited font weights
- good contrast
Fonts I mostly experiment with:
- Inter
- Roboto
- Poppins
- Refactoring UI — Design thinking specifically for developers
- Tailwind Labs (YouTube) — Component design & spacing philosophy
- DesignCourse — UI/UX fundamentals explained clearly
- Flux Academy — Layouts, hierarchy & real‑world examples
- Jesse Showalter — Minimal & clean UI thinking
- Mizko — Modern SaaS UI & advanced hierarchy
- Nielsen Norman Group — UX research & visual hierarchy
- Typewolf — Typography inspiration & font pairing
- Google Fonts Knowledge — Typography basics
- Stripe
- Linear
- Notion
- Vercel
- Airbnb
Question to ask:
Why does this feel clean?
- practice one UI daily
- focus on spacing & hierarchy
- redesign old UIs with better design sense
- build design confidence as a frontend engineer
This is a long‑term learning log, not a showcase of perfection.
- think like a designer while coding
- build clean & readable interfaces
- reduce UI clutter
- improve frontend portfolio quality
Design is not decoration. Design is how clearly your UI communicates.
This repository represents my journey to become a design‑aware frontend developer.
✨ Feel free to explore, fork, or take inspiration. Happy designing and coding! 🚀