首頁(yè)

交互設(shè)計(jì)師必藏:50個(gè)線框圖套件和在線設(shè)計(jì)工具

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

當(dāng)開(kāi)始進(jìn)行新項(xiàng)目時(shí),一般都會(huì)起步于線框圖。本文收集了大量的線框圖設(shè)計(jì)工具和套件。
交互設(shè)計(jì)師必備哦!

推薦閱讀:
《推薦!交互細(xì)節(jié)中的那些變形金剛》 
《iOS用戶(hù)體驗(yàn)設(shè)計(jì):如何構(gòu)建交互模式》 
《20個(gè)專(zhuān)為無(wú)線端設(shè)計(jì)提供靈感的資源站》

在線設(shè)計(jì)模板

Wirefy

以?xún)?nèi)容優(yōu)先為原則的線框圖在線設(shè)計(jì)工具。允許你運(yùn)用標(biāo)準(zhǔn)元素設(shè)計(jì)出響應(yīng)式線框圖。

Wirefy in 50 Free Wireframe Kits and Web Apps

Lumzy

網(wǎng)頁(yè)設(shè)計(jì)和界面設(shè)計(jì)的原型設(shè)計(jì)工具。

Lumzy in 50 Free Wireframe Kits and Web Apps

Mockup Builder

誰(shuí)說(shuō)設(shè)計(jì)師不會(huì)寫(xiě)代碼?超簡(jiǎn)單Photoshop腳本語(yǔ)言介紹

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

自動(dòng)化對(duì)每個(gè)設(shè)計(jì)師的工作來(lái)說(shuō)是很有用的。它可以在重復(fù)的任務(wù)上節(jié)省寶貴的時(shí)間,還能夠幫我們更快捷、更容易的解決一系列問(wèn)題。

你可以使用photoshop的動(dòng)作來(lái)使工作流程自動(dòng)化,這是很流行的,大多數(shù)人都知道并且已經(jīng)在使用的方法。今天,我們將介紹給你一種高級(jí)的自動(dòng)化技巧:腳本語(yǔ)言。所有的這一切僅僅需要你有一點(diǎn)點(diǎn)關(guān)于JavaScript的基本知識(shí),這對(duì)于我們中的一些網(wǎng)頁(yè)設(shè)計(jì)師往往都是具備的。

我很多年前就知道Photoshop的腳本語(yǔ)言,但是我?guī)讉€(gè)月前才開(kāi)始決定研究它。我忽視了它是因?yàn)槲艺J(rèn)為那是聰明的具有數(shù)學(xué)思維能力的程序員的領(lǐng)域。但是我錯(cuò)了,今天我將要來(lái)告訴大家,盡管它需要一些基本的程序技巧,腳本語(yǔ)言并不是那么難掌握。

但是,一開(kāi)始,我們得回答以下這幾個(gè)明顯的問(wèn)題:

為什么我們需要腳本語(yǔ)言?

為什么我們?cè)赑hotoshop已經(jīng)有了很棒的動(dòng)作之后還要需要學(xué)習(xí)腳本語(yǔ)言?答案是交互性!當(dāng)你使用動(dòng)作時(shí),你不能真正的控制它在不同情況下的表現(xiàn),就像錄像帶不停的一遍又一遍的播放而沒(méi)有任何改變。

00

一個(gè)腳本語(yǔ)言更靈活,它表現(xiàn)形式的改變?nèi)Q于你輸入的參數(shù)或者是應(yīng)用程序的內(nèi)容。聽(tīng)起來(lái)很有用?不是么?

要求

你不需要是一個(gè)會(huì)寫(xiě)腳本語(yǔ)言的高級(jí)的程序員。我就僅僅是一個(gè)平面設(shè)計(jì)師,就像你們大多數(shù)人一樣。但是你需要對(duì)JavaScript至少有一個(gè)基本的了解,以及一些屬性和方法的經(jīng)驗(yàn)去領(lǐng)悟這篇文章的大部分內(nèi)容。

