首頁(yè)

應(yīng)該如何駕馭黑色?請(qǐng)看這20個(gè)強(qiáng)大的黑色系網(wǎng)站

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

瞧吧!現(xiàn)在到處都是明亮的設(shè)計(jì)照亮我們的屏幕,有時(shí)甚至亮瞎到我們的眼睛!大伙應(yīng)該都感同身受,接近節(jié)日或者年底的時(shí)候,以紅色為主色調(diào)的設(shè)計(jì)稿常常可以讓我們看到昏厥,還有那些色彩斑斕的促銷(xiāo)專(zhuān)題。

那么今天,我們要好好和大家來(lái)推薦一些低調(diào)內(nèi)涵的網(wǎng)站,而這些設(shè)計(jì)者們也正采取了與熱鬧相反的路線(xiàn):但他們依然創(chuàng)造了強(qiáng)大的網(wǎng)站,通過(guò)黑暗柔和的色彩!這些設(shè)計(jì)有一種誘人的存在,它們用黑白捕捉人的記憶情感。

這篇文章我們傾力推薦了20多個(gè)美麗的黑色系網(wǎng)站,微妙的色調(diào)和戲劇性的黑白圖像一定會(huì)讓你陷入這一場(chǎng)低調(diào)奢華的視覺(jué)盛宴里,來(lái)嘗嘗吧:)

另外也希望大家?guī)е鴨?wèn)題去欣賞這些網(wǎng)站,這些設(shè)計(jì)師是如何把黑色設(shè)計(jì)的更有國(guó)際范?如果是你來(lái),布局、素材、輔助色又會(huì)怎么選用呢?

我們也為您準(zhǔn)備了其他色系的優(yōu)秀文章,推薦您也有空一起來(lái)看看喲。
《配色秘要:奢華低調(diào)有內(nèi)涵的米黃色》
《超贊!網(wǎng)頁(yè)設(shè)計(jì)色彩剖析之矚目紅(附百枚網(wǎng)頁(yè)案例)》
《淺談色彩學(xué):以紅色為主的色彩配色》

 

MoreSleep

MoreSleep

Apple Mac Pro

Apple Mac Pro

Rook

超贊!25例交互體驗(yàn)極佳的網(wǎng)頁(yè)設(shè)計(jì)

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

25 Modern Web / Interactive Websites Design Examples

本文介紹的案例均使用了的HTML/CSS 以及 JS 技術(shù),從視差滾動(dòng)到響應(yīng)式設(shè)計(jì),實(shí)現(xiàn)了良好的交互性,為用戶(hù)提供更好的瀏覽體驗(yàn)。我們來(lái)快速閱覽一下吧。

推薦閱讀:
《網(wǎng)頁(yè)設(shè)計(jì)新趨勢(shì)!25例出眾的響應(yīng)式導(dǎo)航設(shè)計(jì)》
《讓網(wǎng)站更生動(dòng)!那些在網(wǎng)頁(yè)中完美運(yùn)用視頻元素的案例》
《不要落伍!來(lái)和小伙伴一起學(xué)習(xí)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)》

 

Melbourne Remote Control Tourist

的遠(yuǎn)程旅游體驗(yàn),這個(gè)概念不錯(cuò)吧!

Melbourne Remote Control Tourist

Melbourne Remote Control Tourist

20個(gè)優(yōu)秀的國(guó)外扁平化網(wǎng)頁(yè)設(shè)計(jì)作品

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

扁平化設(shè)計(jì)為印刷品、網(wǎng)頁(yè)和移動(dòng)操作系統(tǒng)的設(shè)計(jì)帶來(lái)了新的變化。扁平化設(shè)計(jì)最核心的地方就是放棄一切裝飾效果,諸如陰影,透視,紋理,漸變等能做出3D效果的元素一概不用。所有元素的邊界都干凈利落,沒(méi)有任何羽化,漸變,或者陰影。

更少的按鈕和選項(xiàng)使得界面干凈整齊,使用起來(lái)格外方便??梢詫⑿畔⒑褪挛锏墓ぷ鞣绞礁雍?jiǎn)單直接的展示出來(lái),減少認(rèn)知障礙的產(chǎn)生。越來(lái)越多的公司正在效仿,比如下面這些:

 

Who Wanna

10.flat websites

