SAY討論區

標題: 引領設計趨勢!最新潮的24個獲獎網頁作品欣賞 - 網站設計及開發 [打印本頁]

作者: ptlo    時間: 2014-3-20 16:24:07     標題: 引領設計趨勢!最新潮的24個獲獎網頁作品欣賞 - 網站設計及開發

當下的設計趨勢已經徹底改變了過去幾年對於網頁設計的概念,而且至少在接下來的這一年裡會發展得如火如荼。我們已經接觸到了垂直滾動、扁平化設計、復古的配色、極簡的配色,以及幻燈動畫展示,當然,響應式設計才是最頭等的趨勢。  最近我們看到了透明的幻燈展示以及長投影設計,在本文的案例中,我們將會看到這些趨勢帶來了巨大的影響,它們顛覆了以往的擬物設計成為新一輪的潮流。隨着移動設備的擴大使用,設計師的責任愈加重大,如何把創意注入到新的設計趨勢中是一個關鍵點。
 
DANIEL J DIGGLE

CSS 設計獎, 2013年1月5日
這個組合包含了當下的很多設計趨勢,而且無縫地展示了出來。它擁有一個網格布局的着陸頁,當你點擊鏈接的時候會跳轉到相應的內容塊。頁面非常的乾淨。
180751fvvky5m1wqt.jpg
PAPER TIGER AGENCY

獲獎於2013年1月1日
網站首頁的文字是兩行式排版。紅色部分是變化着的。第一行是由白色靜態的」Paper Tiger」和粉色的字體組成,粉色的字體會翻轉變化,字體包括」Develops/Consults/Designs」。第二行的靜態白色字體是」for the」,動態紅色字體是」Brand Message/Business Goal/User Experience」。所以整個句子包含了很多組合。背景是一個黑膠唱片播放動畫形象,這是一個經過深思熟慮而設計成的網站首頁,配色方案採取了黑色、白色和紅色,經典。
180751bs0i4cybxnr.jpg
MICHEAL NGO

獲獎於2013年12月31日
這是一個單頁的垂直滾動設計網站。着陸頁上的設計師眨動着自己的眼鏡。當你把頁面往下滾動時,會看見一組黑白網格布局的內容,頁面的底部是設計師站立的雙腳。這個網站給人的信息就是設計師舉起自己的單頁網站!非常有價值。
180751shfeoieixb2.jpg
ALEE FOROUGHI

Css設計獎,2013年12月26日
這個網站有一個非常漂亮的垂直滾動效果。中間還有一個基於三角形的網格布局。整個網站非常的簡約、大方和美觀。
180751xwqawdbbli0.jpg
ETEC MINDS

Css設計獎。2013年12月12日
網站的着陸頁是Etec Minds的辦公室工作動畫場景。主頁有一個不錯的垂直滾動效果,以及一些很愉快地扁平設計。它不是一個響應式的網站,但是針對移動端它有專門的移動版本。
180751nx325h1quwl.jpg
FIXATE

Css設計獎,2013年12月9日
該網站的主頁非常有亮點!所有元素都按照線畫稿的形式來,但是居然一點也不亂,反而非常美觀。
180751u2an0wrbnjr.jpg
Departement Creatif

獲獎於2013年12月8日
無限滾動的、響應式網站。扁平化設計。網格布局。一個字:酷!
180751jujhwfkw14d.jpg
ANTRO

獲獎於2013年11月27日
該網站的着陸頁有一個幾何形狀飄飛的動畫。往下滾動時你會發現一切元素的設計都顯得小巧精緻。扁平化設計。接下來有4個幻燈片,如果你點擊箭頭,幻燈片就會自動擴展到頁面大小,當你繼續往下滾動頁面就會自動變回原始的大小。這是一個非常美麗而富有創造性的網站。
1807510ikkzp42jkz.jpg
ELEGANT SEAGULLS

獲獎於2013年11月20日
另一個滾動式網站。響應式、扁平化設計。儘管滾動的過程中不見得很平滑自然,但是也不乏精彩。
180751zjk40rsapjx.jpg
TEAMGEEK

獲獎於2013年11月16日
Teamgeek展示了目前所有的設計趨勢:垂直滾動、扁平化設計、復古配色、極簡主義設計、基於網格的布局。但它不是響應式網站,不過針對移動端有另外的版本。
1807515g00y3ysdoi.jpg
STEREO CREATIVE

獲獎於2013年10月13日
滾動式網站簡直要爆棚了,又來一個~扁平化設計,復古的配色,幻燈的展示。和上面那個一樣,不是響應式網站,不過針對移動端有另外的版本。
180751xiekcxkrshz.jpg
TRIA

獲獎於2013年10月12日
打開此頁面你必須仔細把握好自己鼠標位置=。=當你看到一個女孩在吹口香糖泡泡的時候千萬不要慌亂=。=鼠標移到頁面四周時頁面女孩自然就不見了,映入你眼帘的是文字鏈接。在泡泡之下點開它們你就會進入新的世界!這個頁面非常富有創意,毫不猶豫拿下大獎。
180752yhwcscbnqx2.jpg
CINNAMON TOAST

