很多網(wǎng)站仍然在使用老舊的頁面設(shè)計(jì),比如國內(nèi)一些企業(yè)官網(wǎng),萬年不變的相類似的模板,外國的則是hero頁面,帶CTA按鈕,三欄式的布局。這些設(shè)計(jì)不能說是不好的設(shè)計(jì),很實(shí)用,用戶能夠預(yù)測(cè)展示的內(nèi)容,也容易找到需要的內(nèi)容。但是正因?yàn)榭深A(yù)測(cè),用戶沒有新鮮感,沒有期待,所以我們找了一些不僅打破常規(guī),也依然有良好用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)。
1. Heco Partners
網(wǎng)址:http://helloheco.com/
布局設(shè)計(jì):流動(dòng)的動(dòng)態(tài)線條加滾動(dòng)指示箭頭,滾動(dòng)頁面后展示一段介紹,然后進(jìn)入交錯(cuò)的兩欄項(xiàng)目展示布局。
Heco Partners首頁的流動(dòng)線條波浪吸引您進(jìn)入他們的網(wǎng)站
當(dāng)我們?cè)L問這家位于芝加哥的設(shè)計(jì)公司官網(wǎng)時(shí),您會(huì)看到“We turn information into experiences that people care about”這段文字展示在波浪之上。該網(wǎng)站展示了如何將設(shè)計(jì)案例與背景信息相結(jié)合。
2. The Goonies
網(wǎng)址:http://the-goonies.webflow.io/
布局:頭部采用全屏圖像,滾動(dòng)頁面后進(jìn)入一系列網(wǎng)格布局的頁面
約瑟夫·貝里(Joseph Berry)決定將他最喜歡的電影之一(1980年代的經(jīng)典電影《The Goonies》)轉(zhuǎn)變?yōu)樾麄黠L(fēng)格的網(wǎng)站。The Goonies獲得了Awwwards的“年度最佳提名獎(jiǎng)和網(wǎng)站獎(jiǎng)”,這是用滾動(dòng)的方式講故事的一個(gè)很好的例子。
3. Nelu Cebotari’s portfolio
網(wǎng)址:http://nelucebotari.com/
布局:變化后的三欄設(shè)計(jì),可轉(zhuǎn)換為滾動(dòng)顯示的導(dǎo)航菜單
設(shè)計(jì)作品集不僅為您提供了展示所從事的項(xiàng)目,而且還可以通過頁面本身展示您的設(shè)計(jì)技能。設(shè)計(jì)師Nelu Cebotari就是這樣設(shè)計(jì)自己的個(gè)人網(wǎng)站。
網(wǎng)站使用的黃色背景可能會(huì)有點(diǎn)刺眼,但他為背景添加了柔和的背景紋理,變得不那么刺眼。
該網(wǎng)站設(shè)計(jì)的獨(dú)特部分是導(dǎo)航的設(shè)計(jì)。將鼠標(biāo)懸停在每個(gè)按鈕上都可以看到一個(gè)從底部向上滑動(dòng)的盒子。這些方塊中的每個(gè)方塊都有一些文字,提示您了解更多或保持聯(lián)系。
4. Soul Jazz Records
網(wǎng)址:https://soundsoftheuniverse.com/
布局:基于網(wǎng)格設(shè)計(jì)的實(shí)體唱片存儲(chǔ)體驗(yàn)的復(fù)制品。
進(jìn)入這個(gè)網(wǎng)站,仿佛進(jìn)入了一家實(shí)體唱片店,在這里,你可以找到晦澀的放克,爵士樂和朋克音樂,聽到可能不會(huì)引起太多關(guān)注的音樂。
他們的網(wǎng)站很好地代表了他們發(fā)布的許多流派。網(wǎng)站還有很多關(guān)于藝術(shù)家以及聲音樣本的背景信息,更全面的了解他們的聲音。
5. San Francisco Museum of Modern Art
網(wǎng)址:https://www.sfmoma.org/
布局:全屏背景圖片,帶有指示性的基本鏈接。
博物館里的藝術(shù)激發(fā)和吸引著我們的想象力。他們的網(wǎng)站應(yīng)該做同樣的事情。不過大多數(shù)博物館網(wǎng)站在炫耀特色作品,宣傳當(dāng)前展覽以及提供重要的游客信息(例如營業(yè)時(shí)間和票務(wù)信息),而SFMOMA在展示這些信息方面做得更好,而且還有不一樣的體驗(yàn)。
6. R2D3
網(wǎng)址:http://www.r2d3.us/visual-intro-to-machine-learning-part-1/
布局:兩列Z模式,帶有大量動(dòng)畫圖。
網(wǎng)站是一種可以教學(xué)的工具,R2D3利用網(wǎng)站來圖解機(jī)器學(xué)習(xí)。
R2D3通過“機(jī)器學(xué)習(xí)的可視化介紹”來科普。通過一系列動(dòng)畫,他們能夠以相對(duì)簡(jiǎn)單的方式傳達(dá)這個(gè)復(fù)雜的概念。引人入勝的體驗(yàn)學(xué)習(xí)知識(shí)比盯著教科書中的單詞和數(shù)字更有趣。
R2D3使用引人注目的動(dòng)畫向我們展示了機(jī)器學(xué)習(xí)的工作原理
7. Lauren Wickware’s portfolio
網(wǎng)址:http://laurenwickware.com/
布局:全面屏頭部頁面切換到分屏顯示設(shè)計(jì)項(xiàng)目。
這是籍設(shè)計(jì)師Lauren Wickware's的個(gè)人作品網(wǎng)站。多維滾動(dòng)創(chuàng)造出令人驚奇的平滑和引人入勝的體驗(yàn)。
8. Poulos Collective
網(wǎng)址:https://www.poulos.co/
布局:磚石風(fēng)格的布局,帶有不同的卡片模塊,隨著滾動(dòng)而逐漸消失。
Poulos Collective是一家專門從事UX設(shè)計(jì)和策略的設(shè)計(jì)咨詢公司。它的站點(diǎn)提供了干凈簡(jiǎn)單且最重要的功能體驗(yàn)。該網(wǎng)站的簡(jiǎn)單性是由Stefan Poulos創(chuàng)建的。顏色令人愉悅,文本易于閱讀,并且輕巧的外觀和感覺使加載速度極快,從而提供了出色的用戶體驗(yàn)。
尋找靈感并進(jìn)一步推動(dòng)自己的設(shè)計(jì)
作為設(shè)計(jì)師,我們知道客戶經(jīng)常只需要經(jīng)過實(shí)踐檢驗(yàn)的真實(shí)解決方案。而且,我們可以輕松滿足他們的要求。完全按照客戶的想法設(shè)計(jì)沒有問題,但是設(shè)計(jì)中還有很大的空間可以嘗試不同的東西。通過采用非傳統(tǒng)的方法,我們可以提出令人難忘的網(wǎng)站設(shè)計(jì),并且不會(huì)在統(tǒng)一的海洋中迷失方向。
原文地址:https://webflow.com/blog/unique-website-layouts
全站高品質(zhì)素材免費(fèi)下載!