上一篇主要介紹網頁設計師的工作內容,這篇就來繼續分享如何自學網頁設計吧!

上篇連結:自學成為網頁設計師?非本科生設計師的告白(上)

五、網頁設計師要具備的能力

1.美感養成

我覺得會想踏入設計師行列的人,對於自己在美感方面有一定的自信,只是美感是主觀的,很多人也都有具備對美的感受度,但卻不具備瞭解美的能力

開一句玩笑話:
「每人都可以說一口好設計,但卻作不出一個好設計。」

當然還是有極具天賦的設計師,天生就具備美感設計的能力

但其實美的事物都有它的原因,而平面設計就是所有設計之始,也是要進入設計行列的最基本要會的能力,平面設計用理性邏輯的方式,幫助我們來瞭解構成美的原因

主要構成美的元素有九個概念:反覆、漸層、對稱、均衡、調和、對比、比例、節奏、統一

這邊推薦幾本書給大家

版面設計學

作者:Flair
說明:一開始要學習排版設計的知識,需要看很多的設計品,這本書蠻好的地方是他都是舉實際作品來當例子,並且也有教很多的排版技巧,覺得算是本設計師入門工具書
博客來

圖解設計的原理

作者:高橋佑磨, 片山なつ 
說明:這本書提到蠻多字體的應用,還有色彩的使用,雖然比較內容比較硬一點,但對設計能力有很大幫助,因為字體和顏色的使用,會影響設計所要呈現的含義,而這也往往是設計師能力一較高下的地方。
博客來

2.設計思考

設計思考的能力決定了你的作品是只能當欣賞用,還是具備了解決問題的能力,特別是網頁設計和UI設計都是需要解決問題的設計

雖然設計思考並不會增加視覺設計的能力,但卻是能讓你做出有用的設計,相信你一定有用過看似很炫的網站、APP或其他產品,但用起來卻非常難用,不是找不到要的功能,不然就是不知道如何開始

如果一個產品只有漂亮好看,但卻讓你不知道如何開始使用,那它就不是好設計了,這也是美編和設計師的最大差異

這篇也推薦關於設計思考的書籍

設計的心理

作者: 唐納‧諾曼
說明:這本書被大家廣推為必讀書籍,原因是作者帶你從生活中很多事物,來瞭解設計的思維,雖然文字閱讀偏多,但幫助很大,並且會培養你如何在從日常生活訓練設計思維。
博客來

3.清晰的邏輯

不論是你要設計網頁還是UI,都需要有很清楚的邏輯,因為這本身就是件很複雜的事情,有很多的頁面互相關聯,很多的操作流程要去規劃,若設計師的邏輯不好,就很容易設計出漏洞百出的流程

因為設計師是要引導使用者來如何使用你所設計的產品,若設計師自己都不太清楚了,那使用的人要如何清楚知道呢?

另外邏輯也代表著理性,因為美感是主觀的,但設計是帶著理性思考,所以設計採用的結果,往往都會有一定的根據和意義

特別在大型網站設計時候,更需要定義風格指南(style guideline),這樣才能確保整體網站所呈現出來的樣式一致性

by Cupi Wong

至於如何提升邏輯力,其實透過設計思考就可以練習這個部分,因為你會去不斷思考設計的脈絡,然後內化到自己的的腦袋

而且網站的應用已普及很長一段時間,在很多方面的流程設計也已非常成熟,像是登入註冊的流程,大部分都已相同,只是你必須要去瞭解設計脈絡才能夠自我進步

「登入流程」的圖片搜尋結果
from 嫁給RD 的UI Designer

4.熟練繪圖軟體工具

上篇有提到網頁設計師的工作,需要產出網頁的site map、flowchart、wireframe、視覺設計稿,所以熟練工具就非常的重要