獲獎於2013年9月21日
這個網站的着陸頁有一段工作狂們的視頻剪輯。這是一個視差滾動站點,往下滾動的過程中頭部的視頻是一直都存在在那裡的。這個設計讓讓你耳目一新。而且,網站是全響應的。
180752yzuljw5zo0l.jpg
MIAGUI

獲獎於2013年9月12日
又一個囊括了眾多設計趨勢的站點。例如垂直滾動、網格布局、扁平化設計等。但是比較可惜的是該網站只有pc端沒有移動端版本,只能在電腦上或者平板電腦上觀看。
1807531feozhtsx2q.jpg
ABBEY PUTINSKI

獲獎於2013年9月7日
擦!好有創意的網站!簡直是一個冒險的嘗試!打開首頁關掉通知欄后呈現在我們眼前的是一張地圖。扁平化、半透明的設計。鼠標這個時候已經變成一隻手了,直接拖動頁面地圖就跟着延伸!我不確定這張地圖的範圍有多大,或許是一座城市?或許是這個地球?無論如何,它是響應式的。
180753scoo0sdeypm.jpg
THE BIG BAD WOLF

獲獎於2013年9月7日
Oh!網格,網格,網格!該網站沒別的,就是網格布局特別多。搭上黑白的色彩搭配顯得非常吸引人。
180753ldwknkwvgfc.jpg
MOVING THINGS DESIGN

獲獎於2013年8月31日
這個網站不為別的,就為了展示當下設計趨勢而來的——扁平化設計、垂直滾動、充分響應、基於網格的布局、大量的純色……難道還需要加入其它元素?這個網站非常值得拿下大獎。
180753o30kikq0hy0.jpg
AGENCE XY

獲獎於2013年8月19日
不得不承認,這個站點就像是在表演魔術一樣…點開每個連接,過渡形式非常的漂亮!而且,這個網站也是響應式的。
180753bm0t0gkarjd.jpg
NIQUE WOODHOUSE

獲獎於2013年7月29日
該站點的導航方式非常不一般。直接拖動頁面可以水平和垂直變換頁面。右上角有一個小小的導航告訴你你所在的頁面。可能一開始你無法適應這麼高端的設計,不過實在是太完美了。
1807531qa2xgrai3c.jpg
LUCAS NIKITCZUK

獲獎於2013年7月28日
設計師個人視差滾動網站。隨着頁面的往下滾動,圓圈裡面展示設計師個人的項目。採用扁平化設計,充分響應。
180753vr2fezxcaqh.jpg
THE SECRET HANDSHAKE

獲獎於2013年7月21日
該網站基於網格布局,扁平化設計和大字體設計。充分響應。
180753vcg252zm10h.jpg
ADAM RUDZKI

獲獎於2013年6月7日
嗯,又是一個包含設計趨勢相當多的網站:垂直滾動,扁平化設計,巨大的色塊,基於網格的布局。但不是響應式的。
180753kwlzzcbpqw0.jpg
總結
  其實我們已經看到這些趨勢在過去的幾年裡已經流行了一段時間,有一些是新興的,可能會經不起時間的考驗。隨着響應式設計和扁平化設計的普及,事實上很多創造力已經無法注入到網站設計需求中了。從上面的例子中我們就可以發現響應式設計被忽視了,取而代之的是必須展示的內容。但是大多數網站依然會另外出一個移動版本。
  總的來說,如果你想讓響應式得以發揮,那麼一些很好的創意可能就會半途而廢。
你覺得扁平化設計和響應式設計會隨着時間的沉澱留下來嗎?為了強調這兩種設計你有什麼辦法?或許透明設計和長投影會是一個趨勢呢!在評論框中留下你對網頁設計趨勢的看法吧!
 
 
原文鏈接:引領設計趨勢!最新潮的24組獲獎網頁作品欣賞