Very-Make


18.flat websites

23個(gè)最具影響力的網(wǎng)頁(yè)設(shè)計(jì)博客

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

花了大量時(shí)間在網(wǎng)上搜集行業(yè)里高質(zhì)量網(wǎng)頁(yè)設(shè)計(jì)的博客,不過(guò)話(huà)說(shuō)回來(lái),高質(zhì)量可信的資源確實(shí)挺稀缺的。

 

CSS-Tricks

CSS-Tricks是Chris Coyier公眾博客,專(zhuān)門(mén)講一些有關(guān)CSS的話(huà)題。不過(guò)近幾年來(lái),CSS-Tricks有了下面一些擴(kuò)展:

Chris和Dave Rupert一起創(chuàng)造了ShopTalk 播客,在里面可以討論所以有關(guān)網(wǎng)頁(yè)設(shè)計(jì)和開(kāi)發(fā)的事情。
Chris 出過(guò)幾本書(shū),做了一個(gè) Lynda.com的Wordpress主題課程,并且他還創(chuàng)建了一個(gè)The Lodge的課程教人們學(xué)習(xí)如何制作一個(gè)頗具現(xiàn)代感的網(wǎng)站。
超多很酷的項(xiàng)目,像 CodePen,HTML-Ipsum, Quotes on Design 。Chris真是個(gè)超有想法的人。

csstricks-web-design-blog-top-blogs-follow

CSS-Tricks 是 Chris Coyier 2007年建立的,總部在美國(guó)懷俄明州的密爾沃基,至今網(wǎng)站月頁(yè)面訪問(wèn)量達(dá)270萬(wàn)。

網(wǎng)站亮點(diǎn)(這個(gè)網(wǎng)站的獨(dú)特之處是什么?):

名人效應(yīng)——Chris Coyier 是這么網(wǎng)站的精神領(lǐng)袖,他的個(gè)人風(fēng)格貫穿于項(xiàng)目始終,是眾多設(shè)計(jì)師的楷模。向他學(xué)習(xí),同他一同去冒險(xiǎn)吧!

關(guān)注App設(shè)計(jì)!20個(gè)漂亮的扁平風(fēng)格移動(dòng)端界面

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

現(xiàn)在扁平化風(fēng)格在網(wǎng)頁(yè)設(shè)計(jì)方面已經(jīng)有許多優(yōu)秀的范例了,比如這22個(gè)超贊的扁平化設(shè)計(jì)經(jīng)典案例就有很多我們可以借鑒學(xué)習(xí)的地方。但是移動(dòng)端的界面設(shè)計(jì)扁平化風(fēng)格較少,所以今天從BehanceDribbble收集的這一組移動(dòng)端的扁平化設(shè)計(jì)就該好好看看咯,學(xué)習(xí)一下它們優(yōu)秀的細(xì)節(jié)和配色吧 : )

如果你對(duì)扁平化風(fēng)格的網(wǎng)站更有興趣,那么推薦閱讀:
一組賦予你扁平化配色靈感的網(wǎng)頁(yè)設(shè)計(jì)
怒贊!2013扁平化設(shè)計(jì)終極指南
專(zhuān)屬扁平化設(shè)計(jì)的PS色板(配色庫(kù))

 

uiGo Colors – iOS Flat UI Bundle

 

8個(gè)獲取手機(jī)應(yīng)用程序設(shè)計(jì)靈感的網(wǎng)站

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

曾經(jīng),CSS 畫(huà)廊非常流行,網(wǎng)頁(yè)設(shè)計(jì)師們會(huì)定期訪問(wèn)這些網(wǎng)站獲取靈感?,F(xiàn)在仍然可以方便迅速找到令人興奮的東西(例如 Dribbble 和 Behance 對(duì)設(shè)計(jì)有很大的幫助)。

對(duì)于移動(dòng)應(yīng)用程序設(shè)計(jì),存在類(lèi)似的畫(huà)廊,我相信他們會(huì)更加有用。這是因?yàn)槿绻话惭b移動(dòng)應(yīng)用程序,靈感更難獲得,也更需要時(shí)間和努力。這12個(gè)畫(huà)廊有很多漂亮的應(yīng)用程序用戶(hù)界面,并進(jìn)行了很好的分類(lèi)。趕緊收藏吧!

