Independent Product Designer & Frontend Developer

I design premium websites that turn ideas into digital experiences

Designing modern, high-converting websites with thoughtful UI/UX and clean frontend development.

  • Available for new projects
  • Kuala Lumpur — working remotely
  • Replies within 12 hours
Signal Summit conference website — full-bleed hero screen with live countdown and tiered ticket panels
Featured Signal Summit Conference & ticketing site

01Selected work

Six builds, six different problems

Each one is a complete, live build — design through to shipped frontend. Every demo opens and works; nothing here is a screenshot.

Signal Summit — conference site with countdown, hour-by-hour agenda and tiered ticket tiers

01

Signal Summit

Conference & ticketing site

A one-day conference that had to sell tickets and hold a schedule at the same time. Live countdown, hour-by-hour agenda, and ticket tiers that show real scarcity instead of claiming it.

Role
UI design + frontend development
Tools
Figma · HTML · CSS · JavaScript
Type
Self-initiated · template
Year
2026
Open live demo
Ashcroft & Vale — advisory firm website with numbered chapters and animated KPI figures

02

Ashcroft & Vale

Advisory firm website

Professional services sell credibility, so the site is built like a printed report: editorial serif, numbered chapters, and figures that count up as you reach them.

Role
Art direction + UI design + frontend
Tools
Figma · HTML · CSS · JavaScript
Type
Self-initiated · template
Year
2026
Open live demo
Beacon Console — admin dashboard with sidebar navigation, filterable data table and charts

03

Beacon Console

Admin dashboard / internal tool

Not a landing page — a working panel. Sidebar navigation, a data table that filters as you type, and charts with per-point tooltips. Light and dark, both designed rather than inverted.

Role
UX structure + UI design + frontend
Tools
Figma · HTML · CSS · JavaScript
Type
Self-initiated · template
Year
2026
Open live demo
Ember Lane Roasters — coffee roastery site with animated roast curve and brew ratio calculator

04

Ember Lane Roasters

Small-batch roastery

The interesting part of coffee is the data, so the site shows it: a roast curve that draws itself in SVG, a flavour radar per origin, and a brew calculator that works out the dose for your cup.

Role
Concept + UI design + frontend
Tools
Figma · HTML · CSS · SVG · JavaScript
Type
Self-initiated · template
Year
2026
Open live demo
Harbourstone Estates — property listings with filters and a working mortgage calculator

05

Harbourstone Estates

Property listings

Buyers arrive with one question: can I afford this. Filterable listings sit next to a mortgage calculator that really computes, and splits principal from interest so the number means something.

Role
UX flow + UI design + frontend
Tools
Figma · HTML · CSS · JavaScript
Type
Self-initiated · template
Year
2026
Open live demo
Lantern & Rye — fine dining site with tasting menu tiers, gallery lightbox and reservation form

06

Lantern & Rye

Restaurant & reservations

Fine dining is atmosphere first. Low-light palette, tasting menu in tiers, a gallery that opens to full size, and a reservation form short enough that people actually finish it.

Role
Art direction + UI design + frontend
Tools
Figma · HTML · CSS · JavaScript
Type
Self-initiated · template
Year
2026
Open live demo

02Services

Design and build, one person

You brief one person and that person stays with the project from the first sketch to the live URL. Nothing gets lost in a handover, because there isn't one.

  1. 01

    Website Design

    A complete site designed around what you sell and who buys it — structure, hierarchy, type, and every state before a line of code exists.

    Sitemap · Wireframes · Full visual design · Responsive layouts

  2. 02

    UI/UX Design

    For products with screens rather than pages: flows, empty and error states, and a component set your future developer can actually build from.

    User flows · Prototypes · Component library · Design tokens

  3. 03

    Frontend Development

    The design built properly: semantic markup, real accessibility, fast on a mid-range phone, and readable enough that the next developer thanks you.

    HTML · CSS · JavaScript · Next.js · Accessibility · Performance

  4. 04

    Landing Page Design

    One page with one job. Written and designed around a single action, then shipped fast enough to still matter to your launch.

    Copy structure · Visual design · Build · Analytics hookup

03Process

Four stages, no surprises

You always know which stage we're in, what I need from you, and what lands at the end of it.

  1. 01

    Discovery

    One call to understand the business, the audience, and the one thing the site has to achieve. You get a written scope before anything starts.

    Scope, timeline, fixed price

  2. 02

    Design

    Structure first, then visual direction, then every screen at real content length. You review in Figma and we settle it before code.

    Figma file, two revision rounds

  3. 03

    Development

    Built mobile-first and tested on real phones, with a staging link you can open at any point rather than waiting until the end.

    Staging URL, source code

  4. 04

    Launch

    Domain, hosting, SSL and analytics set up in your name. Everything is handed over — no account of mine sits between you and your site.

    Live site, full ownership, 30 days of fixes

04Digital products

Explore my premium website templates

Fifteen complete designs, each written from scratch rather than assembled from a page builder. Buy one, own the code, and edit it without a subscription.

Browse the library

Coming to Gumroad & Creative Market

  • Corporate and advisory template preview

    Business & advisory

    4 designs · editorial layouts

  • Hospitality template preview

    Hospitality & retail

    6 designs · booking flows built in

  • Dashboard and application template preview

    Dashboards & apps

    5 designs · light and dark

05About

Design that survives contact with code

I'm Rafi — a designer who ships his own work. Most beautiful designs lose something on the way to the browser, usually because the person drawing it never has to build it. I do both, so what you approve is what goes live.

My rule is that every decision on a page should be able to explain itself. Type sizes come from a scale, spacing comes from a system, and motion exists to show a relationship — never to fill silence. Restraint is the point: fewer elements, each doing one job well.

I study Software Engineering at Universiti Malaya and I run what I build. My own CMS is self-hosted on my own Linux box, which means I've handled deploys, backups and outages rather than just the pretty part. That's the experience you're hiring.

Based in
Kuala Lumpur, working remotely
Studying
Software Engineering, Universiti Malaya
Design
Figma · design systems · prototyping
Build
HTML · CSS · JavaScript · Next.js · Node · PostgreSQL
Infrastructure
Cloudflare · Docker · Linux · self-hosted
Languages
English, Indonesian, Malay

06Contact

Have a project in mind?

Tell me what you're building and what it has to do. I'll reply within 12 hours with honest thoughts on scope, timeline and price — whether or not I'm the right person for it.

Both buttons open your own email app or WhatsApp with the message already filled in — nothing is stored on this site.