網頁設計是網站建設的基礎，任何一個外觀美麗、大方、穩重的網站必然有一個經驗充足、技術能力強的前端設計師，盡管我們看一個網站，無非就是文字、圖片、連接三種基本樣式組成，然而在設計師的眼中網站的任何一個網頁就是一張圖片，從網頁設計的角度去看一個網頁，網頁的組成部分分為header、Logo、Banner、內容和footer等四個重要內容組成，其中banner設計的樣式以及風格決定了整個網站的色彩和情感，也是網站帶給用戶的第一感覺。

banner的設計過程可以分為五步：

一、了解需求

二、根據需求確定設計風格

三、根據素材和文案確定版式

四、構成banner的元素的設計（文案/背景/點綴/素材）

五、調整配色

從整個設計風格中，我們可以直觀的看出設計風格方向和特點，找到我們網頁適合的風格和方向才是更為重要的，整體性的搭配取決不網站建設過程中的更初走向。

一. 了解需求

做任何設計的前提就是了解設計需求，只有弄明白需求方到底想要什么，我們才能少改幾次稿。我剛參加工作的時候就沒少吃這方面的虧，那時候剛進公司臉皮薄，別人讓干啥就立馬擼起袖子打開ps開始工作。不明白的地方也不敢問太多，怕打擾別人工作。事實證明，這種想法是多么大的錯誤。

需要了解的需求大體可以總結成以下幾個方面。

1. 確定文案信息、素材、尺寸大小、投放的平臺

一般接到設計需求的時候，文案和素材都是需求方確定好的。但是有的需求方會說，你可以根據你的設計需要，稍微改動文案信息。本人親身經歷，這句話真的是一個火坑。文案的不確定會嚴重的影響設計進程，你改得好，改得他們滿意還好，如果不滿意，那就面臨著重做。除此之外，有時候我們可以從文案和素材里獲取設計靈感，確定設計的風格。

2. 確定banner是為了實現什么目的而設計

比如需求方給到的文案信息是「金秋助學」，我們需要了解金秋助學的對象是誰，是大學生還是小學生，這會影響風格的確定和設計元素的選擇。還要了解需求方想要這個banner起到什么作用，是想讓更多人參與到這個活動中來，還是想通過這個banner讓更多人了解某某企業熱心于慈善事業，提升企業的知名度和好感，只有確定這些才能確定你的設計風格。

3. 詢問需求方的建議

需求方在把這個需求給到我們之前，可能心里就已經有了自己的想法，如果我們在設計之前可以了解到，會很大的降低改稿次數。而且我們主動詢問他們的意見，會讓他們感覺到自己的想法受到了尊重，以后交流起來也會更愉快。但是有時候他們的想法用語言可能描述不出來，這個時候我們可以用「情緒板」的方法，快速的獲取視覺信息。

4. 確定設計時間

如果時間很緊張，就盡量選擇不易出錯的板式和風格，如果時間比較充裕，可以細細打磨設計作品，多嘗試一些以前沒嘗試過的表現方法。

二. 根據需求確定設計風格

banner的設計風格可以拿人作為比對很好理解。有人外向，有人內斂。而這兩種人的穿衣風格和舉止言行在生活中也是不盡相同。和人難過會用哭表現，高興會用笑表現一樣，不同的設計風格，也對應不同的表現方法。下面我們主要分析不同的設計風格對應的表現方法，及給大家安利的一些可參考使用的素材，覺得有用的同學別忘了做下筆記。

1. 關鍵詞：文藝、氣質、素雅、安靜

總結：

（1）更明顯的特點就是留白，大量的留白。

（2）字體多采用宋體這樣的襯線體，除一級標題字號略大些，其他的文案都非常小，給人精致的感覺。

（3）色彩以灰白色系為主，其他的色彩飽和度和純度低，明度高。

（4）這類banner多運用在茶、棉麻制品、以簡潔為特色的家居用品上。

（5）點綴物多用細線條。

2. 關鍵詞：高冷、時尚

總結：

（1）高冷的banner就和高冷的你一樣，更大的特點就是話少，一般就幾個字。

（2）用色大多采用黑白灰。

（3）素材圖一般都很大，突出細節，大牌的東西對自己的品質還是很有信心的，所以他們會放大放大再放大他們的細節，唯恐你們看不到。

（4）很少運用點綴物，直接一張產品細節放大圖，放幾個字，就是這么自信。

3. 關鍵詞：傳統、中國風、意境

總結：

（1）字體采用書法字體，文案多用豎形排版、從右向左的順序，因為古人是這樣寫字的。

（2）可以選用的素材有印章，中國山水畫，墨跡，扇面，剪紙，園林窗格，古紋樣，祥云，京劇，卷軸等等。

4. 關鍵詞：青春、活力、年輕

總結：

（1）很突出的一點就是模特都很年輕很有活力。

（2）色彩的飽和度和純度比較高。

（3）排版你可以隨便玩。

5. 關鍵詞：可愛、甜美

總結：

（1）可愛風格的banner更突出的特點就是他的字體，多采用少年字體、手寫字體、卡通字體。

（2）點綴物多使用卡通小元素，以手繪和矢量圖為主，比如星星，云朵，短線條等。

（3）色彩上多使用暖色調，營造軟萌的感覺。

6. 關鍵詞：節日、促銷、熱鬧

總結：

（1）色彩豐富，紅、黃、紫偏多，畫面飽滿，很少留白。

（2）主標題很大，多用剛硬，棱角，夸張有視覺沖擊力的字體。

（3）可以用到的點綴物有光效、鞭炮、舞臺、燈光、五彩的漸變、沖擊性的線條和多邊形等。

7. 關鍵詞：未來、科技

總結：

（1）科技類的banner概括來講就兩個要點，科技感的文字+科技感的背景圖，高級一點的還包括科技感的小點綴。

（2）用色以藍，黑色，紫等冷色調為主，畫面給人硬朗，空間感，速度和力量的感覺。

（3）可以用到的點綴物有光效、金屬效果、線條、光點，宇宙等。

8. 關鍵詞：嚴肅、規矩、黨

總結：

（1）因為我們偉大的毛主席喜歡紅色，所以黨喜歡紅色，所以政府類的網站也好，banner也好，大多都會采用紅色，點綴色多為藍色黃色，字體多選用端莊古典的襯線體或中國風味濃厚的毛筆字體。

（2）可以用的背景和點綴物有紅旗、城市背景、黨徽、英雄雕塑、故宮、石獅子等。

9. 關鍵詞：手繪風

總結：

（1）把手繪風格單拿出來是因為它真的很好用，而且很常用到。

（2）手繪風格可以用在文案上。產品本身也可以用手繪的形式，如上圖左一，簡單的幾筆就讓整個畫面一眼就能看懂，而且充滿樂趣。手繪風格用的更多的是點綴物，通過不同手繪風格的點綴物營造不一樣的氛圍。