如果要用最淺白的話來形容平面設計與網頁設計,對我而言大概就是感性與理性的存在吧!
很多平面設計師想跨到另個領域時,很常第一個想到的就是網頁設計,也都是為了能夠實現動態、互動性高、多變的設計而選擇跨入。

但其實平面設計與網頁設計之間可是有大大的不同,我在這之間轉換學習的過程中,也是遇到了很多心理障礙和知識不足的地方。但當你了解網頁設計的架構、精髓,加上善用原本就擅長的設計創意及美感能力,就絕對能讓你在網頁設計的世界好好發揮!
今天多喜想跟大家分享的就是「平面設計與網頁設計,到底有什麼不一樣?」
現在就讓我們來看看吧!
兩者之間有什麼差異?
直接透由以下表格的比較,你能夠更快速清楚的了解。

別將平面設計的概念全部複製到網頁設計上
多喜剛開始規劃網頁設計時,因為太習慣平面設計的操作,因此沒花太多時間考量區塊的規劃、資訊傳達是否清晰,或是應該要遵循瀏覽器、程式撰寫的原則去規劃,因此做出來的設計稿⋯⋯就不多說了哈哈哈哈哈。
平面設計所專注的,在於藝術性與傳達性,所以對於創新以及視覺效果固然是更加追求的;而網頁設計上,要注重的除了用戶的使用習慣、體驗程度,還要考量到裝置以及瀏覽器。
也因為如此,在網頁設計上更能應證「Less is more」的道理,不需要太過於花俏,要專注的反而是使用者體驗以及直觀性,我也看過許多富有設計感的網頁,雖然剛進入頁面會被視覺吸引住,但操作上經常需要摸索一段時間,才能找到想要查看的資訊。
當然在色彩的應用上也是同樣的概念,在平面設計上可以大膽用色,但若在網頁設計上使用大量豐富的色彩,容易造成視覺的疲勞,可能就會面臨使用者在網站的停留時間縮短,對網站絕對是無益的。
網頁應納入使用者這個關鍵來思考
在規劃一個網頁時,你可以從這幾個關鍵開始思考使用者⋯

- 用什麼裝置?
使用什麼裝置就會有輸出的考量,為了因應不同瀏覽器與裝置,都需要考量並設計出不同的版面呈現方式。
- 要看到什麼資訊?
資訊就會有文字與圖片的元素!
>> 文字的應用:文字大小、字距行距的設定要考量用戶的適讀性;且文字的選擇更是一般設計師難以接受的一環,因為只能在有限的字型裡去做選擇,但硬是要挑選特殊字型,就可能遇到許多用戶的瀏覽裝置不支援的問題。
>> 圖片的應用:圖片的解析度只要求72dpi,一般大小不會超過500KB,且圖片會需要依不同裝置,更換不同的尺寸;同時也要避免「將文字做在圖片裡」,才不會在不同裝置縮放時,出現文字大小不統一、不易閱讀等狀況。
- 該如何與他互動?
網頁設計比平面多了「動態」元素,可以透過按鈕、彈跳視窗、動畫特效來提升使用者體驗,運用得恰當也能夠輔助文字來傳遞資訊,讓畫面更加精簡有趣唷!
=====
以上這些是我在平面與網頁設計這兩者之間碰撞後所彙整的一些想法,相信各位應該對於平面設計、網頁設計兩者之間的差異更加清楚了吧~
若想要開始學習網頁設計、基礎的網頁前端程式,那麼你可以持續關注多喜🤤
我很願意分享、陪伴你一起學習、挑戰自己!