但現在工具非常多種,所著重的面相也不同,下面兩個是我覺得至少要會用的軟體

  • Photoshop:專門處理影像,像是常聽到的修圖、P圖,都是使用Photoshop去完成。
  • Illustrator:可以繪畫出放大縮小都不失真的向量圖,主要都用來作圖樣的繪製,像是logo、icon,也是製作印刷品最主要的工具。

這兩個軟體在設計區歷史悠久,運用的層面也非常廣,所以我現在仍然很常使用這兩個軟體做網站,若以方便性來說個人偏愛用Illustrator,但這因人而異,沒有一定要用哪個

再來這幾個工具是若會了更好,主要可以提高效率

  • Sketch:主要用來設計UI或網頁,再搭配一些第三方工具,即可做出高擬真的原型,但目前只支援mac系統
  • Zeplin:這是配合Sketch的第三方工具,主要用於畫面的溝通使用,而且它會清楚標出很多數值,例如大小、間距、顏色,很方便讓工程師瞭解你的設計稿
  • Adobe XD:一樣用來設計UI或網頁,與Sketch主要差異在於,他可以支援mac、Window系統
  • Axure:製作流程圖、框線圖、簡單的交互流程demo,我常常使用它快速產出想法的結果,然後針對不優的地方再繼續修正和調整

Sketch主要是針對UI設計,也因為它起步比較早,所以大部分的UI設計師都以它為核心工具,但現在也越來越多網頁設計師選擇用Sketch來繪製設計稿

5.溝通與表達

設計師常常需要訪談瞭解需求,所以好的溝通能力能幫助設計師了解到核心需求,這樣才能設計出符合客戶需求的結果

而表達也非常的重要,設計師必須要會表達自己的設計,因為設計師絕對會常常聽到很多與你設計相左的聲音,因為每個人都自己的個人經驗和主觀意識,這時候就必須清楚表達你設計的原因和思考的事情,是非常理性的表達。

6.瞭解網頁設計規範

既然是網頁設計師,我們就需要更多瞭解網頁的設計規範,例如:目前常用的網頁尺寸是哪些?有哪些佈局方式?網頁上常用的字體大小、間距

延伸閱讀:
如何查看網頁HTML、CSS?外掛工具、語法懶人包分享

六、開始設計網頁

1.尋找範例網站

現在網站都以響應式網頁設計(Responsive Web Design,RWD)為主,RWD的好處是讓網站可以分別在不同的裝置(電腦、平板、手機)上呈現不同的排版方式,以達到好的瀏覽體驗。

from dribbble by Balkan Brothers

RWD已是現在網頁設計師必會的技能,你可以在pinterest上面搜尋關鍵字“Responsive Web Design” ,來看到更多RWD的作品

from pinterest

研究RWD建議先從排版方式、資訊如何呈現…等部分開始理解,這時候平面設計能力就會開始用上

再來找一個實際網頁站,研究它在不同瀏覽器寬度時的變化,瀏覽器視窗直接縮放就好了

網站可參考:

2.網站redesign

凡是學習都先從模仿開始,設計也是一樣,但redesign不是模仿,你可以把它想成一個設計改善的提案,也是展現設計師的想法

nicepage.com

所以redesign是設計師最愛的創作方式,因為可以有原本的網站做對比,而且你所需要的設計素材基本上這網站也都會有,例如網頁文案、資訊分類、品牌標誌…等等

再來就開始繪製網頁設計稿吧!

七、進階能力學習

1.學習如何切版

這邊的切版是指使用HTML和CSS來編輯出網站畫面

切版對網頁設計師最大好處,就是可以幫助自己所繪製出來的設計圖,是能夠被實作出來,而不是天馬行空亂畫後,就要求前端設計師要完成他的設計切版,這也是很多平面設計師轉做網頁設計時,容易被前端工程師打槍退稿的原因。

另外因為是設計師自己切版,所以結果都會與設計稿的非常相似,原因是設計師本身就知道所有設計的細節,所以在調整樣式的時候一點都不會馬虎

