8個頁麵布局獨特的網站設計賞析

作者:佚名 來源:webflow 時間:2019-09-25 標簽: 網站設計 頁麵布局

很多網站仍然在使用老舊的頁麵設計,比如國內一些企業官網,萬年不變的相類似的模板,外國的則是hero頁麵,帶CTA按鈕,三欄式的布局。這些設計不能說是不好的設計,很實用,用戶能夠預測展示的內容,也容易找到需要的內容。但是正因為可預測,用戶沒有新鮮感,沒有期待,所以我們找了一些不僅打破常規,也依然有良好用戶體驗的網頁設計。

 

1. Heco Partners

網址:http://helloheco.com/

布局設計:流動的動態線條加滾動指示箭頭,滾動頁麵後展示一段介紹,然後進入交錯的兩欄項目展示布局。

Heco Partners首頁的流動線條波浪吸引您進入他們的網站

 

當我們訪問這家位於芝加哥的設計公司官網時,您會看到“We turn information into experiences that people care about”這段文字展示在波浪之上。該網站展示了如何將設計案例與背景信息相結合。

 

2. The Goonies

網址:http://the-goonies.webflow.io/

布局:頭部采用全屏圖像,滾動頁麵後進入一係列網格布局的頁麵

約瑟夫·貝裏(Joseph Berry)決定將他最喜歡的電影之一(1980年代的經典電影《The Goonies》)轉變為宣傳風格的網站。The Goonies獲得了Awwwards的“年度最佳提名獎和網站獎”,這是用滾動的方式講故事的一個很好的例子。

 

3. Nelu Cebotari’s portfolio

網址:http://nelucebotari.com/

布局:變化後的三欄設計,可轉換為滾動顯示的導航菜單

設計作品集不僅為您提供了展示所從事的項目,而且還可以通過頁麵本身展示您的設計技能。設計師Nelu Cebotari就是這樣設計自己的個人網站。

網站使用的黃色背景可能會有點刺眼,但他為背景添加了柔和的背景紋理,變得不那麼刺眼。

該網站設計的獨特部分是導航的設計。將鼠標懸停在每個按鈕上都可以看到一個從底部向上滑動的盒子。這些方塊中的每個方塊都有一些文字,提示您了解更多或保持聯係。

 

4. Soul Jazz Records

網址:https://soundsoftheuniverse.com/

布局:基於網格設計的實體唱片存儲體驗的複製品。

進入這個網站,仿佛進入了一家實體唱片店,在這裏,你可以找到晦澀的放克,爵士樂和朋克音樂,聽到可能不會引起太多關注的音樂。

他們的網站很好地代表了他們發布的許多流派。網站還有很多關於藝術家以及聲音樣本的背景信息,更全麵的了解他們的聲音。

 

5. San Francisco Museum of Modern Art

網址:https://www.sfmoma.org/

布局:全屏背景圖片,帶有指示性的基本鏈接。

 

博物館裏的藝術激發和吸引著我們的想象力。他們的網站應該做同樣的事情。不過大多數博物館網站在炫耀特色作品,宣傳當前展覽以及提供重要的遊客信息(例如營業時間和票務信息),而SFMOMA在展示這些信息方麵做得更好,而且還有不一樣的體驗。

 

6. R2D3

網址:http://www.r2d3.us/visual-intro-to-machine-learning-part-1/

布局:兩列Z模式,帶有大量動畫圖。

 

網站是一種可以教學的工具,R2D3利用網站來圖解機器學習。

R2D3通過“機器學習的可視化介紹”來科普。通過一係列動畫,他們能夠以相對簡單的方式傳達這個複雜的概念。引人入勝的體驗學習知識比盯著教科書中的單詞和數字更有趣。 

 

R2D3使用引人注目的動畫向我們展示了機器學習的工作原理

 

7. Lauren Wickware’s portfolio

網址:http://laurenwickware.com/

布局:全麵屏頭部頁麵切換到分屏顯示設計項目。

 

這是籍設計師Lauren Wickware's的個人作品網站。多維滾動創造出令人驚奇的平滑和引人入勝的體驗。

 

8. Poulos Collective

網址:https://www.poulos.co/

布局:磚石風格的布局,帶有不同的卡片模塊,隨著滾動而逐漸消失。

 

 

Poulos Collective是一家專門從事UX設計和策略的設計谘詢公司。它的站點提供了幹淨簡單且最重要的功能體驗。該網站的簡單性是由Stefan Poulos創建的。顏色令人愉悅,文本易於閱讀,並且輕巧的外觀和感覺使加載速度極快,從而提供了出色的用戶體驗。

 

尋找靈感並進一步推動自己的設計

作為設計師,我們知道客戶經常隻需要經過實踐檢驗的真實解決方案。而且,我們可以輕鬆滿足他們的要求。完全按照客戶的想法設計沒有問題,但是設計中還有很大的空間可以嚐試不同的東西。通過采用非傳統的方法,我們可以提出令人難忘的網站設計,並且不會在統一的海洋中迷失方向。

 

原文地址:https://webflow.com/blog/unique-website-layoutswebdesign

推薦設計

最新文章