如何設計漂亮的網站?一個網站是企業的門面，給訪問者的第一感覺很重要，同時，也為將來促成打下了一個基礎，上海網站建設公司以多年實踐經驗告訴大家，網站不是一上來就是很多的漂亮圖片，嚴重影響客戶體驗，甚至還可能增加網站的載入速度，所以就需要美工設計出符合企業形象的網頁設計，切記不要使用模板一類的網頁，設計漂亮的網站同時還需要不斷優化網站結構、內容資訊，服務等網站建設基本的要素設計，最終目的是使得網站更便捷，讓使用者充滿信任，最終獲得一定的依賴。
工具/原料
Photoshop、Freehand、CorelDraw、PageMaker、 Illustrator
方法/步驟
設計漂亮的網站之登陸頁面設計
登陸頁面是網站的入口，就像我們的家、公司的門一樣。試想我們處在一個四周都是門的環境，我們會選擇推開哪一扇門?這一扇門哪些地方有吸引我們推開的魅力?我們能否準確找到這扇門的把手?其實這些問題同樣適用於登入頁面，對於登入頁面，是否有足夠的魅力讓使用者在登入過程中不感到煩躁，是否能準確的區分所要填寫的資訊，是否能準確找到登入或註冊按鈕，這些元素的視覺層級與互動關係，直接影響著整個頁面的體驗。
一般來說，登陸頁面包括5個元素：：LOGO、登陸框、廣告圖、幫助中心、底部導航。在這五個元素中，logo是必不可少的，logo是企業 產品的品牌象徵，而登陸框是是使用者進入這個頁面最終的意圖。Logo與登陸框已經構成了最簡單的登入頁面。隨著使用者體驗的提升已經情感化的設計，廣告圖、幫助中心與底部導航也逐步的體現在了登入頁面。
譬如品牌類登陸頁面是由logo與登陸兩個組成，頁面的質感就會比較強，操作性也比較強，使用者在這樣登陸頁面能夠很快的完成填寫和登陸，同時還能加深對品牌的瞭解，整個頁面也會呈現一種天然的不叫理性的設計，沒有任何的視覺干擾。如果硬要說是有干擾的話，可能干擾的物件就是設計師們，設計師對高質感的設計都有很敏銳的觀察力，頁面中的設計細節(如漸變、陰影、高光等)可能會讓設計師短時間內停下來觀察，隨後快速完成註冊。
還有就是，有趣味性的登陸頁面設計，當這種風格的登入頁面展現在使用者眼前時，使用者的第一視覺中心往往實在這個圖片上，其次才會看登入框。但這些廣告圖又很好的傳達了產品的相關資訊，如：品牌(是什麼產品)、性質(這個產品是用來做什麼的)，或者傳達一種節日的氛圍(春節、國慶等)。雖然第一視覺中心不在登入框上，但這些廣告圖又很好的詮釋了這個產品的涵義，加深了使用者對此產品的認識，同時，這些廣告圖趣味性比較強，雖然是廣告，但並不會讓使用者感到反感。還有一種相似的廣告圖，廣告本身與此產品關係並不大，這些圖的內容更多的實在表現一種意境，一種情感，像是回憶、憧憬、幻想、童話等，能讓使用者進入一種意境中，產生共鳴。
再就是，情景類登陸頁面設計，這種全背景的登入頁，用大背景圖來烘托出比較隨性的情境，在登入框設計上，感覺比較輕鬆不拘束。比較適合用在個人空間、部落格等產品中。
可以說，登陸頁面廣告圖的變化，很多時候都見證了產品品牌到產品理念的過渡變化，第一階段宣傳品牌的時候，大都以直白的產品特性為宣傳點，隨著產品的不斷運營，第二階段就是產品的趣味性包裝，使產品的特性多了一些寓意，在接下來的階段，則是不斷融入情感化的設計，事實上，情感上的文字可以使使用者加深對品牌的認知，甚至產生依賴，這時，公司品牌的目的也就是達到了。
設計漂亮的網站之頁面配色
因為一些行業網站內容是嚴謹、高階的，涉及行業資訊、技術交流、企業的營銷理念等，在整個網站中則充滿了濃厚的商業氣息。
拿b2b行業來說，藍色、紅色、黃色是b2b行業的主要色調，往往都是配合著使用，當然了，在使用的過程中，往往還融入其他的顏色，或者是這三中顏色的漸變色。
忌諱使用如下幾種顏色為主色調：綠色，綠色更多的象徵大自然、純潔、天然等含義，不符合B2B行業網站的嚴謹、商業兩個特點，可作為橙色、紅色等的搭配顏色，但是建議不能作為主色調，粉紅色，這種顏色更多表達的是女性化、溫馨的氛圍，就算是以女性產品為特色的行業，也不能使用，作為搭配顏色也儘量少用，畢竟與使用者需求相差太遠，黑色：黑色、灰色是頁面絕大部分文字可以採用的顏色，但是不能作為B2B行業網站的主色調。
頁面的標題欄和導航欄更多要方形的、規則的，作為企業網站、時尚型別的網站，或者為了表達時尚、活潑的主題，網站的設計可以比較活潑一些，多采用圓形或不規則的排版方式，但是作為B2B行業網站，就不能這樣設計，每個部分要具有明顯的區分，每個區域都是規則的，使用的圖片、背景都是嚴謹的。不能把圖片斜放、用很大的橢圓形、用很大的圖示、用卡通的圖示、活潑的圖形等來設計網站的標題欄和導航欄。
整體風格應嚴謹、充滿商業氛圍，網站的整體風格比用色、標題欄設計更加重要，某個搭配顏色比較活潑、時尚一些，並不會影響整體的風格。某個圖片不規則，或者網頁裡的內容圖片不規則，也不會對整體的感覺產生多大影響。整體的頁面風格不能花哨，要降低框架、背景等對閱讀內容的影響，降低頁面的噪聲，整體風格要淡雅，讓訪問的人靜下心來思考。
內容和功能決定表現形式和介面設計，頁面設計是沒有一個固定標準的，很多時候不能用美醜來判斷，也不能用是否有創意來判斷，而應該綜合分析這個頁面的訪問者，頁面內容、功能。有時候一點創意都沒有，和其他很多網站都是類似的，才是最好的，因為就應該是這樣的。任何設計、功能都是為訪問者、使用者服務的，設計者的分析能力遠比創意來的重要，任何一個頁面在設計之前，設計師都必須要靜下心來想想，這個頁面在表達什麼內容，或者說是一個什麼樣的功能，根據內容和功能再來確定應該具有的表現形式。
要多使用習慣用法，不要輕易使用一種新用法，所謂習慣用法，是使用者經常使用的網站，或者非常知名的網站用法，往往就是使用者的習慣，因為知名網站的使用者最多，使用者也是最認可的。相同的功能，或者說不會因為網站的不同而表達方式發生變化的功能，就可以用習慣用法。，比如當我們來到一個新網站的時候，常常需要了解這個網站的介紹、主辦方聯絡方式等資訊，習慣就是在網站底部找這些資訊，絕大部分的網站底部都有一排的連結來表達，如果你設計網站時，希望很創新，把這些連結不放在底部，使用者就會覺得不習慣。對設計師來講，那怕這樣的熟悉讓你覺得相似而乏味，一點都沒有創新，你還是要這樣去用。但並不是說我們不需要創新，相反，在策劃、設計的工作中，需要大膽的創新。
設計漂亮的網站之網站導航
網站導航設計通常遵循三個原則，網站導航相信大家都不陌生，導航可以引導訪客對整個網站有一個直觀明瞭的第一印象，因此導航的設計至關重要，首先導航要有一定的簡潔明瞭，華麗精美的導航設計固然重要，但是過於繁雜的設計會讓使用者有一種找不到重要資訊的錯覺。其次最好採用文字導航，因為畢竟有搜尋引擎不能識別的程式碼，所以網站導航還是要根據搜尋引擎來設計。
首先確定資訊架構
規劃一個大型網站，規劃好內容是進行導航設計之前的第一要務。而我們此處所說的資訊架構，是合理的組織資訊的展現形式，支撐起網站內容的骨架。資訊架構的主要任務是為資訊與使用者認知之間構建一座暢通的橋樑。從更高的位置來看待網站內容有助於資訊架構的搭建。更重要的是，你得學會從使用者的角度來看待網站內容。這也就意味著，有的時候你得站在正反兩個位置來看待同一個東西，不同視角下你會發現有的內容的呈現方式非常反人類。你可以通過下面的問題來完善整個架構：
·哪些頁面是這個網站必不可少的?
·從巨集觀架構上來看是否每個頁面都有其獨立的目的，它們的存在是否影響整體的連續性和可靠性?
·有哪些內容是需要在將來持續提供並更新的?
·網站所需要涉及到的使用者群有哪些?(登入使用者、訂閱使用者、廣告商等等)
·針對每種使用者，網站所要達成的目標是什麼?
思考這些問題能夠幫助你更好的完善網站的資訊架構，為導航設計做好準備。
保持簡單
絕大多數的網站瀏覽者可能會一致的認同這一點：網站的導航區域要儘可能設計的簡單。的確，複雜而擁擠的導航欄設計會嚴重阻礙網站的整體可用性。然而，簡單的設計還是具有欺騙性的。使用者在隨後的操作中會發現複雜的資訊被以一種看起來簡單的方式包裝了起來。這就是資訊架構的作用。
以微軟的首頁為例，網站的導航欄被劃分成四個專案，考慮到微軟龐大的產品線，這幾乎已經被簡化到了極致。也正是因此，每個專案的下拉選單都被巧妙地分割成為幾段，這樣一來，導航的層級就清晰了，使用者可以更快地找到他們想要的東西，而微軟也可以將複雜多樣的產品和服務，整合到一個看似簡單的導航欄裡面。類似迷你站的子頁面中，導航欄也沿用了相同的設計。選單的設定乍一看和首頁很相似，實際上設計者加入了更多細節，更有針對性的功能和服務。
總的來說，這樣的導航欄設計更加易用了，在保持一致的前提下，也具備更好的預測性。考慮到微軟的產品體量，產品所需的頁面數，微軟官網的設計很明顯是耗費了大量時間迭代開發的產物，殊為不易。官網在這樣的組織架構之下，不僅讓使用者的體驗更好了，而且對於微軟而言也更加便於管理內容。這不僅保持簡單，也簡化了複雜。
謹慎選擇方向
傳統意義上的電腦螢幕方向是橫向的，這也使得縱向下拉選單，在很長的一段時間裡面成為了導航欄設計的主流方向。這樣的設計，平衡且少干擾，從設計的角度上來看是不錯的選擇。作為虛擬現實裝置製造商的Oculus，將導航設計成為橫向的非常符合他們的裝置的自然邏輯。但是橫向的導航並不一定符合所有的網站的需求，這也是為什麼你會看到那麼多縱向導航的網站，尤其是在電商領域。彩色的標籤被用來標識不同的品類，縱向的導航設計，與現實世界中的導購圖冊暗合。這樣的導航符合多品類，多內容的資訊架構，橫向導航用在此處會因為品類和文字內容而產生混亂。
一個良好的垂直方向的導航，要設計好並非易事，尤其是當你的網站內容非常多的時候。Jack Jones 的網站是一個很好的學習物件。網站導航中的小圖示擁有不錯的可讀性，簡單的形狀包含了可觀的資訊，整齊而有力。每點選一個類別，選單展開，顯示子類，邏輯清晰。
新工藝新技術的不斷湧現，使得新的設計趨勢和新的挑戰源源不斷呈現在我們面前。響應式網頁設計使得桌面上傳統的橫向導航在移動端呈現的時候，更多是以縱向導航的形式表現出來。導航的設計不再被固定的方案所束縛，多種多樣的表現手法都可以產生不俗的效果。但是，設計和測試的迭代方法，最好還是圍繞著網站轉化率和統計資料來進行。
設計漂亮的網站之banner設計
網站banner有八個原則，我們在開啟一個網站的時候通常先看到的是網站的banner圖，所以banner設計的首要任務當然是要在第一時間抓住使用者的眼球並吸引使用者繼續瀏覽。切記圖片模糊不清晰。
1)主題明確
要突出產品主題，讓使用者一眼就能識別廣告含義，減少過多的輔助干擾元素。切忌，banner被切割的太細碎，內容繁多，沒有瀏覽重心。很多廣告主往往會認為傳達的資訊越多，使用者越有興趣，其實並不然，什麼都想說的廣告，就是什麼都沒說好。
2)重點文字突出
用文字進一步的告訴使用者，是打折或還是新貨上市?如果我們最大的買點就是”4.1″折起，那麼毫無疑問，”4.1″折的字樣一定要大，要醒目，其餘的則需要相應的弱化。
3)符合閱讀習慣
閱讀視線要符合使用者從左到右、從上到下的瀏覽習慣。
4)用最短時間激起點選慾望
使用者瀏覽網頁的集中注意力時間一般也就幾秒，所以不需要太多過場動畫，需第1時間進行產品的展示，命中主題。並配以鼓動人心的措辭口號引導使用者。
5)色彩不要過於要醒目
有些廣告主要求使用比較誇張的色彩來吸引訪問者眼球，希望由此提升Banner的關注度。實際上，”亮” 色雖然能吸引眼球，但往往會讓訪問者感覺刺眼、不友好甚至產生反感。所以，過度耀眼的色彩是不可取的。
6)產品數量不宜過多
很多廣告主總是想展示更多產品，少則4-5個，多則8-10個，結果使得整個Banner變成產品的堆砌。Banner的顯示尺寸非常有限，擺放太多產品，反而被淹沒，視覺效果大打折扣。所以，產品圖片不是越多越好，易於識別是關鍵。
7)資訊數量要平衡
很多人總認為資訊多就，覺得所有資訊都很重要，都要求突出，結果其反。如果banner上滿是吸引點，那使用者只會被注意，所以在Banner的有限空間內做好各種資訊的平衡和協調非常重要。
8)留空
banner畫面中需要留空,留空可以使圖形和文字有呼吸的空間。
通過以上總結出，我們在設計製作Banner時，需要注意以下幾點
1.突出產品及其特徵，採用有吸引力的宣傳用語，適當弱化公司名稱和標識;
2.圖片並非越多越好，突出重點是關鍵，必要的產品說明不能少
3.合理安排畫面內容，做到主次對比鮮明
4.顏色不宜過度誇張，努力營造愉悅、舒服的感觀感受
設計漂亮的網站之頁面底部設計
其實網站頁面底部也就是頁尾設計也是非常重要的，它不僅可以使頁面平衡，還可以讓使用者更詳細的瞭解企業，一般企業網站底部會有聯絡方式、人才招聘、友情連結等等，這些更有利於網站使用者的搜尋。
注意事項
能做到以上五點，就能設計出一個漂亮的網站，當然了，網站設計的技巧肯定不止這些，在進行網站設計的時候需要我們不斷深入的挖掘，同時，還要符合網站的實際情況。