首頁

紋理應(yīng)該怎樣用到網(wǎng)頁中?

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

有很多學(xué)習(xí)UI設(shè)計(jì)的同學(xué)下載了紋理后知道如何平鋪使用,并且都分類羅列一目了然,可是在制作網(wǎng)站的時(shí)候卻不知道怎么用,總感覺利用不起來。

那么今天藍(lán)藍(lán)設(shè)計(jì)薦30個(gè)運(yùn)用紋理界面設(shè)計(jì)出眾的網(wǎng)站設(shè)計(jì),希望對你有一定的啟發(fā):)

Hollister Co.

Textured website design example: Hollister Co.

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

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

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

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

上效果圖:

1p

 

不同風(fēng)格的設(shè)計(jì)師個(gè)人網(wǎng)站欣賞

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

如果要在一個(gè)UI設(shè)計(jì)師的眾多作品當(dāng)中挑選一個(gè)最接近該設(shè)計(jì)師的界面設(shè)計(jì)思想及風(fēng)格的,那么這個(gè)作品基本上就是設(shè)計(jì)師的個(gè)人網(wǎng)站設(shè)計(jì)。因?yàn)樵O(shè)計(jì)師個(gè)人網(wǎng)站在某種意義上來說可以不用顧及任何受眾群體,不用考慮任何商業(yè)約束之類的,基本上是一種隨心所欲的完全自我風(fēng)格的呈現(xiàn)。

因此,UI設(shè)計(jì)師們的個(gè)人網(wǎng)站設(shè)計(jì)成為了另一抹艷麗的風(fēng)景,來欣賞藍(lán)藍(lán)設(shè)計(jì)今天為您帶來的這道靚麗風(fēng)景線吧。

Sushi & Robots

Sushi & Robots

要給自己做站?先到這些設(shè)計(jì)師網(wǎng)站汲取靈感吧

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

在這個(gè)浩瀚的互聯(lián)網(wǎng)里,web項(xiàng)目越來越多,那么就需要大量的網(wǎng)絡(luò)設(shè)計(jì)人才和程序開發(fā)專員。所以,近幾年UI設(shè)計(jì)獅和程序猿越來越多,更為難能可貴的是,有很多有想法的同學(xué)們會(huì)在日后的工作中惺惺相惜,雙宿雙飛!彼此互補(bǔ),組合起來成立自己的工作室,或者相互之間幫助搭建個(gè)人站點(diǎn)。

那么今天藍(lán)藍(lán)設(shè)計(jì)就要分享的是類似這樣的個(gè)人站點(diǎn)和工作室。他們之中有圖形界面設(shè)計(jì)師、開發(fā)人員、網(wǎng)絡(luò)藝術(shù)作家、和其他數(shù)碼創(chuàng)意者。
這是一個(gè)巨大的網(wǎng)頁設(shè)計(jì)畫廊,琳瑯滿目的釋放著這些設(shè)計(jì)人的靈感創(chuàng)意。

Mathew Helme

mathew helme graphics web designer portfolio

25個(gè)超贊的色塊化、模塊化網(wǎng)頁

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

藍(lán)藍(lán)設(shè)計(jì)強(qiáng)烈推薦:這些超贊的色塊化、模塊化網(wǎng)頁設(shè)計(jì)!
Web設(shè)計(jì)的8大趨勢中,其中就包含了色塊設(shè)計(jì)、超大號(hào)的圖片、聚焦簡潔、響應(yīng)式設(shè)計(jì)、視差滾動(dòng)、強(qiáng)調(diào)字體。
辣!這些鮮活靈動(dòng)的界面設(shè)計(jì)案例,絕對會(huì)有打動(dòng)你的一個(gè)!在這個(gè)激動(dòng)人心的周五,會(huì)心收藏吧!

Mercer Tavern

View the live website design

一個(gè)優(yōu)秀的交互設(shè)計(jì)師是怎樣練成的?

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

