網頁設計的步驟

網頁設計的步驟

網頁設計與開發的工具越來越多，現代的設計師比起過往，得手工編寫HTML與CSS來得簡單得多，但也產生了錯覺，認為網頁製作非常簡單，事實是：未能掌握設計精神的初學者，製作網站品質相當粗糙。

即使製作上雖然簡化了，但是美學上，基礎上，工具應用上仍沒有太多差異，工具只是簡化了設計的門檻，但至高境界的設計之美，仍需要扎實的基礎，以下我們分享一些基礎的製作步驟：

工具選用
Adobe Dreamweaver仍是網頁設計行業最主流的工具，優勢是能夠編輯原始碼同時，立即測試網頁的改變情況，適合硬底子的專家，不過近幾年出現了一些變化，例如Adobe XD就是一個很好的開發工具，無須深厚的底子也可以套用現有的模板開發，省去了從頭開始的時間。

另外，近幾年也有許多非Adobe軟體的前端設計工具：Figma、Axure、Sketch，主打輕量化的設計環境，對於新手也十分的友善，更棒的是製作出來的網頁已經能夠支援大多主流瀏覽器，即便沒有深厚的語法底子也能從頭學起。

至於視覺設計上，專業的Photoshop地位不可動搖，但也有許多輕量簡易設計工具，正在改變網頁設計的環境，例如Adobe Spark (目前已經改為Creative Cloud Express)與Canva等，利用海量圖庫與特效，不須自己動手也能完成網頁視覺設計。

至於步驟，以網頁設計從業人員來說本質沒有改變：

1.支援解析度

畫圖前你得先挑選一張適合大小的紙張，網頁設計也是如此。
過去網頁設計有所謂的推薦解析度尺寸，但RWD成為設計主流之後，你必須要顧慮到所有的需求，不能獨厚特定的解析度，要考慮用戶使用高於你設計的解析度下，網頁以怎樣的形式表達。一般來說，至少你必須建立三種以上的解析度顯示方式：桌上型電腦、平板電腦、手機這三種。

2.背景與基礎色彩

選定色彩決定你的網站的風格，好的色彩設定可以讓你的網站受到喜愛，惡劣的色彩則會趕跑客戶。網站背景近幾年使用雖然使用上較少，已經被色塊取代之，這更表示決定網站的基礎色彩上有多麼重要。

3. 選單和圖標

零分網站與滿分網站，關鍵在於導覽選單，這是一句是網頁設計的金玉良言。
導航的方式是縱向還是橫向？是下拉式還是延伸式？是文字還是圖標？每種選單的技巧使用上都有優缺點，我們沒辦法給予一個肯定答覆，一般而言選單必然搭配文字，至於有無必要搭配圖標則見仁見智。

4.頭版視覺

頭版在英文稱之為Above the Fold，也就是網站開啟時不捲動時呈現的畫面，大部分的網站會使用一張大的橫幅圖片，稱之為Banner或是Hero Area，這個區塊佔據了可能1/2甚至是2/3的頭版視覺，這個區塊往往決定用戶對你的第一印象，不論是塞滿資訊，或是留點空間讓用戶喘息，取決於你。

5.主體內容

很多人以為主體的內容會很受關注，事實上會耐心滑動到主題觀看的人不多，但卻最有可能成為你的忠實客戶。首頁主體的內容必須以用戶優先，圖片使用上需親合，親近用戶的體驗，內容上，必須讓用戶感到興趣，描述必須貼近用戶的感受，例如：無痛的學習體驗、7天安心退款保證、完整的客戶服務支援等說明。

6.底部版權訊息

網站底部往往是最受冷落的區塊，但近幾年網頁設計師有個共識：他是另一個重要性同等於頭版視覺的區塊，大部分的設計師會很樂於將網站導覽放在底部，此外，聯絡的資訊：地址、電話、社群網站、用戶支援等資訊都經常出現在網站底部，這是一個很重要的趨勢。