首頁

國外杰出的創(chuàng)意網(wǎng)站精選

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

做事容易,做大事難。網(wǎng)頁設(shè)計(jì)容易,但是出類拔萃難。左上角放Logo,Logo下方放導(dǎo)航,導(dǎo)航下方放置圖片滑動欄,滑動欄下方來個三欄或者四欄布局,好吧,大多數(shù)的網(wǎng)站都是這樣,除了圖像、配色、字體不一樣,布局方面非常相似或者相近,表現(xiàn)不出UI設(shè)計(jì)創(chuàng)意。

是不是很久木有這樣的驚訝了:”原來網(wǎng)站還可以這樣做?”

如果你想來點(diǎn)新鮮的體驗(yàn),圍觀一些與眾不同的網(wǎng)站界面設(shè)計(jì),那么請看藍(lán)藍(lán)設(shè)計(jì)這里,這里是本周的一些創(chuàng)意網(wǎng)站設(shè)計(jì)精選。一定不會讓你失望:)請耐心欣賞完每個網(wǎng)站,并且在頁面里多按動鼠標(biāo)體驗(yàn)一下喲。

更多創(chuàng)意網(wǎng)站設(shè)計(jì)欣賞:http://sillybuy.com/

1. Know The Sign

Know The Sign

網(wǎng)頁設(shè)計(jì)的七條基本準(zhǔn)則

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

新時代的網(wǎng)頁設(shè)計(jì)充滿了各種新技術(shù)、各種新的jQuery腳本、各種響應(yīng)式網(wǎng)頁設(shè)計(jì)——但我們依然不能忽略最基本的網(wǎng)頁設(shè)計(jì)基礎(chǔ)。

新時代的網(wǎng)頁設(shè)計(jì)以響應(yīng)式理論為藍(lán)本,力圖在不同設(shè)備上呈現(xiàn)一致的網(wǎng)頁瀏覽體驗(yàn)。
而響應(yīng)式時代依然不便的設(shè)計(jì)基本準(zhǔn)則又是什么呢?一起來看看l藍(lán)藍(lán)設(shè)計(jì)下面的七條,望諸君UI設(shè)計(jì)時銘記于心。

1.優(yōu)秀的網(wǎng)頁設(shè)計(jì)應(yīng)該簡約,并且完整

UI設(shè)計(jì)大師往往都是哲學(xué)家,他們往往保持一種包容的界面設(shè)計(jì)態(tài)度,不會采用極端的設(shè)計(jì)方式,他們的設(shè)計(jì)往往是一種平衡之美。

我們可以畫出一個橫軸,左邊是簡約、右邊是完整,而最好的設(shè)計(jì)會聰明的選取中值(如下圖)

網(wǎng)頁設(shè)計(jì)必須簡約,任何無用的特質(zhì)都必須移除;與此同時,網(wǎng)頁設(shè)計(jì)必須能夠滿足用戶需求。

簡潔網(wǎng)頁設(shè)計(jì)你需知的6點(diǎn)技巧

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

潔凈和一塵不染之間是不能劃等號的。去掉了多余內(nèi)容的界面設(shè)計(jì)看起來外形美觀,一目了然,讓人心曠神怡,尤其是對網(wǎng)頁設(shè)計(jì)領(lǐng)域更甚。UI設(shè)計(jì)師在網(wǎng)站設(shè)計(jì)過程中,時常會遇到過度設(shè)計(jì)的例子。保持審美需求和實(shí)際需求之間的平衡,對整潔,干凈和條理清晰的網(wǎng)站來說很重要。在激烈的行業(yè)競爭中,網(wǎng)頁設(shè)計(jì)師想要獲得成功,先決條件之一就是要掌握簡潔的網(wǎng)站設(shè)計(jì)基礎(chǔ)。在網(wǎng)站設(shè)計(jì)中,并沒有保密規(guī)定,但相關(guān)的從業(yè)人員仍需堅(jiān)持一些基本原則:用外觀專業(yè),整潔的網(wǎng)站設(shè)計(jì)來打動用戶。那么藍(lán)藍(lán)設(shè)計(jì)就分享一下簡潔網(wǎng)頁設(shè)計(jì)你需知的6點(diǎn)技巧

一組排版超酷的網(wǎng)頁設(shè)計(jì)

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

網(wǎng)頁設(shè)計(jì)平面設(shè)計(jì)之間存在差異性,但越來越多的網(wǎng)頁設(shè)計(jì)師們在嘗試著縮減這之間的差異性,希望通過一定的方式來銜接起網(wǎng)頁與平面之間的距離。

