爾文網頁設計作品與架站 Shopify x WordPress

從網站內容規劃、網頁視覺設計到基本前端程式或 Shopify 和 WordPress 網站建置，技術 SEO 網站架構優化等，與各個不同的團隊如創辦人、企劃文案人員、平面設計等合作，完成每一個大大小小的網頁設計與建站專案，不斷挑戰自己的極限，激發潛能！

猶記得 RWD（Responsive Web Design）自適應網頁設計概念在十年前才剛開始萌芽的樣子，我初入行是完全用不到甚至還沒聽過，那時網頁設計師的工作只需要了解基本的 html /css 語法就足矣，而如今 RWD 根本就是基本必備能力，意思是設計完視覺後還要能夠讓網頁能在各種尺寸的裝置和瀏覽器觀看「正常」，為提升與維持觀者的「瀏覽體驗」，要設計桌面版網頁（Desktop）和行動版網頁（Mobile），然後用 css 語法將兩者完成。

這幾年來靠著 Google 搜尋、電腦書籍和線上課程自學了不少基本的網頁前端程式，讓我可以將所學運用在網頁設計工作當中，成就感滿到瓶口，每次完成都很興奮，然後拍照紀錄當下的喜悅，也許對別人來說沒什麼，但對於自己因努力而完成的設計感到滿足。以下就展開簡介我的網頁設計旅程！

Garmin Forerunner 225 腕式心率跑錶

這是我 2015 年進 Garmin 台灣國際航電股份有限公司時的第一個任務，Forerunner 225 是當時 Garmin 全球出品的第一款可以測量心跳的運動手錶，相當重要的指標性產品。初次的美好總是要下點功夫，花了約莫三周時間全面進入新產品網站的火拚，光光在版面上調整成能符合各種尺寸的裝置就花了我三個工作天。執行此次任務時我給自己的最高指導原則：

「專注完美，近乎苛求」「從細節追求卓越」

略估算了一下，那段期間平均每天早上 6:30 進公司，晚上 6:00 或 7:00 離開公司，回到住處後，平均每晚繼續花 1 至 3 個小時找出方法解決網站的技術問題，第 1、2 周平均工時 51 個小時，第 3 周平均 65 個小時 (含上週六日獨自加班共 13 個小時)

團隊合作的工作分配：平面設計師負責平面設計與印刷輸出，陳列設計師負責各店家、通路的陳列設計，我規劃產品網站內容編排與大綱順序，PM 掌控整個進度、流程與提供產品介面素材，企劃提供文案內容與潤飾文字，ID 工業設計師提供產品 3D render 圖，攝影外拍 model 發包給攝影工作室拍攝，最後我著手設計整個網站的靜態視覺與 UX，並與主管們和相關人員討論，靜態視覺確認之後，我開始執行 coding，含基本的 layout、互動特效、基礎的 SEO 設定等，最費工的是要處理跨裝置平台 RWD 設定、跨瀏覽器，最痛苦也最有成感的就是解決無法預知的技術問題，最後，置入網站分析用的追蹤碼、按鈕的追蹤事件設定等，以利進行上線後的評估。

• 作品網頁連結：前往瀏覽
• 網頁設計 x 前端程式：Irving Chen

---

Garmin x Nike 臺北女子半程馬拉松活動

這個活動網站是在 2016 年，那時候非常時間非常緊急，一週內必須完成，所以我跟企劃說你趕快給我文案和企劃簡介，我得趕工，但修改時間不多，能修正的內容因此也不能太多。第一天開會了解整個企劃需求與目標，接下來我用了兩天的時間進行網頁視覺設計、兩天撰寫前端程式（這兩天加班到凌晨三點、四點），一天討論並更新網頁，然後上線！還好這種需求僅只一次，不然我身子會未老先衰啊！

• 作品網頁連結：前往瀏覽
• 網頁設計 x 前端程式：Irving Chen

---

Garmin vívomove 智慧式指針腕錶