01

如果你對(duì)JavaScript一點(diǎn)都不了解,別害怕!有很多地方你可以了解程序的一些基本知識(shí)。例如:Codecademy,有很棒的完整的交互式課程。

翻滾吧網(wǎng)頁(yè):30個(gè)漂亮視差滾動(dòng)網(wǎng)站賞析

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

大概一年前,我們還在預(yù)測(cè)視差滾動(dòng)能否成為趨勢(shì),現(xiàn)在,視差滾動(dòng)網(wǎng)站已經(jīng)紛繁多樣了,到處都有它的影子,除了新奇的體驗(yàn),網(wǎng)站的縱深感也令人置身其中。在5月份的時(shí)候,優(yōu)設(shè)推薦了一篇視差滾動(dòng)指南,當(dāng)下是讓它真正大展身手的時(shí)候了,對(duì)這個(gè)技術(shù)感興趣的同學(xué)移步:《滾動(dòng)視差設(shè)計(jì)指南》閱讀學(xué)習(xí),同時(shí)誠(chéng)摯推薦這《11個(gè)超炫的視差滾動(dòng)網(wǎng)站》,先感受一下它的魅力何在。

今天推薦的視差滾動(dòng)網(wǎng)站有點(diǎn)特別,是縱橫向兼有的,還包括了flickr、tumblr、bahance等知名網(wǎng)站,希望你能在這里找到靈感,創(chuàng)建一個(gè)自己的視差滾動(dòng)網(wǎng)站 : )

Fendi Life

Fendi Life

Twibfy


Twibfy

The Girl Effect

新鮮熱辣:48枚扁平化圖標(biāo)免費(fèi)下載

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

今天藍(lán)藍(lán)設(shè)計(jì)跟您分享一組免費(fèi)的扁平化圖標(biāo),共有48個(gè),包含了辦公,社交和旅行三種風(fēng)格,由Vecteezy設(shè)計(jì)。老規(guī)矩,讀完readme后使用更放心哦!

微盤(pán)下載

WDD_IconsPreview

原文鏈接:webdesignerdepot

30個(gè)高端大氣的電影宣傳網(wǎng)站欣賞

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

得力于互聯(lián)網(wǎng)的進(jìn)步,電影宣傳網(wǎng)站也成為提升電影格調(diào)的重要方面,還記得《少年派的奇幻漂流》官方網(wǎng)站就令人贊不絕口,甚至有人因此選擇進(jìn)電影院觀看?,F(xiàn)在,有很多設(shè)計(jì)師也在為電影宣傳作努力,在國(guó)內(nèi),這是一個(gè)新興的宣傳方式,設(shè)計(jì)師必須在網(wǎng)站中平衡好視覺(jué)表現(xiàn)和信息傳遞,對(duì)經(jīng)驗(yàn)不足的設(shè)計(jì)師來(lái)說(shuō),可能還沒(méi)有頭緒,那么這里有30個(gè)熱門(mén)電影(饑餓游戲、了不起的蓋茨比、金剛狼2等)的優(yōu)秀宣傳范例,你可以學(xué)習(xí)借鑒一下  : )

說(shuō)到電影,推薦這10部:《設(shè)計(jì)師應(yīng)該看的10部電影》,找電影資源可以到這兒:《90%的人都不知道的電影資源下載站》,大多數(shù)是高清版唷。

The Hunger Games

The Hunger Games

The Heat


The Heat

We’re The Millers

9個(gè)免費(fèi)的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)模板

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

隨著PC端、平板、智能手機(jī)等終端的發(fā)展,設(shè)備環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕分辨率等)更加復(fù)雜,網(wǎng)頁(yè)展示需要考慮到各個(gè)終端的具體差異。

因此,響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)受到了大家的推崇。通過(guò)文中的9個(gè)免費(fèi)的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)模板,希望能幫大家了解這種技術(shù)以及提高工作效率。

