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

視頻的進化

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

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

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

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

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

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

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

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

視頻元素有哪些用處?

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

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

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

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

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

Lettering.js

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

 FitText.js

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

響應(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″.

響應(yīng)式設(shè)計現(xiàn)在已經(jīng)成為網(wǎng)頁設(shè)計師學(xué)習(xí)的焦點。優(yōu)設(shè)哥發(fā)現(xiàn)群內(nèi)有很多相關(guān)的討論了，這說明我們平時接觸該類案例越來越多。
你會漸漸發(fā)現(xiàn)，我們身邊越來越多的企業(yè)和客戶關(guān)注到響應(yīng)式網(wǎng)站，作為勤奮的設(shè)計師，我們怎么能不對它進行了解呢？

響應(yīng)式網(wǎng)頁設(shè)計考慮到多平臺、多種屏幕尺寸的情況，能夠優(yōu)化多種設(shè)備的網(wǎng)絡(luò)瀏覽體驗。
當(dāng)你不知道用戶使用什么設(shè)備，不知道用戶的屏幕尺寸時，若想達(dá)到較優(yōu)布局，可以采用響應(yīng)式設(shè)計。
在進行響應(yīng)式設(shè)計時，要專門針對內(nèi)容進行設(shè)計，優(yōu)先考慮在不同環(huán)境下內(nèi)容的適應(yīng)性。

相關(guān)推薦：
《年終特典！當(dāng)下最熱門的網(wǎng)頁設(shè)計趨勢總結(jié)》
《學(xué)點新技能！玩轉(zhuǎn)響應(yīng)式圖標(biāo)設(shè)計》
《經(jīng)驗分享：響應(yīng)式排版中的基礎(chǔ)知識》

響應(yīng)式網(wǎng)頁設(shè)計

過去，上網(wǎng)需要一臺電腦，一個貓。
現(xiàn)在呢，手機、平板、電視都可以上網(wǎng)。

Responsive Web Design, 由Ethan Marcotte編寫， A Book Apart出版，對響應(yīng)式設(shè)計的原則進行了詳盡的闡述。

多種設(shè)備均能支持聯(lián)網(wǎng)，有利有弊：

好消息是，我們可以隨時隨地登入互聯(lián)網(wǎng)。
壞消息是，設(shè)計師的工作量成倍的增加了，而且用戶變得越來越挑剔，越來越不耐心。
在這種大環(huán)境下，響應(yīng)式設(shè)計變成了主流。

響應(yīng)式設(shè)計所帶來的挑戰(zhàn)

進行響應(yīng)式設(shè)計，挑戰(zhàn)有很多。
首先，設(shè)備種類、屏幕尺寸多種多樣。小、中、大各種各樣。其次，倘若你是開發(fā)者，你會明白從技術(shù)角度上，響應(yīng)式設(shè)計實現(xiàn)起來也不容易。

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

HappyTables

Tiny Factory

Do

　　你是否正在或曾經(jīng)面臨著下面類似的問題：

　　大黑：icon基本上都是長這樣子的啊(如語音icon通常就是麥克風(fēng))!!還能畫成什么樣!!

　　又要寫文案了，想來想去，除了一開始想到的那幾句文案，就再沒有想到其他的。

　　頭腦風(fēng)暴時，別人總能很快地寫出一堆東西，但自己卻憋不出一個點子來。

本文介紹的案例均使用了的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

Portfolio

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

傳統(tǒng)紙媒衰落了？不要緊，電子雜志正當(dāng)時，所以說，學(xué)習(xí)雜志封面設(shè)計技巧并不過時。
雜志封面相對來說空間充?！?到11英尺，你需要在這樣大小的空間里面合理排布文字，安置照片/插畫。

你的目標(biāo)只有一個：快速向讀者揭示本期雜志內(nèi)容
這里呢，我總結(jié)了設(shè)計師們都該知道的8種雜志封面的設(shè)計方法。

相關(guān)推薦閱讀：
《2013年萬圣節(jié)優(yōu)秀廣告設(shè)計評析》
《推薦！優(yōu)秀書籍封面字體設(shè)計》
《怎么做海報？環(huán)法自行車賽100周年海報設(shè)計案例解析》

文字排布：深色字配亮色背景，亮色字配深色背景

來自Studiomates工作室的Frank Chimero是一名知名的平面設(shè)計師，一名作家，《設(shè)計的形狀》一書的作者，他的客戶包括《紐約時報》、《連線雜志》、Nike、Facebook、星巴克、時代華納、《商務(wù)周刊》等。有一位匿名者問Frank能否給平面設(shè)計專業(yè)的學(xué)生提點建議，于是他在自己的博客上發(fā)表了自己對平面設(shè)計的一些看法。雖然是寫給平面設(shè)計專業(yè)學(xué)生的，里面提到的想法同樣適用于其他設(shè)計領(lǐng)域的學(xué)生和從業(yè)者。以下為摘要：

設(shè)計不等于為客戶效勞。

紫色在設(shè)計中很難處理。老師在課堂上教給你的不是福音。大部分決策都是模糊不清的，所有東西都在正確性與適合度之間徘徊。

當(dāng)你對別人說話或者聽別人說話時，看著對方的眼睛。最好的老師把課堂當(dāng)做車間，最壞的老師把課堂當(dāng)做課堂（照本宣科）。

如果你畫得沒有別人好，或者軟件沒別人用的溜，或者沒有錢買辦公用品，或者沒有別人使用的工具，那么通過多動腦思考打敗他們。思考是免費的，你只需投入時間和換位思考。

最好的溝通者都擅長送禮物給別人。

床頭常備兩本書：一本小說，一本非小說。

只要你是設(shè)計師，你就肯定知道Dribbble。這是一個供設(shè)計師展示作品、同行交流、尋找靈感的場所。

平面設(shè)計師、插畫設(shè)計師、字體設(shè)計師、圖標(biāo)設(shè)計師、網(wǎng)頁設(shè)計師、Logo設(shè)計師都經(jīng)常瀏覽這個網(wǎng)站。

除了這個供設(shè)計師交流的網(wǎng)站，還有衍生出的Dribbble聚會、博客等等。

推薦閱讀：
《拜師學(xué)藝第二彈！Dribbble上50位值得學(xué)習(xí)的設(shè)計師》

Dribbble學(xué)前班

Dribbble的術(shù)語大多來自籃球：

發(fā)布的新作品叫做Shots(投籃)，新人處女作叫做debut(初登場)，收集其他成員的作品并分類的合集叫做bucket（球桶），將dribbble成員歸類收藏叫做lists。

如果一幅作品能夠被足夠多的成員like（喜愛），那么很可能會上Popluar（流行榜）。

如果設(shè)計師想要對其他設(shè)計師的作品致敬或者修改，那么這種行為叫做rebound（打籃板）。如果有很多人響應(yīng)你的作品，那么你的作品和響應(yīng)者的作品會列入 playoffs（季后賽）。

Dribbble上的圖像尺寸限制在400 x 300px / 800 x 600px 。但是允許添加附件（比方說PSD文件）

如果電腦是retina mbp 會自動顯示800×600的圖，而上傳800×600的圖會標(biāo)記為@2X。

設(shè)計師每個月最多能上傳24件作品，這樣能夠防止垃圾作品，讓設(shè)計師精選作品上傳。

想要在這個站點上上傳作品，需要得到老用戶的邀請才可以。這引發(fā)了一些爭議。

如果你逛Dribbble只是為了獲取靈感，那么情況就有所不同了。首先，你需要注冊賬號，關(guān)注喜歡的設(shè)計師，這樣每次登陸就能知道他們作品的更新情況。
當(dāng)然，不注冊也能觀看作品、也能搜索關(guān)鍵詞。
如果你想在Dribbble上雇人，可以根據(jù)設(shè)計師的粉絲數(shù)、所在地、專長來選擇設(shè)計師。

Dribbble簡史

Dan Cedarholm & Rich Thornett于2009年開始了Dribbble的項目。在2010年開始運營，比當(dāng)時大多數(shù)的設(shè)計論壇、社交網(wǎng)站更加的熱鬧，更加的自由。
剛開始的時候，Dribbble只能被邀請加入，你必須讓老用戶給你一個邀請碼。

后來，Dribbble加入了初登場功能。這個模塊突出了那些新用戶的作品，以緩解一些知名設(shè)計師“壟斷主頁”的現(xiàn)象。
2011年，Dribbble添加了工作列表模塊，為用人公司提供了簡單的招人方式。
最近Dribbble添加了團隊賬號。讓團隊能夠有組織的在Dribbble上分享作品。