藍(lán)藍(lán)設(shè)計(jì)與你分享一位優(yōu)秀的交互設(shè)計(jì)師的成長過程與想法。

1. 交互設(shè)計(jì)師應(yīng)當(dāng)具備的能力

如果我們簡單的將用戶體驗(yàn)領(lǐng)域涉及到的技能分為:用戶研究、產(chǎn)品(概念/功能)設(shè)計(jì)、交互設(shè)計(jì)、視覺設(shè)計(jì)、工程技術(shù),我認(rèn)為任何一個(gè)交互設(shè)計(jì)師和視覺設(shè)計(jì)師等等,都應(yīng)該具有整體的復(fù)合技能,只是哪部分更多哪部分更少的問題。

1) 用戶研究:對于交互設(shè)計(jì)師,不具備基本的用戶研究能力,無法吸收來自用戶的「信息營養(yǎng)」,如何做出真正以用戶為重心的設(shè)計(jì)呢?觀察法、訪談法、問卷法、可用性測試、行為數(shù)據(jù)分析等等,這些基本的方法應(yīng)該要有所掌握。

2) 產(chǎn)品(概念/功能)設(shè)計(jì)和交互設(shè)計(jì):這方面不必多說,交互設(shè)計(jì)師必須有大局觀,能夠真正的理解產(chǎn)品的思路和方向,從交互的角度實(shí)現(xiàn)產(chǎn)品層面的意圖。這也是很多交互設(shè)計(jì)師轉(zhuǎn)向產(chǎn)品設(shè)計(jì)師、產(chǎn)品經(jīng)理的原因,在很多方面有交叉。

如何做好網(wǎng)頁?20招幫你打造完美設(shè)計(jì)!

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

每當(dāng)談到網(wǎng)頁設(shè)計(jì)這個(gè)話題時(shí),我總會(huì)想到這些年我見過的一些常見的錯(cuò)誤,尤其是發(fā)生在年輕UI設(shè)計(jì)師身上的。所以今天藍(lán)藍(lán)設(shè)計(jì)整理了一些資料,算是我這些年總結(jié)的經(jīng)驗(yàn)吧,主要是教大家怎樣做好網(wǎng)頁界面設(shè)計(jì)。我認(rèn)為每一個(gè)網(wǎng)頁設(shè)計(jì)新手在開始一個(gè)項(xiàng)目之前都應(yīng)該了解這些知識(shí),在項(xiàng)目開展中也應(yīng)該注意。

這些概念不僅僅是網(wǎng)頁設(shè)計(jì)方面的,還包括現(xiàn)實(shí)中的工作流問題,它可以幫你更好的完成工作。如果你能將這些知識(shí)融會(huì)貫通,假以時(shí)日,做一個(gè)專業(yè)的網(wǎng)站界面設(shè)計(jì)布局就不是問題啦~

01.將你的想法先在紙上畫出來

 initial sketch

十個(gè)國外黃色網(wǎng)站欣賞

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

在中國清朝,明黃色的衣服只有皇子才有資格穿,慢慢的黃色在中國就成了高貴的顏色。在人們的色彩印象中,黃色界面設(shè)計(jì)也表現(xiàn)為暫停。所以當(dāng)你的網(wǎng)頁設(shè)計(jì)采用黃色的時(shí)候,會(huì)讓人們在你的網(wǎng)頁前停留。今天藍(lán)藍(lán)設(shè)計(jì)就推薦一些國外黃色網(wǎng)站設(shè)計(jì),希望對UI設(shè)計(jì)師們有所幫助!

黃色,就像橙色和紅色,黃色也是一個(gè)暖色。它有大自然、陽光、春天的涵義,而且通常被認(rèn)為是一個(gè)快樂和有希望的色彩。不過話雖如此,它可能是一個(gè)難以應(yīng)付的色彩,而且貌似并不像之前討論的那幾種色彩流行。黃色是所有色相中最能發(fā)光的顏色,給人輕快,透明,輝煌,充滿希望的色彩印象。

