從網站內容規劃、網頁視覺設計到基本前端程式或 Shopify 和 WordPress 網站建置，技術 SEO 網站架構優化等，與各個不同的團隊如創辦人、企劃文案人員、平面設計等合作，完成每一個大大小小的網頁設計與建站專案，不斷挑戰自己的極限，激發潛能！（更新時間：2023.01.14）
猶記得 RWD（Responsive Web Design）自適應網頁設計概念在十年前才剛開始萌芽的樣子，我初入行是完全用不到甚至還沒聽過，那時網頁設計師的工作只需要了解基本的 html /css 語法就足矣，而如今 RWD 根本就是基本必備能力，意思是設計完視覺後還要能夠讓網頁能在各種尺寸的裝置和瀏覽器觀看「正常」，為提升與維持觀者的「瀏覽體驗」，要設計桌面版網頁（Desktop）和行動版網頁（Mobile），然後用 css 語法將兩者完成。
嗨！我是爾文（Irving Chen），資深網頁設計師，先快速介紹一下自己的架站經驗，本人有多年使用 WordPress 架站與網頁設計的經驗，近年則專注 Shopify 電商網站設計與建置。對於這類架站平台的限制與可塑性有一定的了解，例如 Squarespace、Wix 後台真的限制超多，大部分的情況只能按照其版型去做編排，要做其他設定會相當困難而痛苦；WordPress 則是彈性度超高，可以在後台來去自如、修改頁面程式碼、使用海量的版型和外掛資源為網站打造全方位數位能力。若有網站相關問題，可以前往填寫表單留下訊息或需求給我，我會盡快回覆！
這幾年來靠著 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 redner 圖，攝影外拍 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
JOWUA
台灣新創公司專門開發與銷售 Tesla 特斯拉周邊產品，相當厲害的一個團隊。我幾乎跟他們一起從零開始成長到現在他們每個月銷售量相當亮眼，我主要是幫他們打造 Shopify 電商網站設計與建置，了解其需求一步步經營至今，一路上克服不少問題，包含網站建立時的挑戰、金流、物流等解決方案。完成美國站主要是美國市場，後來又建立一個台灣站主要是台灣市場。
Qubo
台灣全新的寵物電商，服務創新是品牌的核心價值，聚焦於改善用戶體驗，以直覺且人性化的購物網頁設計，搭配獨有且客製化的智慧選物功能，相信我們正一步步改變寵物飼主的消費模式。有邏輯性和系統性的商品陳列方式，使寵物飼主複製於線下實體店購物的逛街體驗，來 Qubo 即可一站式購齊所有養寵物所需的食品及用品，以消費者為導向的消費模式，建立客觀且公正的產品評價制度使消費者能輕易了解產品的特色及適性。
- 作品網頁連結：前往瀏覽
- Shopify 網站建置：Irving Chen
JE22
專業自行車車衣與周邊商品的電商網站，創辦人本人也是長年參加自行車職業競賽並且榮獲多項冠軍的頂尖車手。
- 作品網頁連結：前往瀏覽
- 網頁設計 x Shopify 網站建置：Irving Chen
MIRA
第一次打造生技產業的品牌網站，透過溝通與討論，花費相當多的精神了解其那專業領域，主要內容是子宮內膜容受性檢測的說明，幫助判斷人工受孕胚胎植入的最佳時間點，受眾包含專業醫護人員和接受人工受孕療程的備孕家庭。此網站包含三種語言：繁中、簡中、英文，設計核心概念除了塑造專業形象外，用溫和色系粉色和紫色、可愛嬰兒和美滿家庭形象、專業醫師與數據化圖表等元素，給予人溫暖的氛圍。
- 作品網頁連結：前往瀏覽
- 網頁設計 x WordPress 網站建置：Irving Chen
GWS (General Water Solution)
美國知名的濾水器品牌，致力於提供全球的高品質飲用水的解決方案。
- 作品網頁連結：前往瀏覽
- 網頁設計 x Shopify 網站建置：Irving Chen
Palanan
一間加拿大的新創公司，創業者主要想販售環保產品，並透過經營部落格傳遞環保、再生與回收等觀念，致力於通過教育、研究和環保產品幫助人們實現零浪費，行動與理念相當有意義，值得現代消費者接觸與了解！
- 作品網頁連結：前往瀏覽
- 網頁設計 x Shopify 網站建置：Irving Chen
除了上述之外，目前也正在進行許多相當有趣且挑戰的網站專案，包含無論是品牌形象網站、電商網站、一頁式的行銷網頁設計、網站內容規劃與 SEO、網站 UX 使用者體驗設計等，會持續更新此篇文章。最後，如果喜歡我這篇設計分享，歡迎留言詢問和交流，任何問題和想法都可以喔！感恩！
Hope You Enjoy My Design Works. Happy New Year 2022！
AI、設計與行銷工具
- Writesonic：快速創作部落格、廣告、電子郵件和網站所需的內容，並進行SEO優化，這是最令人期待的 AI 內容產生軟體！其中可以安裝 Chrome extension，然後快捷鍵可以直接呼叫輸入視窗，超級方便。即將推出 ChatSonic AI Bot for Businesses: Customer Support AI Chatbot，類似 Chatbase，這類線上客服 AI Chat 比以往的 Bot 還更人性化且反應不會過於機器人。
- CopyAI：行銷文案 AI 自動產生器 CopyAI is an AI-powered copywriter that generates high-quality copy for your business.
- Chatbase：利用您擁有的知識庫，打造一個AI聊天機器人，並輕鬆將其添加至您的網站中
- ActiveCampaign：Email 行銷、電子報系統（MailChimp 的替代方案之ㄧ）
- Canva：線上平面設計工具，若團隊沒有設計師，那 Canva 真的是神助攻！解決行銷、社群、平面設計、簡報等需求，版型一應俱全。
- Envato Elements：無限下載的付費資源素材：包含圖片、影片、音樂、音效、平面設計、插圖、簡報模版等，這個也是我常常在用的素材平台。
- GetResponse：All-in-one 行銷平台，包含電子郵件行銷 Email marketing、登陸頁建立 Landing pages、行銷自動化 Marketing automation 等功能，可以先註冊帳號使用免費版，覺得需要未來再升級！這軟體類似 Hubspot。
- PickFu：PickFu 是美國消費者在線調研工具，可進行在線的測試、優化和即時消費者調研問卷，取代猜測。透過 PickFu，你可以立即獲取至多 500 條來自美國消費者的意見。通過尋求眾人的智慧，幫助你做出更好的商業決策。
- SurveySparrow：全渠道顧客滿意度調查管理平台 Omnichannel Experience Management Platform
- Qwary：全渠道 CX 客戶體驗平台，可幫助企業獲取客戶反饋並通過設計精美的專業調查來衡量 NPS、CSAT 和 CES，以改善購物體驗和產品性能。
- Opinion Stage：建立免費的測驗、投票、表單等工具，視覺質感和功能運作不錯！也有提供付費方案，提高每個月的回應數。
- Typeform：質感優雅的線上表單
- UXPressia：快速創建專業的顧客旅程地圖 Customer Journey Map、人物誌 Persona 和影響地圖 Impact Map，還有各種模板可以直接套用。
- Surfer：SEO 工具，主要可用做 SEO 內容編輯者使用， AI 產生 SEO 文案、關鍵字推薦、SEO Audit 等功能，介面設計滿新穎的，賞心悅目！
- ABtesting AI：有用過 AB Testing 在優化網站嗎？來試試 AI 的 Testing，有免費方案可以測試
- Frase：彈指之間用 AI 協助搜尋、撰寫與優化 SEO 文章
- AppSumo：限時優惠的一次性付費數位軟體販售平台（大幅降低成本）
- Tidio：設計優質的線上交談工具 Online Chat
- Help Scout：線上客服（Zendesk 的替代方案）
- HeySummit：舉辦線上虛擬研討會
- SimplyBook：線上預約排程系統 及 App 預約軟體
- Liinks：一頁式多連結網頁，整合多個社群、官網的一頁式網站
- LearnWorlds：創建與銷售線上課程網站平台
- Teachable：創建與銷售線上課程網站平台
- Make：視覺化自動化工作流程，將數據串接等在各種軟體來回穿梭，提升工作效率
- Piktochart：資訊圖表設計工具
- ClickMagick：在找 AB Testing 工具時發現 ClickMagick 有這個功能，也看了其他 YouTuber 簡介，感覺相當易用，所以先收下了
- MotionElements：專業的影片素材、版型、外掛
- MotionVFX：專業的影片素材、版型、外掛
- Payoneer 派安盈：安全、快速，一站式跨境收款
- Wise：跨境帳戶，進行國際付款、收款
- Surfshark：Surfshark VPN 最近開始用，還滿好使用的！原本需求是想要瀏覽某些國外網站卻被強制自動轉址，所以用 VPN 解決此問題
- Firstory：平台上架、贊助訂閱 與廣告盈利 最完整強大的 Podcast Hosting 省去所有繁瑣上架流程，我們將你錄好的音檔自動發佈到 KKBOX、Apple Podcasts、Spotify 和 Google Podcasts 等收聽平台
- Descript：錄製 Podcast 線上工具，包含影音剪輯、Podcast 錄製、螢幕錄影等功能。There are simple podcast & video editors and there are powerful ones. Only Descript is both & it features magical AI, so you can skip the hard part of editing. Get started for free
- Podcastle：錄製 Podcast 的線上工具，包含影片和聲音剪輯、聲音轉文字等功能。Podcastle is the simplest way to create professional-quality podcasts. Record, edit, transcribe, and export your content with the power of AI, in an intuitive web-based platform.
- CSS Scan 3.0：在進行網站開發時，檢查、複製和編輯 CSS 的最快速、最簡單的方式，跟「檢查元素」說再見——透過滑鼠懸停於任何元素上，即可立即檢查其 CSS，並透過一個點擊複製其所有規則。
- 陸續蒐藏與研究…
有任何想問的問題，歡迎填寫表單留言或寄信給我 irving@irvinglab.com、FB 粉絲團或直接線上交談，我們一起交流、成長！附上我的網頁設計作品，可以來逛逛喔！歡迎加入 Shopify 網站設計與架站學習交流：Line 社群 一起交流與學習！但在美國的用戶無法加入台灣的 Line 社群，所以我也另外建立了 Telegram 社群，兩邊珍貴的經驗會同步分享與整理。若想進一步了解服務內容，可以加入 Irvinglab 爾文實驗室的 Line@ 官方帳號留下訊息給我們。