就像藍(lán)藍(lán)設(shè)計(jì)今天推薦給您的這些超贊網(wǎng)頁界面設(shè)計(jì)案例,他們將平面的版式帶進(jìn)了網(wǎng)頁中,一起來欣賞汲取UI設(shè)計(jì)靈感吧:)

更多精美網(wǎng)頁設(shè)計(jì)http://sillybuy.com/

Hello Innovation

Hello Innovation

如何設(shè)計(jì)才能讓網(wǎng)站風(fēng)格協(xié)調(diào)一致

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

網(wǎng)頁設(shè)計(jì)的要點(diǎn)之一便是一致性,UI設(shè)計(jì)師首先需要了解一致性,然后再致力于構(gòu)建頁面元素之間的聯(lián)系。
網(wǎng)頁設(shè)計(jì)的目標(biāo)是將網(wǎng)頁和用戶連結(jié),通過設(shè)計(jì)(順手的導(dǎo)航、流暢的交互)讓用戶對網(wǎng)站產(chǎn)生信任。盡管網(wǎng)頁界面設(shè)計(jì)以功能性為主,但依然可以為用戶提供優(yōu)良的用戶體驗(yàn)。

客戶,用戶以及一致性:

具備一致性特質(zhì)的網(wǎng)頁能夠幫助推廣品牌、清晰傳遞信息??蛻粼谝獾氖窃O(shè)計(jì)能否有效傳達(dá)他們的品牌、信息,在意設(shè)計(jì)是否能夠在消費(fèi)者中建立一種對品牌的信任感。
如果品牌信息傳遞的不夠一致、或者晦澀難懂,那么消費(fèi)者很難對品牌產(chǎn)生信任感,這就影響到了客戶的銷售額和業(yè)績。

一致性與設(shè)計(jì)師個人推廣:

作為設(shè)計(jì)師,你自己就是一個品牌,你需要仔細(xì)思量一下該要如何打造一致性的”個人品牌”。如果你的個人博客設(shè)計(jì)的風(fēng)格一致,分量充足,案例豐富,那么客戶很容易就找上門來。

設(shè)計(jì)響應(yīng)式網(wǎng)站的十個熱門框架

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

設(shè)計(jì)一個響應(yīng)式網(wǎng)站設(shè)計(jì)時,運(yùn)用到的計(jì)算是費(fèi)時費(fèi)力的,不過還好,國外有一系列的響應(yīng)式框架模板可以使界面設(shè)計(jì)過程變得更便捷。這些框架或模板都有現(xiàn)成的柵格,布局和媒介,然后你可以盡情填充自己的設(shè)計(jì)理念。藍(lán)藍(lán)設(shè)計(jì)這篇文章匯總了國外UI設(shè)計(jì)師所推崇的大量熱門框架模板,收藏之前,先來瞧瞧吧:)

 

Bootstrap

Bootstrap

提高網(wǎng)站可用性的經(jīng)驗(yàn)指南

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

我想每個人都會贊成,網(wǎng)站的可用性是它能否受歡迎的一個重要方面,無論你進(jìn)行的是公司網(wǎng)站、在線商店還是其他,讓你的界面變得容易操控,使用時令人舒服是關(guān)鍵,近幾年已經(jīng)有很多針對網(wǎng)站界面優(yōu)化的研究,而且這些研究的成果對于提高網(wǎng)站可用性是非常有價(jià)值的?,F(xiàn)在藍(lán)藍(lán)設(shè)計(jì)這里有10個超實(shí)用的經(jīng)驗(yàn)分享,相信我,這些建議會極大地提高你那個網(wǎng)站的用戶體驗(yàn),讓用戶愛上你的網(wǎng)站設(shè)計(jì)!

 

一、善用人物配圖,使用戶專注于你想呈現(xiàn)的

當(dāng)進(jìn)入你的網(wǎng)站,我們會本能地關(guān)注網(wǎng)站上人物圖片中的臉和眼睛,這倒是為我們提供了一個想法,是不是可以用人物配圖吸引小伙伴的注意力呢?當(dāng)然,但這僅是第一步,我們還可以這樣做,你瞧,是不是大不相同!(見下圖)

這是第一步:

如何改善您的網(wǎng)站可用性測試

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

在最初的一次網(wǎng)站設(shè)計(jì)可用性測試實(shí)驗(yàn)中,我遇見了一位和藹可親的老大媽,她從來沒用過鼠標(biāo)。在測試過程中,她一直用手比劃著,一邊對著屏幕在空氣中比劃,一邊對著光標(biāo)說著建議的話。在測試最后,我當(dāng)然沒有得到任何結(jié)果,但是她堅(jiān)持認(rèn)為我是一個“可愛的男孩”,并且應(yīng)該認(rèn)識一下她的孫女。很快地,我學(xué)習(xí)到了如何設(shè)置實(shí)驗(yàn)者招募的核心標(biāo)準(zhǔn)。

