This content originally appeared on DEV Community and was authored by Sachin Maurya
Two years ago, I thought I had it all figured out as a frontend dev:
Fast React apps
95+ Lighthouse scores
Pixel-perfect responsive layouts
Clean TypeScript
That was my definition of “great frontend.”
But here’s the truth I learned the hard way:
Code that runs perfectly can still feel broken to users.
The Mindset Shift
While working on enterprise projects, I noticed something strange.
We hit all our technical targets—fast APIs, optimized bundles, high scores.
Yet users still got stuck. Some didn’t know if their action succeeded. Others rage-clicked buttons because they saw no feedback.
That’s when it clicked:
Being a great frontend dev isn’t just about writing code—it’s about designing experiences.
This realization hit even harder when I started Meta’s Principles of UX/UI Design course.
UX Principles That Changed How I Code
1. POUR Framework (WCAG 2.1)
I used to see accessibility as a checklist. Now I see it as the foundation of good UX.
- Perceivable → Alt text, contrast, captions
- Operable → Full keyboard support, no traps
- Understandable → Clear labels, error messages
- Robust → Semantic HTML that works with screen readers
Example: I once built a drag-and-drop board that only worked with a mouse. After revisiting POUR, I added keyboard navigation. Not only did it become accessible—it became faster for power users.
2. Jakob Nielsen’s Heuristics
These 10 principles are now my React component checklist:
- Visibility of status → Always show progress or loading
- Error prevention → Confirm before destructive actions
- Consistency → Keep patterns the same across the app
- User control → Undo and cancel matter more than we think
Example: Instead of “Error occurred”, I now give actionable feedback:
// Before ❌
<p>Error occurred</p>
// After ✅
<div className="error">
<p>Unable to save changes</p>
<button onClick={retry}>Try Again</button>
<button onClick={saveDraft}>Save as Draft</button>
</div>
3. Fitts’s Law
Big targets = faster interactions. Simple, but game-changing.
On mobile especially, buttons need to be at least 44px by 44px.
<button className="min-h-[44px] min-w-[44px] px-4 py-2 rounded">
Submit
</button>
Result: In internal testing, people finished tasks 40% faster just because the buttons were easier to tap.
4. Miller’s Rule
Humans can only hold around 7 items in short-term memory.
Applied to React apps:
- Break long forms into steps
- Keep dropdown options under 7–9
- Use progressive disclosure for advanced settings
In practice, this meant users stopped abandoning our “all-in-one” forms once we broke them into clear steps.
How UX Made My Code Better
Before UX knowledge:
I focused on getting features to work.
After UX knowledge:
I focus on making them feel right.
That means:
- Semantic HTML → better for screen readers and SEO
- Clear error states → fewer support tickets
- Loading indicators → less rage-clicking
- Larger targets → faster interactions
It’s not just design fluff—it’s engineering empathy.
Real Impact
When I combined technical optimization with UX:
80% faster load times
45% more conversions
WCAG 2.1 AA compliance- Apps that users actually enjoy using
Those aren’t just metrics—they’re proof that UX principles make React code stronger, not heavier.
My Learning Journey
I’m currently finishing Meta’s Front-End Developer Certificate. The UX/UI Design module has been a turning point.
Next on my roadmap:
- Java + DSA (for backend & system design)
- IBM Full-Stack JavaScript Developer
- AWS Cloud Practitioner
- Google UX Design Certificate
Because being a “frontend dev” today isn’t enough—we need to be full-stack and user-focused.
Quick UX Wins for Devs
- Add visible loading states to every async action
- Make error messages actionable (“Try again”, “Save draft”)
- Use semantic HTML first, ARIA second
Small changes. Big difference.
Final Thought
Before UX: I built features that worked.
After UX: I build experiences people love to use.
And honestly—that’s the real definition of a frontend developer.
Over to you: What’s one UX principle you wish you had learned earlier in your dev journey?
#frontend #react #nextjs #uxdesign #webdevelopment #accessibility #learninginpublic
This content originally appeared on DEV Community and was authored by Sachin Maurya