2017設計潮流指南

每到新的一年,Milothemes都會在設計上掌握到新的東西,這在2016年也不例外。經歷過上年設計潮流指南的成功,Milothemes決定在2017年作了一些設計上的預測,現在向大家分享!

設計潮流受到媒體、科技、時尚工業,和最近著重的實用性影響著。一個潮流多數是緩慢地出,最終進入所有的設計分支,再以完全相同的方式消失。基本上一個設計潮流的生命週期是不會多於一至兩年的。2017年的設計潮流將會承接著2016年,同時增加一些新的影響,感覺不但為人熟悉的,甚至可能已經在過去幾年看到過。然而,最主要的影響媒介仍然是Google的Material Design,只是受到了一些變化。

 

1.半平面設計 

(Semi Flat Design)

在過去幾年中,平面設計主宰了網頁設計的市場,但現在受到Material Design的影響,它變得越來越立體了。 這種轉變由一些光陰影開始,使其成為半平面設計。平面設計的演化從極簡主義開始,配合了新的開發技術。它仍然在,但已經經歷了一些改進。

平滑着色 (Smooth Shading)不但不會破壞平面設計的感覺,還替其增加了深度和復雜性。 這是平面設計潮流的一個新特徵,並將在2017年繼續進化。

7d63fc47810259.58863d0b561d1

040dca47810259.58863d0b56719.jpg

3e284b47810259.58863d0b56c69.jpg

———-
Project: Listener’s Playlist
Author: Anzi .

2.動態照片 

(Cinemagraphs)

動態照片不是我們平時在網絡上看到的gifs。它仍然是一張有少量移動元素的圖像。這種融入生活的技術使一張簡單的照片變得更真實。

4d3e4747810259.58863b7e71968.gif

18794247810259.58863b7eb3b06.gif47672847810259.58863b7ed2435.gifbbe79847810259.58863b7f87970.gif

3.更立體 

(More 3D)

3D立體絕對是帶領著我們的設計,而我們將會在所有的設計領域中看到它的影響力。隨著VR / AR革命的迅速發展,這一領域也同時在快速進化。

5d494647810259.588640a7b29f2.png

———-
Project: LUV.IT
Author:  AARON MARTINEZ
82025e47810259.588640a7b2f9d.jpg
———-
Author: TAVO
b85fb147810259.588640a7b34d6.jpg
———–
add4b447810259.588640a7b3a94.jpg
———-
Author: TAVO
c7d92f47810259.588640a7b40a4.jpg

4.動畫 

(Animations)

動畫越來越多在網頁設計中出現,他們可以是gifs、SVG、WebGL CSS或影片。同時,動畫絕對是去年網頁設計潮流中最引人注目的其中之一,所以請不要猶豫應否在設計中使用。

447acb47810259.588728b440d3e.gif

———-
2aa19847810259.588728b53d695.gif

———-
Author: 曲 植Daz_Qu
a8a02b47810259.588728b5850f2.gif
———
Author: Minh Pham
4b4fca47810259.588728b5c5842.gif
———

5.登陸頁面 

(Landing Pages)

在2017年,由於營銷目標和其更好地對準訪客的潛在能力,登陸頁面將會不斷地增加。

 

6.幾何形狀,規律圖案,線條和圓形 

(Geometric Shapes, Patterns, Lines and Circles)

這種潮流始於2016年,而且一定會在2017年繼續。您可以通過添加一些富現代感的形狀去為你的網站進行個性化設定,這些形狀無論是平面還是軟陰影也沒有問題。

08caec47810259.58872c8d377f0.png

———-
7c4b2447810259.5887401521c27.png
———
96af3647810259.588784c7af077.jpg

7.大膽色彩 

(Courageous Colors)

使用色彩艶麗的顏色去發表一項聲明。Material design和平面設計能與色彩艶麗的顏色完美地配合。您可以使用Google提供的調色板來選擇和配對所需的顏色。

f5060a47810259.58872cce25b70.jpgdec90547810259.58874431ea37d.jpg

———
———
4ff29e47810259.58872c8d387f3.jpg
———-
Project: b2mach

 

8.創新的滾動和視覺差效果

(Innovative Scrolling and Parallax)

這個視覺的想法是非常好的,它可以為任何網站添加一個獨特的元素。從多層視覺差到影片視覺差,將這個想法都是可行的。

介紹一下D.ex Multilayer Parallax,它是由Milothemes在Loredana Papp和Mihai Baldean領導下開發的產品,可以在Envato Market / codecanyon.net上購買。

cae44847810259.588ee159eda69.gif

D.ex Multilayer Parallax是一個WordPress插件,允許您創建超過一個圖層,而且十分漂亮的視覺差。透過自身的創意,你可以隨心所欲組合想要的圖層風格。以下的不同例子將指導你向多層視覺差世界邁出第一步。

4b4b1f47810259.588ee15a84023.gif

———
Project: F — mdls
Author: Adencys

9.顏色轉換

(Color Transitions)

