Freelance web design — 台北

JD Web Design

網頁設計 · 接案

品牌官網、電商、預約與表單、活動落地頁、後台介面。

聊聊你的需求 → jayde714@icloud.com

指到任一件作品即顯影

01·Car atelier·Self-initiated

VERNIS

品牌官網 / 工序展示

車體烤漆工作室的章節式官網。

章節式捲動流程展示RWD 響應式
看網站 ↗ vernis.pages.dev
VERNIS 網站畫面
VERNIS 手機版畫面
Mobile

02·Beauty spa·Self-initiated

LUEUR

品牌官網 / 預約導流

預約制護膚工作室的品牌官網。

預約導流空間輪播RWD 響應式
看網站 ↗ lueur-studio.pages.dev
LUEUR 網站畫面
LUEUR 手機版畫面
Mobile

03·Select shop·Self-initiated

SUMIKA

電商分類頁 / 商品貨架

日系選物店的電商分類頁。

商品貨架生活提案RWD 響應式

介面設計(前端)· 購物與結帳需接後端

看網站 ↗ sumika-studio.pages.dev
SUMIKA 網站畫面
SUMIKA 手機版畫面
Mobile

04·Beauty commerce·Self-initiated

ORÉLIE

電商分類頁 / 購物車動線

精選美妝的電商選物與分類頁。

購物車抽屜免運進度RWD 響應式

介面設計(前端)· 購物與結帳需接後端

看網站 ↗ orelie-studio.pages.dev
ORÉLIE 網站畫面
ORÉLIE 手機版畫面
Mobile

05·Coffee roaster·Self-initiated

AUBE

品牌官網 / 選豆電商

精品咖啡烘焙所的品牌與選豆頁。

焙度章節捲動選豆網格RWD 響應式

介面設計(前端)· 訂閱與結帳需接後端

看網站 ↗ aube-coffee.pages.dev
AUBE 網站畫面
AUBE 手機版畫面
Mobile

06·Design hotels·Self-initiated

MARÉ

訂房官網 / 預訂表單

設計旅宿集合的品牌與訂房入口。

目的地切換訂房驗證RWD 響應式

介面設計(前端)· 訂房與金流需接後端

看網站 ↗ mare-stays.pages.dev
MARÉ 網站畫面
MARÉ 手機版畫面
Mobile

07·Fitness studio·Self-initiated

SURGE

品牌官網 / 課表預約

暗場精品健身工作室的品牌與預約頁。

真捲能量章節課表預約RWD 響應式

介面設計(前端)· 預約與付款需接後端

看網站 ↗ surge-studio.pages.dev
SURGE 網站畫面
SURGE 手機版畫面
Mobile

08·SaaS landing·Self-initiated

KEEL

SaaS 落地頁 / 產品導覽

產品營運 SaaS 的互動式落地頁。

互動產品導覽捲動敘事RWD 響應式
看網站 ↗ keel-app-8lt.pages.dev
KEEL 網站畫面
KEEL 手機版畫面
Mobile

What I build

我能做什麼

形象、產品、聯絡整合成一個站。以品牌自己的顏色與字體排版,不是換色的模板。

看實例 → VERNIS

商品列表、單品頁、購買動線。決策點前置,購買鈕常駐,規格往下收;加入購物車走側邊抽屜,不打斷瀏覽。

看實例 → ORÉLIE

一頁式預約、報名、諮詢表單。欄位精簡到必要,手機一鍵送出;日期、人數、方案這些選擇放在第一屏就能填。

看實例 → MARÉ

單一目標、單一主 CTA 的活動或發表頁。上線快,改動快;整頁只為了一個動作服務。

看實例 → SURGE

資料表、狀態、篩選的介面設計。重要的數字先被看到,操作放在看得到的地方。

看實例 → KEEL

品牌官網 走廊起點 · 14 道門框 看對應作品 VERNIS ↗

What you get

交付內容

交付當天把完整原始碼給你(GitHub repo 或壓縮檔)。沒有月費、沒有平台鎖定,之後要自己改、或找別人接手都可以。

三種尺寸各自排版,不是把桌機版等比縮小。長文的斷行、按鈕的可點範圍、圖片的裁切都分開處理過。

文字對比達 WCAG AA;整站可以只用鍵盤走完;使用者在系統關掉動畫時,頁面仍是完整可讀的狀態,不會變成空白或缺內容。

標題、描述、標題層級都寫好。貼到 LINE、Facebook、Slack 時會帶出正確的預覽圖與標題,不是一條裸網址。

協助把網站接上你的網域、設定 HTTPS 與 DNS。第一次上線我陪你走完,不是丟一包檔案給你自己想辦法。

交付時附一份改動說明:文字、圖片、價格分別在哪裡改、怎麼改。小幅度的內容更新你自己就能處理。

Start here

聊聊你的需求

聯絡方式 → jayde714@icloud.com