首頁

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

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

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

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

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

Creattica – Mobile Interface

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

Creattica - Mobile Interface

Lovely UI

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

lovely_ui

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

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

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

視頻的進(jìn)化

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

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

過去:若想在網(wǎng)頁中添加動(dòng)畫片的,需要懂一點(diǎn)Flash知識(shí)或者動(dòng)作腳本知識(shí),或者干脆雇人。
現(xiàn)在:數(shù)不清的軟件和工具,能夠幫助你實(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)驗(yàn)的多寡。更平易近人。

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

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

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

視頻元素有哪些用處?

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

不過設(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ā)展,但是在我們在設(shè)計(jì)和桌面app開發(fā)中仍然對其缺少精準(zhǔn)的控制和把握。還好有一系列的強(qiáng)大功能jquery插件幫助我們解決這個(gè)問題。這篇文章詳細(xì)介紹了近10個(gè)最流行的Web字體版式插件,它們允許我們潤色字體版式并創(chuàng)造出更多超級(jí)酷的效果。
不得不說,網(wǎng)站本身也創(chuàng)意十足,個(gè)性滿滿喲:)

Lettering.js

Lettering.js example

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

 FitText.js

FitText.js example

交互式網(wǎng)站設(shè)計(jì)很好用,它允許內(nèi)容根據(jù)用戶的查看終端的大小自動(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ì)?來看史上最全的響應(yīng)式設(shè)計(jì)資源庫

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

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

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

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

推薦閱讀:
《不要落伍!來和小伙伴一起學(xué)習(xí)響應(yīng)式網(wǎng)頁設(shè)計(jì)》
《來試試響應(yīng)式設(shè)計(jì)!25例優(yōu)秀的響應(yīng)式網(wǎng)頁設(shè)計(jì)賞析》
《年終特典!當(dāng)下最熱門的網(wǎng)頁設(shè)計(jì)趨勢總結(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)記能夠額外處理一些表象類(presentational classes ),比如 “unit_1of4″, “small-2″, “grid4″.

responsive-design-1

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

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

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

HappyTables

View the website

Tiny Factory

View the website

Do

View the website

超贊!25例交互體驗(yàn)極佳的網(wǎng)頁設(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)了良好的交互性,為用戶提供更好的瀏覽體驗(yàn)。我們來快速閱覽一下吧。

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

 

Melbourne Remote Control Tourist

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

Melbourne Remote Control Tourist

Melbourne Remote Control Tourist

Portfolio

展示了設(shè)計(jì)師 Bradley Haynes的作品,他來自舊金山

一組賦予你扁平化配色靈感的網(wǎng)頁設(shè)計(jì)(附配色工具)

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

 

近期我們看到了扁平化配色的一個(gè)趨勢,很多Flat Design網(wǎng)站使用了耀眼、明亮的色彩,如果是以前我會(huì)覺得用這類顏色會(huì)有點(diǎn)花哨,但當(dāng)我看了相關(guān)的扁平化設(shè)計(jì)作品,發(fā)現(xiàn)這并不花哨,反而很好看。

我想大家最近也看過iOS7的界面設(shè)計(jì)和iPhone 5C新款手機(jī),那是一種充滿活力、時(shí)尚新穎的顏色,即使用在網(wǎng)頁設(shè)計(jì)上也非常不錯(cuò),下面大家看看來自line25整理的扁平化網(wǎng)頁作品,希望能給你帶來創(chuàng)造靈感!

扁平化配色神器:
扁平化設(shè)計(jì)配色參考網(wǎng)站:FLATUICOLORS

Apple

除了導(dǎo)航保留原味,蘋果官網(wǎng)該平的都平了。。。

Apple

Mud

Mud

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

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

現(xiàn)在扁平化風(fēng)格在網(wǎng)頁設(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é)和配色吧 : )

如果你對扁平化風(fēng)格的網(wǎng)站更有興趣,那么推薦閱讀:
一組賦予你扁平化配色靈感的網(wǎng)頁設(shè)計(jì)

Yummly Mobile

提升網(wǎng)站用戶體驗(yàn):你不能不知道的6條專業(yè)建議

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

作為網(wǎng)頁設(shè)計(jì)師,我們知道,我們的任務(wù)就是與用戶對話。這就是為什么我們能夠從容的著手眼前的工作。我們選擇顏色、字體,以及要使用的網(wǎng)頁布局,甚至編寫CSS的方式,所有的東西看起來都那么有目的性。

正如我們精心制作設(shè)計(jì)時(shí),我們會(huì)意識(shí)到結(jié)果會(huì)透露出一些關(guān)于我們,設(shè)計(jì)師的內(nèi)容。然而這些我們所設(shè)計(jì)東西并不是總能很好道出我們的初衷。

