iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 8
0
Modern Web

從前端走到設計,下一步?系列 第 8

Day8-設計三大元素:配色、字體、icon

配色怎麼配

身為一個完全沒有設計感的女子,我的配色其實都是憑感覺拉的。有時候自己覺得還好,別人卻覺得超怪那種 xD
還有在決定一個主題後,要開始想網頁的主視覺,最重要的還是顏色。像我自己發現,拍賣網站喜歡用橘(暖)色系列(像露天、蝦皮...),我猜是暖色比較容易激起購物慾望哈哈。
所以為了決定整個主視覺得顏色,這時候就不太能用自己的感覺去想了,為了解決這個問題,我開始去找一些配色相關的線上資源。

這邊推薦幾個我覺得很不錯的網站:
Picular:https://picular.co/
若今天想要做跟科技有關的網站,你可以直接搜尋 technology(我自己都是以英文搜尋,中文我就不確定了)

會跑出相關的顏色,通常我們想到科技也會想到藍色(?)
下面的顏色直接有色碼,點擊就可以複製色碼囉,我覺得這網站在幫助主視覺設計的時候很有幫助。

另一個則是顏色的搭配
Coolors:https://coolors.co/app
如果你已經想好這個網頁會以藍色為主要顏色的話,就很適合用這個網站

可以挑藍色的幾個色階,適合用在各種標題跟內文的顏字上。幫助自己在配色的時候不會太跳 tone。

字體怎麼選

字體這一塊我一直想鑽研,但博大精深,我實在一直無法很精熟。
因此這個就簡單講些我自己的概念好了。
字體主要分成三種:(以下圖片皆來自維基百科)
(一)襯線體、(二)非襯線體、(三)手寫體。

  • 襯線體最常見的代表像是:新細明體。

    襯線體的特徵就是在筆觸的首跟末會有特別明顯的勾勒。而襯線體主要給人典雅、高貴的感覺。現代的一些文青店也會用這類的字體作為招牌設計,就是為了給人一種高雅文青的感覺。

  • 非襯線體的代表:例如微軟正黑體。

    相對於襯線體,非襯線體在筆觸的首末不會有特別勾勒。也因為字體相對單純(沒有太多勾勒的多餘資訊),因此在閱讀上會比襯線體容易,現代大多的資訊都是以非襯線體作為主要類型。相對於襯線體的高雅,非襯線體較親和、無距離。很多簡報設計,也都是以這類的字體作為設計,原因就是因為它方便閱讀。

  • 手寫體
    手寫體的風格就比較多元,通常手寫體會帶給人比較活潑、年輕的感覺。像是社團宣傳、海報等,通常會用到的都是針對族群較年輕的。

icon 哪裡找

根據研究,「人類大腦吸收圖像的速度是文字的 60,000 倍」、「人類能吸收 80% 的圖像,但只能吸收 20% 的文字」。圖真的太重要了。
一個好的圖示,勝過一行落落長的文字。

舉我最愛用的網站:flaticon https://www.flaticon.com/
雖說 icon 可以幫助閱讀,但是如果 icon 風格沒有統一,那放 icon 只會更混亂。像是下面同一個 icon 就有三種類型:純線條、線條加背景、純背景

  • icon by Freepik from flaticon

建議在使用同一個作品的時候選擇一樣的類型,避免有時候 icon 是有線條、有時候又是沒有的,這樣會大大混亂整個設計的風格。

如果選擇免費下載的話,也記得要註明作者,避免侵犯著作權等規範哦!


上一篇
Day7-從無到有的設計圖
下一篇
Day9-潮流在改變:扁平化設計
系列文
從前端走到設計,下一步?30

尚未有邦友留言

立即登入留言