在本文中，我將分享我設計網站的過程。

在我們開始之前，讓我首先分享兩個應該在整個設計過程中發生的并行過程。你應該持續做的第一件事就是尋求反饋。

通過定期獲得反饋，您將節省大量浪費的時間和精力。您應該持續做的第二件事是測試。在旅途中測試所有內容，以避免將來出現超級頭痛。

話雖如此，讓我們開始吧！

1. 學習

您認為網頁設計過程中最重要的一步是什么？規劃？設計？

編碼？再猜一猜。學習 - 首先發現和理解您需要構建的內容 - 是整個網站設計過程中最重要的部分，這不應該讓您感到驚訝。

為什么？這很簡單，真的。您對需要完成的工作了解得越多，創建成功網站的機會就越大。

可以這樣想：如果你是一名弓箭手，你不需要知道將箭瞄準哪里嗎？這就是目標的目的。中間的小紅點是靶心。

由于它更小，所以更難擊中，但即使你瞄準它并錯過了，你也肯定會比你把箭瞄準空中并希望隨機直接擊中更近。

那么，作為網頁設計師，您如何獲得靶心呢？在繼續之前，您需要定義項目中擊中靶心的含義。

作為一名網頁設計師，擊中靶心就是給你的客戶他們想要的東西——這就是他們付給你的錢。客戶想要什么因具體情況而異。由于你不是讀心者（不，你不是），你需要主動找出他們想要什么。

在某些情況下，他們甚至可能不知道自己想要什么，而在其他情況下，他們可能很難用語言表達他們的設想，因為他們不知道CSS，Ajax或關系數據庫等行業術語和概念。

創意簡介

幸運的是，網頁設計師可以使用一種工具來輕松收集這些信息。它被稱為創意簡報。創意簡報基本上是您向客戶提出的一系列問題，以便您可以了解項目的范圍和目標。

您可以在面對面的會議或電話中提出這些問題，或者您可以簡單地在您的網站上提供一個網絡表單來處理客戶的答案。你應該以你和你的客戶最舒服的方式獲取這些信息——但無論你做什么，都不要跳過創意簡報，因為它將成為你項目的生命線。您應該在創意簡報中提出什么樣的問題？

至少，找出：

• 客戶的目標受眾
• 他們對網站的主要和次要目標
• 當前品牌特征
• 預算
• 他們需要滿足的最后期限

我也喜歡問客戶他們喜歡和不喜歡的網站，讓我直觀地知道我應該去哪里以及我應該避免什么。您可能還想知道他們是否需要在線商店，他們是否已經有徽標（如果沒有，您可以為他們制作一個），誰將負責維護網站上線后的網站，等等。您可能有想要包含的獨特問題;使用它們，不要害怕在每個項目的基礎上定制您的問題。

2. 計劃

一旦你了解了你需要構建的東西，就該開始計劃如何實現它了。在開始設計網站之前，您需要首先確切地知道設計它的內容和方式 - 這一切都始于創建設計策略。您制作的每個網站的設計策略都應該是手工制作的，以適應客戶的愿景（如果您為自己設計網站，那么您就有資格成為客戶）。

那么，哪些因素將影響您的設計策略呢？創意簡報將通過為您提供一些基本信息（例如您的時間范圍以及網站的目標受眾是誰）作為您計劃的基礎。了解您的受眾尤其重要，因為它會影響網站的查看位置和方式。

例如，您是否還需要創建適用于觸摸的移動版本或特定于iPad的版本？

研究和筆記

無論整體戰略圖景中留下什么空白，都需要通過自己的研究來填補。現在是時候訪問競爭網站，看看目標市場中已經有哪些類型的設計，這樣你就會知道如何區分自己的設計。看看誰在谷歌搜索中首先出現，并嘗試找出原因。

在 10 分鐘內，您應該能夠開始拼湊設計計劃的開始。在研究時，您還將開始集思廣益，討論使用什么顏色，在哪里放置號召性用語，應該使用哪種字體以及其他類似的細節。此時，您還應該做筆記，截取屏幕截圖并啟動情緒板。

草圖和模型

接下來，是時候創建一個模型并開始讓你的想法呈現出更多的有形狀態了。

我喜歡從在一張普通的舊紙上勾勒出我的想法開始，就像許多其他網頁設計師一樣。其他人更喜歡使用像OmniGraffle這樣的線框圖工具。在此階段，您不僅要開始認真考慮網站的布局，還要考慮網站的結構以及導航將如何形成。

這是您了解什么效果最好的機會，也是在實際使用Photoshop或Illustrator創建更具體的東西之前嘗試不同想法的好地方。

選擇您的工具

該過程的這一部分也是評估需要使用哪些工具的絕佳機會。您絕對不應該陷入為您創建的每個站點使用一組預定工具的模式。對于所有相關人員來說，這是一種潛在的危險做法，包括網站的最終用戶和客戶（更不用說您的投資組合看起來多么單調）。

考慮到網站的目標，考慮什么內容管理系統最有效，是否包含Flash是一個好主意，等等。

3. 設計

現在我知道有很多網頁設計師喜歡直接跳到設計階段，而不考慮學習或規劃，但設計不僅僅是創造的行為。你想真正創造一些好和有用的東西，如果不在開始設計之前先做一些初步工作，你就無法做到這一點。如果你已經完成了學習和規劃的跑腿工作，它會使實際的設計變得更加容易。

當你不必擔心小細節時，它確實打開了一個全新的效率和生產力水平，因為你可以專注于更重要的事情。準備好開始設計后，請記住，您需要設計的不僅僅是主頁。您還需要為網站的子頁面進行設計。

有時很容易設計一個主頁概念，將其切成薄片并開始編碼，只是為了到達子頁面并且沒有方向。您可能還需要設計網站的移動或iPad版本。設計階段本身很簡單。

只需打開 Photoshop（或您選擇的圖形創建工具）并開始讓您的模型栩栩如生。細節出汗。讓它像素完美。

即使你覺得你正在做的項目比連續24小時盯著墻更無聊，也要全力以赴。你的客戶會注意到，你會為你所做的工作感到自豪。此時，您必須決定是要在設計中使用真實內容還是使用一些虛擬文本（例如

洛雷姆·伊普蘇姆）。這兩個陣營都有很多粉絲，但我個人更喜歡使用真實的副本和照片，如果有的話，以使其盡可能接近現實。在設計階段，經常尋求反饋以確保滿足所有指定要求非常重要。

如果客戶想要進行更改，現在是時候在對設計進行切片和編碼之前進行更改，如果您在設計階段進行簡單的更改，則進行簡單更改的難度要增加十倍。

4. 代碼

一旦你有一個殺手級的設計，你需要把它變成一個真正的、實時的網站。無論您要使用什么內容管理系統，一個安全的選擇都是從通用的HTML和CSS模板開始。

從基本模板開始

如果你像我一樣，你已經準備好了一組入門HTML和CSS文件，這些文件已經相互鏈接，并且已經包含一些基本的入門代碼（例如CSS重置）。如果您不像我一樣并且沒有準備好這些通用文件，請繼續創建一些可以在將來的這個階段重用的文件。

在繼續之前，最好繼續添加標題，描述和元標記，或者如果您以后要使用內容管理系統，請至少記下它們應該是什么。

布置主要部分和內容

通過插入頁眉、頁腳和內容區域的主要部分（您的主部分）來開始劃分您的 HTML/CSS。接下來，開始添加文本和圖像內容。目標是使標記盡可能具有語義，以便每個元素都有意義。