部落格
Blog
熱門文章Hot
-
奧運行銷 7個品牌案例教您如何借勢造勢 | 聖僑資訊
2016-08-17
-
流量成長指標 AARRR理論 | 聖僑資訊
2016-09-29
-
營照歸屬感 Airbnb感動人心的品牌策略 | 聖僑資訊
2016-07-29
-
商業4.0 打造未來商圈五大關鍵 | 聖僑資訊
2016-09-24
-
SEO內容霸主 5大工具教您挑選長尾關鍵字 | 聖僑資訊
2017-01-19
-
掌握視覺傳達技巧 設計資訊圖表So Easy | 聖僑資訊
2016-09-10
-
Beacon微定位導流 遊戲式消費模式 | 聖僑資訊
2016-09-19
-
寶可夢都愛它? 老舊裝置的重生之路 | 聖僑資訊
2016-08-24
-
網頁視覺的設計訣竅 | 聖僑資訊
2017-04-21
-
大幅提高行動版網頁速度 AMP網頁設計教學 | 聖僑資訊
2017-01-25
訂閱電子報Subscribe

網頁視覺的設計訣竅 | 聖僑資訊
在設計網頁的過程中,為了讓創意發想和作品能更符合客戶需求,必須要多方參考他人的經驗和技巧,在這裡我會分享一些經驗與實際的做法幫助你達到更快速、精準的設計,符合規範邏輯與流程讓客戶怎麼樣都無法打槍你的作品,創意是可以被推翻,邏輯是無法被推翻的。
流程1.閱讀資料
網站設計的前提必須先打好整個骨架並了解對方公司在做什麼,就像蓋大樓一樣,設計圖(企劃)一定要先出來你才能知道你要蓋什麼,所以先大量的閱讀與了解。
流程2.找參考網站資料
找參考資料,以下分享一些我常上的設計師網站,可以從中找尋靈感和設計方向,同時也可向客戶展示實際的範例與效果,讓彼此在規劃網站藍圖的過程中達成更深一層的共識。
知名互動多媒體網站收錄平台 Favourite Website Awards (FWA)
流程3.創意發想
創意發想,通常這是最難的要怎麼讓網站結合客戶產品與創意,比方說整合居家電子控制的產品,我們做了一種簡單的方式,透過Before & After的對比,讓使用者可以立即看到產品效果,達成情境式銷售氛圍,如下所示:
→Before →After
▲參考網站 杰峖數位科技網站
流程4.設計
設計面分為下列幾種方式個別介紹,logo色系搭配、網站配色、版面配置、Photoshop網格、banner設計、字型搭配、文字大小。
■ logo色系搭配與網站配色
通常網站的配色會搭配企業的企業色去做配置,那麼要從何得知企業色呢?就是LOGO或是企業VIS識別系統,再來思考輔助色,如果企業是綠能產業是不是搭配綠色會比較妥當,若為糕點產業顏色上是否需要偏向較柔和的粉嫩色彩,除了配合企業色外也需要看業主產品去做適當的調配,下面介紹兩個配色網站:
■ 版面配置
版面設計的方式有很多種,建議先在紙上繪製線框稿,同時可在後面加註動態呈現手法,也可以拿著稿件跟前端與客戶討論是否合理、洽當,當一切備妥後再行設計也不遲。 ▲圖片來源 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去搭配出符合業主網站個性的字體:
■ 文字大小配置
設計網頁時通常會在稿件上註記此網站的統一標題大小、內文文字大小、主要配色與次要配色等資料,若是有下一位設計師接手製作的話就能立即作業,也可以藉此統一整體網站的文字邏輯。

流程5.找圖配圖(關鍵字搜尋、找對圖帶你上天堂)
很多公司都有配合的圖庫,如何在茫茫的圖海當中找到合適的圖片確實是很重要,首先你要知道你要什麼,搭配精準的關鍵字來縮小搜尋範圍,比方說現在要找世界地圖觀的意象,你會輸入"Earth"還是"Global"? 兩種搜尋出來的答案會不太一樣喔!如果要再加入合作Cooperate或是Trade會讓圖的表現更有意向,也可以多加入一點關鍵字獲得更精確的搜尋結果。
流程6.設計精修
其實就是剛完稿的設計千萬不要馬上寄出,先放著或是釘在牆壁上等待~下周或許會發現意料之外要調整或是看不順眼的地方,這時可以立馬著手精修。
流程7.黑白看稿
在設計好時會讓稿件試著黑白呈現看看,可以看出你的稿件是否平淡無奇或是對比明顯,以此來確認在彩稿中有哪些部份需要調整。

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