顏色轉換是目前最大的潮流之一。從2016年開始迅速發展,連Instagram這樣的大牌也決定將他們的標誌和圖像從平面顏色改為顏色轉換。無論從標誌、按鈕或圖片疊加,這個潮流基本上是無處不在的。

863e6747810259.588784c7b129a.jpg

 

10.手機瀏覽 – 回應式網頁設計

(Mobile Browsing – Responsive Design)

2015年和2016年為手機瀏覽帶來了相當大的增長。平板電腦和智能手機現在更是超越了坐枱式電腦,成為用家瀏覽網站的首選。當然,這一個潮流將會持續下去,而任何還沒有回應式網頁設計的網站都需要盡快升級!

e8f2a947810259.588a1ff409751.gif

——-

 

> 相關文章: 2017圖像設計潮流

11.自訂圖形和插圖

(Custom Graphics and Illustrations)

美工圖案仍然很受歡迎,但在2016年有一個新增並大幅增長的潮流,而且在2017年將繼續上升,它就是自訂圖形和插圖。如果您想要一個獨特的網站,令任何訪客都會記住你,請聯絡一個數位設計師。這樣你就會有更少的美工圖案和更多原始、獨特的圖像。

14bceb47810259.5888c42ba61a0.jpg

————————–
Check out the artist: Margarita Mar
8f03a147810259.5888cad59db5b.jpg

12.創意運用自然空間和表格

(Creative Use of Neutral Space and Grid)

在過去幾年中,網頁設計已經習慣了用欄目和表格,但我們在2016年看到了一個明顯的轉變,就是不規則的圖層和超現代的設計。

96824147810259.588e3c999a847.jpg

 

13.說故事

(Storytelling)

網站現在開始以說故事的形式來說服客戶留在頁面,而人們亦傾向記得更多在故事中提到的資訊,多於閱讀簡單的信息。

 

14.延遲載入

(Lazy Loading)

延遲圖片載入延遲了長網頁中圖像的加載,基本上它允許資訊出現在它最需要出現的位置上,讓人先看到頁面的信息。

03ec3347810259.588a1ff409dc7.png

 

15.拆分內容

(Split Content)

分離內容在回應式網頁設計中變得流行,它將屏幕分成兩部分或更多部分。分了屏的網站將在一個頁面上向觀眾顯示幾個同樣重要的消息。這個潮流自2015年年底以來一直上升,但在2017年將會再進一步增長,並很可能會在更多的網站上遇到。

e9935947810259.588784c7b1a4d.jpg

 

16.全屏表格

(Full-Screen Forms)

由於新網站配備了適用於回應式設計的全屏表格,因此無需再到另一個頁面再填寫表格。

1aaafd47810259.5888cad59e385.jpg

 

17.影片無處不在

(Videos Everywhere)

影片內容在去年有所增加,人們正在要求以高質量的影片講述故事。在網站上顯示的影片可以縮短並循環播放、展示一個產品或大型的電影項目,從而令觀眾對故事更感興趣。

5cee3847810259.589099962c3e4.gif

———-
Project: Hillsong
Author: Ruslan Siiz

 

18.搜尋引擎最佳化非常重要

(SEO is Important)

搜索引擎的優化對一個網站是非常重要,即使是一個漂亮的網站,假如沒有一個很好的SEO,也是會被遺忘的。

8f100c47810259.5888cad59eaee.jpg

 

19.隱藏導航

(Hidden Navigation)

製作漢堡包的菜單引起了許多贊成和反對的爭論-「尋找菜單是相當困難」,但就裡有一樣可以確定,就是這種潮流是會繼續存在,而人們最終也會習慣它們。

5a0a0347810259.588a1ff40a2da.jpg

 

20.細小的設計細節

(Tiny Design Details)

細節的關注在今年是非常重要的。從小的細節,如導航點至網頁角落的標誌,專注於小細節就可以完成工作。

6df40147810259.58874431eabb2.jpg

———-

21.標誌設計潮流

(Logo Design Trends)

21.1 極簡主義 (Minimalist)

由於所有的大品牌都轉向了一個更簡單,最小的設計,而這種潮流亦會繼續。

1d7cc447810259.588a3a4a49703.jpg

——————
See the artist: Konstantin Zhenchur

 

21.2 手繪 (Hand drawn)

這是一個幾年來一直處於關注焦點的一個潮流,非常適合「時尚」的業務,而這種風格還用於咖啡餐廳行業、理髮店或手工藝品。

eb9ed847810259.5887ac93eb346.jpg

—————————-
Check out the artists: Sam Healy

21.3 負空間 (Negative space)

這是一個古老的潮流,但在過去幾年中我們看到它再次出現,而僅在2017年才會增長,所以絕對值得我們關注。cf544647810259.58874cacb9768.jpg

21.4 裁剪 (Cropping)

這個潮流是極為簡約,顯示到能夠知道這一個標誌是什麼就足夠,而且也沒有更多的意思。

2a021847810259.5887a39094d5e.jpg

