首頁(yè)

《前沿視點(diǎn)》——2013年最值得關(guān)注的網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)

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

 在過(guò)去的幾年里,我們看到建設(shè)網(wǎng)站的方式發(fā)生了巨大的變化。隨著瀏覽器對(duì) HTML5/CSS3 Web 標(biāo)準(zhǔn)的支持的不斷增強(qiáng),越來(lái)越多的用戶已經(jīng)轉(zhuǎn)移到移動(dòng)平臺(tái)。在 設(shè)計(jì)界,有很多獨(dú)特的想法,每隔一段時(shí)間就發(fā)生變化!

   在這篇文章中,我想介紹一些我們已經(jīng)看到正不斷變化的趨勢(shì)。其中, 許多設(shè)計(jì)理念已經(jīng)存在了很長(zhǎng)一段時(shí)間。 但是,我認(rèn)為在2013年里,這些獨(dú)特的想法將會(huì)更加的蓬勃發(fā)展。 網(wǎng)上提供了很多可以免費(fèi)下載的開(kāi)源項(xiàng)目和用戶界面 ,這樣設(shè)計(jì)人員可以專注于自己的領(lǐng)域。

移動(dòng)優(yōu)先的設(shè)計(jì)

  響應(yīng)設(shè)計(jì)的理念并不僅僅只網(wǎng)站能夠縮放到更小的尺寸, 設(shè)計(jì)師的意識(shí)形態(tài)也應(yīng)該發(fā)生改變 。這里向大家推薦  DesignShack  上的一篇文章,其中談到了這個(gè)想法。

  往往更容易規(guī)劃最重要的界面元素,讓他們排布成為一個(gè)移動(dòng)的布局。 如果這些元素不合適這樣,你將不得不刪除一些。 同時(shí),你可以規(guī)劃布局將如何應(yīng)對(duì)的窗口變大。 您將有空間包含一個(gè)側(cè)邊欄,也可能是2個(gè),以及許多其它的頁(yè)面元素。

 

談?wù)剺?gòu)建單頁(yè)布局網(wǎng)站的創(chuàng)意技術(shù)——附優(yōu)秀案例

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

可能是因?yàn)閷?shí)現(xiàn)這種效果比較復(fù)雜,視差滾動(dòng)的概念對(duì)于很多設(shè)計(jì)師來(lái)說(shuō)仍然是相當(dāng)陌生。我看到過(guò)眾多優(yōu)秀的例子,例如像 Pixel Stadium 這樣的杰出代表,這個(gè)網(wǎng)站易于瀏覽,紋理也是讓人眼花繚亂。

 

像素體育場(chǎng)網(wǎng)站的布局設(shè)計(jì)界面

 

  當(dāng)你向下滾動(dòng)頁(yè)面的時(shí)候,頂部導(dǎo)航欄會(huì)出現(xiàn)并鎖定到窗口, 這使得用戶可以快速跳過(guò)或轉(zhuǎn)換頁(yè)面到不同的部分。 布局是完全響應(yīng)式設(shè)計(jì)的,會(huì)自適應(yīng)瀏覽器窗口的寬度! 這一切都說(shuō)明,單頁(yè)的布局可能會(huì)非常好看,也很靈活。

20套華麗的應(yīng)用程序圖標(biāo),帶給你不一樣的視覺(jué)體驗(yàn)

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

在這篇文章中,我已經(jīng)收集了20個(gè)華麗的圖標(biāo)集,適用于幾乎任何類型的設(shè)計(jì)。這些圖標(biāo)有一個(gè)干凈的和描述性的外觀,同時(shí)遵循良好的設(shè)計(jì)原則,相信你會(huì)喜歡。

Delicious Berries

17. icons

33 Free Social Media Icons

4. icons

怎樣打造完美的設(shè)計(jì)作品集

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

 

如今,創(chuàng)意行業(yè)掀起的風(fēng)浪比以往任何時(shí)期都更加猛烈,其中的競(jìng)爭(zhēng)也越發(fā)殘酷,作為設(shè)計(jì)師,想要脫穎而出已經(jīng)是很困難的事情了。如果你還沒(méi)有自己的設(shè)計(jì)作品集,那么情況對(duì)你來(lái)說(shuō)也許會(huì)更加嚴(yán)峻。

