網(wǎng)頁設(shè)計是網(wǎng)站建設(shè)的基礎(chǔ)。任何一個外觀優(yōu)美、大方、穩(wěn)定的網(wǎng)站，都必須有一個經(jīng)驗(yàn)充足、技術(shù)能力強(qiáng)的前端設(shè)計師。雖然我們看一個網(wǎng)站，但是它是由三種基本樣式組成的：文本、圖片和連接。但是，在設(shè)計師眼里，網(wǎng)站的任何網(wǎng)頁都是一張圖片。網(wǎng)頁由四個重要內(nèi)容組成：頁眉、徽標(biāo)、橫幅、內(nèi)容和頁腳。橫幅設(shè)計的風(fēng)格和風(fēng)格決定了整個網(wǎng)站的色彩和情感，也是網(wǎng)站帶給用戶的第一感覺。

　　Banner的設(shè)計過程可以分為五個步驟：

　　首先，了解需求

　　第二，根據(jù)需求確定設(shè)計風(fēng)格

　　第三，根據(jù)材料和文案確定版面

　　第四，構(gòu)成橫幅的元素設(shè)計(文案/背景/點(diǎn)綴/材質(zhì))

　　第五，調(diào)整配色方案

　　從整體的設(shè)計風(fēng)格上，我們可以直觀的看到設(shè)計風(fēng)格的方向和特點(diǎn)，找到適合我們網(wǎng)頁的風(fēng)格和方向是最重要的，整體的搭配在網(wǎng)站建設(shè)的過程中永遠(yuǎn)不能走初始的趨勢。

　　一.了解需求

　　任何設(shè)計的前提都是理解設(shè)計需求。只有了解需求方真正想要的是什么，才能少改幾次稿。剛開始工作的時候，我沒有遭受這種損失。當(dāng)時剛進(jìn)公司的時候，臉比較瘦。別人讓我做什么，我立馬挽起袖子，打開ps開始工作。不明白的地方不敢問太多，怕打擾別人工作。事實(shí)證明這種想法是多么錯誤。

　　需要了解的可以歸納為以下幾個方面。

　　1.確定復(fù)印信息、材料、尺寸和交付平臺

　　一般在收到設(shè)計要求時，由需方確定副本和資料。但是，有些需求者會說，你可以根據(jù)你的設(shè)計需要，稍微更改一下復(fù)制信息。我個人經(jīng)驗(yàn)，這句話真的是火坑。文案的不確定性會嚴(yán)重影響設(shè)計過程。你改好了，他們就滿意了。如果你不滿意，你將不得不集中精力去做。另外，有時候可以從文案和素材中獲得設(shè)計靈感，確定設(shè)計風(fēng)格。

　　2.確定橫幅的設(shè)計目的

　　比如需求方給出的文案信息是“金秋援助”，我們需要知道金秋援助的對象是誰，是大學(xué)生還是小學(xué)生，會影響款式的確定和設(shè)計元素的選擇。還需要知道需求方希望這個橫幅起到什么作用，是希望更多的人參與到這個活動中來，還是希望讓更多的人知道某個企業(yè)熱衷于慈善事業(yè)，提升其知名度和好感度。只有確認(rèn)這些，才能確定你的設(shè)計風(fēng)格。

　　3.求需求方建議在給我們這個需求之前，需求者可能有自己的想法。如果能在設(shè)計前了解，修改的次數(shù)會大大減少。而且，當(dāng)我們主動詢問他們的意見時，他們會覺得自己的想法得到了尊重，以后更樂于交流。但有時他們的想法無法用語言來描述。這時，我們可以使用“情緒板”的方法來快速獲取視覺信息。

　　4.確定設(shè)計時間

　　時間短的話，盡量選擇不容易出錯的板子和款式。如果時間充裕，可以仔細(xì)打磨設(shè)計作品，嘗試一些以前沒有嘗試過的表現(xiàn)方法。

　　2.根據(jù)需求確定設(shè)計風(fēng)格

　　Banner的設(shè)計風(fēng)格，比較人很容易理解。有的人外向，有的人內(nèi)向。而這兩種人的穿衣風(fēng)格、行為舉止、言行舉止在生活中也是不同的。人難過的時候會哭，開心的時候會笑。不同的設(shè)計風(fēng)格也對應(yīng)著不同的表達(dá)方式。下面我們主要分析一下不同設(shè)計風(fēng)格對應(yīng)的表達(dá)方式，給大家一些安利的參考資料。覺得有用的同學(xué)不要忘記記筆記。

