網站視覺風格怎麼選? 風格分類、範例一次看

經驗分享

網站視覺風格怎麼選? 風格分類、範例一次看
2022-10-26

我們近來遇到許多客戶,想重做網站,卻常常無法給出明確的方向。因此,今天的這篇文章,就是要寫每個為網站設計迷茫的網站主們,一篇集結形容網站會用到的一些關鍵字,以及他們的實際案例,開門見山地寫的一篇視覺設計選擇指南!

首先聲明,一個網站的視覺組成,除了以下將提及的風格、素材、色系、感受之外,還有很多很多需要注意的小細節,例如插畫風、動畫形式、菜單形式等等,本文志在幫助你找到大方向,跨出第一步。

廢話不多說,讓我們從風格開始吧!

一、風格

網站設計中,用以形容網頁的種形容詞,使用平率最高的大概是「大眾化」與「獨特」了吧。

這邊所謂的大眾化並不是貶義,而是指大眾較常見的設計。

例如Simular Steak House,Landing Pageg是商品照片加上黑色透明遮罩,再壓上品牌Logo,這樣的畫面,你的腦海中是否瞬間就能聯想到類似的設計呢?

此種設計,通常因為網站與網站之間相似度高,且已在網路上運行多年,按鈕位置、網站架構等都比較符合主流的使用習慣,讓大眾一看就懂,熟悉的操作方式對最味!

獨特,大部分指的是開發型網站,網頁設計公司與客戶負責人會從瞭解商品開始,為其量身定制網站企劃,因此在此類網站中,較常出現一些獨特且有趣的功能或動畫。

皮爾斯威士忌為案例,透過如鋪克牌一般的線條,勾勒出如威士忌口感般的高貴、典雅的氣質,而此網站中的插畫是經過設計師與客戶數次的構思與討論,甚至連照片,都是由網頁公司操刀,專為皮爾斯威士忌所訂製。

二、素材

網頁設計中的素材指的是網站中的照片、圖片、圖案甚至是按鍵,營造網站氛圍感不可或缺的物件。

在販售服務的網站、教育機構的網站中,與「人」打交道居多,因此希望網站的設計,能讓使用者感到親切,所以此類網站多選擇使用真人圖片為素材。

這邊的範例是清大台北政經學,不只利用實景照片使氣氛更悠閒,還啟用了學生攝影師,呈現出校園最真實的樣子。

金融商品中,多數以插畫或真人圖片結合插畫的方式呈現網站,例如永豐美股旋豐來襲,美國股市一頁式網站選擇了美式插畫來搭配,切合主題,達到錦上添花的效果。

素材的選擇,除了受到商品性質影響,也會受到目標客群的影響,例如日本Sony Music徵才網站,因面向初出茅廬的應屆畢業生進行徵才,所以選擇利用繽紛的3D人物,打造出輕鬆、適合年輕族群的徵才網頁。

三、色系

化妝有分冷、黃皮膚,攝影有色溫,網頁設計也有分暖色、中性色、冷色等。

通常而言,冷色調的網頁設計會較適合高科技、技術相關產業,因為冷色調比較容易呈現出「科技感」。這邊的案例是Venture for Amarica,Venture for America是一個培育大學畢業生成為領導者的機構,他們以不同程度的藍色貫穿整個網站,使網站散發出高冷的氛圍。

中性色相對適合適合調性中立的單位,教育、政府機關等等,例如節能園區,網站色調以綠色與藍紫色組成,不會偏冷或偏暖,搭配吉祥物北極熊,俏皮又有趣。

暖色調容易營造出舒適感,因此較適合生活選物店、女性消費為主的商店,像是居家選物店stoove,網站背景是淡淡的膚色,按鍵顏色則是橘色、圓角,配色像極了你夢想中的溫暖豪宅。

除了暖、中性、冷等調性,也有一種網頁設計,是以品牌本身的代表色作為網站主色調,例如牧毛町。此種設計可以快速搭建出網站整體感,是業界相當常見的一種做法。

如果你不知道該選什麼色調,選擇與品牌色相同的顏色來製作網站,絕對是您最安全且有效率的選擇。

|注意|

顏色的判斷非常的主觀,暖色也可以做出科技感,以上案例僅展示較常見的做法。

四、感受

感受的這個部分,純粹是你的網站呈現給使用者的「氛圍」。

棉樂悅事,意為尼泊爾文及梵文中的「大地之母」。

網站主要販售尼泊爾女性以自然原料手工打造的永續性商品,以及分享尼泊爾當地的暖心故事。因此,諮詢時即表達網站要給人溫馨的感覺,最終的成品以暖色調為網站主色調,搭配手繪感插畫,讓網站充滿親切又溫暖的感覺。

Datavedio國際官網,國際化科技公司,業務為製造及租用導播機相關產品,版圖擴及全球,因商品外觀、使用者環境多為黑色,品牌色為深藍色,兩者相結合做出的科技感、高冷感恰好非常符合品牌調性。

你的品牌給予造訪者什麼樣的感受、使用什麼顏色、放上何種素材,完全取決於你的故事,高冷科技業或是溫暖的女性力量亦或是嚴肅的教育機構,這個故事會將網站分向完全不同的結果。

如果你已經想好要透過網站訴說什麼樣的故事,歡迎參考這篇文章:

也歡迎聯絡我們,夏木樂,品牌網頁設計專家,讓我們幫你從網頁設計開始,提供最好的服務。

Ask Simular