Where this started
I didn't come into design through a design program — I came into it through building websites and noticing that the visual layer decided whether people trusted the thing I'd built. A clean layout with bad spacing still feels wrong, even if the visitor can't say why. That gap between "technically correct" and "actually pleasant to use" is what pulled me toward design work specifically.
Most of my design work has happened on real projects rather than isolated exercises. That means every layout decision had to survive contact with real content: inconsistent image sizes, variable text lengths, and requirements that change after the layout is already done.
Mobile-first navigation, in practice
A hamburger menu is easy to build and easy to get subtly wrong — wrong tap targets, menus that open under the fold, active states that don't update when scrolling past a section. Here's a small working version of the pattern I actually use — tap the icon.
1. Rough structure
Blocking out sections with real content lengths, not lorem ipsum — copy length changes spacing decisions more than people expect.
2. Mobile pass
Every section gets tested narrow first. If it breaks at 360px, I fix it before touching desktop styles.
3. Motion and accents
Hover states, transitions, and any glass/gradient effects go in last — once the underlying structure already works without them.
Lessons learned
CSS specificity bites quietly. An :nth-child() selector will beat a plain class every time, even inside a later media query. I've lost hours to overrides that "should have worked" on paper.
Wrapper divs matter for stretch/height matching. align-items: stretch only affects direct grid children — the visible card inside still needs flex: 1 to actually fill that height.
Test on real devices, not just DevTools. Effects like backdrop-filter on fixed elements behave differently on actual mobile Safari than in a resized desktop browser window.
Want a layout like this for your project?
Get In Touch