I’m a product designer who can’t stop making things.
I research it, design it, and ship it, lately with an AI pair on the keyboard.
WORKS
Works
JOURNAL
Journal
the latest entries
ABOUT NARAM
naram, probably overthinking spacing
THE JOURNEY
I grew up in Lebanon and studied computer science at Notre Dame University. Then a month after I graduated I switched to design because I realized I enjoyed the whole process more than just the code section. Since then I’ve redesigned a property platform for UK landlords, built an internal tool for a study-abroad company, worked with some friends and agencies on some sites, taught skiing in Killington 30 years after my dad had taught there, and started a poster brand that made over 280 sales in its first year and still going!
Frame · about-naram
THE DESIGNER
WHERE I’M FROM
OFF THE CLOCK
about naram
THE MANIFESTO
“Design for people, not numbers”
THE JOURNEY
I grew up in Lebanon and studied computer science at Notre Dame University. Then a month after I graduated I switched to design because I realized I enjoyed the whole process more than just the code section.
SO FAR
Since then I’ve redesigned a property platform for UK landlords, built an internal tool for a study-abroad company, worked with some friends and agencies on some sites, taught skiing in Killington 30 years after my dad had taught there, and started a poster brand that made over 280 sales in its first year and still going!
FOOTNOTE · AI
built with Claude as a design-engineering pair. The full breakdown is in the journal: “how I built this site.”
naram, probably overthinking spacing
suki. yes, the same one walking around this site.
KILLINGTON, VT
INSTRUCTOR PASS · EAST COAST
PSIA CERTIFIED, LEVEL 2
instructor, 2 seasons
professionally certified in going downhill
ADMIT ONE · VOLUNTEER
BEY → CHINA
age 14, raising funds for Lushan earthquake relief
2013
ADMIT ONE · TRAVEL
BEY → ROMANIA
2024
Hello
مرحبا
こんにちは
Bonjour
BOARDING PASS · ONE WAY
BEY → USA
24 years in Beirut, Lebanon
carry-on: computer science degree
languages: العربية · English · Français · 日本語 (conversational)
SEAT 24A · NZ
PHOTOGRAPHY
06A
07A
08A
shot by me
HIKING
Chouwen - Lebanon
Kneisseh, Lebanon
Seward Range, New York
on foot whenever possible
CLIMBING
no climbing photos. climb this instead.
PIANO
currently: chopin, ballade no. 1
THE DESIGNER
about naram
naram, probably overthinking spacing
THE MANIFESTO
“Design for people, not numbers”
THE JOURNEY
I grew up in Lebanon and studied computer science at Notre Dame University. Then a month after I graduated I switched to design because I realized I enjoyed the whole process more than just the code section. Since then I’ve redesigned a property platform for UK landlords, built an internal tool for a study-abroad company, worked with some friends and agencies on some sites, taught skiing in Killington 30 years after my dad had taught there, and started a poster brand that made over 280 sales in its first year and still going!
FOOTNOTE · AI
built with Claude as a design-engineering pair. The full breakdown is in the journal: “how I built this site.”
Hello
مرحبا
こんにちは
Bonjour
WHERE I’M FROM
BOARDING PASS · ONE WAY
BEY → USA
24 years in Beirut, Lebanon
carry-on: computer science degree
languages: العربية · English · Français · 日本語 (conversational)
SEAT 24A · NZ
ADMIT ONE · VOLUNTEER
BEY → CHINA
age 14, raising funds for Lushan earthquake relief
Product designer with 4+ years on web products, from property-management SaaS to internal tools and client sites, taking work from research and prototyping through to engineering handoff. As PropertyCard’s foundational designer, built its design system from scratch; at Global Study UK, designed an internal dashboard that saved each user about 8 hours a week. A Computer Science background keeps collaboration with engineers close, from first sketch to shipped build.
WORK EXPERIENCE
NARA DESIGNS LLC (SELF-EMPLOYED)
Product Designer & Owner
FEB 2023 - PRESENT · PITTSBURGH, PA
Designed web, brand, and product work for clients including Lazyleaf and Goodwood Tree, partnering directly with founders and engineers to turn requirements into buildable solutions.
Built reusable design systems and high-fidelity prototypes that shortened developer handoff and kept product decisions consistent across projects.
Create and ship complete products end to end with AI-assisted development, pairing design direction with tools like Claude and Codex to take ideas from concept to deployed, working software.
GLOBAL STUDY UK
Product & UX Designer (Contract)
APR 2022 - DEC 2022 · REMOTE
Designed an internal SaaS dashboard in Figma, consolidating university data, visa-sponsorship regulations, and institutional metrics into a single view that became the team's primary reference.
Saved the core business team an average of 8 hours per week per user by replacing fragmented legacy research processes with a unified search interface.
PROPERTYCARD
Product Designer
JAN 2021 - JAN 2022 · REMOTE
Led product design for a property-management platform as its foundational designer, translating regional property regulations into an intuitive layout.
Rebuilt core user journeys around three familiar interaction rules, so participants completed their journeys and retraced their steps without getting lost in validation testing.
Built a custom Figma design system from scratch and streamlined cross-functional engineering handoff with detailed documentation and front-end HTML/UI QA.
Founded and grew an independent poster brand into a commercially viable business, generating 280 organic sales in its first year without paid marketing, through creative direction, product design, and audience-led storytelling.
Frame · design-system · not linked anywhere, you found it
design system
Every reusable element on the site, in one place. Critique freely.
00 · TOKENS
ink #141414
paper #F2EFE9
blue (UI) #0D99FF
blue (text) #0968AA
blue (button) #0878D0
orange (button) #FFB25E
orange (fill) #FF6B35
lime #C6F24E
pink #FF9EC6
yellow #FFF321
bright blue and orange are chrome, stickers, and chips (with ink text). Buttons use the button variants: badge-shade orange #FFB25E with ink text (10.3:1) and #0878D0 blue with white text (full AA). Small text on light backgrounds uses blue (text); orange is never text.
.frame-wrap · .frame-label · .card-frame (accent shadow via --cf-accent) · .cs-status pill (project status from data: Client work · shipped / Work in progress / Concept / Exercise; on the case page, .is-full adds who it was tested with). The home journal teaser reuses the same card for the latest entry.
08 · NAVIGATION & CHROME
naram-ziady.fig· editingautosaved⌘K
bottom #toolbar with .tool-btn (fixed on the real site) · top .chrome bars, with the .chrome-dev "⇧D inspect" button (opens Dev Mode) beside ⌘K
09 · SUKI
zzz
#suki-img sprite · animated #suki-zzz while she naps · #suki-toggle status pill (replicas, the real ones are fixed and JS-driven)
10 · JOURNAL BITS
NEWNEW
.jr-fresh badge and its .jr-fresh-sm index dot · journal thumbs deliberately keep soft shadows: the journal is the site's quieter, scrapbook voice
11 · FIGMA SELECTION FRAME (hero)
320 × 64
selected element
.sel-box · .sel-handle in the bright UI blue (lines only, never text) · dims tag and .board-badge on --blue-btn, so their white text passes AA
12 · COVER ART (rendered artwork)
the artwork recipe: paper ground with a dot grid, one blue selection box holding the subject (Clash Display, ink), sticker pills with 3px ink borders and 6px offset shadows, cursor chips for whoever is "in the file" (claude's is blue), a blue dims tag, and quiet mono corner labels. facts on stickers must match the live site.
sources live in art-src/ as HTML, rendered by art-src/render.swift. never hand-edit the PNGs.
14 · BUILD MODE (home)
naramclaudeyou (viewing)Radius · 10−1.5%
C
Cclaude88 is shouting. 64?
Nnaramit’s a portfolio, it should shout
✓ resolved
naramButton · contact me
FillFFB25E
Stroke1.5 · #141414
Radius10
Shadow4 4 0 #141414
150 × 84⌘⌥C copy properties⌘Vpasted text32
Build mode (home): two cursors act out js/build-scenes.js. .bm-cursor (naram orange builds most · claude blue suggests and does quick passes) · .bm-thread comment pin + bubbles, ends ✓ resolved · .bm-tag value tag (phones get these instead of the panel) · .bm-sel selection in the cursor's colour · #bm-panel properties panel (desktop, one layer at a time) · .bm-img dragged-in image copy (lands big, resized to fit) · .bm-draw rectangle tool with live W × H · .bm-key shortcut tag beside the cursor · .bm-flash paste highlight · .bm-guide smart guide · .bm-hred gap redline. One scene plays at a time, the most visible one; while you scroll it builds faster (2.5x up to the hurry speed, with scroll speed) and eases back to normal half a second after you stop. Scenes pause off screen and finish quietly when you're far away. Work covers are on the page from the first frame and sit close under the Works heading so they reach into the first screen; in every scene the words come first (titles, copy, captions) and the cursors style around them. Typed text is an aria-hidden copy over the real element; ambient tweaks every 6–12s after. Reduced motion, "finished", Dev Mode and other pages load finished. Hurry mode (H, or the #bm-hint tip under you (viewing), a pill by the toggle on touch): the visible scene runs 6x, threads shrink to one word, the top bar panics, then claude's #bm-after note. Shift+H starts over (forgets what was built this visit, reloads at the top). Suki (desktop, where she lives): a dashed .bm-suki-frame 'suki.png · missing' in her napping corner; naram zooms in (.bm-suki-panel, pixel grid) and pencils her 73×64 outline, claude bucket-fills, naram adds the white; claude makes her a component with a .bm-suki-set of real sprites, naram wires prototype arrows (after 30s idle / click to wake), ▶ and she walks off. Hurry pastes her in. Zoom to fit (Shift + 1, js/zoom-fit.js; plays once by itself when a desktop visitor rests at the bottom of the finished page): #canvas pulls back to fit on a grey #E3DFD7 canvas, .zf-page names the page frame, each section is a .zf-frame (hover: 2px UI-blue outline and a --blue-btn name tag), click one to zoom into it, Esc / scroll / Shift + 1 to go back, .zf-hint pill with the zoom %. Drag a sticker or the name frame and, 1.2s later, a cursor puts it back with a .bm-guide snap and a blame comment (lines in js/build-scenes.js; they go quiet after a few)
16 · TOOLBAR MODES + BUILD MENU
Build mode
naram and claude are building · 2 of 7
Skip aheadHReplay from the topShift + H
The toolbar is Figma's: pages on the left (current page filled blue; switching pages slides the canvas out and the next page rises in, 0.18s out / 0.42s in, chrome stays put, instant under reduced motion), Actions (⌘K, rises from the toolbar: no search, tabs All / Actions / Pages, sections Resume → Actions → Pages, icons and shortcut keys; ↑↓ Enter, Tab switches tabs), then a grey mode group: Build (orange dot while building) and Dev (blue while on). Build opens this menu from the toolbar: on/off switch, status, Skip ahead (H), Replay from the top (Shift + H). Icon buttons have dark Figma-style tooltips. The "in a hurry? press H" tip rides under the visitor's cursor (above Build on touch); once they press it, an orange "still too slow? press H again" tip takes its place and a second H finishes everything at once; after a skip, a blue "want to watch it again? press Shift + H" tip offers the replay (and pressing H once it's all built asks "did you want to see it built again?"). Resizing the headline gets put back too (its own comment lines). The journal's view switch is a labelled segmented control: View · Scatter / Feed / Index, with a one-line hint of what the current view is
15 · DEV MODE (whole site, Shift + D)
DEV28--inkselected160 × 52
.dev-badge · redline label (orange fill, ink text) · padding tint · .dev-tok token chip · .dev-sel + .dev-dims · .dev-crumbs layer path. #dev-panel (bottom sheet on mobile, collapsed by default), from the toolbar's </> DEV button · design notes: every inspected element shows the decision behind it (its own, or its nearest parent's), from DEV_NOTES in js/data.js
13 · AQURO DIAL (archived)
the interactive three.js dial is parked, not deleted: module in archive/aquro-dial3d/ with restore steps, full history at the aquro-dial-3d git tag. the site is back to zero shipped dependencies.
“Naram is an awesome designer that has helped us deliver a multitude of projects for our clients (website design, graphics & product design). I enjoy his hands-on approach, the consulting that comes along with his services, and the accountability demonstrated throughout our collaboration.”
“Naram is an excellent web designer, who excelled in delivering a quality product in an efficient and effective manner. He was specific in understanding my goals, and also kind enough to explain some of the finer points of web design. His prices were reasonable for the top-notch work he performs, and I’d 10/10 recommend him for any web design needs you may have!”
CONTACT
Let’s get to work.
Tell me what you’re building. I read everything, and I actually reply.
COMMENTS (2)
Lazyleaf
“Naram is an awesome designer that has helped us deliver a multitude of projects for our clients (website design, graphics & product design). I enjoy his hands-on approach, the consulting that comes along with his services, and the accountability demonstrated throughout our collaboration.”
Goodwood Tree
“Naram is an excellent web designer, who excelled in delivering a quality product in an efficient and effective manner. He was specific in understanding my goals, and also kind enough to explain some of the finer points of web design. His prices were reasonable for the top-notch work he performs, and I’d 10/10 recommend him for any web design needs you may have!”