首頁

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

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

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

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

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

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

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

 

MoreSleep

MoreSleep

Apple Mac Pro

Apple Mac Pro

Rook

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

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

25 Modern Web / Interactive Websites Design Examples

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

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

 

Melbourne Remote Control Tourist

的遠(yuǎn)程旅游體驗,這個概念不錯吧!

Melbourne Remote Control Tourist

Melbourne Remote Control Tourist

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

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

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

更少的按鈕和選項使得界面干凈整齊,使用起來格外方便??梢詫⑿畔⒑褪挛锏墓ぷ鞣绞礁雍唵沃苯拥恼故境鰜?,減少認(rèn)知障礙的產(chǎn)生。越來越多的公司正在效仿,比如下面這些:

 

Who Wanna

10.flat websites

Very-Make


18.flat websites

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

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

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

 

CSS-Tricks

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

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

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

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

網(wǎng)站亮點(這個網(wǎng)站的獨特之處是什么?):

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

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

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

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

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

 

uiGo Colors – iOS Flat UI Bundle

 

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

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

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

對于移動應(yīng)用程序設(shè)計,存在類似的畫廊,我相信他們會更加有用。這是因為如果不安裝移動應(yīng)用程序,靈感更難獲得,也更需要時間和努力。這12個畫廊有很多漂亮的應(yīng)用程序用戶界面,并進(jìn)行了很好的分類。趕緊收藏吧!

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

Creattica – Mobile Interface

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

Creattica - Mobile Interface

Lovely UI

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

lovely_ui

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

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

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

視頻的進(jìn)化

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

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

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

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

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

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

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

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

視頻元素有哪些用處?

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

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

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

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

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

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

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

Lettering.js

Lettering.js example

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

 FitText.js

FitText.js example

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

想學(xué)響應(yīng)式設(shè)計?來看史上最全的響應(yīng)式設(shè)計資源庫

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

想學(xué)響應(yīng)式設(shè)計?來看史上最全的響應(yīng)式設(shè)計資源庫

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

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

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

CSS 響應(yīng)式框架

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

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

responsive-design-1

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

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

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

HappyTables

View the website

Tiny Factory

View the website

Do

View the website

日歷

鏈接

個人資料

存檔