Portfolio

從左營市場飄香70年的老店，到高還原度的電商官網 這次的專案是「菜市仔嬤 汾陽餛飩」的 Shopify 官網建置。合作方的設計師已經在 Figma 完成了完整的視覺設計稿，我們的任務是將設計稿高度還原地實作為可上線、可維運的 Shopify 網站。   品牌背景 菜市仔嬤是深耕左營第二公有市場超過 70 年的老字號餛飩店，主打招牌鮮肉餛飩、乾拌辣餛飩、豆皮餛飩、湯圓等生鮮冷凍宅配商品，也曾多次登上電視節目與網紅開箱介紹。品牌本身故事濃厚、口碑扎實，官網的任務是把這份「市場人情味」轉換成能承載電商轉單的線上體驗。   專案挑戰：高還原度實作 當設計師已經產出完整 Figma 設計稿時，前端實作的重點就不再是「創意發想」，而是「精準執行」： 版面間距、字級層級、色彩系統都需要對齊設計稿的視覺規範 首頁多個模組（輪播 Banner、熱銷商品、免運組合、網紅推薦、電視報導、YouTube 影片牆）需要逐一還原並串接 Shopify 後台可編輯的資料結構 手機版與桌機版的版型皆有設計稿，需要分別調整，確保還原度不因裝置而失真   我們怎麼做 模組化切版依照 Figma 設計稿拆解出首頁的各個內容區塊（主打商品、超值免運組合、網紅推薦、電視報導、菜嬤廚房影片牆等），逐一實作為 Shopify 主題的 Section，以現有Theme 功能調整，幾乎無修改原始碼，方便品牌方後續自行更新、調整排序與內容。 會員與促銷機制串接依品牌需求規劃滿額免運、滿額贈品（辣餛飩、辣椒醬）等階梯式促銷提示條，以及會員回饋計畫頁面，讓行銷活動可以直接反映在前台。 社群與口碑內容整合把品牌長期累積的電視報導、網紅開箱文、YouTube 影片整理進官網頁面，並串接 LINE、Instagram、Facebook 等聯繫管道，讓官網不只是賣場，也是品牌信任感的展示櫃。 像素級細節校對針對按鈕圓角、間距、字距、圖片裁切比例等細節反覆比對設計稿與實際頁面，確保上線後的網站與設計師交付的視覺稿一致。 成果 上線後的官網完整保留了品牌方設計師的視覺規劃，同時具備 Shopify 電商該有的商品管理、促銷機制與會員系統彈性，讓「菜市仔嬤」能把 70 年累積的市場口碑，延伸到線上通路。服務包含後續的網站後台使用教育訓練，經營多年後網站已跟原版的設計及內容皆不同了，Shopify讓客戶自行經營及內容修改調整更容易。 前往 菜市仔嬤 汾陽餛飩 網站看看

用鏡頭說故事的人，也需要一個能說故事的網站 婚禮 / 人像攝影師 Sion Hsu（希恩攝影）網站架設專案 希恩從事攝影超過 10 年，拍攝範圍橫跨婚禮紀實、自助婚紗、孕婦親子、全家福、毛小孩寫真到各類活動紀錄，客群多元，作品風格也需要兼顧「溫馨」與「質感」兩種調性。   客戶需求 一位攝影師的網站，核心任務其實只有一個：讓照片說話，同時讓陌生訪客願意留下來、進一步聯繫。希恩的需求很明確： 作品分類多（婚禮、婚紗、寫真、親子、毛小孩……），需要清楚的作品集分類架構，方便新人或客戶依需求瀏覽 個人形象要溫暖、真誠，不要太商業化的攝影棚感 需要串接 Instagram、Facebook、LINE 等社群與聯繫管道，降低詢問門檻   我們怎麼做 以作品集為核心的資訊架構把 Gallery 拆分成婚禮紀實、情侶婚紗、登記寫真、個人形象寫真、孕婦親子、全家福、活動紀錄、毛小孩寫真等子分類，讓不同需求的訪客可以直接找到對應的作品，而不是滑過一長串不相關的照片。 首頁用「人」而不是「作品牆」開場首頁以希恩本人的自我介紹和照片開場，搭配一段第一人稱的文字（結婚、養狗、生小孩、當過樂手跑過業務……），把攝影師的個性和溫度放在最前面，再帶出作品輪播，讓訪客先認識人，再認識作品。 社群與聯繫整合頁尾與頁首都整合了 Instagram、Facebook、LINE 等聯繫管道，並在多處放置「聯絡希恩」的行動呼籲，縮短從瀏覽作品到實際詢價的距離。 中英雙語呈現標題與部分文案採中英並陳（如 Home／About／Gallery／Contact），兼顧品牌質感與國際／雙語客群的閱讀需求。   成果 網站上線後，希恩擁有了一個能同時展示多元攝影類型、又不失個人風格與溫度的作品展示平台，訪客可以快速依需求（婚禮、寫真、親子等）找到對應作品，並透過多元管道直接聯繫預約。同時教學客戶後續自行上傳新作品及基本維護營運，目前已營運多年。 前往希恩攝影 Sion Photographer Sion Photographer 網站看看  

