這個(gè)夏天，那個(gè)塌鼻子、齊劉海、煙熏妝的丑萌哪吒徹底火了。背后是導(dǎo)演及創(chuàng)作團(tuán)隊(duì)歷時(shí)5年的籌備。俗話說厚積薄發(fā)，沒有平時(shí)的積累，哪來的現(xiàn)象級作品問世。網(wǎng)頁設(shè)計(jì)也是如此，沒有設(shè)計(jì)師們平時(shí)對設(shè)計(jì)素材和靈感的積累，哪來的優(yōu)秀作品呢？

今天摹客團(tuán)隊(duì)又為大家整理了一批優(yōu)秀的網(wǎng)頁設(shè)計(jì)作品，供大家欣賞、學(xué)習(xí)，為打造下一個(gè)爆款作品積累靈感：

• 登錄頁設(shè)計(jì)
• 漸變色設(shè)計(jì)
• 插畫設(shè)計(jì)
• 排版設(shè)計(jì)

網(wǎng)頁設(shè)計(jì)靈感之登陸頁設(shè)計(jì)

1. Landing page. Above the fold - Charity

By Outcrowd

這個(gè)網(wǎng)頁是為慈善機(jī)構(gòu)而設(shè)計(jì)的，旨在向人們宣傳慈善，提高社會(huì)意識(shí)，鼓勵(lì)人們通過慈善的方式來幫助兒童、面臨水資源危機(jī)的群體及其他需要幫助的群體。

技巧分享：

它的登陸頁面采用了插畫與動(dòng)畫相結(jié)合的設(shè)計(jì)，流暢的動(dòng)畫，鮮艷的配色，使整個(gè)網(wǎng)站設(shè)計(jì)看起來非常精美。創(chuàng)意的七巧板設(shè)計(jì)使網(wǎng)站主題與文字變化無縫銜接。

2. Landing Page - TeamKids

By Outcrowd

TeamKids也是由outcrowd團(tuán)隊(duì)設(shè)計(jì)的一個(gè)針對兒童托管的網(wǎng)站，為孩子們的課余時(shí)間提供娛樂和學(xué)習(xí)，豐富校外生活。網(wǎng)站登陸頁面設(shè)計(jì)充滿童真童趣，鮮艷亮麗的色彩搭配，動(dòng)畫元素設(shè)計(jì)的活潑可愛。

技巧分享:

登陸頁面作為整個(gè)網(wǎng)站的門戶，插圖和動(dòng)畫的利用有助于從視覺上契合網(wǎng)站主題，將用戶帶入到設(shè)計(jì)中，提升網(wǎng)站會(huì)話率和用戶體驗(yàn)。

3. Live E-book

By Pawel Kontek

這是一個(gè)可以幫助你了解設(shè)計(jì)過程并提高工作質(zhì)量的免費(fèi)設(shè)計(jì)資源。這里匯集了經(jīng)驗(yàn)豐富的設(shè)計(jì)師，他們分享的經(jīng)驗(yàn)在經(jīng)過提煉后以電子書的形式供個(gè)人免費(fèi)使用。登錄頁面正中心是一本書，書中帶有不同序號(hào)標(biāo)記的書簽，與左右兩側(cè)的目錄內(nèi)容一一對應(yīng)。

技巧分享：

扁平化設(shè)計(jì)與極簡主義的完美結(jié)合。書簽與目錄的獨(dú)特交互為讀者的閱讀增添一絲趣味性和互動(dòng)性，模擬真實(shí)的閱讀體驗(yàn)，為閱讀和學(xué)習(xí)賦予新的含義。

4. News

By Slava Kornilov

這個(gè)設(shè)計(jì)是在現(xiàn)有的新聞網(wǎng)站的基礎(chǔ)上所做的概念設(shè)計(jì)。相比傳統(tǒng)的靜態(tài)新聞網(wǎng)站，這款概念設(shè)計(jì)的登陸頁面借助了先進(jìn)的三維立體動(dòng)畫設(shè)計(jì)，更加注重從視覺層面?zhèn)鬟_(dá)新聞?dòng)嵪?。新聞資訊的獲取方式也由原來的純文字描述轉(zhuǎn)變?yōu)閯?dòng)態(tài)視覺效果，為用戶帶來視覺和心理的雙重體驗(yàn)。

技巧分享：

高質(zhì)量的3D場景圖片切換替代了傳統(tǒng)的靜態(tài)圖片輪播，大幅圖片平鋪整個(gè)網(wǎng)頁作為設(shè)計(jì)背景，切題又美觀，也是網(wǎng)頁登陸頁面設(shè)計(jì)的一個(gè)創(chuàng)意之舉。