從最基礎(chǔ)的層面上講,設(shè)計(jì)作品集就是你自己的廣告,它可以告訴世界:“嘿,我在這!看看我能做的東西叭!” 除此之外,作品集也是你的名片和畫(huà)廊,是你展示能力、技巧、項(xiàng)目經(jīng)驗(yàn)的地方;同時(shí),你還可以通過(guò)它來(lái)表達(dá)接下來(lái)打算做什么事情。對(duì)我(英文原文作者)個(gè)人來(lái)說(shuō),作品集還決定著人們是否會(huì)給我一份工作offer,或是找我合作項(xiàng)目。

作品集有著不同的展現(xiàn)形式,包括在線和印刷冊(cè)等等,它們所具有的一些精髓是共通的;本文中,我們將把注意力集中在在線作品集這個(gè)方面。

作品展示

與我們所熟悉的其他類型的網(wǎng)站產(chǎn)品相似,在線作品集也需要具有良好的信息結(jié)構(gòu)和導(dǎo)航模式,同時(shí)在可訪問(wèn)性、易讀性等方面具有上乘表現(xiàn)。你要盡最大努力讓你的作品集在被目標(biāo)用戶打開(kāi)的時(shí)候可以完美的呈現(xiàn)你要表達(dá)的信息。

Scott Belsky是作品集制作工具Behance的CEO,在他看來(lái),無(wú)論是公司項(xiàng)目還是個(gè)人項(xiàng)目,只要它們能夠展示你在設(shè)計(jì)方面的才華、風(fēng)格、熱情,那么就可以收錄到作品集當(dāng)中。對(duì)于每一個(gè)你打算展示出來(lái)的項(xiàng)目,要確保訪問(wèn)者可以首先了解到它的背景概況及設(shè)計(jì)目標(biāo),然后再通過(guò)具體的圖片來(lái)展示你在不同階段的產(chǎn)出;這里所說(shuō)的圖片既包括作品全局,也包括重要部分的局部放大。

關(guān)于作品圖片的尺寸,Scott建議不要小于400像素(寬度)。有些設(shè)計(jì)師喜歡將作品圖片縮到很小,或是只展示其中的某些局部元素——這些做法都無(wú)法全面的展現(xiàn)你自己。另外,在作品全景及細(xì)節(jié)要素這兩方面都做到清晰的呈現(xiàn),這也是設(shè)計(jì)師自信心的體現(xiàn)。

Sacha Greif是一名UI設(shè)計(jì)師,同時(shí)也是自由設(shè)計(jì)師工作信息公告板Folyo的創(chuàng)始人,他每天都能接觸到大量的作品集。在他看來(lái),案例質(zhì)量的重要性確實(shí)要高于數(shù)量,不過(guò)至少5到6個(gè)項(xiàng)目展示也是需要保證的。如果你是一名畢業(yè)生或是相對(duì)年輕的設(shè)計(jì)師,無(wú)法拿出一定數(shù)量的設(shè)計(jì)案例,那么也不用太焦慮,最首要的是針對(duì)你手頭已有的案例盡量詳細(xì)的呈現(xiàn)其中的細(xì)節(jié);當(dāng)然,個(gè)人項(xiàng)目也可以作為補(bǔ)充。此外,你還可以將一些學(xué)習(xí)和探索性質(zhì)的作品囊括進(jìn)來(lái),例如幫Facebook重新設(shè)計(jì)一套頁(yè)面——只要你不會(huì)宣稱這是扎克伯格授權(quán)你做的就好。

在面試過(guò)程中,我們通常會(huì)根據(jù)目標(biāo)職位的實(shí)際情況來(lái)表達(dá)自己接下來(lái)的目標(biāo)及規(guī)劃;對(duì)于設(shè)計(jì)作品集來(lái)說(shuō),也是一樣的道理。如果你心里確實(shí)已經(jīng)有了下一步打算,那么最好在作品集當(dāng)中著重突出那些與你的目標(biāo)最為相關(guān)的內(nèi)容。

文字內(nèi)容

“視覺(jué)”固然是設(shè)計(jì)師最為熟悉的信息媒介,但對(duì)于作品集來(lái)說(shuō),文字內(nèi)容也是不可或缺的。優(yōu)秀的作品集可以使用很少的文字來(lái)的描述出項(xiàng)目相關(guān)信息;而且在很多時(shí)候,作品截圖難以表達(dá)出的東西卻可以經(jīng)由文字來(lái)展現(xiàn)出來(lái),例如你的設(shè)計(jì)思路、解決方案的構(gòu)思過(guò)程、溝通協(xié)作能力等等。