Garmin vívomove 智慧式指針腕錶也是 Garmin 出的第一款指針式的手錶，相當特別，非常優雅極簡的設計，團隊支援也滿給力，該要的素材都有，那搭配手錶背景風格的樣式超多可以選擇，由於跨團隊也合作過很多次，所以此專案很多流程進行得算順暢（磨合成功？！），讓我可以盡全力打造其形象網頁設計，感覺真棒！

• 作品網頁連結：前往瀏覽
• 網頁設計 x 前端程式：Irving Chen

---

Garmin zūmo 重機專用導航機

汽車有導航機，Garmin 也出重型機車的導航機，真酷！拿到這些攝影圖片素材時，靈感湧現，可以發揮一下。圖片中那兩個半臉的重機騎士真得超像電玩人物對戰的畫面 XD，帥到一個極致！原圖是全臉的狀態，使用在包裝設計，我故意將其切一半呈現，帥度暴增，另外在整個網頁設計的瀏覽時會有飄散的煙（雲）動態出現，讓「出車的過程」躍然於網頁上，享受騎乘（瀏覽）的快感！

• 作品網頁連結：前往瀏覽
• 網頁設計 x 前端程式：Irving Chen

---

2017 女子運動派對 Garmin Girls Party 活動

那時每年都要來一次這樣的大合照，顯然是為蘋果而生！這專案整整用了三週去完成網站，一樣從設計到 coding，雖然在家自行加班沒有加班費，但更在意的是有沒有為自己的設計盡力！

• 作品網頁連結：前往瀏覽
• 網頁設計 x 前端程式：Irving Chen

---

Don-tei 和牛壽喜燒

第一次執行餐飲業的網站設計，而且是從零開始，沒有任何現成的素材可以參考和使用，於是我向客戶出了一個攝影計畫，讓他們的攝影師可以按照此需求拍攝。美食拍攝的基本原則一是：

看了就會流口水

對，要看起來很好吃，要看起來就會食指大動，盡量拍吧！

美式拍攝的原則二是：「視覺擺盤設計」，視覺會影響味覺感受，在吃之前，視覺的影響力不僅會讓人垂涎欲滴（巴夫洛夫制約？！），還可以引起人的飢餓感。我在現場跟專業美食攝影師一起工作，很過癮、很開心，看得過癮，吃得開心（咦？！）。有了「美味的素材」後，接下來就能順利執行網站囉！

• 作品網頁連結：前往瀏覽
• 攝影計畫 x 網頁設計 x WordPress 網站建置：Irving Chen

---

台灣吉野家 Yoshinoya

第二次執行餐飲業的網站設計，有了前次的合作後，拍攝餐廳食物的最基本原則：「看了就會流口水」、「視覺擺盤設計」確實執行後，原本吉野家的食物照片都顯得過時，現在全部煥然一新，很多口味以前比較不顯眼或看起來不特別想吃，現在看到照片就想要來一碗 XD！原本是十幾年前過時的網頁設計方式，現在更新為現代網頁設計方法，也大幅提升使用者瀏覽體驗！

• 作品網頁連結：前往瀏覽
• 網頁設計 x WordPress 網站建置：Irving Chen

---

閣樓婚禮顧問 Weddings

閣樓婚禮顧問公司至今已成立十餘年提供高級訂製婚禮、私人派對策劃、海外婚禮顧問服務！團隊專業於婚禮設計、婚禮計劃、婚禮管理等，超過 20 年的經驗，閣樓婚顧是婚禮策劃領導品牌！維持數年不變的品牌官方網站，為跟上現代網頁設計與行動體驗優化，於 2020 年一月進行全新改版上線。更棒的是，跟客戶從一開始就共同參與這個專案，他們在設計的想法與支援對網站的品牌設計有相當大的幫助，最後以如此嶄新面貌登場！

• 作品網頁連結：前往瀏覽
• 網頁設計 x WordPress 網站建置：Irving Chen

---

SEic 單車工廠

我們希望能為大家帶來坐感舒適，設計獨特，且是讓每個人都能輕鬆騎一輩子的自行車！ 為了實現這個夢想，我們經過一次又一次的試驗，在環保抬頭意識下，打造出安全、便利且別具台灣精神的自行車。