所以每當(dāng)你正在進(jìn)行一個(gè)網(wǎng)站的設(shè)計(jì),問自己:我們?nèi)绾谓o用戶更好的關(guān)懷感?

浮動(dòng)窗口廣告 = 金錢比UX和內(nèi)容更重要

因此,很多網(wǎng)站都選擇了浮動(dòng)窗口或者遮罩層廣告,這似乎是現(xiàn)代形式的彈出窗廣告。

就像他們的前輩,彈出窗口廣告 ,浮動(dòng)窗口的廣告很煩人。

浮動(dòng)窗口廣告是非常具侵?jǐn)_性的策略,從而影響并且中斷用戶體驗(yàn)

想「廣告」與「用戶體驗(yàn)」二者兼得的同學(xué)推薦閱讀:網(wǎng)站廣告和用戶體驗(yàn)的平衡之道

 

wps_clip_image-7620

如果你的用戶非常艱難的才能訪問到你的網(wǎng)站上的內(nèi)容,那么你一定有些地方做錯(cuò)了。你的設(shè)計(jì)應(yīng)該展示給用戶的最優(yōu)先事項(xiàng)是它的體驗(yàn),當(dāng)然也要說明網(wǎng)站的內(nèi)容也是十分重要的一方面。

通過中斷,延遲,或者別的什么方式讓用戶千辛萬苦地才能了解到您的內(nèi)容,那么你是在告訴他們,用戶的價(jià)值低于金錢。

同樣,任何強(qiáng)迫用戶注冊,登錄,填寫郵箱等方式才能訪問到內(nèi)容,都應(yīng)重新考慮是否涉及欠妥。

試想一下這種情況:由于你當(dāng)前的主機(jī)無法滿足現(xiàn)有需求,于是你拼命尋找一個(gè)新的主機(jī)。它只是不斷崩潰,而這是在告訴你,你已經(jīng)超越了當(dāng)前解決方案(PS:順便祝賀你站點(diǎn)的成長)。

如同很多科技的創(chuàng)業(yè)者們,你最初的解決問題的行動(dòng)是用谷歌搜索一臺(tái)新的主機(jī) 。

你偶然在Quora看見了一條線索,一個(gè)很多如同你一樣的創(chuàng)業(yè)者們經(jīng)常光顧的站點(diǎn)。

7個(gè)設(shè)計(jì)師必備的國際頂尖設(shè)計(jì)網(wǎng)站

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

成為dA(deviantart)的忠實(shí)用戶有很多理由——dA是最大的藝術(shù)社區(qū);成為dA用戶簡直是設(shè)計(jì)新手的必經(jīng)之路。但是,這些都不妨礙你加入其他專業(yè)的網(wǎng)站來展現(xiàn)你的才華。

創(chuàng)立于12年前的dA現(xiàn)在擁有最多的藝術(shù)愛好者受眾。然而,最近有人說dA有太多的作品只有在你腦補(bǔ)能力超強(qiáng)的時(shí)候才能稱之為”藝術(shù)”。用戶太多了,所以各種批評的聲音也紛至沓來!不管怎樣,不管你喜歡與否,dA是一個(gè)很棒的藝術(shù)社區(qū),不過,加入其他藝術(shù)網(wǎng)站也會(huì)讓你受益良多。

今天,我們來了解七個(gè)主要的可作為dA替補(bǔ)的藝術(shù)社區(qū)來激勵(lì)設(shè)計(jì)師和有創(chuàng)意的藝術(shù)家。

preview-large-7bestdaalternative

1.Behance


1-Behance

與dA不同,Behance是為那些專業(yè)藝術(shù)家,那些以藝術(shù)謀生或者將藝術(shù)作為一個(gè)非常嚴(yán)肅的愛好的人建立的。由于嚴(yán)格規(guī)定和高標(biāo)準(zhǔn),Behance正在成為一個(gè)高級(jí)的專業(yè)網(wǎng)站。

Behance的網(wǎng)站看上去很直觀,很有條理:作品按小組,類別,甚至國家來分類。用戶可以根據(jù)愛好,專業(yè)水平或者正在一起做的項(xiàng)目來建立朋友圈或合作伙伴圈。如果你想找這個(gè)網(wǎng)站的亮點(diǎn),那就看看招聘版塊和交互系統(tǒng)吧。在Behance,藝術(shù)家們能得到一致的作品集系統(tǒng)來按照步驟展示工作流程和項(xiàng)目進(jìn)度。雖然一堆大手的名字會(huì)嚇到新手,但是Behance可能是唯一能與藝術(shù)家和設(shè)計(jì)師分享你的經(jīng)驗(yàn)和知識(shí)并且獲得專業(yè)反饋的地方。

日歷

鏈接

個(gè)人資料

存檔