眼前一亮!這些網頁設計我愛了!

自上世紀末開始,台灣互聯網高速發展的近三十年,對比90年代緩慢的網速、小屏幕超低清的分辨率(只有800x600像素),如今的網絡技術可謂是突飛猛進。加上個人電腦普及以來,媒體和企業對用戶體驗、頁面動效、富媒體的重視,直接催生了WUI設計師這樣的職業。

時至今日,網站仍是我們獲取訊息的主要平台之一,電腦端網站體驗並不比手機軟件和APP差。擁有一些網站設計的規範和理解網站運行的原理,也許能啟發一些同學在未來做WUI設計師。今天就好好看一些設計案例,也聊一聊網頁設計必須懂得的那些事兒:優秀的網站長啥樣?一睹為快吧!

「Web Design」&「Website design」

網頁設計

網站設計是功能上的設計,網頁設計是功能基本開發之後對具體頁面的排版佈局。

#

SUMMER

DRINK SOME WRITER

RUNNING AGAIN

簡約+撞色

視覺體驗滿分

Pogon是一家集創意、設計、品牌策劃、網絡行銷等服務於一身的事務所,包括創立品牌、建設網站、線上購物平台、社交網絡、移動應用程序。他們專注於針對客戶群體打造最佳用戶體驗化。

這樣的工作性質使得Pogon的創始人和技術人員在設計自己的線上主頁時駕輕就熟。輕鬆、簡潔的排版和視覺中,除了文本的白色和一些必要的案例配色,偏執大膽的幾乎全部選擇了藍色,輕微動態的邊欄使使用感極其流暢。

#

SUMMER

DRINK SOME WRITER

RUNNING AGAIN

人物+動效

趣味體驗滿分

第二個網頁則是品牌Fluff的官方主頁。 Fluff是一家生產和銷售化妝品的公司。創始人Erika Geraerts認為現在的年輕人很依賴化妝品,如果不化妝就會覺得自己出門少了些什麼。

年輕的Fluff主頁使用了明亮熱情的黃色,這種飽和度很高的顏色很符合年輕用戶群體的審美。 Fluff的陽光自信感和前衛的Fluff美學透出屏幕,旨在傳達產品的功能不會遮蓋每個人自身的美,

#

SUMMER

DRINK SOME WRITER

RUNNING AGAIN

留白+熒光色

反差體驗滿分

亞當·何(Adam Ho)是紐約布魯克林的獨立設計師,專注於品牌識別,藝術指導和互動設計等學科的交集。 Adam Ho Portfolio是他的個人作品網站。

#

SUMMER

DRINK SOME WRITER

RUNNING AGAIN

字體+復古色

懷舊體驗滿分

這是聖彼得堡鋼琴節的宣傳和活動宣傳網站。視覺上的一個很重要的特徵就是文字外觀的粗體設計、顏色的選擇。紅、白、藍三色構成了網站的主色調,黑色作為背景的想法是來源於國旗,音樂家分別來自瑞士、法國和俄羅斯,這些顏色就是取自這些國家的的國旗。

設計師首先是把時間表放在第一頁,同時讓人們熟悉藝術家的背景訊息。這個網頁的設計避免將內容拆分為多個頁面,使用戶能夠進行平滑的過渡,無需額外的HTTP請求即可單擊藝術家的姓名,從而了解他們的訊息。

#

SUMMER

DRINK SOME WRITER

RUNNING AGAIN

襯線體+高級灰

視覺體驗滿分

http://這是一家設計工作室,位於法國南部和巴黎,與當地還有國籍品牌合作,涉及文化、奢侈品、生活藝術等領域的設計、創意以及品牌的相關工作。

創始人Daisy曾與Chanel、Swatch Group、Fours Seasons等品牌合作在Realms of communication和Digital Strategy方面有近十年的歷史。她創立自己具有濃厚美學品味的品牌D.Potfer Studio,面對全新挑戰和有意義的合作並渴望獲得卓越的表現。

#

SUMMER

DRINK SOME WRITER

RUNNING AGAIN

文字+動效

視覺體驗滿分

http://與之合作的品牌包含ADOBE、AIGA、APPLE、 Nike、FACEBOOK等等。

與此同時,Angela Milosevic還是一位數字插畫師,它的網站與它的插畫作品風格和配色都很像,網站最有趣的就是一個故障風交互,當用戶拖動鼠標,圖片便會出現無數層。

#

SUMMER
DRINK SOME WRITER

RUNNING AGAIN

構圖+復古紅

視覺體驗滿分

科普向網站ussr.obys.agency/——蘇聯設計年鑑令人驚艷。從配色到構圖,濃濃上世紀社會主義陣營風味的視覺體驗,對比當今設計界異彩紛呈,網頁當中交互動畫的巧思,一瞬間讓蘇聯設計的遺產躍然紙上。

蘇聯設計是一個大國留下的無價遺產,它是至上主義、構成主義又是先鋒主義。雖然作為藝術遺產,但在現如今各種各樣但設計風格中,眾所周知以包豪斯著稱的德國設計、北歐的極簡風格以及同樣極簡但富有東方禪意的日本設計獨樹一幟。

今日總結

許多優秀的網頁設計作品,不僅僅有著突出的排版設計,而且在動效、交互、體驗上有著頗為值得學習的地方。如果你願意仔細揣摩,還會發現每個網頁都有自己的性格,許多細節的處理技巧和內容相結合的搭配策略。設計的靈感來源多種多樣,不僅僅要了解別人的視覺設計,而且需要仔細體驗實際的效果。想比起零散地設計作品,這些來自著名設計機構的網站,在不同需求下誕生的網站產品,更有價值。