Design & Interfaces — Hossein Jafari Sharami

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 — portfolio sites, small shopping sites, WordPress builds, blogs — rather than isolated exercises. That means every layout decision had to survive contact with real content: inconsistent image sizes, variable text lengths, and clients who change their minds about copy after the layout is done.

Mobile

-first, always

RTL/LTR

Multi-language layouts

The problem with "just make it responsive"

Three recurring challenges, and how I actually handle them

📱

Mobile-first navigation

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 you scroll past a section instead of clicking a link. I design the mobile nav state first, then expand outward to desktop, instead of the other way around.

✨

Glassmorphism, used carefully

Frosted-glass panels look great in a mockup and can quietly break on real devices — performance cost, contrast problems, and browser inconsistencies in how backdrop-filter composites on scroll. I treat it as an accent for headers and cards, not a default for every surface.

🎨

A palette that means something

I try to derive a site's colors from something real — a photo, a brand mark, a material — rather than picking hex codes that "look nice" in isolation. It gives later design decisions (hover states, active states, accents) an actual rule to follow instead of guesswork.

A typical design pass

How a layout usually evolves

Step 1

Rough structure

Blocking out sections with real content lengths, not lorem ipsum — copy length changes spacing decisions more than people expect.

Step 2

Mobile pass

Every section gets tested narrow first. If it breaks at 360px, I fix it before touching desktop styles.

Step 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?

I'm open to freelance and contract design work.

Get In Touch