9個(gè)參考網(wǎng)站，讓你的網(wǎng)頁設(shè)計(jì)不再千篇一律【設(shè)計(jì)資源38】

原創(chuàng) 贊12 收藏66 評論

舉報(bào) 2016-03-28

掃描,分享朋友圈

9個(gè)網(wǎng)站可供參考，讓你的網(wǎng)頁設(shè)計(jì)不再千篇一律【設(shè)計(jì)師資源38】

對于網(wǎng)頁設(shè)計(jì)來說，現(xiàn)在可能已經(jīng)陷入了一種趨同化的尷尬境地，這主要?dú)w咎于以下幾個(gè)原因：1、有限的布局創(chuàng)意；2、響應(yīng)式網(wǎng)頁設(shè)計(jì)；3、網(wǎng)頁設(shè)計(jì)框架；4、原型工具和設(shè)計(jì)流程抑制創(chuàng)造力；5、高清免費(fèi)圖片；6、設(shè)計(jì)趨勢；7、設(shè)計(jì)師自身。總而言之，許多所謂的簡化工具和設(shè)計(jì)規(guī)范在方便設(shè)計(jì)師工作的同時(shí)也設(shè)定了更多的條條框框。

想要改變這樣的現(xiàn)狀，可以參考下面這些網(wǎng)站：

1、Curious Space

網(wǎng)站地址：http://www.curiousspace.com/

Curious Space里的網(wǎng)格有些天然隨性的感覺，操作這個(gè)網(wǎng)站時(shí)，你會(huì)注意到許多不錯(cuò)的小設(shè)計(jì)細(xì)節(jié)。例如，鼠標(biāo)懸停會(huì)影響圖片的層疊順序。而且，滾動(dòng)時(shí)還有點(diǎn)小趣味，但至少不會(huì)打亂操作，也與網(wǎng)站隨性的視覺主題相吻合。logo開始是一堆混亂的字母，隨著頁面滾動(dòng)，它們各自歸位，在導(dǎo)航條中組成了“Curious Space”。

Curious Space

2、Le Temps D’un Trajet

網(wǎng)站地址：http://letempsduntrajet.com/

Le Temps d’un trajet也是一個(gè)有趣的例子。我們在此又看到了非標(biāo)準(zhǔn)的網(wǎng)格，但它的布局不是零星分散的，而是刻意聚集而成。排列中的每個(gè)方塊都是一張靜止圖片，鼠標(biāo)懸停則變成一則短視頻。但是最酷的地方，是網(wǎng)格隨著焦點(diǎn)流暢地變化。

Le Temps D’un Trajet

3、Built By Buffalo

網(wǎng)站地址：http://builtbybuffalo.com/

Built By Buffalo用了六邊形的布局。這種圖片集的設(shè)計(jì)對于移動(dòng)端不太友好，所以他們索性在某個(gè)斷點(diǎn)處變成了矩形。這個(gè)例子完美詮釋了在適當(dāng)時(shí)機(jī)做出獨(dú)特的設(shè)計(jì)，同時(shí)了解何處是界限，應(yīng)該收斂一點(diǎn)，給用戶提供最佳體驗(yàn)。

Built By Buffalo

4、Anakin Design Studio

網(wǎng)站地址：http://www.anakin.co/en

Anakin Design Studio不僅布局漂亮、出乎意料，它用到的形狀都遠(yuǎn)遠(yuǎn)超出你的預(yù)期。如你所見，巨大、遮罩式的文字讓人印象深刻。但除此之外，隨著頁面往下滾動(dòng)，還能看到他們最近的作品。許多設(shè)計(jì)師都會(huì)在這里放幾排簡單的矩形縮略圖完事，但Anakin則在形狀上玩了花樣，使它更加吸引人。它們?nèi)允蔷匦螆D片，卻用白色背景營造出了多種形狀的錯(cuò)覺。

Anakin Design Studio

5、Mathilde Jacon

網(wǎng)站地址：http://www.mathildejacon.com/

Mathilde Jacon將所有頁面融合在一個(gè)類似飛鏢盤的設(shè)計(jì)里，隨著鼠標(biāo)移動(dòng)，滑塊經(jīng)過的區(qū)域顏色會(huì)加深，而其他區(qū)域則變淡，點(diǎn)擊即進(jìn)入詳情頁面。

Mathilde Jacon

6、For Better Coffee

網(wǎng)站地址：http://forbetter.coffee/

For Better Coffee結(jié)合了插畫與天然元素，密密麻麻的布局創(chuàng)造出了強(qiáng)烈、令人印象深刻的體驗(yàn)。隨著頁面滾動(dòng)，跟隨咖啡豆親歷整個(gè)咖啡制作過程。體驗(yàn)非常流暢，頁面也不會(huì)固定到特定位置，滾動(dòng)變成了講述故事的一項(xiàng)特色。

For Better Coffee

7、HappyFunCorp

網(wǎng)站地址：http://happyfuncorp.com/#home

HappyFunCorp是一個(gè)典型的插畫型網(wǎng)站，起初它看起來就像是個(gè)帶有動(dòng)畫的普通網(wǎng)站，當(dāng)你開始操作，主頁的場景是其他所有頁面的基礎(chǔ)，當(dāng)你點(diǎn)擊鏈接，不會(huì)加載一個(gè)全新頁面，而是放大查看場景中的某處細(xì)節(jié)。

HappyFunCorp

8、Vasilis van Gemert

網(wǎng)站地址：https://vasilis.nl/

Vasilis van Gemert不僅使用了獨(dú)特的層疊式方塊布局，它也會(huì)為每個(gè)訪客呈現(xiàn)不同的配色。這個(gè)極具創(chuàng)意的特征，也延伸到了所有子頁面中。

Vasilis van Gemert

9、dConstruct 2015

網(wǎng)站地址：http://2015.dconstruct.org/

dConstruct 2015營造出了復(fù)古未來的氛圍。網(wǎng)頁字體通過簡單的CSS傾斜來改變方向，斜線貫穿運(yùn)用于整個(gè)網(wǎng)站，有助于設(shè)計(jì)的統(tǒng)一性與創(chuàng)意。這個(gè)網(wǎng)站完美詮釋了響應(yīng)式設(shè)計(jì)也未必就無聊。布局給人感覺并非四四方方或典型布局，但它仍然做到了各種尺寸適配良好。

dConstruct 2015

本文系作者授權(quán)數(shù)英發(fā)表，內(nèi)容為作者獨(dú)立觀點(diǎn)，不代表數(shù)英立場。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。