這些年我做的 RWD 網頁設計

Irving Chen
Jan 7, 2020 · 11 min read

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

一個網頁設計師工作內容的十年變化

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

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

Forerunner 225 產品網頁設計 — 2015 年 — Irving Chen 爾文 — IrvingLab 爾文實驗室
Forerunner 225 產品網頁設計 2015 年 — RWD 網頁設計(從電腦版 Desktop 到行動版 Mobile Web)
Forerunner 225 產品網頁設計 — Year 2015

這是我 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 年 — Irving Chen 爾文 — IrvingLab 爾文實驗室
Forerunner 225 產品網頁設計 — 2015 年 — Irving Chen 爾文 — IrvingLab 爾文實驗室
那時候還很開心地在聚餐時跟以前的研究所同學分享
Nike+ 半馬女子路跑 2016(Nike+ Run Club Women’s Half Marathon Taipei 2016)- Garmin 活動網站設計 — Irving Chen 爾文 — IrvingLab 爾文實驗室
Nike+ 半馬女子路跑 2016(Nike+ Run Club Women’s Half Marathon Taipei 2016) — RWD 網頁設計
Nike+ 半馬女子路跑 2016(Nike+ Run Club Women’s Half Marathon Taipei 2016)活動網頁設計 — Year 2016

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

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

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

Garmin vívomove 智慧式指針腕錶 產品網頁設計 2016 年 — RWD 網頁設計
Garmin vívomove 智慧式指針腕錶 產品網頁設計 — Year 2016

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

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

Garmin zūmo 重機專用導航機 產品網頁設計 2016 - Irving Chen 爾文 — IrvingLab 爾文實驗室
Garmin zūmo 重機專用導航機 產品網頁設計 — Year 2016
Garmin zūmo 重機專用導航機 產品網頁設計 —Year 2016

Garmin zūmo 重機專用導航機 產品網頁設計

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

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

2017 女子運動派對 Garmin Girls Party — 活動網頁設計 — Irving Chen 爾文 — IrvingLab 爾文實驗室
2017 女子運動派對 Garmin Girls Party — 跨裝置 RWD 網頁(從電腦版 Desktop 到行動版 Mobile Web)
2017 女子運動派對 Garmin Girls Party 活動網頁設計
2017 女子運動派對 Garmin Girls Party — 跨裝置 RWD 網頁(從電腦版 Desktop 到行動版 Mobile Web)

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

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

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

Don-tei 和牛壽喜燒餐廳 官方網站設計 — Year 2018 — Irving Chen 爾文 — IrvingLab 爾文實驗室
Don-tei 和牛壽喜燒餐廳 官方網站設計 — Year 2018
Don-tei 和牛壽喜燒餐廳 官方網站設計 — Year 2018

Don-tei 和牛壽喜燒餐廳 官方網站設計與建置

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

看了就會流口水

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

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

作品網頁連結:前往瀏覽
攝影計畫 x 網頁設計 x WordPress 架站:Irving Chen

台灣吉野家 Yoshinoya 官方網站改版設計與建置
台灣吉野家 Yoshinoya 官方網站改版設計與建置

台灣吉野家 Yoshinoya 官方網站改版設計與建置

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

作品網頁連結:前往瀏覽
網頁設計 x WordPress 架站:Irving Chen

閣樓婚禮顧問公司 官方網站改版設計與建置
閣樓婚禮顧問公司 官方網站改版設計與建置
閣樓婚禮顧問公司 官方網站改版設計與建置

閣樓婚禮顧問 形象網站設計改版與建置

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

作品網頁連結:前往瀏覽
網頁設計 x WordPress 架站:Irving Chen

今年已是 2021 年了,接下來呢?會持續不定時更新此篇分享!
若對 WordPress 網站設計有興趣,可以先看一下我的另一篇 WordPress 外掛推薦精選,之後會陸續分享我如何使用 WordPress 架設網站的經驗。

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

Hope You Enjoy My Design Work. Happy New Year 2021!

歡迎訂閱我們的電子報,不定期更新內容包含「網站設計與架站的實務經驗分享」、網站設計流程與規劃,前往訂閱去!Let’s GO!

有任何想問的問題,歡迎留言或寄信給我 irving520@gmail.com,我們一起交流、成長!附上我的網頁設計作品,可以來逛逛喔!

爾文讀書中,跟我一起讀書去!精選書單:https://bit.ly/irving-is-reading

IrvingLab 爾文實驗室

爾文實驗室為數位而生!

Irving Chen

Written by

Senior web designer, movie and book enthusiast, badminton lover. Visit my latest portfolio on Behance — https://www.behance.net/irvingchen

IrvingLab 爾文實驗室

就愛網站設計!Web Design Lover

Irving Chen

Written by

Senior web designer, movie and book enthusiast, badminton lover. Visit my latest portfolio on Behance — https://www.behance.net/irvingchen

IrvingLab 爾文實驗室

就愛網站設計!Web Design Lover

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store