協助品牌完成跨境電商網站建置，整理商品與頁面架構，建立更清楚的品牌與轉單流程。

針對品牌視覺與購物體驗進行調整，提升整體一致性與商業呈現。

  Orange Studio 個人作品集案例｜網站設計 × 質感風格 × 簡約歐美   作為「橙拾 ORNG Studio」的起點，這個作品集網站是我最初的設計實驗場，從風格選擇、模板調整，到內容架構與排版設計，都是由我一人完成，目的是打造一個屬於自己的品牌起點。 這個網站以簡約歐美風格為主軸，運用現成 HTML 模板進行客製化，專注於資訊層級清楚呈現、視覺風格乾淨俐落，同時保留未來擴充性（如作品新增、連結外部案例、聯絡表單等）。       ✨ 專案特色 簡約高質感的視覺設計：運用留白與層次強化閱讀節奏，突顯作品主體。 RWD 響應式排版：手機、平板、電腦瀏覽皆能保持良好體驗。 客製化 HTML 調整：對原始模板結構進行優化與精簡，提升載入速度。 SEO 基礎設定：設定 meta title、description，利於搜尋引擎收錄。 外部連結整合：連結 Behance、Instagram、Wix 等其他作品平台。 🛠 使用技術 HTML / CSS / JavaScript 基礎 SEO schema 設定 Adobe XD & Figma 排版規劃 網頁空間部署 & DNS 綁定       💬 製作心得 作為一個設計師／開發者兼顧的個人品牌起點，這個網站不僅是我作品的展示場域，更是一個與客戶、夥伴對話的開端。它記錄了我學習架站、版型改造、視覺思維的一步步過程，也讓我更確定「想透過網站幫助更多品牌說出自己的故事」。       🔗 作品連結 👉 https://orangestudio.work     是否也想打造一個屬於自己的品牌網站？ 歡迎聯絡我，我可以幫你從 0 到 1，建立你的專屬空間。  

etheryal｜韓國服飾選品 Wix 架站案例   etheryal 是一個專注於韓系時尚的線上選品平台，選品風格主打簡約、知性、帶有高級感的穿搭美學，目標客群為熱愛韓系時尚、重視質感與個人風格的女性族群。此次專案由我協助全站規劃與建置，採用 Wix 平台 完成網站製作。 # 韓系風格導入官網設計 - 風格定位： 白底留白設計 × 黑灰主色系，呼應韓系時尚質感 - 首頁排版： 採大圖 Hero Banner，搭配當季選品主題與推薦品項 - 購物體驗： 商品分類清晰（上衣 / 褲裝 / 洋裝 / 鞋包配件） - 多圖展示： 商品頁支援多角度展示圖，提升購買說服力 # 技術實作與架構 主題與佈局設計 - 主題客製改版- 針對商品分類做清晰導覽設計- 商品頁支援多圖展示、規格說明與風格故事介紹段落 購物功能整合 - 設定金流- 加入折扣碼、會員註冊系統、快速瀏覽- 加入 Instagram Gallery 區塊，提升品牌社群互動與轉單率 SEO 與行銷設定 - 設定 SEO 標題 / 說明 / 圖片 alt 描述（優化搜尋曝光）- 製作 FAQ 頁面、退換貨政策等購物說明，提升品牌信任感- 手機版 RWD 優化，保證在手機上操作順暢 官網連結 [前往 etheryal 官方網站]   客戶回饋 「網站看起來就像品牌延伸的一部分，乾淨又不失細節，很符合我們的需要，教學仔細售後服務非常好，我們自行維護非常容易」

為 DANWU 設計師品牌打造 Shopify 官網，整合品牌哲學、婚紗訂製與設計師商品，展現高端品牌形象與流暢購物體驗。