如果你之前做過一個可用性測試,你就會知道這個不是看起來那么容易的。雖然這不是火箭科學(xué),但其中也包含一些舉足輕重的復(fù)雜性。在這篇文章里,我會分享一些我學(xué)到的關(guān)于如何幫助你避免你的可用性測試者在測試時最后進(jìn)入一個令人泄氣的結(jié)果的課程。

在我事業(yè)開始的第一年里有非常多我本可以學(xué)習(xí)的可貴的經(jīng)驗(yàn),并且我認(rèn)為在錯誤中學(xué)習(xí)是學(xué)習(xí)的最好方法,我們并不是總有機(jī)會去失敗。這里有一些藍(lán)藍(lán)設(shè)計(jì)學(xué)習(xí)道路上的小技巧,可以幫助你快速提升可用性測試的技巧并且避免一些陷阱。

設(shè)計(jì)你的可用性測試腳本來回答具體的研究問題

當(dāng)我們開始一個新的可用性測試時,不要遲疑,你所要做的就是挑選出網(wǎng)站的主要區(qū)域,然后讓用戶完成那些測試。在這個過程中你會發(fā)現(xiàn)一些有用的見解,但是也許當(dāng)你呈現(xiàn)出這些發(fā)現(xiàn)時,你因?yàn)闊o法回答網(wǎng)站盈利者提出的問題而被圍得團(tuán)團(tuán)轉(zhuǎn),你也別因此而驚訝。

響應(yīng)式網(wǎng)頁中如何安置和處理圖片及視頻

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

響應(yīng)式網(wǎng)頁界面設(shè)計(jì),是一種正在流行的網(wǎng)頁開發(fā)思想,它是利用靈活可變的柵格系統(tǒng),令網(wǎng)頁的顯示模式可以根據(jù)訪問設(shè)備的屏幕尺寸規(guī)格而進(jìn)行自適應(yīng)。預(yù)計(jì)2015年的時候,移動端的用戶數(shù)量將會從目前的8億,增長到19億,而這也意味著目前我們?yōu)樽烂鏋g覽器而設(shè)計(jì)的網(wǎng)頁,將會在他們的手機(jī)和平板上呈現(xiàn)出非常糟糕的使用體驗(yàn)。

但是隨著實(shí)際應(yīng)用狀況的改變,響應(yīng)式網(wǎng)頁設(shè)計(jì)還是會出現(xiàn)一系列復(fù)雜的并發(fā)癥。藍(lán)藍(lán)設(shè)計(jì)本文余下的部分,就是詳細(xì)闡述如何在響應(yīng)式網(wǎng)頁中安置和處理多媒體元素,諸如圖片和視頻,最終的目的是幫你做出一個靠譜的網(wǎng)站,能讓這些元素?zé)o縫地在各種手持設(shè)備上加載運(yùn)行,提升用戶體驗(yàn)。

響應(yīng)式網(wǎng)頁設(shè)計(jì)中的圖片處理

先說說響應(yīng)式圖片的處理方法。在響應(yīng)式網(wǎng)頁設(shè)計(jì)中,圖片處理的問題或多或少地和傳統(tǒng)網(wǎng)頁中的導(dǎo)航欄設(shè)計(jì)有相似之處。隨著新的移動設(shè)備的普及,更高像素密度的屏幕使得網(wǎng)頁的任何一個瑕疵都顯得無比明顯,因此,圖片處理的核心問題在于如何確保網(wǎng)站(尤其是圖片)的各個方面都能盡可能靈活,并且確保每個像素不會在高分屏下模糊。

華麗麗的模糊大背景網(wǎng)頁設(shè)計(jì)

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

現(xiàn)在大模糊背景圖像的界面設(shè)計(jì)網(wǎng)站設(shè)計(jì)中越來越受歡迎,高斯模糊的加入不僅創(chuàng)建了一個朦朧彌漫的效果,具備高端觀賞性的同時,它還可以強(qiáng)制性引導(dǎo)用戶關(guān)注主要信息內(nèi)容,大大提升了信息的易讀性。和藍(lán)藍(lán)設(shè)計(jì)一起來欣賞這些網(wǎng)站吧:)

更多模糊大背景網(wǎng)站設(shè)計(jì)欣賞http://sillybuy.com/

Color

View the website

日歷

鏈接

個人資料

存檔