• 作品網頁連結：前往瀏覽
• 網頁設計優化 x Shopify 網站建置：Irving Chen

Sheeper

依據科學與邏輯研發，嚴選用料謹慎堆疊。全程台灣在地生產製造，提供 60 天試睡與 15 年保固。

• 作品網頁連結：前往瀏覽
• 網頁設計優化 x Shopify 網站建置：Irving Chen

NU Concept 肌能衣研製所

超Q彈壓力褲，包覆好不鬆垮，讓妳久站久坐都舒適！美膚循環更加倍，就像幫腿兒敷面膜，讓肌膚自帶美肌，提升血流速 25%，血氧濃度3%，橘皮BYE BYE不要來，我們的初衷很簡單，堅持把最好的留給台灣。

• 作品網頁連結：前往瀏覽
• 網頁設計優化 x Shopify 網站建置（升級版型與新功能設定）：Irving Chen

Felli

Felli 相信您的家應該不僅僅是一個生活的地方，更應該是喜悅的來源。這就是為什麼我們提供一系列簡單、靈活的儲物解決方案，旨在幫助您整理空間，創造一個能夠激發快樂的環境。

• 作品網頁連結：前往瀏覽
• 網頁設計優化 x Shopify 網站建置：Irving Chen

CUiRASÉX

探索 CUiRASÉX 官方線上商店。探索最新的限量版皮具收藏品系列。CUiRASÉX 是一個卓越的以皮革為中心的跨學科創意工作室，專門生產獨家的限量版收藏品，注重精美的材料、卓越的工藝和無與倫比的細節，同時優先考慮可持續的商業實踐。我們的願景是創建一個多元化平台，卓越的思想家在其中合作，融合創造力、多樣性和多樣性，創建精心策劃和發人深省的產品，超越學科界限，賦予我們的客戶力量，讓他們有所作為。

• 作品網頁連結：前往瀏覽
• 網頁設計優化 x Shopify 網站建置：Irving Chen

---

JOWUA

台灣新創公司專門開發與銷售 Tesla 特斯拉周邊產品，相當厲害的一個團隊。我幾乎跟他們一起從零開始成長到現在他們每個月銷售量相當亮眼，我主要是幫他們打造 Shopify 電商網站設計與建置，了解其需求一步步經營至今，一路上克服不少問題，包含網站建立時的挑戰、金流、物流等解決方案。完成美國站主要是美國市場，後來又建立一個台灣站主要是台灣市場。

• 作品網頁連結：前往瀏覽美國站、台灣站
• 網頁設計 x Shopify 網站建置：Irving Chen

---

LEMOI-PEAU 肌我

The Skin is the Cradle of the Soul. LE MOI PEAU 肌我 – 相信女性擁有無限的潛力，更深知皮膚是靈魂的庇護所，因此專注於研發能滋養身心的產品，從而啟發她們無盡的力量。為了體現對女性皮膚的尊重與關愛，LE MOI PEAU 肌我運用古法精油調香，為女性帶來身心靈的滋潤。品牌產品經過人體臨床檢測，拒絕 10000+ 非必要及不良成份，以真正的純淨美學通過各項國際標準，無論是恢復活力還是保持健康狀態，都能為妳提供所需。在 LE MOI PEAU 肌我的世界裡，女性勇敢地面對一切挑戰，享受生活的美好。

• 作品網頁連結：前往瀏覽
• 網頁設計優化 x Shopify 網站建置：Irving Chen

---

ROSIE ALLAN

Rosie Allan – 來自澳洲的時尚太陽眼鏡。一位父親為寶貝女兒 ROSIE 所打造的時尚眼鏡。 ROSIE ALLAN 眼鏡的誕生，意味著父親對女兒無條件的愛與關懷，鏡框採用厚實的義大利純手工板材，舒適堅固。讓你呵護著孩子眼睛的同時，兼具時尚與質感。 身為孩子的後盾，總希望能替她精挑細選，讓前世情人穿戴出自己的時尚基因。 ROSIE ALLAN 秉持初心，設計出一系列親子穿戴的太陽眼鏡，歡迎與我們一起呵護你與寶貝的眼睛。 「時尚共享；親情獨享。」

