iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 13
1
Modern Web

從平面轉型成網頁設計的 UI/UX 設計師系列 第 13

【Day 13】UI/UX 設計師的「設計參考」整理方法!

昨天分享的是「網站收集頁」,主要用途在於大範圍的尋找視覺參考網站。
當一個客戶有指定風格,或是老闆認為該客戶的產業性質,也許更適合走某種設計風格時,
我們也會整理出幾個視覺參考網站,提供客戶選擇方向。

關於參考資料的整理方法有很多種,每個人的習慣方式都不盡相同。
今天會分享一些,對筆者來說很有幫助的設計參考整理方法


一、在 Google Chrome 的書籤設一個「Web Design」資料夾

https://ithelp.ithome.com.tw/upload/images/20200928/20107810gDERtxjkbc.jpg
↑ 公司電腦的 Chrome 書籤列

對筆者來說,當逛到喜歡的網站時,可以直接將它設置成「我的最愛」是最直覺的方式。
通常筆者會在 Google Chrome 的書籤列,開一個「Web Design」的資料夾,將喜歡的參考網站丟進去收藏。
但是這麼做會有幾項缺點:

  1. 會一直不斷地丟進去,日積月累,導致突然要找某一個網站時完全翻不到XD
  2. 各種風格的網站都混在一起,要找特定風格的網站時也要翻好久
  3. 網頁有機率會掛掉,可能是被刪除、更換網址、或是主機故障...等等原因
  4. 收藏的當下是你最喜歡的樣子,後來可能經過設計師或客戶的來回修改,網站已經不是當初收藏的樣式、或進行過改版,想要找回最一開始的版型已經無望。゚(゚´ω`゚)゚。(很常發生)

因為以上幾項缺點,於是筆者再細部整理了網站資料夾。

二、在「Web Design」資料夾底下做視覺分類

https://ithelp.ithome.com.tw/upload/images/20200928/20107810DGdnK0xV1y.jpg

筆者會按照該網站的風格,將各式各樣的網站分門別類,收錄到「指定風格」的資料夾內。
這樣不僅可以快速尋找特定風格的網站,也能一目瞭然目前收藏了哪些視覺分類。

如果公司是接特定產業的案子,如:飯店、民宿、學校、科技業...等等
可以分別開「飯店」、「民宿」、「學校」、「科技業」等風格資料夾,把平時會參考的網站或突然逛到覺得不錯的網站,都丟進去收藏。

這樣的分類方式可以加快新案子的評估時間、和客戶討論風格的時間,也能幫助設計師快速抓到要呈現的視覺風格

那對於網頁有機率掛掉的問題,該怎麼解決?

三、在電腦設一個「設計參考」資料夾,放在 D 槽

https://ithelp.ithome.com.tw/upload/images/20200928/20107810MX9DafuxNw.jpg
↑ 公司電腦 D 槽內「設計參考」資料夾的....一部份XD

筆者在「設計參考」的資料夾內,也會根據各種視覺風格規劃該風格的資料夾。
從網頁設計到平面設計、3D、2D 動畫、App、插畫、海報...等等,非常多XD
有些是工作上需要的資料蒐集,有些是單純覺得視覺上好看,多看多蒐集,一定有幫助!

網頁設計師不只需要會做網頁,在分工比較細的大公司,工作內容會相對單純。
但在小公司時常會需要做平面設計和 LOGO、型錄、小動畫、風格插畫......等各式各樣的需求。
最常聽到的就是客戶說

:「能不能幫我畫一個簡單的 LOGO ?」

修蛋幾雷!!LOGO可是一點都不簡單啊!!ヽ(#`Д´)ノ(翻桌

離題了!
筆者通常在逛一個網站時,會觀察這個網站哪一個部分 / 排版 / 視覺值得學習與收藏,並將該部分截圖後,依照網頁的常用區塊做「分類收藏」。
例如:「最新消息」、「關於我們」、「banner」、「header選單」、「footer設計」...等等做資料夾分類。
不一定要按照參考網站的規劃,也可以按照個人喜好去分類。

舉例來說

https://ithelp.ithome.com.tw/upload/images/20200928/20107810yTjAdu0roD.png
by Apple Mac

這是蘋果官網的 iMac 介紹頁中的一張視覺圖,我會把它歸類在「banner」。
截圖下來的同時也可以仔細分析,這樣的視覺呈現為何覺得好看?

它有「主標」、「副標」及「裝飾小字(查看預覽)」,三種不同大小的文字編排在一起,形成層次感的同時卻不會搶走「主標」的風采。
底圖雖然搶眼,卻也不會讓文字閱讀上不夠清晰,中央的紅色很巧妙的設計明暗交界,讓整體的視覺重點自然地放在「全新作風,全面有為」之上,不受其餘顏色干擾。

分析完的同時,也可以假想未來若要設計 banner,是不是可以嘗試這樣的排版方式視覺呈現
底圖更換成抽象元素的背景、或重點在中央的照片,文字改為客戶的 Slogan...等。

https://ithelp.ithome.com.tw/upload/images/20200928/20107810HEKXnWhoAb.png
by Apple Mac

這張依然是蘋果官網的 iMac 介紹頁,第一張 iMac 介紹圖。
我會把他歸類在「banner」或「網頁區塊排版」。

這樣的排版方式不只能放在 banner,也可以運用在很多地方的時候,筆者會將同一張圖,也一併放到「網頁區塊排版」內。
目的是不限制自己,這樣的編排方式只能用在 banner 或某項區塊,多進行設計思考後將有無限可能。

例如:

  1. 右方的電腦區塊,如果今天有科技產業需要呈現公司的系統產品,就可以找到電腦的 Mockup,合成上系統的使用圖,左方打上介紹文字,就呈現出一個將系統有形化的產品介紹區塊
  2. 將電腦換成一張美美的圖,又是另一種區塊設計,可以放到任何地方。

工作到現在,筆者常和同為設計師的同事討論,我們都有一個共同想法:

設計初期,一定都是先從「模仿」開始。

模仿」不是「」,是經過觀察並且抓到這項作品的 精神設計重點 在哪裡?
抓住之後再用這些重點,去設計出自己的作品。
久而久之,這些「重點」會開始有自己的味道,衍伸出自己的視覺風格,也會開始出現自己的「設計重點」。

覺得設計這條路唯有不斷地觀察、嘗試、實作,
才能越來越進步,沒有捷徑!


以上是筆者在工作上整理設計參考的方式,希望對網頁設計師或平面設計師有所幫助:)
明天會分享這三年來,做案子很常拿出來參考的視覺網站整理!


上一篇
【Day 12】網頁設計師的靈感來源,私藏的10個網站收集頁分享!
下一篇
【Day 14】從事 UI/UX 工作上,常參考的視覺網站整理(持續更新)
系列文
從平面轉型成網頁設計的 UI/UX 設計師30

尚未有邦友留言

立即登入留言