就要同2014年說(shuō)再見(jiàn)了，是時(shí)候回顧一下這一年里的偉大設(shè)計(jì)了！著名的設(shè)計(jì)博客Designmodo評(píng)選出了年度最佳的20個(gè)優(yōu)秀網(wǎng)站，這些優(yōu)秀的網(wǎng)頁(yè)不僅設(shè)計(jì)精心，而且緊跟時(shí)下流行的設(shè)計(jì)趨勢(shì)。

網(wǎng)頁(yè)設(shè)計(jì)師們總會(huì)熱衷于追隨的設(shè)計(jì)趨勢(shì)，所以你能在這些優(yōu)秀的網(wǎng)頁(yè)中看到這些趨勢(shì)——扁平化設(shè)計(jì)、極簡(jiǎn)風(fēng)、視差滾動(dòng)、視屏背景，等等。這些設(shè)計(jì)優(yōu)秀的網(wǎng)站的另一個(gè)共同的特性，就是對(duì)移動(dòng)端的良好支持——響應(yīng)式設(shè)計(jì)。真正優(yōu)秀的網(wǎng)站，總會(huì)支持盡可能多的設(shè)備。

那么接下來(lái)我們就一起來(lái)看看2014年最佳的20個(gè)優(yōu)秀網(wǎng)站，了解一下為什么它們會(huì)吸引如此之多的關(guān)注。這20個(gè)網(wǎng)站都已經(jīng)被Awwwards所收錄其中，值得你每天瀏覽獲取靈感。

The Capitol

這個(gè)網(wǎng)站完全是基于近年比較火爆的《饑餓游戲》系列來(lái)制作的，網(wǎng)站風(fēng)格冷峻，與網(wǎng)站殘酷的調(diào)性非常一致。網(wǎng)站整體設(shè)計(jì)并不復(fù)雜，配色簡(jiǎn)單，但是風(fēng)格簡(jiǎn)單而大膽，并且使用了視差滾動(dòng)的設(shè)計(jì)。網(wǎng)站使用大量的信息、視頻和其他內(nèi)容讓用戶與之互動(dòng)，讓他們仿佛置身于電影當(dāng)中。

Grovemade

這 可能是今年最潮的網(wǎng)站之一，不僅內(nèi)容精心制作，而且結(jié)合了諸多流行的設(shè)計(jì)趨勢(shì)。網(wǎng)站使用了大量的大圖為背景，視覺(jué)上非常賞心悅目。網(wǎng)站使用白色的文字和幽 靈按鈕，在深色背景下看起來(lái)相得益彰。主屏之外的部分，設(shè)計(jì)師使用了精致的圖片和文字，與白色的背景形成令人愉悅的對(duì)比。

Sokruta

Sokruta使用醒目的大圖背景配合簡(jiǎn)單直觀的導(dǎo)航，而拼圖式滑塊的運(yùn)用讓整個(gè)網(wǎng)站都充滿了個(gè)性。這些個(gè)性化的設(shè)計(jì)都是在視覺(jué)上吸引人的招數(shù)，并且確實(shí)有效。除此之外，還有許多額外的效果，比如懸停在按鈕上的時(shí)候會(huì)出現(xiàn)動(dòng)效，令人樂(lè)此不疲。

Huge Inc.

這個(gè)網(wǎng)站設(shè)計(jì)的簡(jiǎn)約，也設(shè)計(jì)的恰到好處。不論是品牌設(shè)計(jì)還是空間和版式設(shè)計(jì)，Huge公司的網(wǎng)站都做的非常不錯(cuò)。網(wǎng)站借助視差滾動(dòng)完美地創(chuàng)造出“頁(yè)面”的感覺(jué)，不同的頁(yè)面呈現(xiàn)不同的元素，整飭而清晰。

I Remember

網(wǎng)站是為一個(gè)項(xiàng)目而建立，旨在提高人們對(duì)于阿爾茨海默氏癥的了解，網(wǎng)站視覺(jué)設(shè)計(jì)非常獨(dú)特，用戶可以同這個(gè)網(wǎng)站進(jìn)行許多有趣的交互。網(wǎng)站深沉的色調(diào)正象征這種令人失去記憶的病癥給患者的壓力，其中的微光則象征著“希望的微光”。

今年可能相對(duì)少見(jiàn)一點(diǎn)的設(shè)計(jì)趨勢(shì)，就是通過(guò)網(wǎng)站來(lái)向你講述故事。這種展現(xiàn)方式是創(chuàng)建品牌故事的好方法。這種類(lèi)型的網(wǎng)站里，圖片和排版的組合通常非常有趣，并且具有獨(dú)特的設(shè)計(jì)風(fēng)格。

Quay

在 這里，極簡(jiǎn)設(shè)計(jì)從未如此美麗。Quay餐廳的網(wǎng)站使用漂亮的大圖背景吸引用戶，全屏式的幻燈片式展示堪稱(chēng)完美，加載迅速，并且切換的節(jié)奏都控制得非常好， 網(wǎng)站導(dǎo)航欄被挪到屏幕底部，這使得網(wǎng)站的瀏覽體驗(yàn)更好。隨著頁(yè)面滾動(dòng)，導(dǎo)航欄會(huì)自然得移動(dòng)到頁(yè)面頂部。網(wǎng)站設(shè)計(jì)層次清晰，也保持著一定的復(fù)雜度。

Sorte En Mer

