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

因此，響應式網(wǎng)頁設計受到了大家的推崇。通過文中的9個免費的響應式網(wǎng)頁設計模板，希望能幫大家了解這種技術以及提高工作效率。

1、TXT

這個模板有一個主頁頁面以及一個博客頁面?？煞譃橐涣谢騼闪?，你可以根據(jù)自己的意愿進行設定。側(cè)邊欄的個數(shù)也可以自己自由設定。（演示 | 下載）

2、VERTI

一個基于HTML5和CSS3的模板。可以分列，同時提供博客和主頁的模板。（演示 | 下載）

如果我說要給你看一個3D flash網(wǎng)站，那么你腦海中想到的第一個關鍵字會是神馬呢？酷！炫！亮瞎？是的，這些似乎已經(jīng)約定俗成成了flash網(wǎng)站的夸獎詞。Flash可以用于web頁面組件的設計，同時也能開發(fā)互聯(lián)網(wǎng)應用。Flash設計可以看作一種藝術形式，由于它具有其驚人的設計及動畫表現(xiàn)。除了坑爹的網(wǎng)速會詬病外，但它本身絕對是讓人無法抗拒的。那么今天就讓我們來欣賞20個引人注目的3D Flash網(wǎng)頁設計。

1. 2Brand:

2. Coca Cola:

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

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

1. 素描設計

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

即使你本人不善長繪畫，這種創(chuàng)意也是相當容易實現(xiàn)的，是因為這些涂鴉通常都是些非?；镜脑O計。如果擁有一部Wacom或iPad平板電腦，你就可以相當容易地描繪出你自己的圖片或者某種意義上能夠反映此類風格的書寫文本。還有很多免費字體如Pointy，可以幫你不費吹灰之力就可實現(xiàn)讓人贊不絕口的素描。

2. 精細文稿設計風格

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

你注意到Beautiful Type所用的紋理設計，它既沒有偏離主題也沒有過分夸張，而是將一個原本看起來就很好的網(wǎng)站更是錦上添花。

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

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

紋理能夠營造一種復古氛圍。本文收錄了20個網(wǎng)站，全部在紋理運用上頗有心得，可以看看他們的設計細節(jié)。

趕緊整理整理你所下載的資源包，動手實驗一個吧！

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

Orchard Keepers

Postable

扁平化設計是指舍棄漸變、陰影、高光等擬物化的視覺效果，從而打造出一種看上去更加平面的界面設計風格。扁平化的網(wǎng)頁設計更適合用于需要同時支持多種屏幕尺寸的響應式設計技術中。今天，我給大家?guī)?5套用于扁平化設計的圖標設計和網(wǎng)頁設計元素，記得分享和推薦??！

Flat Free UI Kit

我要下載

Apple devices – Flat icons (PSD)

我要下載

Mobile Flagships with PSD

近些年來，圖片作為背景填充整個屏幕的設計越來越流行，曾經(jīng)只有時尚潮流網(wǎng)站或者攝影類站點才會特別依賴富有沖擊力的影像，但是現(xiàn)在幾乎任何類型的網(wǎng)站都有可能采用這種大圖片作為背景。不論是印刷精美的雜志、海報還是廣告，大圖片一直以來都能強有力地抓住人們的注意力，因此將類似的方法應用在網(wǎng)站設計中就顯得別有趣味。

以下30個網(wǎng)站均采用了大圖片作為背景的設計風格，希望能給大家?guī)聿灰粯拥脑O計靈感！

Aspect Photography

Studio AIRPORT

Yoke

最初單頁面網(wǎng)站的設計風潮可能是由知名的網(wǎng)站設計師引起的。他們想要以簡潔創(chuàng)意的方式讓自己的作品公之于眾。久而久之，單頁面網(wǎng)站設計在創(chuàng)意上實現(xiàn)了巨大的飛躍。不管是時尚，App，還是動畫，游戲，現(xiàn)在全網(wǎng)都盛行這一趨勢。
單頁面網(wǎng)站設計容易實現(xiàn)，但是如果想讓你的設計成為大熱，一定要確保它適合這種多頁少字的設計模式。在你開始設計之前，最好要記得專注于主要內(nèi)容，其他的煩惱分心的部分通通去掉，就算是你最好的點子，如果不切合主題，也要忍痛割愛。

網(wǎng)站導航是主要設計要素之一。用放大鏡效果創(chuàng)建漩渦型按鍵，使站點引人入勝，同時也告訴用戶如何使用。導航要顯眼易懂這樣用戶才能輕松的瀏覽你的網(wǎng)站。不管是視差漩渦，服帖的動畫還是簡潔的菜單，你都能發(fā)現(xiàn)非?？岬男Ч?/p>