網(wǎng)頁設(shè)計(jì)靈感之漸變色設(shè)計(jì)

1.Traffic of Tomorrow

By Walid Beno

科技的快速發(fā)展改變了人們的生活，你是否想象過未來的交通是什么樣子？設(shè)計(jì)師Walid在他的概念設(shè)計(jì)中向我們展示了未來的智能交通，為我們呈現(xiàn)了一個(gè)智能化、自動(dòng)化的交通系統(tǒng)。

技巧分享：

網(wǎng)頁中大幅使用藍(lán)紫漸變色，結(jié)合界面中的線條設(shè)計(jì)，賦予網(wǎng)站一股神秘的未來感與科技感。

2. Travel Page Animation

By CRI$$

如果你是一名旅游愛好者，那么一定也熱衷于做各種旅游攻略，為全新的旅程做出精密的計(jì)劃。這個(gè)網(wǎng)站提供了一整套的旅游方案，包括旅程、住宿、航線、汽車租賃等，為游客提供最大的便利。

技巧分享：

這個(gè)網(wǎng)站設(shè)計(jì)的立意非常精妙，一輛行駛中的汽車穿梭在海邊。漸變色的運(yùn)用營造出一幅暖暖的黃昏景象。看了這個(gè)案例才知道，漸變色還可以這樣用。

3. Urban Planners

By ? Unfold

良好的居住環(huán)境在于精心的城市規(guī)劃。專門提供專項(xiàng)服務(wù)的公司也應(yīng)運(yùn)而生。Urban Planners是一個(gè)為房產(chǎn)居住提供規(guī)劃建設(shè)的服務(wù)商。網(wǎng)站中以不同深度的色彩展示不同的環(huán)境規(guī)劃。

技巧分享：

分層漸變設(shè)計(jì)+平面3D陰影效果，讓設(shè)計(jì)更有層次感。這樣的漸變設(shè)計(jì)，學(xué)它！

4. Momentum Landing Page

By Tyhe Reading

Momentum Wine是一款富有魅力的葡萄酒，產(chǎn)自南澳大利亞的山谷。每款葡萄酒都經(jīng)過精心設(shè)計(jì)，確保為顧客提供令人驚艷的味蕾體驗(yàn)。這個(gè)品牌融合了獨(dú)特的大理石背景和傳統(tǒng)的襯線標(biāo)志，整個(gè)產(chǎn)品包裝優(yōu)雅又有個(gè)性。

技巧分享：

藝術(shù)來源于生活。將自然界中完美的大理石漸變紋路運(yùn)用到實(shí)際生活中也是一個(gè)不錯(cuò)的創(chuàng)意

網(wǎng)頁設(shè)計(jì)靈感之插畫設(shè)計(jì)

1. Vacation House Cooking Landing Page

By Cuberto

這是一款美食網(wǎng)站，專門為用戶提供美食采購、食譜推薦。扁平化的界面設(shè)計(jì)中融入小巧可愛的插畫設(shè)計(jì)，整個(gè)網(wǎng)頁看起來干凈，清新又簡潔。粉粉的背景色滿滿的少女心，也為這個(gè)炎熱的夏天帶來一絲清涼。

技巧分享：

網(wǎng)頁中的插畫設(shè)計(jì)不一定全是大片大片的，偶爾使用一些小巧可愛的插畫反而更加分。

2.Environment Protection Community Website

by tubik

環(huán)境問題事關(guān)全人類的生存和發(fā)展，幸好我們已經(jīng)意識(shí)到這個(gè)問題的嚴(yán)重性并且正在采取措施以防止負(fù)面影響繼續(xù)擴(kuò)散。這個(gè)是Tubik團(tuán)隊(duì)為生態(tài)環(huán)境咨詢所做的網(wǎng)站設(shè)計(jì)，致力于環(huán)境保護(hù)項(xiàng)目的建立和實(shí)施。

技巧分享：

Hero image 插圖的構(gòu)圖和調(diào)色板支持情感訴求，并創(chuàng)建關(guān)于主題的即時(shí)消息。視覺層次和CTA設(shè)計(jì)的結(jié)合，為用戶提供良好的用戶體驗(yàn)，是一個(gè)不錯(cuò)的參考點(diǎn)。

3.Monsters - Landing Page

by Afterglow

這是一款游戲網(wǎng)站，整個(gè)界面設(shè)計(jì)中都運(yùn)用到小怪物插圖元素，與游戲主題相匹配。所有的插畫都結(jié)合了動(dòng)畫效果，網(wǎng)站設(shè)計(jì)是屬于活潑可愛的風(fēng)格。

技巧分享：