編譯來源:夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源
本文來自【夢想天空(http://www.cnblogs.com/lhb25/)】

附件: [180751fvvky5m1wqt.jpg] 180751fvvky5m1wqt.jpg (2014-3-20 16:24:07, 0 Bytes) / 下載次數 1
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NTMzMDA5fDE1OTA4NWM3fDE3ODI3MTA5NzF8MHww

附件: [180751bs0i4cybxnr.jpg] 180751bs0i4cybxnr.jpg (2014-3-20 16:24:07, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NTMzMDEwfDM2N2FiNjU3fDE3ODI3MTA5NzF8MHww

附件: [180751shfeoieixb2.jpg] 180751shfeoieixb2.jpg (2014-3-20 16:24:07, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NTMzMDExfDY3YzJlOWQ3fDE3ODI3MTA5NzF8MHww

附件: [180751xwqawdbbli0.jpg] 180751xwqawdbbli0.jpg (2014-3-20 16:24:07, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NTMzMDEyfDAxNjQ2MWI0fDE3ODI3MTA5NzF8MHww

附件: [180751nx325h1quwl.jpg] 180751nx325h1quwl.jpg (2014-3-20 16:24:07, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NTMzMDE0fDA2NmIwM2MwfDE3ODI3MTA5NzF8MHww

附件: [180751u2an0wrbnjr.jpg] 180751u2an0wrbnjr.jpg (2014-3-20 16:24:07, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NTMzMDE3fDJjMzcxZGE2fDE3ODI3MTA5NzF8MHww

附件: [180751jujhwfkw14d.jpg] 180751jujhwfkw14d.jpg (2014-3-20 16:24:07, 0 Bytes) / 下載次數 1
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NTMzMDE5fGMzOTRlODk4fDE3ODI3MTA5NzF8MHww

附件: [1807510ikkzp42jkz.jpg] 1807510ikkzp42jkz.jpg (2014-3-20 16:24:07, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NTMzMDIyfDkxZjI4MjBifDE3ODI3MTA5NzF8MHww

附件: [180751zjk40rsapjx.jpg] 180751zjk40rsapjx.jpg (2014-3-20 16:24:07, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NTMzMDI1fDEyYWIyNGM3fDE3ODI3MTA5NzF8MHww

附件: [1807515g00y3ysdoi.jpg] 1807515g00y3ysdoi.jpg (2014-3-20 16:24:07, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NTMzMDI4fGM1YWIwMDFjfDE3ODI3MTA5NzF8MHww

附件: [180751xiekcxkrshz.jpg] 180751xiekcxkrshz.jpg (2014-3-20 16:24:07, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NTMzMDI5fDkyNDkyYThmfDE3ODI3MTA5NzF8MHww

附件: [180752yhwcscbnqx2.jpg] 180752yhwcscbnqx2.jpg (2014-3-20 16:24:07, 0 Bytes) / 下載次數 1
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NTMzMDMwfDI3MjUzNTk1fDE3ODI3MTA5NzF8MHww

附件: [180752yzuljw5zo0l.jpg] 180752yzuljw5zo0l.jpg (2014-3-20 16:24:07, 0 Bytes) / 下載次數 1
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NTMzMDMxfDE2YWNhZTI5fDE3ODI3MTA5NzF8MHww

附件: [1807531feozhtsx2q.jpg] 1807531feozhtsx2q.jpg (2014-3-20 16:24:07, 0 Bytes) / 下載次數 1
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NTMzMDMyfGE2NTM0Y2ZlfDE3ODI3MTA5NzF8MHww

附件: [180753scoo0sdeypm.jpg] 180753scoo0sdeypm.jpg (2014-3-20 16:24:07, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NTMzMDMzfDVjOTQ0NWM5fDE3ODI3MTA5NzF8MHww

附件: [180753ldwknkwvgfc.jpg] 180753ldwknkwvgfc.jpg (2014-3-20 16:24:07, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NTMzMDM0fDM4NDI1MjY5fDE3ODI3MTA5NzF8MHww

附件: [180753o30kikq0hy0.jpg] 180753o30kikq0hy0.jpg (2014-3-20 16:24:07, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NTMzMDM1fGM2NzE0OWRjfDE3ODI3MTA5NzF8MHww

附件: [180753bm0t0gkarjd.jpg] 180753bm0t0gkarjd.jpg (2014-3-20 16:24:07, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NTMzMDM2fGNmMGY2ODU5fDE3ODI3MTA5NzF8MHww

附件: [1807531qa2xgrai3c.jpg] 1807531qa2xgrai3c.jpg (2014-3-20 16:24:07, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NTMzMDM3fDIwNjc3OGZmfDE3ODI3MTA5NzF8MHww

附件: [180753vr2fezxcaqh.jpg] 180753vr2fezxcaqh.jpg (2014-3-20 16:24:07, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NTMzMDM4fGFjNGQ2NTYzfDE3ODI3MTA5NzF8MHww

附件: [180753vcg252zm10h.jpg] 180753vcg252zm10h.jpg (2014-3-20 16:24:07, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NTMzMDM5fDcxYWU0NjNmfDE3ODI3MTA5NzF8MHww

附件: [180753kwlzzcbpqw0.jpg] 180753kwlzzcbpqw0.jpg (2014-3-20 16:24:07, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NTMzMDQwfGE2MGM0M2VhfDE3ODI3MTA5NzF8MHww
作者: 切雞飯`    時間: 2014-3-20 19:59:08

回復一下
作者: 豪鬼AKUMA    時間: 2014-3-21 03:47:28

我等你喲
作者: freegold    時間: 2014-3-21 06:07:53

暈死也不多加點分
作者: tomato_alex    時間: 2014-3-21 08:40:50

今天沒事來逛逛,看了一下,感覺相當的不錯。
作者: 小妖怪    時間: 2014-3-22 05:33:59

這貼子你會收藏嗎
作者: juny0385    時間: 2014-3-22 20:45:53

尼伊達是各好論壇,以後天天來
作者: 太陽穴    時間: 2014-3-22 20:48:56

天啊,這帖子不錯,竟然沒有人回
作者: DiorCherie    時間: 2014-3-23 15:19:26

貌似看過了
作者: stk190    時間: 2014-3-24 05:12:38

初來乍到,請多多關照。




歡迎光臨 SAY討論區 (http://forum.go2tutor.com/) Powered by Discuz! X2