迎來2016,揮手告別2015,在過去的一年中中涌現(xiàn)了許多優(yōu)秀的設計作品,設計趨勢也在時間的推移中漸漸轉(zhuǎn)變。在這個新舊更替的時間節(jié)點,重溫過去一年中的優(yōu)秀網(wǎng)頁設計,無疑是對2015最好的紀念和總結(jié)。
這一年當中,網(wǎng)頁設計的轉(zhuǎn)變絕大多數(shù)時候是可以預見的,顛覆性的設計趨勢并沒有跳到你我面前,不過許多原創(chuàng)、奇特的設計依然讓我們驚艷不已。
總體上來說,在響應式設計、頁面對移動端的兼容、動效都有了不小的進步,扁平化的設計風格和頁面滾動效果則更加成熟,漢堡圖標和單頁設計總體上還是維持2014年的狀態(tài),并無明顯改變。毫無疑問,2015年是設計師們正在沉淀的一年,是網(wǎng)頁設計圈穩(wěn)步前進的一年,也正是有了這個基礎,創(chuàng)意十足的設計者們才可以更輕松地開腦洞玩兒出更多花樣。
當然,我們依然可以追溯這一年中設計圈中的每一個關(guān)鍵時刻,不過用最優(yōu)秀的網(wǎng)頁設計作品來一窺這一年的成就,似乎更加巧妙而有趣。
下面,是 Designmodo 團隊評選出的2015最佳網(wǎng)頁設計作品,準備好截圖和收藏夾吧。
BBQ Cultures
BBQ Cultures 的頁面設計證明了關(guān)乎燒烤的餐飲業(yè)網(wǎng)站也可以設計得高大上。設計手法上,設計師結(jié)合流行的設計趨勢,用足以取悅用戶的設計手法來完成設計,包括高清而充滿氣質(zhì)的圖片,精心制作的視頻,漂亮的裝飾圖形和微妙的交互和動效。尤其是微動效和微交互,讓整個站都充滿了活力。
In Pieces
In Pieces 的頁面展示了第一流的動態(tài)展示效果是怎樣的,設計師巧妙地使用JS和CSS將多邊形融入頁面不同的元素中,讓多邊形元素賦予了頁面全新的生命力。
Trippeo
Trippeo 展示了如何使用現(xiàn)代的解決方案來呈現(xiàn)即將到來的產(chǎn)品。這個網(wǎng)站采用了經(jīng)典的橫向布局,本質(zhì)上接近單頁滾動式頁面設計,所以頁面中的滾動動效設計地非常不錯,給用戶深刻的印象。
Be More by Reebok
Reebok 的這個網(wǎng)頁采用了經(jīng)典的單頁式的設計,有效地收納了全部的相關(guān)信息。風格化明顯的Grunge 風元素讓整個頁面的質(zhì)感極為突出,動態(tài)效果的執(zhí)行力也極強,賦予了頁面良好的用戶體驗。
The DNA Project
The DNA Project 是一個極為創(chuàng)新的音樂網(wǎng)站項目,它為用戶提供了截然不同的音樂制作流程,時尚又不同凡響。每首歌都被劃分為關(guān)鍵的音樂節(jié)點、音軌背后的故事和參與的音樂家等幾個部分,這個項目讓用戶與音樂人們一同制作音樂。
ACME Experience
網(wǎng)站以更加視覺化的方式來踐行這家公司的口號“我們是未來先鋒”,這個頁面采用率非對稱式布局,多層布局技術(shù)和微妙的動效,配合這色調(diào)活潑的背景,許多有趣的小技巧在頁面中各自發(fā)揮出獨特的功用,充分展現(xiàn)了“先鋒”這一特色。
Weltrade
Weltrade 營造了華麗而晦暗的場景,作為一個著陸頁,無論是桌面端還是觸摸屏都可以輕松操作,不過頁面中散落的菱形按鈕,最好的操作介質(zhì)還是手指。
Georg Jensen
Georg Jensen 的背景視頻將整個品牌宏大、華麗的氣質(zhì)渲染了出來,每個精致到位的細節(jié)都會讓你忍不住將他們的產(chǎn)品放到購物車中去。
Tenslife
Tenslife 也是一個采用了非傳統(tǒng)式的頁面布局的在線商店,其中精致而美觀的細節(jié)保持了風格的一致性和。兩欄式布局包含了所有有用的信息,不僅展示了產(chǎn)品的美妙之處,還讓用戶同時可以獲取產(chǎn)品信息,雖然內(nèi)容很多,但是一點都不凌亂。
Quechua
Quechua 是一款著名的在線雜志網(wǎng)站,靜態(tài)的細節(jié)展現(xiàn)和動態(tài)的排版都是它的特色。壯觀的自然景觀和獨樹一幟的品牌精神融為一體,平滑自然的瀏覽體驗配合精心制作的內(nèi)容,讓用戶流連忘返。
Ice and Sky
用網(wǎng)站來講述一個故事,已經(jīng)變得越來越繁復多樣了,而從某種程度上Ice and Sky 這個網(wǎng)頁的設計在這方面做的非常的突出。它巧妙地將視頻和漂亮的插畫融入到故事中去,這種平滑的展現(xiàn)方式不僅在桌面上給人良好的體驗,而且兼容了目前主流的瀏覽設備。
DogStudio
DogStudio 是一個屢獲殊榮的網(wǎng)站,盡管網(wǎng)頁的內(nèi)容和布局都采用了久經(jīng)考驗的經(jīng)典方案,但是設計美學上還是加入了許多設計師本身的想法。無疑網(wǎng)站的設計師對于各種設計手法和技術(shù)都非常熟稔,開頭使用了多層次的布局,頁面結(jié)尾的動效都恰如其分地起到了作用。
Namale
女性的柔美和優(yōu)雅在 Namale 網(wǎng)站中得到了全面的展現(xiàn),其中的產(chǎn)品集合也都具備相同的氣質(zhì)。作為一個產(chǎn)品展示網(wǎng)站,重點自然是產(chǎn)品,但是網(wǎng)站所營造的獨特氣質(zhì)起到了關(guān)鍵性的作用。
Kingsman Movie
電影《王牌特工:特工學院》的官方網(wǎng)站不僅起到了預告片的作用,但是它又比預告片做的更多。更多的展現(xiàn)形式在這里得到了體現(xiàn),有趣的交互,引人入勝的場景,聲音和音樂背景則讓這些顯得更加真實。
Braastad
柵格系統(tǒng)為Braastad 的網(wǎng)站搭建起穩(wěn)固又富有條理的結(jié)構(gòu),用戶不會因為內(nèi)容過多而感到迷惑。漂亮又精致的網(wǎng)頁控件、正規(guī)的排版、優(yōu)雅的細節(jié)和平和的氛圍都是網(wǎng)站的特色。各種動態(tài)的元素在用戶與網(wǎng)站進行交互的過程中,提供了非常優(yōu)秀的用戶體驗。
Keep Portland Weird
Keep Portland Weird 網(wǎng)頁中充分運用了華麗的動態(tài)插畫,這賦予頁面以一個獨一無二的動態(tài)外觀,內(nèi)容豐富的插畫內(nèi)容則讓網(wǎng)站顯得有趣又特別值得深入探索。
YouTube 10th Anniversary
世界最著名的視頻網(wǎng)站Youtube 10周年的紀念網(wǎng)頁肯定是不同凡響的,它會邀請訪客參與一個關(guān)于流行文化的知識問答,中間穿插著有趣的動畫,誘人的動效,漂亮的插畫,當然,還有優(yōu)秀的視頻。
Environment by Subaru
這個引起了多方面的關(guān)注的項目,有其獨到之處。網(wǎng)頁的設計方式采用了常見的高清大圖+文字的方式,但是網(wǎng)頁交互中使用了許多相當先鋒的方式。
Silenza
這個包含了多個品牌的在線商店和絕大多數(shù)的同類網(wǎng)站不一樣。網(wǎng)站借助許多視頻和素材生動地講述了關(guān)于自家公司的故事,同時,為保守的客戶提供了標準化的界面和全面的內(nèi)容。不過,網(wǎng)站并沒有為移動端做好兼容,這無疑是一大缺陷。
Sennheizer Reshaping Excellence
網(wǎng)站提供了令人驚艷的互動體驗,它雅致而富有質(zhì)感的頁面也非常值得關(guān)注。清爽的內(nèi)容說明和背景的搭配相得益彰。
Void
這個網(wǎng)站之所以被人用“無與倫比”來形容,主要是因為網(wǎng)站幾乎是一個新技術(shù)和創(chuàng)意所構(gòu)成的“畫廊”。許多尖端的技術(shù)和有趣的電子匯集到這里,組成了這個有趣的網(wǎng)站。當然,你如果想完整體驗,最好使用Chrome和Safari 瀏覽器。
LegWork Studio
精致無比的交互和令人難忘的用戶體驗是LegWork Studio 網(wǎng)站為用戶提供的服務,動效和動畫是這個工作室的特長。這所有的一起被這個單頁網(wǎng)站打包到了一起,流連在這些有趣的插畫和設計作品中,真是一種令人沉迷的體驗。
結(jié)語
優(yōu)秀的交互性和充滿意味的動效是這些網(wǎng)站共有的特征,實驗性的新技術(shù)也在許多網(wǎng)站中有所體現(xiàn)。2015年的確是沉淀下來的一年,曾被瘋狂追捧的扁平化開始博采眾長形成了如今漂亮又不失層次的扁平化2.0,動效和微交互在這種風格下發(fā)生化學反應,響應式和單頁、柵格式布局也開始在融合中找到了新的表現(xiàn)方式。并不激烈的碰撞,讓不同的技術(shù)之間有了新的搭配、融合的方式。新的想法和新的技術(shù)讓移動端和桌面端握手言和。2016年更加值得期待了。
【你必須知道的設計趨勢】
用戶體驗設計趨勢:
《設計行業(yè)大起底!圖說2015用戶體驗行業(yè)調(diào)查報告》配色搭配趨勢:
《業(yè)界良心!2015年最優(yōu)秀的20款網(wǎng)站配色方案(附配色工具)》網(wǎng)頁設計趨勢:
《你知道了嗎?2015年網(wǎng)頁設計的9大趨勢》
原文地址:designmodo
優(yōu)設譯文:@陳子木
本文由優(yōu)設網(wǎng)原創(chuàng)翻譯,請尊重版權(quán)和譯者成果,轉(zhuǎn)摘請附上優(yōu)設鏈接,違者必究。謝謝各位編輯同仁配合。
【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱:2650232288@qq.com】
================關(guān)于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設計師學習平臺,專注分享網(wǎng)頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量106萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ,歡迎關(guān)注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網(wǎng)站推薦,設計師必備導航:http://hao.uisdc.com
復制本文鏈接 文章為作者獨立觀點不代表優(yōu)設網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。
發(fā)評論!每天贏獎品
點擊 登錄 后,在評論區(qū)留言,系統(tǒng)會隨機派送獎品
2012年成立至今,是國內(nèi)備受歡迎的設計師平臺,提供獎品贊助 聯(lián)系我們
AI輔助海報設計101例
已累計誕生 753 位幸運星
發(fā)表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