靈感專題｜2019年優秀網頁設計做品賞析#9月

這個夏天，那個塌鼻子、齊劉海、煙燻妝的醜萌哪吒完全火了。背後是導演及創做團隊歷時5年的籌備。俗話說厚積薄發，沒有平時的積累，哪來的現象級做品問世。網頁設計也是如此，沒有設計師們平時對設計素材和靈感的積累，哪來的優秀做品呢？

今天摹客團隊又爲你們整理了一批優秀的網頁設計做品，供你們欣賞、學習，爲打造下一個爆款做品積累靈感：

• 登陸頁設計
• 漸變色設計
• 插畫設計
• 排版設計

網頁設計靈感之登錄頁設計

1. Landing page. Above the fold - Charity

By Outcrowd

這個網頁是爲慈善機構而設計的，旨在向人們宣傳慈善，提升社會意識，鼓勵人們經過慈善的方式來幫助兒童、面臨水資源危機的羣體及其餘須要幫助的羣體。

技巧分享：

它的登錄頁面採用了插畫與動畫相結合的設計，流暢的動畫，鮮豔的配色，使整個網站設計看起來很是精美。創意的七巧板設計使網站主題與文字變化無縫銜接。

2. Landing Page - TeamKids

By Outcrowd

TeamKids也是由outcrowd團隊設計的一個針對兒童託管的網站，爲孩子們的課餘時間提供娛樂和學習，豐富校外生活。網站登錄頁面設計充滿童真童趣，鮮豔亮麗的色彩搭配，動畫元素設計的活潑可愛。

技巧分享:

登錄頁面做爲整個網站的門戶，插圖和動畫的利用有助於從視覺上契合網站主題，將用戶帶入到設計中，提高網站會話率和用戶體驗。

3. Live E-book

By Pawel Kontek

這是一個能夠幫助你瞭解設計過程並提升工做質量的免費設計資源。這裏聚集了經驗豐富的設計師，他們分享的經驗在通過提煉後以電子書的形式供我的無償使用。登陸頁面正中心是一本書，書中帶有不一樣序號標記的書籤，與左右兩側的目錄內容一一對應。

技巧分享：

扁平化設計與極簡主義的完美結合。書籤與目錄的獨特交互爲讀者的閱讀增添一絲趣味性和互動性，模擬真實的閱讀體驗，爲閱讀和學習賦予新的含義。

4. News

By Slava Kornilov

這個設計是在現有的新聞網站的基礎上所作的概念設計。相比傳統的靜態新聞網站，這款概念設計的登錄頁面藉助了先進的三維立體動畫設計，更加註重從視覺層面傳達新聞訊息。新聞資訊的獲取方式也由原來的純文字描述轉變爲動態視覺效果，爲用戶帶來視覺和心理的雙重體驗。

技巧分享：

高質量的3D場景圖片切換替代了傳統的靜態圖片輪播，大幅圖片平鋪整個網頁做爲設計背景，切題又美觀，也是網頁登錄頁面設計的一個創意之舉。

網頁設計靈感之漸變色設計

1.Traffic of Tomorrow

By Walid Beno

科技的快速發展改變了人們的生活，你是否想象過將來的交通是什麼樣子？設計師Walid在他的概念設計中向咱們展現了將來的智能交通，爲咱們呈現了一個智能化、自動化的交通系統。

技巧分享：

網頁中大幅使用藍紫漸變色，結合界面中的線條設計，賦予網站一股神祕的將來感與科技感。

2. Travel Page Animation

By CRI$$

若是你是一名旅遊愛好者，那麼必定也熱衷於作各類旅遊攻略，爲全新的旅程作出精密的計劃。這個網站提供了一整套的旅遊方案，包括旅程、住宿、航線、汽車租賃等，爲遊客提供最大的便利。

技巧分享：

這個網站設計的立意很是精妙，一輛行駛中的汽車穿梭在海邊。漸變色的運用營造出一幅暖暖的黃昏景象。看了這個案例才知道，漸變色還能夠這樣用。

3. Urban Planners

By ◒ Unfold

良好的居住環境在於精心的城市規劃。專門提供專項服務的公司也應運而生。Urban Planners是一個爲房產居住提供規劃建設的服務商。網站中以不一樣深度的色彩展現不一樣的環境規劃。

技巧分享：

分層漸變設計+平面3D陰影效果，讓設計更有層次感。這樣的漸變設計，學它！

4. Momentum Landing Page

By Tyhe Reading

Momentum Wine是一款富有魅力的葡萄酒，產自南澳大利亞的山谷。每款葡萄酒都通過精心設計，確保爲顧客提供使人驚豔的味蕾體驗。這個品牌融合了獨特的大理石背景和傳統的襯線標誌，整個產品包裝優雅又有個性。