主頁中插畫元素占據(jù)大部分空間，活潑可愛的互動(dòng)方式讓插畫形象更加豐滿。

4.Japanese Courses Landing Page

By Cuberto

提到讀書是不是都覺得枯燥無味？這是一個(gè)充滿魔力的插畫設(shè)計(jì)。即使你此刻非常浮躁，但你來到這個(gè)頁面之后便會(huì)感到一股平靜的力量，會(huì)隨著小姐姐一起沉浸在書香氣氛中。能通過插畫傳達(dá)情感和力量給用戶的設(shè)計(jì)，一定是不能錯(cuò)過的。

技巧分享：

插畫設(shè)計(jì)應(yīng)用面很廣，且可靜可動(dòng)。選擇一個(gè)與網(wǎng)站主題相契合的立意點(diǎn)很重要。

網(wǎng)頁設(shè)計(jì)靈感之排版設(shè)計(jì)

1.IB About

By Brijan Powell

看了很多版式技巧仍排不好版？懂得很多套路仍做不好設(shè)計(jì)？沒關(guān)系，看看這個(gè)設(shè)計(jì)你能學(xué)到一點(diǎn)版式設(shè)計(jì)的小技巧。網(wǎng)站主打黑白色調(diào)，黑底白字。通過調(diào)整字體的尺寸、布局和圖標(biāo)點(diǎn)綴就完成了。你看，說簡單也簡單，對不？

技巧分享：

背景能很大程度地影響版面的設(shè)計(jì)感。而大面積的背景則需要把握好顏色搭配，盡量使用對比強(qiáng)烈的顏色。作品集或簡歷網(wǎng)站的設(shè)計(jì)中通過調(diào)整字體的大小和布局，有層次的突出重點(diǎn)。

2.Cryptocurrency Exchange website

By Omar Alfayoumi

這是一個(gè)加密貨幣兌換的網(wǎng)站，在設(shè)計(jì)上需要表現(xiàn)出穩(wěn)重大氣又專業(yè)的感覺。規(guī)則的布局、深色背景加以亮色點(diǎn)綴，使得它大氣而不沉悶。界面上沒有復(fù)雜的設(shè)計(jì)，簡潔清晰，即便是深色的背景，設(shè)計(jì)師也注意到頁面留白技巧的使用。

技巧分享：

通過留白來擴(kuò)展頁面空間，頁面的四周沒有足夠的余白空間會(huì)造成一種封閉沉悶的感覺。

3. Netflights Concept

by Ashley McMahon

喜歡旅行的你一定會(huì)時(shí)刻關(guān)注航班信息。這是一個(gè)查詢航線網(wǎng)站的概念設(shè)計(jì)。整個(gè)網(wǎng)站使用的元素非常簡潔：色塊、按鈕、選項(xiàng)卡。首頁選擇了居中構(gòu)圖的方法，疊加色塊突出重點(diǎn)。

技巧分享：

如果你讀過《寫給大家看的設(shè)計(jì)書》，那么你一定能看出來這個(gè)設(shè)計(jì)中使用到對齊原則和親密性原則：居中設(shè)計(jì)，緊密的信息單元。除此以外的留白設(shè)計(jì)也為網(wǎng)站增添幾分高級感。

不可錯(cuò)過的網(wǎng)頁設(shè)計(jì)靈感資源網(wǎng)站

1. MaterialUp：優(yōu)秀的Material Design 設(shè)計(jì)案例

2. FLTDSGN：炫酷的扁平化網(wǎng)頁和APP UI設(shè)計(jì)

3.Site Inspire：幫你獲取靈感的網(wǎng)頁設(shè)計(jì)案例

4.UI Cloud：世界上最大的UI設(shè)計(jì)數(shù)據(jù)庫

5.Land-Book：產(chǎn)品著陸頁圖庫

6.Mockplus：不僅僅是原型設(shè)計(jì)工具，更是一個(gè)豐富的設(shè)計(jì)資源庫

7.Dribbble：高品質(zhì)設(shè)計(jì)師設(shè)計(jì)案例分享社區(qū)

8.Behance: 優(yōu)秀的在線創(chuàng)意作品集

9.Flat UI Design：扁平化UI設(shè)計(jì)資源

10.Awwwards：評選最具創(chuàng)意、最創(chuàng)新也最優(yōu)秀的網(wǎng)頁設(shè)計(jì)作品

往期網(wǎng)頁設(shè)計(jì)靈感資源：

靈感專題—2019年優(yōu)秀網(wǎng)頁設(shè)計(jì)作品賞析#5月

靈感專題—2019年優(yōu)秀網(wǎng)頁設(shè)計(jì)作品賞析#4月