2015,你能期待的十大網頁設計趨勢

2015年開始,還在煩惱要如何在網頁設計上大顯身手嗎?「十大網頁設計趨勢」,快來瞧瞧吧!

1.更多的捲動頁面

Screen Shot 2014 12 17 at 3.32.16 PM 520x289 10 Web design trends you can expect to see in 2015

隨著行動裝置愈來愈熱門,現在新的網頁設計趨向讓頁面「變長」。將所有資訊放在單一頁面,能讓低頭族「用手一滑」便能取得資訊,相較於點擊一堆連結跳轉,並不斷重新等待新的頁面載入的形式更容易瀏覽。例如iPhone 6 或Google launchpadtoys等產品的呈現,就十分符合此趨勢,並且增添精緻的動畫元素,抓住使用者捲動時的注意力。

 

2.運用敘事互動

Screen Shot 2014 12 17 at 3.36.20 PM 520x289 10 Web design trends you can expect to see in 2015

網站中重要關鍵--有著「令人驚喜的內容」!若能在網站上增添「故事」和「互動」必能讓網站的內容更具獨特性和吸引力。例如Space Needle 生動敘說了背景故事,並且在網頁中設計許多互動與動畫交互運用。若你試著體驗Impossible Bureau,保證邊滑邊讚嘆:「Wow!這真是太炫太驚奇了!」

Screen Shot 2014 12 17 at 3.40.32 PM 520x289 10 Web design trends you can expect to see in 2015

 

3.大圖塊當道

幾年前打開網站時,首先看見的是許多網頁以大型圖片為背景再搭配文字的設計。如何與眾不同?

最近有些新網站選擇只留下單純的色塊與文字,不僅畫面突出,也有助於改善網頁的載入速度。而網站The New Wave即是在這嶄新設計中的一項參考。

Screen Shot 2014 12 17 at 3.41.15 PM 520x288 10 Web design trends you can expect to see in 2015

 

4.簡潔,簡潔,再簡潔

Screen Shot 2014 12 17 at 3.41.56 PM 520x289 10 Web design trends you can expect to see in 2015

在設計上有人說:「當所有非必要元素被清除後,設計才算大功告成。」

西元2015,可以看見更多網站實踐這樣的說法,移除不必要的設計元素,讓設計更簡潔。其中包括上一點的The New Wave,而另一個很棒的例子是 Rareview Digital Agemcy。兩個網站都將過於複雜的版型、過度的設計、過多的影像和色彩移除,反過來利用簡潔來顯得獨特。

 

5.固定寬度,版型置中

過去網頁在"Banding"和寬度上多設定為100%,瀏覽者在瀏覽過程中,區塊和影像可隨著瀏覽器放大縮小而改變。

早於這趨勢流行前,大部分的網站則以固定的寬度和內容置中。而固定板型的趨勢似乎又在最近「復古」了!有些網站選擇使用「最大寬度」確保內容置中。在Michele Mazzucco中,當你將瀏覽器縮小時,將看到主要內容在中間,放大時兩邊會有些留白。試試看吧!

Screen Shot 2014 12 17 at 3.42.34 PM 520x289 10 Web design trends you can expect to see in 2015

 

6.高質感的客製化圖庫

Screen Shot 2014 12 17 at 3.43.10 PM 520x289 10 Web design trends you can expect to see in 2015在設計中因為時間、金錢等考量,現成的圖庫仍在設計上不可或缺。但最近一些新興網站選擇多點花費,請人為網站的圖庫客製化,不僅提升設計上質感與獨特性,也避免與其他網站在設計上使用相同的圖影。例如點擊進Grain and Mother的網站,圖片是創辦人和員工坐在餐桌前正在討論著什麼,若你在點進About頁面,你將會更驚豔於圖片中的設計,這美妙的辦公空間都是來自於工作時的真實拍攝。

about

 

7.手機式選單植入桌電

Screen Shot 2014 12 17 at 3.43.53 PM 520x288 10 Web design trends you can expect to see in 2015目前的網站大多較重視電腦版本,而電腦版本在手機、平板等行動裝置還無法完美呈現。

隨著響應式設計(Responsive Web Design)興起,無論在任何裝置都能有最佳的瀏覽體驗,故許多設計將在行動裝置設計的元素,移植入桌電中。例如 24 Ways 與 Rawnet皆在桌電中使用APP一般的響應式選單。有別於傳統水平選單,而是像手機中點擊後出現的直立選單(flyout/slideout menu )。

Screen Shot 2014 12 17 at 3.44.26 PM 520x289 10 Web design trends you can expect to see in 2015

 

8.消失的主選單

Screen Shot 2014 12 17 at 3.45.01 PM 520x289 10 Web design trends you can expect to see in 2015

如上述的網站和 Brian Hoff Design,在網頁中將主選單藏了起來,當點擊網頁中某個圖示時,才會將選單開啟,這樣的設計也幫助頁面保持簡潔同時也不失功能性。這樣手機特性的設計也漸漸使用在網站設計中,可能成為2015的趨勢。

 

9.超大的字型

09

一進入Tiny Giant首先進入眼簾的"We Are Tiny Giant",這巨大的字型委實不容忽略。2015年,巨大的字型將是要在一個簡潔的網站中,能立即讓訪客注意到最關鍵資訊的方法。如Tiny Giant這樣的方式的確在簡潔中達到令人驚豔的效果吧?

 

10.瀏覽網頁時維持畫面表現與速度

以上九點網頁設計趨勢,大多要讓網站載入得更快且耗費更少的頻寬,讓行動裝置或網路較慢的使用者也都能有極佳的瀏覽體驗。

在行動裝置使用愈來愈頻繁下,在畫面表現和速度上也愈來愈重要。

在2015年設計一個兼顧功能、質感和效能於一身的超棒網站吧!

 

參考網站:10 Web design trends you can expect to see in 2015