• 作品網頁連結：前往瀏覽
• 網頁設計 x Shopify 網站建置：Irving Chen

---

CLOUDVOCAL 雲聲

雲聲，如聲隨行。音樂是描繪情感與想像的細膩藝術，我們的任務就是記錄它的真實感動。每種聲音都應該被真實呈現，團隊進行不斷的音質測試、設計改善、以及與樂手面對面訪談，由多方角度切入，目標是提供專業人員、音樂同好、影音創作者一連串 — 屬於「未來的」音訊解決方案。

• 電商網站：Shopify 台灣站、Shopify 美國站
  • 網頁設計 x Shopify 網站建置：Irving Chen
• 部落格：台灣 Blog、美國站 Blog
  • 網頁設計 x WordPress 部落格建置：Irving Chen

---

FENLO

At FENLO, we redefine the concept of home decor. Our vision is to create multifaceted and unique designs that transform your living spaces into the dream homes you’ve always desired. Check out FENLO now, where extraordinary is the new normal.

• 作品網頁連結：前往瀏覽
• 網頁設計改版 x Shopify 網站建置：Irving Chen

---

Qubo

台灣全新的寵物電商，服務創新是品牌的核心價值，聚焦於改善用戶體驗，以直覺且人性化的購物網頁設計，搭配獨有且客製化的智慧選物功能，相信我們正一步步改變寵物飼主的消費模式。有邏輯性和系統性的商品陳列方式，使寵物飼主複製於線下實體店購物的逛街體驗，來 Qubo 即可一站式購齊所有養寵物所需的食品及用品，以消費者為導向的消費模式，建立客觀且公正的產品評價制度使消費者能輕易了解產品的特色及適性。

• Shopify 網站建置：Irving Chen

---

JE22

專業自行車車衣與周邊商品的電商網站，創辦人本人也是長年參加自行車職業競賽並且榮獲多項冠軍的頂尖車手。

• 作品網頁連結：前往瀏覽
• 網頁設計 x Shopify 網站建置：Irving Chen

Urban Drivestyle

Urban Drivestyle manufacturer and developer of cool and strong transport bikes, cargo bikes, family bikes, e-bikes and electric bikes for urban everyday life – e-bikes for children and adults. Repair, e-bike leasing and rental in Berlin, Amsterdam and Mallorca.

• 網頁設計 x Shopify 網站建置：Irving Chen

MIRA

第一次打造生技產業的品牌網站，透過溝通與討論，花費相當多的精神了解其那專業領域，主要內容是子宮內膜容受性檢測的說明，幫助判斷人工受孕胚胎植入的最佳時間點，受眾包含專業醫護人員和接受人工受孕療程的備孕家庭。此網站包含三種語言：繁中、簡中、英文，設計核心概念除了塑造專業形象外，用溫和色系粉色和紫色、可愛嬰兒和美滿家庭形象、專業醫師與數據化圖表等元素，給予人溫暖的氛圍。

• 網頁設計 x WordPress 網站建置：Irving Chen

---

GWS (General Water Solution)

美國知名的濾水器品牌，致力於提供全球的高品質飲用水的解決方案。

• 作品網頁連結：前往瀏覽
• 網頁設計 x Shopify 網站建置：Irving Chen

WRAP LIFE

Elevate your look with our beautiful head wraps. Our wraps are available in a variety of colors and patterns to complement any outfit.

• 作品網頁連結：前往瀏覽
• Shopify 網站優化：Irving Chen

XRound

XROUND Inc. constantly innovates sound technologies and customizes the user experience, and we pride ourselves on redefining the sound and enhancing the audio experience. Our mission is to find the right sound for you.

• 作品網頁連結：前往瀏覽
• Shopify 網站優化：Irving Chen

Palanan

一間加拿大的新創公司，創業者主要想販售環保產品，並透過經營部落格傳遞環保、再生與回收等觀念，致力於通過教育、研究和環保產品幫助人們實現零浪費，行動與理念相當有意義，值得現代消費者接觸與了解！

• 網頁設計 x Shopify 網站建置：Irving Chen