1、TXT

這個(gè)模板有一個(gè)主頁(yè)頁(yè)面以及一個(gè)博客頁(yè)面??煞譃橐涣谢騼闪校憧梢愿鶕?jù)自己的意愿進(jìn)行設(shè)定。側(cè)邊欄的個(gè)數(shù)也可以自己自由設(shè)定。(演示 | 下載

1-TXT

 

2、VERTI

一個(gè)基于HTML5和CSS3的模板??梢苑至?,同時(shí)提供博客和主頁(yè)的模板。(演示 | 下載

Verti

10大創(chuàng)意教你玩轉(zhuǎn)網(wǎng)站背景設(shè)計(jì)

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

如何選擇一種最恰當(dāng)?shù)木W(wǎng)頁(yè)背景是網(wǎng)站設(shè)計(jì)中最常見(jiàn)的問(wèn)題之一。 通常網(wǎng)站設(shè)計(jì)者都已準(zhǔn)備好網(wǎng)站內(nèi)容,而且版面布局大多也基本敲定。但背景要么是令人厭煩,要么是讓人眼花繚亂,讓設(shè)計(jì)者遲遲不能確定。

今天,我們將介紹幾個(gè)實(shí)際網(wǎng)站來(lái)啟發(fā)你的靈感,看看如何設(shè)計(jì)趣味而又令人感興趣的網(wǎng)頁(yè)背景。收藏本文,當(dāng)你再次閱讀時(shí),你定會(huì)被某一個(gè)背景設(shè)計(jì)所迷戀。

1. 素描設(shè)計(jì)

這種設(shè)計(jì)在幾年前就變得比較流行,而且一直持續(xù)到現(xiàn)在。這靈感來(lái)源于在筆記本上的涂鴉亂畫(huà),就像你十幾歲時(shí)在英文課上所作的那樣。每一部分都是些粗糙的素描表現(xiàn),頁(yè)面看似是非常隨意的創(chuàng)意集合,而它們都以不同的旋轉(zhuǎn)方式散布在頁(yè)面各處。NotchStudio就是很好地應(yīng)用了這種創(chuàng)意,并且以非常柔緩的方式表現(xiàn)出來(lái)。

1

即使你本人不善長(zhǎng)繪畫(huà),這種創(chuàng)意也是相當(dāng)容易實(shí)現(xiàn)的,是因?yàn)檫@些涂鴉通常都是些非常基本的設(shè)計(jì)。如果擁有一部Wacom或iPad平板電腦,你就可以相當(dāng)容易地描繪出你自己的圖片或者某種意義上能夠反映此類(lèi)風(fēng)格的書(shū)寫(xiě)文本。還有很多免費(fèi)字體如Pointy,可以幫你不費(fèi)吹灰之力就可實(shí)現(xiàn)讓人贊不絕口的素描。

2. 精細(xì)文稿設(shè)計(jì)風(fēng)格

紙張的質(zhì)地紋理總能激起設(shè)計(jì)者的激情,而且為所有年齡所適用。目前這種創(chuàng)意已不像幾年前那樣風(fēng)靡,但是它還是會(huì)帶給你一種非常微妙的效果:如果你沒(méi)有看到它,那會(huì)讓你非常地想念。

你注意到Beautiful Type所用的紋理設(shè)計(jì),它既沒(méi)有偏離主題也沒(méi)有過(guò)分夸張,而是將一個(gè)原本看起來(lái)就很好的網(wǎng)站更是錦上添花。

低調(diào)內(nèi)涵:20個(gè)優(yōu)雅網(wǎng)頁(yè)背景紋理欣賞

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

合理運(yùn)用素材,利用紋理繪制精美絕倫的網(wǎng)頁(yè)背景。

Read the full post

盡管極簡(jiǎn)設(shè)計(jì)和扁平化不提倡使用紋理。但是設(shè)計(jì)無(wú)絕對(duì),很多情況下,紋理的質(zhì)感,能讓整個(gè)網(wǎng)頁(yè)提升好幾個(gè)層次。