而且在切版的時候,也會發現某些設計面沒有考量到的部分,這時候就會及時去做修正和調整

你可以透過網路資源或書籍來學習HTML和CSS,若可以進階學習到Bootstrap更好

推薦入門書籍

HTML&CSS:網站設計建置優化之道

作者:Jon Duckett
說明:非常入門的帶你暸解常用的HTML標籤、CSS語法,以及彼此的關係是什麼,並且也有範例圖片,所以很適合入門學習。
博客來

2.學習使用者經驗設計(User Experience,UX)

網頁主要目的就是方便使用者找到他們想要了解的訊息,所以瞭解如何設計好的資訊分類與結構非常重要

當然還有像是操作上的研究與使用習慣分析等等,這些也都和設計思考有關係

推薦入門書籍

WEB 設計職人必修:UX Design 初學者學習手冊

WEB 設計職人必修:UX Design 初學者學習手冊

作者:玉飼真一,  村上竜介,  佐藤哲,  太田文明,  常盤晋作,  IMJ Corporation
說明:這本書直接以網站作為UX的編寫素材,對於時間要花在刀口上的網頁設計師朋友,很適合從這本書了解網頁設計中會運用到的UX概念。
博客來

UX從新手開始:使用者體驗的100堂必修課

作者: Joel Marsh
說明:作者一步一步帶你學習使用者經驗設計的脈絡,從心理學、可用性、設計、文案撰寫到分析,並且還有插圖來幫助你瞭解。
博客來

資訊架構學:網站、App與資訊生態系統規劃

作者: Louis Rosenfeld, Peter Morville, Jorge Arango 
說明:網頁設計主要目的就讓使用者可以容易找到他想要的資訊,所以資訊的設計就是一門很需要研究的項目,特別在建置大型網站的時候更需要用到。
博客來

3.保持設計趨勢的敏銳度

每一年都會有一些網頁的視覺設計趨勢,雖然不是一昧的追求流行,但需要知道設計的演進狀況,就像我們會去了解過去歷史一樣

下面推薦幾個常用的設計網站,可以幫助你看到許多設計師優秀作品

  • Pinterest:這網站具有很強的搜尋尋引擎,可以幫你搜尋到全世界不同網站裡,質量高的圖片、照片
  • Behance:這平台目前是Adobe旗下的一個服務,也主要是全世界大部分設計師建立線上作品集的地方
  • Dribbble:它跟Behance其實是一樣類型的網站,但最大的差別是,他們設計師會員是採邀請制,需要設計作品被認可後才會發素邀請碼給你,所以上面的設計師作品質量就更高了。
  • Muzli:這裡常常是累積視覺設計和互動設計靈感的地方,建議可以訂閱的電子報,每日都會固定發送新的設計給你

八、結語

之前自己也有疑慮,這麼硬的理工背景能夠踏入設計圈嗎?

但沒想到我理工背景,反而給我邏輯上的優勢,特別在設計思考、流程規劃這種非美感的部分,卻又是網頁設計的一部分

所以跨領域的人,雖然美感、設計能力與設計本科生有些落差,但卻也帶進跨領域的優勢

我自己從事網頁設計到現在也5年時間,但設計每日每月每年都一直不斷在進步和演化,而且每當看到很棒的作品時,心裡的澎湃就會想腦內啡一樣,讓自己想趕快捲起袖子來場設計,所以熱情才是成就一件事情最大動力。

如果你正煩惱自己不知道要如何開始,並考慮報名網頁UI設計的相關課程,來讓自己跟著老師有系統的學習,下方有我推薦的一個線上課程,是我看完後覺得非常適合新手入門的課程

推薦課程:
從入門到業界實戰 – UI / UX 前端網頁設計 – 課程評價

延伸閱讀:
自學成為網頁設計師?非本科生設計師的告白(上)
UI設計師面試經驗分享 – 外商/遠端