使用視屏背景是2014年最重要的設(shè)計(jì)趨勢(shì)之一，而 Sorte En Mer 則是其中的佼佼者。打開(kāi)網(wǎng)站的時(shí)候你仿佛打開(kāi)一部電影，并且你可以通過(guò)鼠標(biāo)來(lái)操控背景視頻的播放。網(wǎng)站的效果頗為驚艷，并且很少有同類(lèi)網(wǎng)站能做到這個(gè)層次。

A Spacecraft for All

這個(gè)網(wǎng)站可以帶你了解ISEE-3航天器。你可以通過(guò)網(wǎng)站查看ISEE-3的當(dāng)前的實(shí)時(shí)圖像，查看它經(jīng)過(guò)的地方和執(zhí)行過(guò)的任務(wù)。網(wǎng)站擁有簡(jiǎn)約而現(xiàn)代的外觀設(shè)計(jì)，并且鼓勵(lì)用戶與網(wǎng)站進(jìn)行互動(dòng)。

Super Looper

這是個(gè)有趣的游戲，你可以在此創(chuàng)建音樂(lè)并且可視化地展現(xiàn)出來(lái)，整個(gè)使用體驗(yàn)令人上癮。鮮艷的色彩與黑色的背景令網(wǎng)站在視覺(jué)上更富有魅力。

這也是一個(gè)充滿動(dòng)畫(huà)和視頻的網(wǎng)站，Jam3 擁有一個(gè)簡(jiǎn)約的首頁(yè)，網(wǎng)站其他的元素都可點(diǎn)擊并且具有經(jīng)驗(yàn)的視覺(jué)效果。

A Journey Through Middle-Earth

這是一個(gè)令人印象深刻的網(wǎng)站，一方面是因?yàn)榫W(wǎng)站是以近2年特別火爆的電影《霍比特人》為主題，另一方面是因?yàn)榫W(wǎng)站借助大量的靜態(tài)圖片和動(dòng)態(tài)圖像來(lái)創(chuàng)建出游戲般的交互體驗(yàn)。

MashVP

這個(gè)網(wǎng)站設(shè)計(jì)得極為簡(jiǎn)約，但是一點(diǎn)都不簡(jiǎn)單。當(dāng)你滾動(dòng)頁(yè)面的時(shí)候，圖片之間的切換效果頗為有趣，當(dāng)你點(diǎn)擊頂端的按鈕導(dǎo)航的時(shí)候，能讓你看到更多有趣的展示。

Over the Hills

這個(gè)網(wǎng)站擁有如此之多的功能，以至于你可以整天整天地鉆研，從動(dòng)效設(shè)計(jì)到視頻背景，從優(yōu)質(zhì)的音樂(lè)體驗(yàn)到復(fù)古的視覺(jué)體驗(yàn)，這個(gè)網(wǎng)站會(huì)讓你欲罷不能。

Twofold

雖然這個(gè)站點(diǎn)使用極簡(jiǎn)風(fēng)，但是網(wǎng)站并不簡(jiǎn)單。首頁(yè)使用了金色的色調(diào)和閃爍的光芒，滾動(dòng)的時(shí)候漂亮的動(dòng)效設(shè)計(jì)賦予網(wǎng)頁(yè)以自然的一面。其實(shí)這樣的網(wǎng)站最好，看似簡(jiǎn)單，但是當(dāng)你與之互動(dòng)的時(shí)候卻能給你帶來(lái)驚喜。

這個(gè)網(wǎng)站深得扁平化設(shè)計(jì)理念的精髓，幾乎上升到一個(gè)全新的境界。漂亮的圖片被置于簡(jiǎn)約的排版中，引人入勝。令網(wǎng)站真正與眾不同的是它的配色，強(qiáng)烈的對(duì)比令網(wǎng)站的色彩不再“扁平”，這種錯(cuò)落令人著迷。

Valerie Martinez Agency

乍一看這個(gè)網(wǎng)站感覺(jué)非常簡(jiǎn)單，但是簡(jiǎn)單之下隱藏著寶藏。標(biāo)題中的幽靈按鈕會(huì)帶你去前進(jìn)，每一個(gè)點(diǎn)擊都能帶來(lái)各種動(dòng)效。加載界面上的開(kāi)場(chǎng)動(dòng)畫(huà)同樣令人印象深刻，如果你仔細(xì)看的話。

Volkswagen

網(wǎng)站仿佛被設(shè)計(jì)成為一部電影預(yù)告片，除了帥氣的頁(yè)面之外，用戶還可以與網(wǎng)站宣傳的運(yùn)動(dòng)型轎車(chē)進(jìn)行交互。真正讓這個(gè)網(wǎng)站令人過(guò)目不忘的，還是源自于網(wǎng)站所使用的背景紋理和驚艷的圖片。設(shè)計(jì)團(tuán)隊(duì)還使用了簡(jiǎn)單的字體確保網(wǎng)站可讀性，還令整個(gè)站點(diǎn)的設(shè)計(jì)更加統(tǒng)一。

Your Local Studio

極簡(jiǎn)風(fēng)、簡(jiǎn)約的照片以及用戶相關(guān)的視覺(jué)元素混合在一起構(gòu)成了網(wǎng)站獨(dú)特的韻味。

Ba Ba Dum

網(wǎng)站游戲化依然是非?？孔V的手段，這個(gè)網(wǎng)站就是明證。游戲能帶來(lái)樂(lè)趣，同時(shí)也能為用戶傳遞一些知識(shí)。網(wǎng)站使用了色彩明艷的插畫(huà)教你來(lái)自各種語(yǔ)言的單詞。

掃一掃，案例分享帶回家（藍(lán)藍(lán)設(shè)計(jì)微信公眾平臺(tái)）