優(yōu)設(shè)好文:
強(qiáng)烈推薦!你應(yīng)該到這里尋找網(wǎng)頁(yè)設(shè)計(jì)靈感

Creattica – Mobile Interface

Creattica 是一個(gè)靈感畫(huà)廊,展示最好的網(wǎng)站設(shè)計(jì),標(biāo)志設(shè)計(jì),平面設(shè)計(jì),攝影,作品。

Creattica - Mobile Interface

Lovely UI

收集各種移動(dòng)界面元素,啟動(dòng)畫(huà)面,按鈕,導(dǎo)航,通知等等各種組件的設(shè)計(jì)。

lovely_ui

讓網(wǎng)站更生動(dòng)!那些在網(wǎng)頁(yè)中完美運(yùn)用視頻元素的案例

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

視頻有著不算短的歷史:最早是電影,然后是電視,現(xiàn)在出現(xiàn)在我們隨身攜帶的手機(jī)、平板上。網(wǎng)頁(yè)中也很早便出現(xiàn)了視頻。最開(kāi)始的時(shí)候是Flash格式的視頻和動(dòng)效。而現(xiàn)在除了Flash之外,我們還有HTML5和其它選擇。說(shuō)簡(jiǎn)單也簡(jiǎn)單,只需要在網(wǎng)頁(yè)中嵌入幾段代碼,就能實(shí)現(xiàn)視頻效果。但實(shí)際上,視頻要想用的出彩,并不容易。

視頻的進(jìn)化

過(guò)去的網(wǎng)頁(yè)設(shè)計(jì),如果想要加入視頻,同時(shí)還保證整體美感,不是很容易。我們來(lái)和現(xiàn)在做個(gè)對(duì)比。

過(guò)去:因?yàn)閮?yōu)美的網(wǎng)頁(yè)設(shè)計(jì)必然需要高清高質(zhì)的視頻,若想拍攝好的視頻,那么需要昂貴的硬件支持。
現(xiàn)在:相機(jī)設(shè)備越來(lái)越平易近人,手機(jī)拍照效果也越來(lái)越好,拍攝高清視頻不是什么難事。

過(guò)去:若想在網(wǎng)頁(yè)中添加動(dòng)畫(huà)片的,需要懂一點(diǎn)Flash知識(shí)或者動(dòng)作腳本知識(shí),或者干脆雇人。
現(xiàn)在:數(shù)不清的軟件和工具,能夠幫助你實(shí)現(xiàn)目標(biāo)。

我們?cè)賮?lái)想想YouTube,創(chuàng)立于2005年。YouTube是廣受大眾歡迎的視頻網(wǎng)站,在其中用戶(hù)可以上傳自己拍攝的視頻片段?,F(xiàn)在,即便是一些公司,也利用YouTube來(lái)發(fā)布產(chǎn)品預(yù)告。

我的看法是,YouTube催進(jìn)了互聯(lián)網(wǎng)視頻的進(jìn)化。他們讓視頻病毒式的傳播于互聯(lián)網(wǎng)中。YouTube的理念前無(wú)古人:任何人都可以發(fā)布視頻、分享喜愛(ài)的視頻,不論視頻拍攝者水平的高低、經(jīng)驗(yàn)的多寡。更平易近人。

現(xiàn)在的互聯(lián)網(wǎng)視頻

時(shí)至今日,我們的技術(shù)越來(lái)越先進(jìn),手段越來(lái)越豐富,我們甚至可以?huà)仐塅lash.HTML5技術(shù)可輕松實(shí)現(xiàn)視頻播放。技術(shù)越先進(jìn),我們的設(shè)計(jì)便越方便,可設(shè)計(jì)的空間也越大,用戶(hù)體驗(yàn)也自然更好。

那么,在網(wǎng)頁(yè)設(shè)計(jì)中加入視頻的好處是什么呢?

視頻元素有哪些用處?

視頻的使用方法有很多,均能夠提高用戶(hù)的瀏覽體驗(yàn)。一圖勝千言?沒(méi)錯(cuò),那么只要播放流暢、加載迅速,那么視頻的傳達(dá)能力完全可以超越圖像,從而提高整體設(shè)計(jì)水品。

不過(guò)設(shè)計(jì)前還是要理性思考一番:添加視頻,利大于弊,還是弊大于利?

