首頁(yè)

讓網(wǎng)頁(yè)設(shè)計(jì)有規(guī)律可循

藍(lán)藍(lán)設(shè)計(jì)的小編

隨著開(kāi)放平臺(tái)日益增多,衍生出來(lái)的各類(lèi)應(yīng)用服務(wù)也就呈不斷增長(zhǎng)的趨勢(shì)。這些應(yīng)用服務(wù)的站點(diǎn)UI設(shè)計(jì)也可謂是五彩斑斕,燦若繁星。和藍(lán)藍(lán)設(shè)計(jì)一起來(lái)找找這些網(wǎng)站設(shè)計(jì)界面設(shè)計(jì)是否有規(guī)律可循。

可以從幾個(gè)方面來(lái)分析:

色彩

Amoderneden

慈善及非營(yíng)利組織官網(wǎng)欣賞

藍(lán)藍(lán)設(shè)計(jì)的小編

有許多的慈善和非營(yíng)利組織嘗試籌集善款并設(shè)法讓大家知道他們的特殊存在。以前,他們沒(méi)有設(shè)計(jì)和開(kāi)發(fā)好網(wǎng)站的資源,不得不湊合著搭個(gè)樸素、單調(diào)、無(wú)聊的網(wǎng)站,這些網(wǎng)站自然沒(méi)法吸引新的訪(fǎng)問(wèn)者。

然而今時(shí)不同往日,UI設(shè)計(jì)者和開(kāi)發(fā)者會(huì)幫助某些組織搭建網(wǎng)站設(shè)計(jì),這些組織或慈善目的能引起他們的興趣,或讓他們聯(lián)想到自身經(jīng)驗(yàn),或他們的家人和朋友有參與的。最終就有了專(zhuān)門(mén)為這些慈善和非營(yíng)利組織搭建的漂亮網(wǎng)站界面設(shè)計(jì),且非常值得一看。和藍(lán)藍(lán)設(shè)計(jì)一起來(lái)欣賞下吧!

 

Glocal Ventures

1-glocal-ventures

精致典雅引人注目的黑色系網(wǎng)站設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)的小編

有同學(xué)喜歡玩黑白配,但是卻一直不得要領(lǐng),總設(shè)計(jì)不出讓人眼前一亮的佳作出來(lái)?今天就讓大家和藍(lán)藍(lán)設(shè)計(jì)來(lái)這些優(yōu)秀界面設(shè)計(jì)案例里找原因。

深色的背景看起來(lái)具有神秘感,能提供前景元素、背景元素的高度對(duì)比。有了黑色的鋪墊渲染,任何一個(gè)色彩都可以輕易在它之上煥發(fā)光彩。
那么怎么才能更好的在網(wǎng)頁(yè)設(shè)計(jì)中運(yùn)用深色背景呢?想要成為一名”高級(jí)黑”UI設(shè)計(jì)師嗎?先來(lái)欣賞本文的絕贊范例吧。

The Blue Cube

外觀(guān)整潔干練,對(duì)照鮮明。黑色背景凸顯了白色文本。

The Blue Cube

做好團(tuán)隊(duì)建設(shè)!展示團(tuán)隊(duì)成員的網(wǎng)頁(yè)設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)的小編

與你的客戶(hù)建立良好親密關(guān)系重要的一點(diǎn)就是展示你的團(tuán)隊(duì),是的,這樣客戶(hù)能迅速了解你的團(tuán)隊(duì)實(shí)力,合作上方便很多。
今天藍(lán)藍(lán)設(shè)計(jì)收集了一組展示團(tuán)隊(duì)成員的網(wǎng)頁(yè)布局界面設(shè)計(jì),從2——4人的小團(tuán)隊(duì)到10——20的大集體都有優(yōu)秀的范例,希望能給你帶來(lái)一點(diǎn)UI設(shè)計(jì)靈感。
Tone Agency

united kingdom tone agency design website team

超美的水彩效果網(wǎng)頁(yè)設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)的小編

小時(shí)候,一盒水彩,幾張白紙,就可以一個(gè)人安靜地待上好久。還記得綠色用得特別快,因?yàn)橄矚g用綠色,畫(huà)很多的樹(shù)葉,畫(huà)大片的草地。不過(guò)現(xiàn)在可以用電腦畫(huà),再也不用擔(dān)心缺哪個(gè)顏色啦!
以下是藍(lán)藍(lán)設(shè)計(jì)收集的一組數(shù)字水彩效果的網(wǎng)站設(shè)計(jì),每個(gè)都好漂亮,看是否能勾起你童年的美好回憶。是否對(duì)你的UI設(shè)計(jì)有所幫助!

Istok Pavlovic

watercolor-effects-1

簡(jiǎn)約時(shí)尚的電商網(wǎng)站設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)的小編

小型電子商務(wù)網(wǎng)站設(shè)計(jì)能享受這樣的:不用像很多大型連鎖商店那樣必須使用預(yù)先規(guī)定的界面設(shè)計(jì)樣式,他們不需要內(nèi)容繁多的登錄頁(yè)面,也不需要有著成百上千條分類(lèi)的大型菜單欄,甚至不需要一個(gè)建議性或可選擇的產(chǎn)品鏈接。
所有小型商店的好商品需要的是一位很棒的設(shè)計(jì)師來(lái)為它們建立一個(gè)簡(jiǎn)潔且現(xiàn)代感十足的網(wǎng)站。當(dāng)然,一枚”立即購(gòu)買(mǎi)”的按鈕會(huì)很有用。
我相信當(dāng)你看完藍(lán)藍(lán)設(shè)計(jì)這些簡(jiǎn)約時(shí)尚的電商網(wǎng)站設(shè)計(jì)后,你會(huì)對(duì)視覺(jué)營(yíng)銷(xiāo),電子商務(wù)有全新的認(rèn)識(shí)!