技巧分享：

藝術來源於生活。將天然界中完美的大理石漸變紋路運用到實際生活中也是一個不錯的創意

網頁設計靈感之插畫設計

1. Vacation House Cooking Landing Page

By Cuberto

這是一款美食網站，專門爲用戶提供美食採購、食譜推薦。扁平化的界面設計中融入小巧可愛的插畫設計，整個網頁看起來乾淨，清新又簡潔。粉粉的背景色滿滿的少女心，也爲這個炎熱的夏天帶來一絲清涼。

技巧分享：

網頁中的插畫設計不必定全是大片大片的，偶爾使用一些小巧可愛的插畫反而更加分。

2.Environment Protection Community Website

by tubik

環境問題事關全人類的生存和發展，幸虧咱們已經意識到這個問題的嚴重性而且正在採起措施以防止負面影響繼續擴散。這個是Tubik團隊爲生態環境諮詢所作的網站設計，致力於環境保護項目的創建和實施。

技巧分享：

Hero image 插圖的構圖和調色板支持情感訴求，並建立關於主題的即時消息。視覺層次和CTA設計的結合，爲用戶提供良好的用戶體驗，是一個不錯的參考點。

3.Monsters - Landing Page

by Afterglow

這是一款遊戲網站，整個界面設計中都運用到小怪物插圖元素，與遊戲主題相匹配。全部的插畫都結合了動畫效果，網站設計是屬於活潑可愛的風格。

技巧分享：

主頁中插畫元素佔據大部分空間，活潑可愛的互動方式讓插畫形象更加豐滿。

4.Japanese Courses Landing Page

By Cuberto

提到讀書是否是都以爲枯燥無味？這是一個充滿魔力的插畫設計。即便你此刻很是浮躁，但你來到這個頁面以後便會感到一股平靜的力量，會隨着小姐姐一塊兒沉浸在書香氣氛中。能經過插畫傳達情感和力量給用戶的設計，必定是不能錯過的。

技巧分享：

插畫設計應用面很廣，且可靜可動。選擇一個與網站主題相契合的立意點很重要。

網頁設計靈感之排版設計

1.IB About

By Brijan Powell

看了不少版式技巧仍排很差版？懂得不少套路仍作很差設計？不要緊，看看這個設計你能學到一點版式設計的小技巧。網站主打黑白色調，黑底白字。經過調整字體的尺寸、佈局和圖標點綴就完成了。你看，說簡單也簡單，對不？

技巧分享：

背景能很大程度地影響版面的設計感。而大面積的背景則須要把握好顏色搭配，儘可能使用對比強烈的顏色。做品集或簡歷網站的設計中經過調整字體的大小和佈局，有層次的突出重點。

2.Cryptocurrency Exchange website

By Omar Alfayoumi

這是一個加密貨幣兌換的網站，在設計上須要表現出穩重大氣又專業的感受。規則的佈局、深色背景加以亮色點綴，使得它大氣而不沉悶。界面上沒有複雜的設計，簡潔清晰，即使是深色的背景，設計師也注意到頁面留白技巧的使用。

技巧分享：

經過留白來擴展頁面空間，頁面的四周沒有足夠的餘白空間會形成一種封閉沉悶的感受。

3. Netflights Concept

by Ashley McMahon

喜歡旅行的你必定會時刻關注航班信息。這是一個查詢航線網站的概念設計。整個網站使用的元素很是簡潔：色塊、按鈕、選項卡。首頁選擇了居中構圖的方法，疊加色塊突出重點。

技巧分享：

若是你讀過《寫給你們看的設計書》，那麼你必定能看出來這個設計中使用到對齊原則和親密性原則：居中設計，緊密的信息單元。除此之外的留白設計也爲網站增添幾分高級感。

不可錯過的網頁設計靈感資源網站

1. MaterialUp：優秀的Material Design 設計案例

2. FLTDSGN：炫酷的扁平化網頁和APP UI設計

3.Site Inspire：幫你獲取靈感的網頁設計案例

4.UI Cloud：世界上最大的UI設計數據庫

5.Land-Book：產品着陸頁圖庫

6.Mockplus：不只僅是原型設計工具，更是一個豐富的設計資源庫

7.Dribbble：高品質設計師設計案例分享社區

8.Behance: 優秀的在線創意做品集

9.Flat UI Design：扁平化UI設計資源

10.Awwwards：評選最具創意、最創新也最優秀的網頁設計做品

往期網頁設計靈感資源：

靈感專題—2019年優秀網頁設計做品賞析#5月

靈感專題—2019年優秀網頁設計做品賞析#4月