—————————-
Check out the artists: Aleksandr Maksimov

21.5 幾何 (Geometric)

這個潮流肯定是老派,但它只是其中一種永遠不會死的風格。

db505847810259.588881a358f8f.jpg

—————————-
Check out the artists: Mingo Ideas Up

 

21.6 線條藝術 (Line art)

這種潮流在新興和現代企業中頗受歡迎。

62345247810259.58873c6f12159.jpg

—————————————
You can check up the artists : Sam HealyAndrea SchlafferJacek Janiczak

21.7 規律 (Pattern)

規律是一種新潮流,這種重複是使企業脫穎而出的獨特方式。這個原始的潮流也可以在標誌設計中表現出來。64805447810259.588888127bbcb.jpg

—————————-

21.8 動畫標誌 (Animated logos)

動作設計今年是一個巨大的潮流,我們可以在所有設計領域中找到它。

e82d7147810259.588890f00ad84.gif

05ef8b47810259.588890f01fc1d.giff50e0f47810259.5888c42bbe650.gif

—————————-
Check out the artists: Javier Miranda NietoThe Woork Co

21.9 復古 (Vintage)

復古風格仍然存在。即使這種潮流已經存在了一段時間,但仍然還有其存在的意義。

f65ec447810259.5887a390953ad.jpg

—————————-

 

21.10 顏色轉換 (Color Transitions)

今年的顏色轉換無處不在,即使在標誌中也是如此。

f705a347810259.5887875e4eadb.jpg

—————————-
Check out the artists: Mingo Ideas Up

21.11 標誌插圖 (Illustrations in logos)

插圖是給企業一個獨特和個性化標誌的好方法,而他們在今年也越來越受歡迎。

ce088247810259.58875b99532b3.jpg

—————————————
You can check out the artists: Bodea DanielJacek Janiczak

21.12 影像標誌 (Photography in logos)

圖像與排版的混合現在真的很熱門。它們形成了對比,配合得非常好。

03b4e547810259.5887875e4f21f.jpg

22.排版潮流

(Typography Trends)

22.1 巨型,大膽和色彩艶麗的排版 (Big, bold & beautiful typography)

排版可能是創造杰出設計中最重要的部分。今年的排版將會大膽,使用色彩艶麗的顏色去發表一項聲明。

f0f86547810259.58888b7e84188.jpg

685b6847810259.5888c42bbee0b.jpg

—————————
Check out the artist: Alexander Laguta

35a6b247810259.5888c42bbf598.png

————————–
Check out the artist: Quim Marin

9327eb47810259.589b169f0d835.jpg

———
Author: Vasjen Katro

22.2 排版中的顏色轉換 (Color transitions in typography)

顏色轉換絕對是現在的「IT」潮流,你也會在排版中找到它。

c1776147810259.58888b7e8489a.png

—————————-
Check out the artists: The Woork Co

22.3 視覺階層 (Visual hierarchy)

排版階層在所有設計領域都是非常重要的。字體的大小和重量可以很容易地指出哪些單詞或字母是最重要的,所以在創建文字時要記住這一點。此外,通過文字的位置和顏色,更可以實現非常壯觀的視覺層次。

80d84547810259.588890f0202ff.jpg

22.4 微小的字體 (Tiny Typography)

超小字體通常被負空間包圍,但是您可以創建顏色或圖像之間的對比,使其更加容易可見。您還可以使用動畫來幫助它脫穎而出。

6b2be247810259.588888127c416.jpg

 

92892647810259.588888127cb4b.jpg

1da44147810259.588888127d283.jpg

—————————-
Check out the artists: Slava OleinikBahaa SamirWitty Digital

42487d47810259.589b169f0ced8.png

———
Author: Vasjen Katro

22.5 動畫排版 (Animated Typography)

動畫甚至在排版中都是無處不在的。如果你使用柔軟的動作,那你今年便不會出錯。

6a436c47810259.5888c5a2758fe.gif
———-
Project: Gotham Pro Animated Typeface Free

22.6 排版遇上攝影 (Typography meets photography)

文字和攝影之間的組合可以實現很好的外觀。以下是一些杰出的例子。

edb08847810259.5888c42bbfc61.jpg

d44ce447810259.5888c42bc0329.png

————————–
Check out the artist: Quim Marin

22.7 幾何形狀和排版 (Geometric shapes and typography)

幾何形狀也可以與排版結合,實現富現代感的效果。

1c693847810259.5888c42bc0a15.jpg

f5050347810259.5888c42bc10e0.jpg

—————————
Check out the artist: Quim Marin
9ae8a247810259.5888c42bc1886.jpg
—————————
Check out the artist: ∆ Studio—JQ ∆


22.8 字體配對 (Font pairing)

今年使用兩種或更多字體在一起仍然是潮流。查看下面的例子有甚麼有趣的配對,將會幫助到你的項目。

a8e77147810259.58888b7e84e4d.jpg

原文出處: Behance

 

 

 

 

 

發表迴響