---

除了上述之外，目前也正在進行許多相當有趣且挑戰的網站專案，包含無論是品牌形象網站、電商網站、一頁式的行銷網頁設計、網站內容規劃與 SEO、網站 UX 使用者體驗設計等，會持續更新此篇文章。最後，如果喜歡我這篇設計分享，歡迎留言詢問和交流，任何問題和想法都可以喔！感恩！

Hope You Enjoy My Design Works！

若你是平面設計想轉職網頁設計師或從未熟悉網站開發程式的行銷人員，想了解網頁程式開發是怎麼一回事，極度推薦六角學院的線上課程：使用 HTML、CSS 開發一個網站，上完之後會有初步的概念，不僅可以開始看懂網頁的基本語法，有助於執行網頁設計介面時的實際作法，更能提升與工程師的溝通效率，而不致於完全雞同鴨講。若是完整的基礎學習則可以再修此兩門課：一變應萬變：RWD 響應式網頁設計、使用 jQuery 打造互動性網頁動畫效果

爾文打造的客製化 ChatGPT

• SEO 搜尋引擎優化
  • 名稱：與文同行 SEO 搜尋引擎優化師
  • 簡介：Chat and Learn – 透過對話學習 SEO
  • 網址：https://share.irvinglab.com/gpt-seo-mentor
• Shopify Liquid Dev 程式開發
  • 名稱：Liquid 程式開發 AI 顧問
  • 簡介：針對初學者 Shopify Liquid 程式撰寫的專業輔助，含豐富範例及詳細解說
  • 網址：https://share.irvinglab.com/gpt-shopify-liquid-expert
• Web Design 網頁設計
  • 名稱：成為網頁設計師
  • 簡介：你的網頁設計學習諮詢顧問
  • 網址：https://share.irvinglab.com/gpt-web-design-advisor
• 備註：歡迎前往試用，接下來會持續更新與優化，也可隨時給我回饋 ^^ 感恩！GPTs 已可以設定即時搜尋其他網站上的資料，確切地說，原本使用 Bing，並使用另一個 ChatGPT Plugin 來執行任務，該工具允許使用者提供一個（或多個）URL，並可以選擇請求與 URL 進行交互，提取特定資訊或如何處理 URL 中的內容，請求可能包括重寫、翻譯等。若遇到任何使用上的問題可隨時來訊息或截圖跟我說。

想要更全面學習強大的線上 UI 協作設計軟體 Figma？可以上這堂課：產品設計實戰：用 Figma 打造絕佳 UI/UX。除此之外，我自己有搭配 UX 使用者經驗設計和數位產品開發相關的精選課程推薦，例如 UX 新手入門：UX 設計/研究全攻略: 給新手的職場通識課、UX 扎實的學術研究理論：用戶x商業x數據 | UX‧三刀流產品體驗設計、產品數據分析：產品數據分析 – 打造網路產品的決策引擎、產品創新：產品 x 創新：從需求洞察到產品策略、產品經理 PM：產品經理職場學：PM 必修的職涯指南！，全部上完之後讓我大開眼界、豁然開朗，提升思考層次與思維方式，有興趣的人可以參考並選幾堂符合目前需求來學習與充實自己。

針對 SEO 初學者、初入門的人，可參考 Hahow 的線上課程：SEO 白話文：不懂程式也能學會的 SEO 秘密，上完後在知識與觀念上扎實打下基礎，接著進階的是了解整合 SEO 搜尋引擎優化和 Google Ads 關鍵字廣告的行銷策略：客戶主動找上門！全面佈局的搜尋引擎行銷策略，然後學習網站分析工具 Google Analytics 課程：GA4 新手完全攻略！用數據分析下商業決策，從做中學優化網站 SEO，學習效率倍增！有興趣的話再加入 Line 社群一起討論：SEO 資源彙整 / 學習，歡迎蒐藏並分享給你的同事們我持續更新的「SEO 免費學習資源」、「爾文 SEO 觀察室」。閱讀書籍的部分則超級推薦：SEO 超入門：教你免費又有效的網站行銷好點子

---

---