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

2013-12-16    藍藍設計的小編

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

來源:http://www.uisdc.com/100-things-you-should-know-about-design

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

如何選擇一種最恰當?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)出來。

1

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

2. 精細文稿設計風格

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

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

2

查閱LostandTaken網(wǎng)站,你可以找到海量的紋理資源可以應用到你的設計中。

3. 漸變設計

很多設計者認為漸變已經(jīng)因被過度使用而變得不再那么讓人著迷。我個人認為它們很容易被濫用,而且執(zhí)行的不恰當,但是我們決不會看到全是純色一統(tǒng)天下沒有漸變的局面。因為漸變反映了現(xiàn)實(自然世界我們從未看到?jīng)]有任何摻雜的純色),所以為了讓他們的作品感覺起來更真實,設計者還會繼續(xù)應用漸變設計。

漸變設計通常是用來保持事物樸素的最好方法。不必混入瘋狂的顏色,也無須制造不明快的變調(diào),只需選擇一個簡單的漸變。我的最愛之一就是從老灰到黑灰的漸變。它純凈,易于實現(xiàn)而且表現(xiàn)出真正的優(yōu)雅。你可以從如下的設計中體會到這一點。

8699811_3

 

4. 雙色調(diào)對比設計

力求頁面獨特雅致而大膽的另一個選擇就是頁面中加入一個生硬的變色設計。大多是水平方向的變色,但如果采用垂直設計也會給人獨特和耀眼的感覺。

這種創(chuàng)意是要利用對比的魔力。我們的眼睛會非常自然地被對比色所吸引而不能自拔。其關(guān)鍵在于要確保兩種顏色明顯差異。不要選擇任何抵觸或沖撞色調(diào),而要嘗試純黑與一種淺色的對比。

4

5. 全屏圖片設計

我提及這種創(chuàng)意,你或許會嗤之以鼻,但我仍會盡我所能繼續(xù)給你講解掌握這種創(chuàng)意設計的技巧:偉大的圖片成就偉大的設計。它簡潔而樸素。任何人都偏愛美好的圖片,因此將它加入你的設計中,就會使你的網(wǎng)站得到每個人的垂青。很簡單,是吧?

圖片賦予了真?zhèn)€網(wǎng)站以靈感。你可以從一幅畫中捕捉到顏色、紋理甚至排印的靈感,進而創(chuàng)造一種非常美好的統(tǒng)一連貫的主題。

注意體會下面網(wǎng)站設計中的暗色自然元素,它給人一種使用了很多照片于主頁滑行的外表和感覺。

5

6. 紋理搭配顏色漸變設計

我非常喜歡最近時常看到的網(wǎng)站的原因是在于頁面頂部應用了燈光效果或融入了某種類似于一點點紋理,讓頁面快速漸變到純色的創(chuàng)意設計。

6

過多紋理會極易降低網(wǎng)頁文本的可讀性,還會增加視覺噪音將網(wǎng)頁變?yōu)橐环N完全不同的頁面。而把紋理隱含置入則會讓你額外收獲稱贊的眼神,還不會犧牲網(wǎng)頁整體的美感與可讀性。

太多時候,我們是利用CSS背景圖片重置,讓紋理充斥整個背景。其實我們可以嘗試讓紋理選擇性地出現(xiàn),那樣你會立刻發(fā)現(xiàn)你的設計看起來要好地多。

7. 仰望設計

天空對于人類是永恒不變的幻想空間。云彩、太陽光束、星星和月亮,所有這些元素都會賦予人們一種魔法讓他們目不轉(zhuǎn)睛地盯著你。

當你要把這些元素融入你的背景的時候要特別小心,因為那會特別容易產(chǎn)生一些難看或陳腐的效果。要掌握這種創(chuàng)意技巧,設計者需要對美學有很好的感覺,懂得如何表達”空間”的概念,千萬不要把它變成一種類似于老版Windows屏保的懷舊效果。

下面的網(wǎng)站選用優(yōu)美的天空作為突出的網(wǎng)頁背景,是一個非常好的例子。設計者利用復古色調(diào)和微細的斜線紋理,渲染出了非常漂亮的星際空間。這是在你應用天空在你的網(wǎng)頁背景之前最好要特別關(guān)注的。

8699811_7

 

8. 多色菱形圖案設計

我能聽到你在說:”菱形圖案?你在開玩笑?” 在你在評語欄扔磚頭之前,我們必須要承認菱形圖案確實能夠產(chǎn)生一些特別有魅力的效果。但是,就像我們先前說的一樣,這種創(chuàng)意不是任何人都能做的,只有那些懂得如何利用狂熱模式的有經(jīng)驗的老手才能熟練掌握而不至于造成難看的效果。

下面是應用這種創(chuàng)意效果非常好的一個實例。改良后的菱形圖案格調(diào)的應用并沒有特別出格地吸引你的注意力,而是給頁面帶來了非常好的華美情調(diào)。

8

9. 抽象和狂熱設計

是否你已經(jīng)厭倦了我的關(guān)于微妙設計技巧的”謹慎”或”放松”的建議?那么這個提示就是給你的。有時候,最好的背景可能就是一些對頁面內(nèi)容無關(guān)緊要地狂熱和大膽的表現(xiàn),它們只是為了吸引你的注意。

一些網(wǎng)站都非常好地實現(xiàn)了水彩畫的效果,這是一種非常流行的技巧,你能夠發(fā)現(xiàn)非常多地網(wǎng)絡資源可以模仿。

試用Flickr搜索”abstract watercolor” (抽象水彩畫)看看你會發(fā)現(xiàn)什么。那里有海量的廉價圖片,足夠幫助讓你的網(wǎng)頁獲得更多人的關(guān)注。

9

10. 無須避免純色設計

以上所有建議都是要滿足你成就偉大網(wǎng)站背景創(chuàng)意的需求。但是,對于一個設計者必須要明白,純色背景并沒有任何不對的地方。它是我的特別喜愛的眾多設計中的關(guān)鍵元素。學會如何恰當?shù)貞眉兩珓?chuàng)意是成為一個設計者的重要組成部分。

瀏覽一下Piknik,那里提供了很多免費工具,你最好一定要加到你的設計資源庫里。這個網(wǎng)站能讓你對屏幕顏色的預覽和選擇變得非常簡單。你要做的只是移動鼠標,觀察背景的顏色變化。

10

 

總結(jié)

背景的選擇決定著你整個網(wǎng)站的基調(diào)和個性。就在前兩天,我的一個同行有意將他的網(wǎng)站置入我們的宣傳目錄,但是他們只是選擇了一個特別差的背景圖片。這個網(wǎng)站的設計和布局非常好,我就是不能容忍那個難看的背景。之后,他接受了我所指出的問題,并把背景變換成了一種更簡潔的風格,直接把網(wǎng)站提高到了一個全新的水平。

就像在開場白所說的那樣,下一次當你糾結(jié)于設計常規(guī)而不能選擇合適網(wǎng)頁背景的時候,再來看一下我們這篇文章,嘗試其中的某種創(chuàng)意。總有一天,你也會抵達完美網(wǎng)站的彼岸。

原文地址:article.yeeyan.org

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://www.bouu.cn

存檔