網(wǎng)頁(yè)海報設計的技巧 ?
有趣的海報用的是黑色的背景而不是純白色,如果你要用黑色的背景,那么嘗試使用金色甚至是白色的油墨來(lái)達到較好的視覺(jué)效果。下面介紹網(wǎng)頁(yè)海報設計的技巧,希望為大家帶來(lái)幫助。 ?
1.學(xué)會(huì )使用黑色背景 ?
我們經(jīng)常傾向于使用白色背景的海報。然而一些有趣的海報恰恰用的是黑色的背景而不是純白色。如果你要用黑色的背景,那么嘗試使用金色甚至是白色的油墨來(lái)達到較好的視覺(jué)效果。黑色背景的使用,襯托出“殺手系列“的陰暗感,懸疑敘事的風(fēng)格通過(guò)暗黑系的海報設計,增強神秘感,這樣的海報設計更容易激發(fā)受眾的求知欲。 ?
2. 使用精美的圖片 ?
一張更有張力的好照片,往往更有視覺(jué)沖擊力,視覺(jué)化的展現方式更容易印象深刻。避免大量的設計元素和繁雜的文字內容,可以更好地展示照片的直觀(guān)化,當然前提是,你的照片足夠有味道。 ?
如何將演唱會(huì )主題具象化的表現出來(lái),照片是*的表達方式,一張照片往往可以概括出很多值得思索的意味。加上音樂(lè )本身是一種抽象藝術(shù),通過(guò)照片傳達一種音樂(lè )理念,是不錯的選擇。
?
3.使用多元化的字體 ?
專(zhuān)業(yè)的設計并不意味著(zhù)我們就必須用干凈整潔的字體。用一些有特色的字體可以設計出讓人眼前一亮、個(gè)性突出的海報,就像上面這個(gè)海報這樣。音樂(lè )節向來(lái)是一個(gè)創(chuàng )意滿(mǎn)滿(mǎn)的活動(dòng)形式,因此,在海報設計上嘗試進(jìn)行各種各樣的文案樣式,充分發(fā)揮一些涂鴉形式的字母元素設計,其實(shí)是一種很切題的設計思路。 ?
4. 使用網(wǎng)格 ?
使用網(wǎng)格線(xiàn)可以幫你設計出專(zhuān)業(yè)又整潔的作品。網(wǎng)格線(xiàn)可以有效的統轄、協(xié)調整個(gè)作品,提高專(zhuān)業(yè)化的程度。字體的配合突出重點(diǎn)信息,網(wǎng)格的運用使得海報不會(huì )由于信息太多而過(guò)于凌亂,網(wǎng)格與文字的搭配加上簡(jiǎn)單的設計感,整個(gè)海報信息傳達到位而又不拖沓。對于文字信息較多的海報而言,有效使用空間布局,讓所有信息都可以清晰呈現,同時(shí),網(wǎng)格的空間規劃,又保證畫(huà)面的簡(jiǎn)潔。 ?
5. 使用黑白色照片 ?
不知道要在你的海報上用哪張圖片?那就把圖片做成黑白的吧!黑白照片很容易營(yíng)造出一種優(yōu)雅的感覺(jué)。在剪切你所使用的圖像時(shí),你需要慎重考慮一下。確保你的受眾能夠充分接收到你要傳遞的信息。 ?
如何讓你的網(wǎng)頁(yè)設計的有層次感 ?
一、網(wǎng)頁(yè)設計的層次 ?
網(wǎng)頁(yè)設計畫(huà)面的層次感,說(shuō)白了其實(shí)就是畫(huà)面內容的主次之分,有空間感和距離感以及有虛實(shí)之分并且光影層次清晰,這樣的畫(huà)面才起來(lái)才豐富真實(shí),而且在通過(guò)一些特殊的處理手法之后,網(wǎng)頁(yè)設計可以進(jìn)一步拉開(kāi)畫(huà)面中不同元素的層次,使得主題更加突出。 ?
二、網(wǎng)頁(yè)設計的遠近關(guān)系 ?
網(wǎng)頁(yè)設計由近及遠,畫(huà)面的縱深感強,遠近景的層次明顯而且畫(huà)面感有很強。運用到網(wǎng)頁(yè)設計當中如下:遠近層次清晰的畫(huà)面再搭配上網(wǎng)頁(yè)中的內容,可以使網(wǎng)頁(yè)頁(yè)面看起來(lái)更加的透氣,在瀏覽內容的同時(shí),也能夠通過(guò)場(chǎng)景來(lái)傳遞出很強的代入感。 ?
三、網(wǎng)頁(yè)設計的虛實(shí)關(guān)系 ?
網(wǎng)頁(yè)設計依次由實(shí)到虛變化,既滿(mǎn)足了正常情況下近實(shí)遠虛的道理,又讓層次感顯得很強;近處的實(shí)景和遠處的虛景想必大家都是可以理解的,但為什么離我們最近的物體也是虛的?前景可以去做模糊處理的,甚至有的時(shí)候模糊度要比遠處場(chǎng)景的模糊度還要明顯。 ?
網(wǎng)頁(yè)設計時(shí)把握好畫(huà)面中的虛實(shí)層次,結合網(wǎng)頁(yè)的內容,可以使網(wǎng)頁(yè)頁(yè)面看起來(lái)更加接近真實(shí)場(chǎng)景,視覺(jué)體驗上來(lái)說(shuō)也更加逼真。 ?
設計網(wǎng)頁(yè)頁(yè)腳的實(shí)用技巧 ?
1、保持設計簡(jiǎn)單 ?
是的,這是大部分設計項目的關(guān)鍵之一,但是這點(diǎn)也是重中之重,值得現在就說(shuō)。在需要處理大量需要放在頁(yè)腳的信息的時(shí)候,簡(jiǎn)單設計就顯得尤為重要。堅持清理元素,保證充足的空間并有目的地組織信息。盡量避免混亂,思考哪些元素需要出現在你的頁(yè)腳中,以及它們?yōu)槭裁匆谀抢?。?yè)腳的尺寸一般都跟你網(wǎng)站頁(yè)面數和信息量有關(guān)。 ?
Agra-Culture在頁(yè)腳中使用顏色、圖標和文字,不過(guò)它很簡(jiǎn)單,而且流量很大。每個(gè)鏈接都易于點(diǎn)擊,綠色背景中農場(chǎng)圖像的微妙細節是個(gè)很好的嘗試。 ?
2、鏈接到你的信息 ?
網(wǎng)站頁(yè)腳中最重要的兩個(gè)鏈接分別是“關(guān)于我們”和“聯(lián)系我們”。用戶(hù)想要知道你是誰(shuí),而且想要了解你的公司和品牌。讓用戶(hù)更容易找到這些信息。還有很多人想知道你的團隊成員以及他們的聯(lián)系方式(這是一個(gè)重要的工具。很多人弄丟了他們的名片,但會(huì )回到你的網(wǎng)站去尋找聯(lián)系人信息) ?
Heckford包含了很多關(guān)于公司、社交網(wǎng)站以及他們工作信息的鏈接。 ?
3、包含基本聯(lián)系信息 ?
盡管你應該鏈接到一個(gè)完整的“聯(lián)系我們”的頁(yè)面里,在頁(yè)腳中展示相關(guān)聯(lián)系人信息也不壞。寫(xiě)上主要的電話(huà)號碼、郵箱和真實(shí)地址。(如果能夠在點(diǎn)擊時(shí)自動(dòng)撥號,自動(dòng)發(fā)送郵件或者展示地圖,那就是加分了) ?
Root Studio做了一個(gè)幾乎違背你認為應該是“頁(yè)腳”的一切的頁(yè)腳,不過(guò)它文字很大,而且被壓縮為一個(gè)非常簡(jiǎn)單的聯(lián)系人信息列表。(這是一個(gè)具有影響力的設計理念,方便了那些想談項目合作的用戶(hù)) ?
4、組織頁(yè)腳的鏈接 ?
對頁(yè)腳內容的連接和信息進(jìn)行分類(lèi)組織會(huì )給人感覺(jué)比較好。比如把聯(lián)系方式、友情鏈接、服務(wù)、社交網(wǎng)站和一些你流量*的內容分成幾列(或幾行)。給每個(gè)部分起一個(gè)標題,這樣方便查看。 ?
SugarSync的頁(yè)腳信息包含很多易于查看的列。在“Product”,“Company”,“Learn More”和“Connect with us”的標題下面,你可以很輕易地找到你接下來(lái)想要訪(fǎng)問(wèn)的內容。 ?
?
5、包含版權聲明 ?
這行小小的文字可以成為你的救星,不要忘了它。大部分網(wǎng)站把它做在網(wǎng)站底部單獨一行,而你可以考慮把它設計得更融入頁(yè)腳。版權聲明可以手寫(xiě),也可以只放一個(gè)帶圈圈的小c標志。其文字通常包含發(fā)布年份和版權所有者的名字??梢詾閮热莺驮O計建立多個(gè)版權聲明(適用于部分由第三方創(chuàng )建的網(wǎng)站)。 ?
Adventure.com在屏幕正下方保留了一行版權聲明。這行信息使用了低對比,這樣它就不會(huì )搶了更重要的信息鏈接的風(fēng)頭。 ?
6、包含行動(dòng)呼吁 ?
當用戶(hù)瀏覽到你的頁(yè)腳的時(shí)候,給他們一些可做的事情。包括登記獲得郵件通知,或者邀請他們在社交媒體上關(guān)注你。不要忘了這個(gè)區域在轉化點(diǎn)擊方面的價(jià)值。 ?
Collabogive在頁(yè)腳區域添加了一個(gè)“訂閱我們的郵件”的標語(yǔ)。這個(gè)呼吁很容易看到,與頁(yè)腳設計融為一體,并且為用戶(hù)提供了一種無(wú)須加入組織就可以獲得其*消息的方式。 ?
7、使用圖形元素 ?
通常頁(yè)腳只是一個(gè)塊塊。添加logo或者圖形元素可以為其添加視覺(jué)上的趣味。只是要注意不要為這狹小的空間添加太多它難以承受的元素。想象一下這個(gè)場(chǎng)面:不僅僅寫(xiě)出“關(guān)注我們的微博/博客/什么的”,還包括它們的logo。你還可以使用小的標志性元素添加在地圖或者電話(huà)號碼之類(lèi)的旁邊(不過(guò)你可能需要添加一個(gè)懸停狀態(tài)的效果以闡釋這個(gè)信息) ?
Kikk Festival在頁(yè)腳空間空使用logo和快速聯(lián)系人信息凸顯活動(dòng)伙伴。注意圖標的大小——每個(gè)都易于看到,也易于閱讀。使用滑塊可以使大量信息顯示在這個(gè)狹小的空間中。 ?
8、注意對比度和可讀性 ?
頁(yè)腳的信息通常都很小,非常小。這就使得文本元素與背景之間的顏色、字重以及對比變得非常重要。每個(gè)單詞都應該是易于閱讀的??紤]使用簡(jiǎn)單的字體(無(wú)襯線(xiàn)字體和中等字重就很好)。選擇高對比的色彩,比如白底黑字或者黑底白字。避免使用不同的顏色或者華麗的字體。 ?
P53為頁(yè)腳信息使用最傳統(也是可讀性*的)的文字背景組合——黑與白。 ?
網(wǎng)頁(yè)頁(yè)腳的設計技巧 ?
1、包含網(wǎng)站的設計主題 ?
網(wǎng)站頁(yè)腳看起來(lái)不應該像是狗尾續貂。它應該看起來(lái)與整個(gè)網(wǎng)站的設計風(fēng)格相符。顏色、樣式還有圖形元素都應該保持一致。不要為頁(yè)腳添加一個(gè)不合適的框框,這是很常見(jiàn)的錯誤。從項目伊始就應該思考這塊地方要如何展現,以免在設計過(guò)程中因不匹配的元素而做不下去。 ?
Swiths Interactive Group的簡(jiǎn)單頁(yè)腳與整個(gè)網(wǎng)站相得益彰,網(wǎng)站一個(gè)人坐在桌前,各種物品放在桌上。簡(jiǎn)單的頁(yè)腳展示了相關(guān)信息,而且看起來(lái)與網(wǎng)站融為一體。 ?
2、往小做(但別太小) ?
通常的頁(yè)腳包含了很多小項目,但是注意別弄得太小了。頁(yè)腳的文字可以比網(wǎng)站主體所用的字號稍小一點(diǎn)。而圖標和圖像要在你所選的尺寸里是可讀的(如果你看不出來(lái)這個(gè)圖標是什么,那它就太小了)。元素必須大到易于點(diǎn)擊或觸碰。如果你的鏈接太小,或彼此挨得太近而導致用戶(hù)點(diǎn)不到你的鏈接,那你就蹲墻角哭去吧。 ?
Curious Space使用了不太傳統的頁(yè)腳風(fēng)格,你可以從風(fēng)格尺寸的使用中感受到它的存在。頁(yè)腳的文字稍小一些,而且比頁(yè)面中其他文字更細更輕,當然也沒(méi)有小到看不見(jiàn)。 ?
3、多用點(diǎn)空間 ?
由于頁(yè)腳通常都住在狹小的空間里,空間和間距就顯得很重要。給頁(yè)腳中的元素留出大量空間如同文字的行間距。足夠的間距可以讓頁(yè)腳看起來(lái)來(lái)寬松舒暢。而且方便點(diǎn)擊或觸摸。因為頁(yè)腳中的絕大部分鏈接都要鏈接到別的地方,所以這對用戶(hù)體驗來(lái)說(shuō)也很重要。你在頁(yè)腳所使用的空間不用與你網(wǎng)站主體完全一樣(尤其是對于那些需要在主體中使用小間距的網(wǎng)站) ?
Sailing Collective在元素之間使用了足夠多的水平和垂直間距。然后根據類(lèi)型和是否可以點(diǎn)擊分別放在一起。 ?
4、防備太多東西 ?
使用圖形元素和一個(gè)頭部是個(gè)好主意,但剛剛好和太過(guò)頭僅有一線(xiàn)之隔。有節制地使用這些元素,并僅為特定元素使用。問(wèn)問(wèn)你自己為什么要使用頭部、圖標或者照片。如果答案僅僅是“因為它看起來(lái)很好看”,那你得重新思考一下。每個(gè)元素都應該有其存在的意義。這會(huì )幫助你設計出可用的頁(yè)腳,而且充分利用空間。 ?
從 Master & Dynamic的頁(yè)腳中你可以看到少即是多的設計美學(xué)。簡(jiǎn)單的圖標和文字可以讓你輕松瀏覽頁(yè)腳。 ?
5、創(chuàng )建層次感 ?
和網(wǎng)站的其他部分一樣,頁(yè)腳也應該有自然層級。這是兩方面的設計,頁(yè)腳應該位于整個(gè)網(wǎng)站層級的*端(畢竟這是它該在的地方)。同時(shí)其內部的元素也應該具有層級。最重要元素(通常是聯(lián)系信息、或者呼吁信息或者網(wǎng)站地圖)應該是最突出的。標準的信息,比如版權信息,通常都是這個(gè)區域里最小的。 ?
Griflan Design Inc.在頁(yè)腳中按照他們希望的順序告訴用戶(hù)要做什么。首先,給他們發(fā)郵件;如果發(fā)郵件沒(méi)用,給他們打電話(huà);如果這兩種方法都沒(méi)用,在社交媒體上找他們。 ?
6、考慮做子頁(yè)腳 ?
你的頁(yè)腳是否還需要一個(gè)頁(yè)腳?考慮添加一個(gè)子頁(yè)腳圖層吧(在實(shí)際應用中這種很流行)。子頁(yè)腳非常適合放置一些額外的層級,增加頁(yè)腳的空間,防止它過(guò)于密集,或者僅僅是為了給有趣的內容提供一點(diǎn)空間。使用這個(gè)區域來(lái)突出榮譽(yù)或者行動(dòng)呼吁。 ?
The Smart Passive Income Blog的多層級頁(yè)腳做得很好。這里有行動(dòng)呼吁,然后是網(wǎng)站鏈接,然后是淺色鏈接社交網(wǎng)站的子頁(yè)腳,后面是免責聲明和隱私政策。頁(yè)腳導航的層級提供了一定的縱深,易于瀏覽和點(diǎn)擊 ?
7、不要在這些鏈接下添加下劃線(xiàn) ?
頁(yè)腳的*錯誤?讓鏈接有下劃線(xiàn)?,F在仍有很多網(wǎng)站在他們頁(yè)腳的鏈接中使用下劃線(xiàn)。這個(gè)過(guò)時(shí)的技術(shù)并不適用于現代網(wǎng)站設計。 ?
Baxter of California 擁有一個(gè)干凈整潔并且包含大量鏈接的頁(yè)腳。多虧了這些沒(méi)有下劃線(xiàn)的簡(jiǎn)單鏈接,這個(gè)頁(yè)腳看起來(lái)并不雜亂。 ?