若你喜歡我的這篇文章,麻煩拍5次下面小手給予我支持與鼓勵喔!

Joseph

Hi 👋,我是Joseph
我是一名從理工界踏入設計圈的 UI/UX 設計師,同時也是一位人夫和新手爸爸,在這裡我不僅會分享轉職經驗、設計實務,也會分享一些我個人喜愛的事物。

14 Comments

  1. 我覺得理工背景轉職網頁設計很有優勢呢
    像我是產品設計轉網頁設計 基礎的東西就要做中學

    網頁設計真的邏輯要很好@@

    1. 其實隔行如隔山,還是需要一直不斷學習,但UI設計這塊的確蠻吃邏輯的XD

      1. 在如今2021,我是一名大二升大三的學生,所讀的系算新系:文化創意與數位行銷(算設計吧),對於未來感到有些迷茫,大大的文章真的幫我釐清了很多,最近理清思緒想做一名網頁設計師,想請問網頁設計更重視UX的能力嗎?目前我是想就UI跟切版(基本html、css、js)去做精進(還是UX更為重要呢?),另外累積作品集(是否應該多準備一些自己做出來的網站,還是應該多準備一些redesign的作品呢?),希望能得到大大的建議,在暗夜給予我明燈。

        1. Hello~
          UI設計和網頁切版就好比廚師每道菜的廚藝是否夠好,UX則像是一桌滿漢全席需要思考饕客口味愛好、要準備哪幾道菜、出菜的先後順序是什麼,過程需要預備什麼餐具…等,最後饕客吃完滿桌料理的回饋,都與上面的能力有關,所以我覺得都很重要。

          在學習的比重上,一開始我會建議7-8成時間先作UI設計的訓練、2-3成時間吸收UX的相關知識,若你還想學習網頁切版的技能,那就是再瓜分那7.8成的時間。

          累積作品集建議以平面視覺稿為優先,網站實作可以實踐在自己的作品集網站。

  2. 天生有美感真好!
    對於很多事物,自己懂的怎麼搭配,很好的先天條件。

    1. 感謝你的稱讚 : )
      持續學習我覺得是更重要

  3. 設計感覺很有趣,如果會簡單的設計概念,對自己的生活也有美的一面

    1. 是啊~對於生活樣式會有著追求 :D

  4. 我自己在工作的時候,很多技術文件不知道該怎麼呈現才好看,第一個就會想到先去看看蘋果的網頁
    原來大家都會參考蘋果的網頁哈哈哈

    1. 是啊!畢竟iPhone做這麼不錯,網站應該也要做得不差才對,哈哈

  5. 哈囉喬瑟夫,謝謝你的分享。
    關於唐納諾曼的那邊文章寫錯了,圖解設計原理出現兩次XD
    其實蠻羨慕有理工背景的人,我覺得關於邏輯的規劃與架構非常加分!

    1. 感謝你的提醒,我已經修改書本名稱囉!非常謝謝你
      理工背景有好有壞,優點擅長規劃與架構,缺點不容易跳脫框架,但我還蠻喜歡優點的部分,哈

  6. 若我理解沒錯的話,通常網頁設計,是否都是使用Wordpress Themes後,再用CSS和HTML標籤去實現自己想要的設計版面?

    我是文科背景的,想嘗試自學網頁設計,爬了些文,很高興看到你的網站! 謝謝

    1. WordPress Themes的確都是由HTML和CSS構成的網頁版型,通常主要會以CSS來做樣式調整,HTML則比較困難,因為需要配合php程式才有辦法執行修改。很多人都選擇用wordpress架站,它不需要自己設計製作後台系統來做內容的編輯管理,但這也不是絕對的方式,需要看網站的應用與需求。網頁設計職務有分為視覺設計和程式設計這兩種,一種是設計師、一種是工程師,但在業界中是互相配合的。

發佈留言

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