讓頁面下海!創(chuàng)意十足的水下網(wǎng)頁設(shè)計(jì)

2014-3-12    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   sillybuy.com  )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,   請(qǐng)點(diǎn)這里

網(wǎng)頁設(shè)計(jì)中自然圖案的展示是很常見的一個(gè)手法。ui設(shè)計(jì)師通常喜歡用各種景觀照片、風(fēng)景插圖或者鄉(xiāng)村風(fēng)格的視頻來增加網(wǎng)站界面設(shè)計(jì)自身的自然度。現(xiàn)在我們把思緒聚焦在航海主題上。海洋并不缺乏強(qiáng)大的情緒,相反它能夠激發(fā)一系列積極的感受,在網(wǎng)站設(shè)計(jì)中見證這樣一個(gè)駭俗的場(chǎng)景足以讓我們感受到它戲劇性的效果,在心中刻下明顯的印記。

至于海景的功能使用,它們當(dāng)然可以各領(lǐng)風(fēng)騷。例如水下風(fēng)景可以客氣地吸引用戶通過線下滾動(dòng)的模式來探索網(wǎng)站,為他們提供視覺路徑;而普通的海洋照片可以作為非語言支持的信號(hào),或者網(wǎng)站的標(biāo)志。一切都源于一些常用的概念。

So~來看看藍(lán)藍(lán)設(shè)計(jì)這里搜集的實(shí)例吧。

Luxaqua Design

第一個(gè)網(wǎng)站就非常給力了!這是一個(gè)基于垂直滾動(dòng)的網(wǎng)站,通過滾動(dòng)鼠標(biāo)滾輪引領(lǐng)我們潛入海洋深處。每個(gè)部分又有獨(dú)立的滾動(dòng)畫面,整個(gè)設(shè)計(jì)是由照片輔助實(shí)現(xiàn)的,非常磅礴。

Luxaqua Design

Whale Translator

ui設(shè)計(jì)師利用各種奇妙的海底世界快照來支持網(wǎng)站主題,頁面干凈整潔,寧靜深遠(yuǎn)。

Whale Translator

Leidgens piscines

因?yàn)樵摼W(wǎng)站致力于銷售游泳池、按摩浴缸和桑拿,所以對(duì)于設(shè)計(jì)師使用圖片和視頻來填充網(wǎng)站沒有什么驚奇可言。固有的藍(lán)色背景非常有效地支撐起整潔優(yōu)雅的白色字體。

Leidgens piscines

Whaternet

這是一家一流的數(shù)字機(jī)構(gòu),卻非常低調(diào)地展示著自己的創(chuàng)造力。著陸頁充滿了驚人的攝影手法,不僅展示了團(tuán)隊(duì)成員,也增強(qiáng)了團(tuán)隊(duì)口號(hào)。

Whaternet

Me-had

公司通過首頁完美的照片處理給人展示了自己充滿創(chuàng)意的概念產(chǎn)品。其中的牛仔褲結(jié)構(gòu)起著重要的作用。

me-had

Siput Scuba

網(wǎng)站屬于2個(gè)潛水教練所有,生動(dòng)的圖形展示了其技能和潛力。他們邀你去深入了解海底世界,同時(shí)也了解他們。

Siput Scuba

The John Dory

這是一個(gè)不錯(cuò)的海產(chǎn)品餐廳。網(wǎng)站設(shè)計(jì)本身就說明了這一點(diǎn)。界面設(shè)計(jì)特點(diǎn)是擁有一個(gè)愉快的視頻背景和適當(dāng)?shù)臍夥铡J掷L圖形與博客風(fēng)格的布局給網(wǎng)站帶來了恰到好處的外觀。

The John Dory

Media Whale

這是另一個(gè)典型的示例。該網(wǎng)站通過全幅面的插圖風(fēng)格呼應(yīng)了網(wǎng)站的主題。

Media Whale

In Charted Waters

伴隨一張神奇的、古老的航海插圖,網(wǎng)站整體給出了一個(gè)冒險(xiǎn)的氛圍。

In Charted Waters

LoveHideaway

據(jù)稱是一個(gè)交友網(wǎng)站,通過有趣的異國(guó)風(fēng)情達(dá)到吸引用戶交友的目的。看起來似乎很棒,不過我點(diǎn)擊鏈接時(shí)居然直接跳到百度首頁,桑不起。。。要不你點(diǎn)擊試一試?

LoveHideaway

Innomedio

擁有整潔的結(jié)構(gòu),通過平靜的海面背景喚起莊重的感覺。

Innomedio

NH Bunkering

網(wǎng)站通過視覺故事指導(dǎo)你走完一些部分。這個(gè)主題并不是偶然出現(xiàn)在此處的,因?yàn)楣颈旧硎菑氖潞Q蠛秃恿鱾}儲(chǔ)的業(yè)務(wù)的,背景看起來很合適該公司。

NH Bunkering

Raindrop Race

該網(wǎng)站給游客提供了一個(gè)小游戲,目的是宣傳安格魯人家里的改進(jìn)。右邊的圖片則是展示在推廣產(chǎn)品的過程中未來可能發(fā)生的事情。

Raindrop Race

Michelle Lana

這是一個(gè)十分有才華和創(chuàng)造力的插畫家。通過該網(wǎng)站我們可以見證她的技巧。毫不猶豫地,她讓我們沉浸在她的插圖世界里。

Michelle Lana

Appdock

航海主題也用來強(qiáng)調(diào)網(wǎng)站本身的標(biāo)志。干凈而光滑的海景圖很好地匹配了網(wǎng)站本身的語境。同時(shí)也很好地說明了在各種各樣的商品中如何找到必要的應(yīng)用。

Appdock

Econyl

運(yùn)用數(shù)字和事實(shí)讓游客在深入了解網(wǎng)站之前首先熟悉一個(gè)大概。冷靜而微妙的水下背景為這一目的帶來良好的效果。

Econyl

Defend Seashepherd

該公司致力于海洋和海洋活動(dòng)。首頁的視頻背景很好地展示了這一點(diǎn)。

Defend Seashepherd

Evaco Group

這是一家專門銷售海域附近房產(chǎn)的房地產(chǎn)公司。壯觀的海景絕對(duì)是為了激發(fā)客戶趕緊行動(dòng)的!

Evaco Group

結(jié)語

雖然水下插圖和航海主題通常用于一些特定的網(wǎng)站項(xiàng)目中(特別是與海洋相關(guān)的主題活動(dòng)),但是有一些例子還是蠻值得參考借鑒的。領(lǐng)會(huì)其中真正的意義,它們的好處已經(jīng)和活動(dòng)本身無關(guān)。

日歷

鏈接

個(gè)人資料

存檔