倘若是視頻可以更好的傳達(dá)想要傳達(dá)的信息,更好的傳遞品牌、產(chǎn)品、服務(wù)的信息,那么便采用。

倘若添加視頻后,同時(shí)引入了一些不利于瀏覽的元素,這時(shí)候便該謹(jǐn)慎取舍了。

10個(gè)增強(qiáng)Web字體排版的jquery插件

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

雖然Web字體版式技術(shù)在各種定制化字體解決方案(比如@font-face, Google Fonts)的支持下一路蓬勃發(fā)展,但是在我們?cè)谠O(shè)計(jì)和桌面app開(kāi)發(fā)中仍然對(duì)其缺少精準(zhǔn)的控制和把握。還好有一系列的強(qiáng)大功能jquery插件幫助我們解決這個(gè)問(wèn)題。這篇文章詳細(xì)介紹了近10個(gè)最流行的Web字體版式插件,它們?cè)试S我們潤(rùn)色字體版式并創(chuàng)造出更多超級(jí)酷的效果。
不得不說(shuō),網(wǎng)站本身也創(chuàng)意十足,個(gè)性滿(mǎn)滿(mǎn)喲:)

Lettering.js

Lettering.js example

Lettering.js 是最簡(jiǎn)單最流行的網(wǎng)絡(luò)版式插件之一。通過(guò)分拆每個(gè)文本,并將每個(gè)字母放在定制好的<span>中,該插件能夠讓你精準(zhǔn)的操控標(biāo)題版式。使用它小心的調(diào)整你的字距或者添加各式各樣的CSS,從而讓每個(gè)單詞都有超級(jí)贊的效果。

 FitText.js

FitText.js example

交互式網(wǎng)站設(shè)計(jì)很好用,它允許內(nèi)容根據(jù)用戶(hù)的查看終端的大小自動(dòng)調(diào)整。自然地你的web文本隨著查看它的瀏覽器或者終端大小變窄而自動(dòng)收縮,但是某些情況下會(huì)使題目和標(biāo)題變得有點(diǎn)難看,尤其是由于文本自動(dòng)縮進(jìn)或者多出新的一行等情況。這就是FitText.js插件的功能,它能夠使你的標(biāo)題像一張回應(yīng)式圖片一樣調(diào)整大小,單詞不會(huì)出現(xiàn)跑到新的一行的情況。

想學(xué)響應(yīng)式設(shè)計(jì)?來(lái)看史上最全的響應(yīng)式設(shè)計(jì)資源庫(kù)

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

想學(xué)響應(yīng)式設(shè)計(jì)?來(lái)看史上最全的響應(yīng)式設(shè)計(jì)資源庫(kù)

響應(yīng)式設(shè)計(jì)起源:Ethan Marcotte在2010年寫(xiě)了一篇響應(yīng)式的文章,宣揚(yáng)這種新式的網(wǎng)頁(yè)設(shè)計(jì)思想,經(jīng)過(guò)3年的發(fā)展,響應(yīng)式設(shè)計(jì)得到了眾多設(shè)計(jì)師的認(rèn)可。

本文的目的在于為大家集中推薦一些最有價(jià)值的響應(yīng)式設(shè)計(jì)資源。包含了CSS框架、在線(xiàn)工具、準(zhǔn)備階段的工具等等。

推薦閱讀:
《不要落伍!來(lái)和小伙伴一起學(xué)習(xí)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)》
《來(lái)試試響應(yīng)式設(shè)計(jì)!25例優(yōu)秀的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)賞析》
《年終特典!當(dāng)下最熱門(mén)的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)總結(jié)》

CSS 響應(yīng)式框架

這一部分主要介紹了一些的CSS響應(yīng)式框架,更輕量,而且兼容性也不差。(Foundation,Skeleton是較為老式的CSS響應(yīng)式框架)

Girder
Girder 使用了Sass silent classes (占位符,輸出時(shí)不會(huì)體現(xiàn))在HTML中組織內(nèi)容,標(biāo)記能夠額外處理一些表象類(lèi)(presentational classes ),比如 “unit_1of4″, “small-2″, “grid4″.

responsive-design-1

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

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

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

HappyTables

View the website

Tiny Factory

View the website

Do

View the website

日歷

鏈接

個(gè)人資料

存檔