網頁視覺的設計訣竅 | 聖僑資訊

在設計網頁的過程中，為了讓創意發想和作品能更符合客戶需求，必須要多方參考他人的經驗和技巧，在這裡我會分享一些經驗與實際的做法幫助你達到更快速、精準的設計，符合規範邏輯與流程讓客戶怎麼樣都無法打槍你的作品，創意是可以被推翻，邏輯是無法被推翻的。

流程1.閱讀資料

網站設計的前提必須先打好整個骨架並了解對方公司在做什麼，就像蓋大樓一樣，設計圖(企劃)一定要先出來你才能知道你要蓋什麼，所以先大量的閱讀與了解。

流程2.找參考網站資料

找參考資料，以下分享一些我常上的設計師網站，可以從中找尋靈感和設計方向，同時也可向客戶展示實際的範例與效果，讓彼此在規劃網站藍圖的過程中達成更深一層的共識。

日本地區網頁設計師作品合集 4db

網頁作品展示及評分平台 Awwwards

網頁設計競賽平台 CSS Design Awards

評選全球最佳網頁作品的競賽平台 CSS Winner

時尚型設計網站分享網 Reeoo - 可依據配色加以篩選

知名互動多媒體網站收錄平台 Favourite Website Awards (FWA)

流程3.創意發想

創意發想，通常這是最難的要怎麼讓網站結合客戶產品與創意，比方說整合居家電子控制的產品，我們做了一種簡單的方式，透過Before & After的對比，讓使用者可以立即看到產品效果，達成情境式銷售氛圍，如下所示：

→Before →After ▲參考網站 杰峖數位科技網站

流程4.設計

設計面分為下列幾種方式個別介紹，logo色系搭配、網站配色、版面配置、Photoshop網格、banner設計、字型搭配、文字大小。

■　logo色系搭配與網站配色

通常網站的配色會搭配企業的企業色去做配置，那麼要從何得知企業色呢?就是LOGO或是企業VIS識別系統，再來思考輔助色，如果企業是綠能產業是不是搭配綠色會比較妥當，若為糕點產業顏色上是否需要偏向較柔和的粉嫩色彩，除了配合企業色外也需要看業主產品去做適當的調配，下面介紹兩個配色網站：

Degraeve - 可針對圖片給出合適的配色

Coloes - 可隨機挑選顏色以及觀察目前流行配色

■　版面配置

版面設計的方式有很多種，建議先在紙上繪製線框稿，同時可在後面加註動態呈現手法，也可以拿著稿件跟前端與客戶討論是否合理、洽當，當一切備妥後再行設計也不遲。 ▲圖片來源 UI TILES

目前聖僑使用的方式是用Axure去做網站規劃，如下：

聖僑網頁設計用-版面配置參考

■　Photoshop網格推薦

建議用Photoshop在設計中就要把網格的概念建立起來，讓網站設計更有邏輯並且有參考依據的指標，在前端開發時也可以依照此網站進行開發，可以省下不少時間。

■　 Banner設計

網站最重要的無非是一進來就載入的Banner，所以在設計上更需要特別下功夫在此，設計Banner無非就是考驗設計師的功力，在此給大家幾個設計模式方向參考：

→以字型為主的設計 ▲圖片來源 Tom Rich's Dribbble

→產品為主文字為輔 ▲圖片來源 Stefan Tran's Behance

→美圖放上去就是美 ▲圖片來源 Valery Gurkov's Behance

→底圖押上色塊底再配字

→平拍圖像素材 ▲圖片來源 Maan Ali's inspirationde

→平拍圖像素材 ▲圖片來源 Bart Ebbekink's Behance

以上各種Banner設計都可以看得出其焦點、品牌意象，建議在設計時須先了解主從關係，清楚文字敘述和情境式圖像的先後順序，主要>次要安排，再接續補齊細節即可。

■　字型搭配

在字型搭配的這個項目必須先說明，有些時候為了符合SEO現在在中文網頁上多數都統一用微軟正黑體或是思源黑體，而不是用圖片去切圖作字，但在英文的應用上就會比較多選擇，通常我們都會使用Google Fonts的字體，如下圖就是使用google font去搭配出符合業主網站個性的字體：

▲圖片來源 Jsedm

■　文字大小配置

設計網頁時通常會在稿件上註記此網站的統一標題大小、內文文字大小、主要配色與次要配色等資料，若是有下一位設計師接手製作的話就能立即作業，也可以藉此統一整體網站的文字邏輯。

流程5.找圖配圖(關鍵字搜尋、找對圖帶你上天堂)

很多公司都有配合的圖庫，如何在茫茫的圖海當中找到合適的圖片確實是很重要，首先你要知道你要什麼，搭配精準的關鍵字來縮小搜尋範圍，比方說現在要找世界地圖觀的意象，你會輸入＂Earth＂還是＂Global＂? 兩種搜尋出來的答案會不太一樣喔！如果要再加入合作Cooperate或是Trade會讓圖的表現更有意向，也可以多加入一點關鍵字獲得更精確的搜尋結果。

流程6.設計精修

其實就是剛完稿的設計千萬不要馬上寄出，先放著或是釘在牆壁上等待~下周或許會發現意料之外要調整或是看不順眼的地方，這時可以立馬著手精修。

流程7.黑白看稿

在設計好時會讓稿件試著黑白呈現看看，可以看出你的稿件是否平淡無奇或是對比明顯，以此來確認在彩稿中有哪些部份需要調整。

以上介紹了整體的設計流程與設計訣竅給大家參考，實際運用上還是得選擇一套符合自己習慣且好用的設計模式，可以依照自己喜好去做調整喔。