或者會(huì)發(fā)自肺腑的感嘆:原來(lái)這就足夠了,購(gòu)物真的不需要那么復(fù)雜。

Tatchies

39

如何避免犯哪些網(wǎng)頁(yè)設(shè)計(jì)最常見(jiàn)的可用性錯(cuò)誤

藍(lán)藍(lán)設(shè)計(jì)的小編

在過(guò)去十年中高品質(zhì)的網(wǎng)頁(yè)可用性一直是業(yè)內(nèi)討論的核心,因?yàn)樗鼘?duì)用戶(hù)來(lái)說(shuō)越來(lái)越重要。好的可用性也可以幫助建立品牌知名度,從而提升用戶(hù)對(duì)一個(gè)網(wǎng)站設(shè)計(jì)或者是一家公司的評(píng)價(jià)。今天人們依然高度關(guān)注可用性,是因?yàn)榇蟠笮⌒〉墓疽呀?jīng)證明了好的可用性策略是多么重要。

在過(guò)去幾年中,良好的可用性成為那些成功的初創(chuàng)公司的核心。多數(shù)情況下,簡(jiǎn)單的想法最具創(chuàng)造性,可用性主要是指:使一個(gè)功能或者產(chǎn)品易于使用,但同時(shí)也要保持產(chǎn)品質(zhì)量維持在高水平上。

如今,很多文章會(huì)談到普遍意義。在對(duì)該話(huà)題年復(fù)一年的討論之后,似乎UI設(shè)計(jì)者們?nèi)匀缓茈y去理解它??捎眯栽缫巡辉偈且粋€(gè)玩笑,下面藍(lán)藍(lán)設(shè)計(jì)這些建議應(yīng)當(dāng)被打印出來(lái)并粘到你桌子對(duì)面的墻上。

鏈接的顏色

我經(jīng)常發(fā)現(xiàn)自己在瀏覽網(wǎng)頁(yè)時(shí),有些頁(yè)面上的鏈接沒(méi)有以某種形式高亮顯示。這是我見(jiàn)過(guò)的最愚蠢的錯(cuò)誤。我愿意訪(fǎng)問(wèn)那些鏈接使用默認(rèn)藍(lán)色的頁(yè)面,而不是鏈接和 普通文字一個(gè)顏色的頁(yè)面。用戶(hù)需要知道如何在頁(yè)面之間導(dǎo)航、在哪兒能點(diǎn)擊鏈接。你不能指望他們把鼠標(biāo)一行行的掠過(guò)所有文字去找鏈接,直到發(fā)現(xiàn)鼠標(biāo)箭頭變成 “小手兒”。

網(wǎng)頁(yè)設(shè)計(jì)中那些不容忽視的細(xì)節(jié)

藍(lán)藍(lán)設(shè)計(jì)的小編

你有沒(méi)有經(jīng)歷過(guò)看到一個(gè)頁(yè)面的時(shí)候馬上就被它的界面設(shè)計(jì)吸引并且留下了深刻的印象呢?然后你進(jìn)一步細(xì)看這個(gè)頁(yè)面發(fā)現(xiàn)真正使這個(gè)頁(yè)面變得神奇的是一些小細(xì)節(jié),在藍(lán)藍(lán)設(shè)計(jì)這篇文章中我們將看到幾種把細(xì)節(jié)設(shè)計(jì)做到完美的頁(yè)面。

完美的像素線(xiàn)

Image Spark UI設(shè)計(jì)師用一個(gè)像素的線(xiàn)條來(lái)分割頂部導(dǎo)航,搜索輸入框,導(dǎo)航底欄。任何時(shí)候一個(gè)較淺的顏色緊挨著一個(gè)較深的顏色會(huì)使人出現(xiàn)有一個(gè)凸起的邊緣的錯(cuò)覺(jué)。請(qǐng)注意這種線(xiàn)條只能比背景色稍微淺一點(diǎn)點(diǎn)。如果使用一條白線(xiàn)那將失去這種效果。

熱門(mén)網(wǎng)頁(yè)和手機(jī)APP設(shè)計(jì)欣賞

藍(lán)藍(lán)設(shè)計(jì)的小編

一周又過(guò)去了,藍(lán)藍(lán)設(shè)計(jì)這里收錄了最近國(guó)外精彩的網(wǎng)頁(yè)設(shè)計(jì)手機(jī)App設(shè)計(jì),不多說(shuō)了,來(lái)享受這些精彩的界面設(shè)計(jì)創(chuàng)意之作吧!
 

JOBS: Le Film

atdesign_01

如何設(shè)計(jì)有范兒的個(gè)人作品時(shí)間軸網(wǎng)頁(yè)

藍(lán)藍(lán)設(shè)計(jì)的小編

藍(lán)藍(lán)設(shè)計(jì)這個(gè)教程中我們將使用Photoshop CS6設(shè)計(jì)一個(gè)簡(jiǎn)單、干凈、三列的作品集時(shí)間軸。在這個(gè)過(guò)程中,我們將著眼于自定義網(wǎng)格,排版樣式,并利用不同的顏色和對(duì)比度實(shí)現(xiàn)我們想要的美感。

同學(xué)們可以從這個(gè)教程學(xué)習(xí)如何在一個(gè)頁(yè)面平衡不同的元素,使整個(gè)界面設(shè)計(jì)富有韻律感與呼吸感??飚厴I(yè)的童鞋們可以嘗試這樣展示你的作品集喲。

上效果圖:

1p

 

日歷

鏈接

個(gè)人資料

存檔