紋理能夠營(yíng)造一種復(fù)古氛圍。本文收錄了20個(gè)網(wǎng)站,全部在紋理運(yùn)用上頗有心得,可以看看他們的設(shè)計(jì)細(xì)節(jié)。

趕緊整理整理你所下載的資源包,動(dòng)手實(shí)驗(yàn)一個(gè)吧!

相關(guān)推薦:
《9月優(yōu)設(shè)筆刷+紋理+字體+界面組件干貨大集合》
《超贊!上千套華麗麗的點(diǎn)、線、面紋理大集合》
《10大創(chuàng)意教你玩轉(zhuǎn)網(wǎng)站背景設(shè)計(jì)》

Orchard Keepers

Orchard Keepers

 

Postable

Postable

網(wǎng)頁(yè)設(shè)計(jì)和用戶(hù)界面設(shè)計(jì)

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

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   bouu.cn  )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,   請(qǐng)點(diǎn)這里 

webdesign&printdesign&interfacedesign

這是兩個(gè)現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域使用頻率非常高的詞。在大多數(shù)情況下,它們被相互替代。這個(gè)領(lǐng)域內(nèi)外的很多人都認(rèn)為這是兩個(gè)意義基本一樣的詞。但是它們真的可以互相混淆么?我并沒(méi)有為一些名詞而去糾結(jié)的習(xí)慣,比方說(shuō)我不會(huì)在“美工”和“設(shè)計(jì)師”之間與別人爭(zhēng)論。但是我想網(wǎng)頁(yè)設(shè)計(jì)用戶(hù)界面設(shè)計(jì)這兩個(gè)詞包含了很多東西,這兩個(gè)詞的對(duì)比可以引申出一些設(shè)計(jì)領(lǐng)域的發(fā)展過(guò)程和思考。

注:這篇網(wǎng)志所指的用戶(hù)界面設(shè)計(jì)在無(wú)特殊說(shuō)明下特

推薦:扁平化界面風(fēng)格的設(shè)計(jì)

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

http://uisdc.qiniudn.com/wp-content/uploads/2013/04/pp.jpg

什么是扁平化設(shè)計(jì)?

簡(jiǎn)單的說(shuō)就是拋棄那些已經(jīng)流行多年的漸變、陰影、高光等擬真視覺(jué)效果,使用一些簡(jiǎn)單的純色塊,從而打造出一種看上去更“平”的界面設(shè)計(jì)。扁平風(fēng)格的一個(gè)優(yōu)勢(shì)就在于它可以更加簡(jiǎn)單直接的將信息和事物的工作方式展示出來(lái),減少認(rèn)知障礙的產(chǎn)生。

下面是列舉一些國(guó)外網(wǎng)站的例子:

Squarespace

新版的Squarespace幾乎完全采用了扁平化的視覺(jué)風(fēng)格,只在一些細(xì)節(jié)當(dāng)中使用了相對(duì)傳統(tǒng)的方式突出了重要的交互元素。試用一下你就會(huì)發(fā)現(xiàn),其實(shí)他們的產(chǎn)品在功能邏輯上還是蠻復(fù)雜的,但這一切都隱含在簡(jiǎn)約直白的界面背后,你真的可以從中隱約感受到其設(shè)計(jì)團(tuán)隊(duì)付出的心血。

Facebook

Facebook是扁平化界面設(shè)計(jì)的絕佳案例。除了幾個(gè)主要的動(dòng)作按鈕當(dāng)中使用了輕微的斜面效果以外,其他界面元素全部采用扁平風(fēng)格。鑒于他們多年來(lái)在這方面一直保持著這樣的特色,至少我們可以說(shuō)這種設(shè)計(jì)風(fēng)格對(duì)于Facebook來(lái)說(shuō)是完全適用的。

 

日歷

鏈接

個(gè)人資料

存檔