　　1.關(guān)鍵詞：文藝，氣質(zhì)，雅與靜

　　總結(jié)：

　　(1)最明顯的特征是留白，大量的留白。

　　(2)字體多為宋體排字，除了一級標(biāo)題略大，其他文案很小，給人一種精致的感覺。

　　(3)顏色以灰色和白色為主，其他顏色飽和度和純度低，亮度高。

　　(4)這種橫幅多用于茶葉、棉麻制品以及以簡潔為特色的家居用品。

　　(5)裝飾用細(xì)紋較多。

　　2.關(guān)鍵詞：高冷時尚

　　總結(jié)：

　　(1)高冷大旗就像高冷大旗一樣，它最大的特點(diǎn)就是字?jǐn)?shù)少，通常只有幾個字。

　　(2)大多數(shù)顏色是黑色、白色和灰色。

　　(3)素材圖一般都很大，突出細(xì)節(jié)，大牌的東西對自己的質(zhì)量還是很有信心的，所以會放大放大細(xì)節(jié)，免得你看不到。

　　(4)很少用點(diǎn)綴，直接放大一張產(chǎn)品細(xì)節(jié)圖，放幾句話，就是這么自信。

　　3.關(guān)鍵詞：傳統(tǒng)、中國風(fēng)、意境

　　總結(jié)：

　　(1)字體采用書法，文案采用豎排、從右到左的順序，因?yàn)楣湃耸沁@樣寫的。

　　(2)可以選用的材料有印章、中國山水畫、水墨、扇面、剪紙、園林方格、古代圖案、祥云、京劇、卷軸等。

　　4.關(guān)鍵詞：青春，活力，青春

　　總結(jié)：

　　(1)突出的一點(diǎn)是模特們都很年輕，很有活力。

　　(2)色飽和度和純度比較高。

　　(3)可以隨意玩排版。

　　5.關(guān)鍵詞：可愛甜美總結(jié)：

　　(1)可愛風(fēng)格橫幅最突出的特點(diǎn)是他的字體，多采用少年字體、手寫字體、漫畫字體。

　　(2)裝飾對象經(jīng)常使用卡通小元素，主要是手繪和矢量圖，如星星、云彩、短線等。

　　(3)用暖色營造出柔和可愛的感覺。

　　6.關(guān)鍵詞：節(jié)日，促銷，刺激

　　總結(jié)：

　　(1)色彩豐富，紅、黃、紫較多，畫面飽滿，留白少。

　　(2)主標(biāo)題很大，往往很硬，棱角分明，帶有視覺沖擊力的夸張。

　　(3)可以使用的飾品包括燈光效果、鞭炮、舞臺、燈光、彩色漸變、沖擊線、多邊形等。

　　7.關(guān)鍵詞：未來，科技

　　總結(jié)：

　　(1)科技大旗可以概括為兩個要點(diǎn)：科技感的背景圖，高級的也包括科技感的小點(diǎn)綴。

　　(2)顏色以藍(lán)色、黑色、紫色等冷色為主。畫面給人一種韌性、空間感、速度感、力量感。

　　(3)可以使用的飾品有光效、金屬效、線條、光斑、宇宙等等。

　　8.關(guān)鍵詞：嚴(yán)肅性，規(guī)則，黨

　　總結(jié)：

　　(1)因?yàn)槲覀儌ゴ蟮拿飨矚g紅色，黨喜歡紅色，所以大多數(shù)政府網(wǎng)站和條幅都會用紅色，點(diǎn)綴的顏色多為藍(lán)色和黃色，字體多為凝重而古典的帶有濃厚中國氣息的行間或毛筆字體。

　　(2)可用的背景和飾品包括紅旗、城市背景、黨徽、英雄雕塑、故宮、石獅等。

　　9.關(guān)鍵詞：手繪風(fēng)格

　　總結(jié)：

　　(1)把手繪風(fēng)格單拿出來，因?yàn)檎娴暮芎糜?，?jīng)常用。

　　(2)文案可以采用手繪風(fēng)格。產(chǎn)品本身也可以手繪，左邊第一張圖。只需簡單的幾筆，整個畫面一目了然，充滿樂趣。手繪風(fēng)格用的最多的是飾品，不同的手繪點(diǎn)綴營造出不同的氛圍。