移動(dòng)界面設(shè)計(jì)新趨勢你知道多少?

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

如果你是一個(gè)APP狂熱分子,你會(huì)花大量的時(shí)間在各種APP界面設(shè)計(jì)的嘗鮮中,你會(huì)明顯感受到一些APP在采用著某種風(fēng)格鮮明的設(shè)計(jì)語言,來標(biāo)榜自己的獨(dú)特之處,形成自己的界面設(shè)計(jì)風(fēng)格,甚至引領(lǐng)設(shè)計(jì)風(fēng)向。去年我們關(guān)注到隨著Metro設(shè)計(jì)風(fēng)格的影響和iOS7的發(fā)布,APP明顯都開始嘗試扁平化的設(shè)計(jì)語言了,除此之外,還有哪些顯性化的設(shè)計(jì)語言嶄露頭角呢?

在這篇文章里,藍(lán)藍(lán)設(shè)計(jì)想分享一些日益顯性的UI設(shè)計(jì)語言,讓人一眼就記住它的風(fēng)格,有一些已經(jīng)隨著優(yōu)秀設(shè)計(jì)師的摸索,融入到國內(nèi)移動(dòng)產(chǎn)品設(shè)計(jì)里了,而有一些,確實(shí)是剛剛在萌芽階段,需要更進(jìn)一步的摸索和嘗試。

一、唯一主色調(diào) | Simple color schemes

為什么我們要定義一個(gè)界面多種顏色?僅僅用一個(gè)主色調(diào),是不是就能夠很好的表達(dá)界面層次、重要信息,并且能展現(xiàn)良好的視覺效果?事實(shí)上也正是如此,隨著iOS7的發(fā)布,我們看到越來越多唯一主色調(diào)風(fēng)格的設(shè)計(jì),會(huì)采用簡單的色階,配套灰階來展現(xiàn)信息層次,但是絕不采用更多的顏色。

如何設(shè)計(jì)清楚明了的對話框

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

對話框(Dialog)是個(gè)好用又方便的工具,通常用來再三確認(rèn)使用者的操作動(dòng)作與決策,以避免一時(shí)的手誤或誤會(huì)操作動(dòng)作的意思,常用于重要?jiǎng)幼鞯拇_認(rèn),例如:「你確定要?jiǎng)h除這個(gè)聯(lián)絡(luò)人嗎?」,但若對話框搭配了不適當(dāng)?shù)幕貞?yīng)選項(xiàng)文字,反而可能會(huì)造成使用者的困擾與誤解,有時(shí)還可能做了錯(cuò)誤的決定。

對話框界面設(shè)計(jì)最常見的不當(dāng)UI設(shè)計(jì)就是選項(xiàng)上的文字出現(xiàn):「是(YES)與否(NO)」,回想在學(xué)生時(shí)期考試的時(shí)候,O與X在是非題中是唯二的兩個(gè)答案,而出題者會(huì)透過文字?jǐn)⑹錾险吹恼`導(dǎo),來測驗(yàn)學(xué)生是否真的清楚了解,先不論這樣的測驗(yàn)方式到底對學(xué)習(xí)以及知識(shí)的建立到底有沒有明顯的幫助,使用者可不想在開心的使用你的程式或服務(wù)時(shí),還要小心翼翼的了解你對話框的內(nèi)容。

我們當(dāng)然可以細(xì)心的UI設(shè)計(jì)對話框中的文字,讓使用者清楚明了對話框的訊息,但是在大部分的情況下,我們幾乎根本不會(huì)逐字去閱讀訊息的內(nèi)容。你必須要假設(shè)使用者除了對話框上的按鈕外,不會(huì)閱讀任何其他訊息(對話框的標(biāo)題或是訊息內(nèi)容)。 – John Gruber of Daring Fireball

dialog

日歷

鏈接

個(gè)人資料

存檔