下面我們?yōu)榇蠹艺故?0種極具現(xiàn)代感，將單頁網(wǎng)站設計發(fā)揮到的非常漂亮的例子。盡情的欣賞吧，希望會給你帶來靈感！這些設計讓人難以忘卻，引人矚目的圖像絢麗多彩，內(nèi)容干凈整潔，實乃創(chuàng)意經(jīng)典之作。

Fannabee

Browser Awareness Day

如果你是一名設計師，經(jīng)常都需要ui設計和網(wǎng)站設計，如果有現(xiàn)成的 PSD 網(wǎng)頁設計模板可以使用的話，您可以快速的制作出精美的網(wǎng)站作品。 所以，這篇文章專門整理了20款免費的 PSD 網(wǎng)頁模板設計，你可以免費下載這些網(wǎng)站布局模板進行編輯和修改，也可以通過這些免費的網(wǎng)頁 PSD 模板獲取創(chuàng)作靈感。

Showcase – A Free Website PSD Template

———————————————————————————————————————————————————

Business Website Template Design

———————————————————————————————————————————————————

正確的背景風格可以為整個網(wǎng)站確定基調(diào)。我們搜集了一批使用大幅圖像、明亮顏色或出眾圖案來作為背景的
優(yōu)秀網(wǎng)站，希望從中探尋當下網(wǎng)站的流行設計風格。

什么樣的背景最適合你的網(wǎng)站，這并沒有一定之規(guī)，但確實有一些共同的要素：
互聯(lián)網(wǎng)背景的內(nèi)容應該有目的性。
背景應該與你的品牌風格一致。
背景之上的文字內(nèi)容應該易于閱讀(無論是顏色、反差還是尺寸大小。) 背景的主題在整個網(wǎng)站內(nèi)應該連貫一致。
背景應該能很快下載并且不會讓你的網(wǎng)站變得緩慢甚至卡死。
現(xiàn)在的流行趨勢是什么？

就像服裝和發(fā)型會變，網(wǎng)頁設計的風格也在變。對于背景來說，趨勢的變化尤其突出。
目前，大量的網(wǎng)站在首屏采用了大圖。一些背景是清晰、寫實的（如照片和插圖），而另一些則可能是抽象隱晦的。大尺寸的、虛化或模糊的圖也隨處可見。

@南辰_designer  平面設計和網(wǎng)頁設計是兩個截然不同的領域，這兩個領域有不同的設計需求、設計實踐和設計方法。

例如，在網(wǎng)頁設計中更常使用基于像素或柵格的文件格式，諸如JPG、GIF或PNG。相反，在平面設計領域像logo這樣的圖形可能會用到不同尺寸，因此使用最多的格式則是EPS和AI這樣的矢量格式。然而，用于網(wǎng)頁的矢量格式，如SVG或HTML5 Canvas則不能廣泛應用，也不會被所有瀏覽器所支持。

另外，用于web端的圖形有基于它們自身的相關處理方式。其中一條便是你要時刻注意文件的大小，因為你需要使你的網(wǎng)頁加載越快越好。作為一名網(wǎng)頁設計師，你應當盡量減少HTTP對圖像的請求次數(shù)——無論通過減少圖片的使用數(shù)量還是將它們整合成CSS sprite——以及確保你選擇了正確的圖像格式，使其在圖像大小和質(zhì)量間得以平衡。

Photoshop是平面設計師和網(wǎng)頁設計師使用的行業(yè)標準工具。以下是你在創(chuàng)建web端使用圖像時的一些簡單的小技巧。

1. 將圖片保存成Web所用格式

在網(wǎng)頁設計中，你必須確保你的圖像大小越小越好。當然，當你想要圖片完好顯示時可以拋棄這條原則。
在Photoshop中創(chuàng)建圖像的完美方法便是平衡質(zhì)量與文件大小。
網(wǎng)頁設計師經(jīng)常犯的一個錯誤便是使用“另存為”命令，而不是使用“存儲為Web所用格式”。

“存儲為Web所用格式”可以將圖像保存成基于網(wǎng)頁設計優(yōu)化過的格式，包括圖像質(zhì)量、圖像分辨率、瀏覽器兼容性和文件大小。

這一命令會有一個對話框，你可以用來微調(diào)你的圖像。當你調(diào)整圖像的設置時，它會顯示出文件的大小和圖像的質(zhì)量。