很多設(shè)計(jì)師會(huì)在作品集的開(kāi)頭使用一段簡(jiǎn)短而直白的文字對(duì)自己進(jìn)行介紹。這是一種很有效率的方式,不過(guò)要注意避免陳詞濫調(diào);我們能看到的很多個(gè)人簡(jiǎn)介在實(shí)質(zhì)上等同于“我是一名工作勤奮、值得信賴的員工”。

雖說(shuō)是簡(jiǎn)介,也要在有限的篇幅中盡量做到具有針對(duì)性。例如Ethical Studio 簡(jiǎn)單而有效的將他們自己描述為“為非ZF組織、慈善團(tuán)體創(chuàng)建網(wǎng)站”的工作室;又譬如設(shè)計(jì)師Matt Dempsey 是這樣介紹自己的:“我為充滿激情與想法的小創(chuàng)業(yè)團(tuán)隊(duì)打造體驗(yàn)精良、符合用戶直覺(jué)的漂亮界面。” 通過(guò)這樣的文案,你不僅可以立刻了解到他是做什么的,而且對(duì)他所承接業(yè)務(wù)的方向也有了清晰的認(rèn)知。

點(diǎn)擊查看原圖

打造你的設(shè)計(jì)案例作品集

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

最近搜羅了一些portfolio(設(shè)計(jì)作品集)方面的資源及方法文章,放著也是放著,不如匯總索引一下,有興趣有需求的朋友可以前去圍觀。至于需求是什么,大家也心知肚明唄;對(duì)于設(shè)計(jì)師來(lái)說(shuō),干巴巴的文字簡(jiǎn)歷顯然是不夠的,看看國(guó)外同行們是怎樣打造自己的作品集還有個(gè)人案例展示站點(diǎn)的,興許可以找到一些思路和啟發(fā)。

另外,最近也向一些前輩們請(qǐng)教了這方面的實(shí)踐經(jīng)驗(yàn),得到了不少金石良言;接下來(lái)花一兩期的篇幅專門(mén)做做這方面的文章也是有可能的叭。不多說(shuō)了,把目前看到的優(yōu)秀資源陳列在下面:

60個(gè)簡(jiǎn)潔的作品集設(shè)計(jì)匯總

點(diǎn)擊查看原圖

設(shè)計(jì)元素的應(yīng)用條件

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

討論方案時(shí),設(shè)計(jì)師常會(huì)提議,某產(chǎn)品的某個(gè)元素(如按鈕或功能)設(shè)計(jì)的挺好,設(shè)計(jì)存在很多可能性,發(fā)散思維時(shí)不論對(duì)錯(cuò)。但實(shí)際應(yīng)用時(shí),要考慮元素的應(yīng)用條件,切不可隨大流,盲目地照搬套用。選擇最合適的設(shè)計(jì),而不是最流行最酷的,圍繞品牌特性做設(shè)計(jì),讓產(chǎn)品形成與眾不同的氣質(zhì)。

比如錯(cuò)誤的提議:現(xiàn)在流行Metro風(fēng)格,我們也這樣設(shè)計(jì)吧。

較好的提議是:Metro風(fēng)格適合內(nèi)容型應(yīng)用,弱化按鈕的UI元素,突出內(nèi)容本身,而我們是工具型應(yīng)用,主界面需要突出某個(gè)按鈕或引導(dǎo)用戶執(zhí)行某項(xiàng)操作。

側(cè)邊欄

 


 


 

那些幫助你成為優(yōu)秀前端工程師的講座——《JavaScript篇》

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

《重新思考應(yīng)用的架構(gòu)》

Re-Imagining the Browser With AngularJS , Igor Minar

Igor Minar 和大家分享先進(jìn)的前端開(kāi)發(fā)框架——AngularJS。

 

《項(xiàng)目的國(guó)際化問(wèn)題》

Entschuldigen you, parlez vouz JavaScript , Sebastian Golasch (Video )

Sebastian Golasch 向大家介紹如何處理 JavaScript 項(xiàng)目中的國(guó)際化問(wèn)題。

Screenshot

日歷

鏈接

個(gè)人資料

存檔