這些年我做的網頁設計作品

我從網頁視覺設計到基本前端程式或架設 WordPress 和 Shopify 網站架設,包含網站內容規劃,與企劃文案人員合作,完成每一個大大小小的網頁設計專案,不斷挑戰自己的極限,激發潛能!(更新時間:2022.04.05)

猶記得 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
Forerunner 225 產品網頁設計 2015 年 — RWD 網頁設計(從電腦版 Desktop 到行動版 Mobile Web)

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

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

  • 作品網頁連結:前往瀏覽
  • 網頁設計 x 前端程式:Irving Chen
Nike+ 半馬女子路跑 2016(Nike+ Run Club Women’s Half Marathon Taipei 2016)

Garmin vívomove 智慧式指針腕錶

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

  • 作品網頁連結:前往瀏覽
  • 網頁設計 x 前端程式:Irving Chen
Garmin vívomove 智慧式指針腕錶 產品網頁設計 2016

Garmin zūmo 重機專用導航機

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

  • 作品網頁連結:前往瀏覽
  • 網頁設計 x 前端程式:Irving Chen
Garmin zūmo 重機專用導航機 產品網頁設計 — Year 2016

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

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

  • 作品網頁連結:前往瀏覽
  • 網頁設計 x 前端程式:Irving Chen
2017 女子運動派對 Garmin Girls Party  活動網頁設計

Don-tei 和牛壽喜燒

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

看了就會流口水

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

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

  • 作品網頁連結:前往瀏覽
  • 攝影計畫 x 網頁設計 x WordPress 架站:Irving Chen
Don-tei 和牛壽喜燒餐廳 官方網站設計 — Year 2018

台灣吉野家 Yoshinoya

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

  • 作品網頁連結:前往瀏覽
  • 網頁設計 x WordPress 架站:Irving Chen
台灣吉野家 Yoshinoya 官方網站改版設計與建置

閣樓婚禮顧問 Weddings

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

  • 作品網頁連結:前往瀏覽
  • 網頁設計 x WordPress 架站:Irving Chen
閣樓婚禮顧問公司 官方網站改版設計與建置

JOWUA

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

  • 作品網頁連結:前往瀏覽美國站台灣站
  • 網頁設計 x Shopify 架站:Irving Chen
JOWUA 電商網站設計

MIRA

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

  • 作品網頁連結:前往瀏覽
  • 網頁設計 x WordPress架站:Irving Chen
MIRA 品牌形象網站設計

Palanan

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

  • 作品網頁連結:前往瀏覽
  • 網頁設計 x Shopify 架站:Irving Chen
Palanan 電商網站設計

我會陸續整理自己參與並執行的最新網頁設計作品:無論是一頁式的行銷網頁設計,到 WordPress 網站設計等,繼續更新在此篇文章。最後,如果喜歡我這篇設計分享,歡迎留言詢問和交流,任何問題和想法都可以喔!感恩!

Hope You Enjoy My Design Works. Happy New Year 2022!


優質數位工具蒐集研究中

  • 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
  • Opinion Stage:建立免費的測驗、投票、表單等工具,視覺質感和功能運作不錯!也有提供付費方案,提高每個月的回應數。
  • Typeform:質感優雅的線上表單
  • UXPressia:快速創建專業的顧客旅程地圖 Customer Journey Map、人物誌 Persona 和影響地圖 Impact Map,還有各種模板可以直接套用。
  • Surfer:SEO 工具,主要可用做 SEO 內容編輯者使用, AI 產生 SEO 文案、關鍵字推薦、SEO Audit 等功能,介面設計滿新穎的,賞心悅目!
  • CopyAI:行銷文案 AI 自動產生器 CopyAI is an AI-powered copywriter that generates high-quality copy for your business.
  • AppSumo:限時優惠的一次性付費數位軟體販售平台(大幅降低成本)
  • Tidio:設計優質的線上交談工具 Online Chat
  • Help Scout:線上客服(Zendesk 的替代方案)
  • HeySummit:舉辦線上虛擬研討會
  • SimplyBook:線上預約排程系統 及 App 預約軟體
  • Liinks:一頁式多連結網頁,整合多個社群、官網的一頁式網站
  • LearnWorlds:創建與銷售線上課程網站平台
  • Teachable:創建與銷售線上課程網站平台


有任何想問的問題,歡迎留言或寄信給我 irving@irvinglab.comFB 粉絲團,我們一起交流、成長!附上我的網頁設計作品,可以來逛逛喔!歡迎加入 Shopify 網站設計與架站學習交流:Line 社群 一起交流與學習!但在美國的用戶無法加入 Line 社群,所以我也另外建立了 Telegram 社群,兩邊珍貴的經驗會同步分享與整理。

爾文讀書中,跟我一起讀書去!精選書單:前往瀏覽

Post a comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *