web design

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

網頁部 鄭奇儒( 2017 . 04 . 21 )

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

流程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在設計中就要把網格的概念建立起來,讓網站設計更有邏輯並且有參考依據的指標,在前端開發時也可以依照此網站進行開發,可以省下不少時間。

聖僑網頁設計-PHOTOSHOP網格

■  Banner設計

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

→以字型為主的設計 網頁banner設計-字體 ▲圖片來源 Tom Rich's Dribbble

→產品為主文字為輔 網頁banner設計-產品 ▲圖片來源 Stefan Tran's Behance

→美圖放上去就是美 網頁banner設計-情境圖 ▲圖片來源 Valery Gurkov's Behance

網頁banner設計-情境圖 ▲圖片來源 Corey Haggard's Dribbble

→底圖押上色塊底再配字 網頁banner設計-底圖配置

→平拍圖像素材 網頁banner設計-平拍圖像 ▲圖片來源 Maan Ali's inspirationde

→平拍圖像素材 網頁banner設計-人物情境圖 ▲圖片來源 Bart Ebbekink's Behance

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

■ 字型搭配

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

網頁字型搭配 ▲圖片來源 Jsedm

■ 文字大小配置

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

網頁字體大小

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

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

流程6.設計精修

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

流程7.黑白看稿

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

網頁黑白比對

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

fblike
  • 485