網頁設計：網站佈局的23個步驟

在設計網站佈局時，常常會出現一些常見的錯誤，特別是實習生和新設計師。在這個完美的網站佈局的文章中，我們將介紹在開始一個新項目之前，每個新網站建設者應該知道做什麼，以及在這個過程中應該注意什麼?歡迎大家閲讀!更多相關信息請關注相關欄目!

這些原則不僅涵蓋設計方面，還涵蓋了一般工作流程，可以很好地完成工作。跟隨他們，你很快就會開始創建專業的網站佈局。

01.客户的目的是什麼

告訴你的客户，找出目標是什麼

在開始工作之前，你需要知道你正在設計什麼。除了網站的描述，你需要知道什麼是目標。以新聞網站為例，目標是什麼?是否儘可能多地製作廣告展示，或提供最佳的閲讀體驗?這些目標如何衡量?

良好的重新設計不一定是最華麗的，而是隨着時間的推移提高性能的。在開始設計之前與客户交談是關鍵所在。您需要了解他們的關注和目標超越了書面SOW(工作表)。

02.把你的想法寫在紙上

關於世界各地城市的插圖系列的很早的草圖

這似乎非常明顯，但是我經常發現，設計師在考慮他們正在嘗試解決的問題之前，先直接進入他們的工作。設計是解決問題，這些問題不能通過漸變或陰影解決，而是通過良好的佈局和清晰的層次結構來解決。

在開始放置陰影之前，請考慮內容，佈局和功能。確保這些想法符合客户的目標，並隨時分享。沒有任何客户曾經向我投訴過度溝通的想法。

03.開始繪製頂級框架

繪製基本的線框可以幫助您構建佈局(單擊右上角的圖標以放大圖像)

當我被要求創造一個項目的外觀和感覺，我做的第一件事是提出一個頂級的框架，以解決所有的設計問題。框架是圍繞內容的UI，並幫助用户執行操作並瀏覽它。它包括導航和組件，如側邊欄和底部欄。

如果您從這個角度來看待您的設計，您將清楚地瞭解在首頁設計部分之後，佈局需要什麼。

04.添加網格

具有10px基線的978網格的示例

聽起來很簡單。在開始設計任何你需要一個正確的網格之前。沒有網格啟動沒有有效的藉口 - 如果沒有，我可以向你保證，設計看起來不是很好。網格將幫助您構建不同部分的佈局; 它將引導您完成特定的屏幕尺寸要求，並幫助您創建響應模板，因此在間距方面以及許多其他設計問題方面是一致的。

要了解如何做到這一點，請查看本指南來創建適應所有屏幕尺寸的網格。

選擇你的排版

一般的經驗法則是在網站佈局中使用不超過兩種不同的字體

探索不同的字體和顏色是項目發現階段的一部分。我建議不要在網站上使用兩種以上的不同字體，但這實際上取決於它的性質。總的來説，選擇一個容易閲讀的大塊文字的字體，並且更加適合標題和號召性用語。不要害怕使用大字體，並且在使用排版時具有創造性和一致性。

06.選擇你的顏色主題

Color Hunt等工具旨在幫助您挑選調色板

在選擇一組字體的過程中，您應該開始探索在UI，背景和文本中使用的顏色。我建議為一般用户界面使用一組有限的顏色和色調。

根據元素的功能，在UI上應用這些是非常重要的。想想Facebook，Twitter，Quora和Vimeo等網站的佈局。除了UI，圖形或圖形細節不應該有任何顏色限制，只要它們不會干擾組件的功能。

如果您遇到困難，請查看我們的免費應用列表，以選擇配色方案。

分配佈局

簡單的佈局往往更容易導航

網站的結構越簡單，用户就越容易瀏覽。您網站的每個部分需要講述一個故事; 它需要用户的理由和最終結果。佈局應該幫助內容突出顯示該故事中最重要的部分。

實際上，在一個網頁上不應該有太多的號召力 - 所有的事情都應該推動到那個決定“我能在這裏做什麼?” 想想最簡單的佈局，您可以想象一個簡單的目的，並開始添加必要的組件。最後，你會驚訝，很難保持簡單。

08.重新思考已建立的

搜索按鈕已變得過時

我們真的需要一個搜索按鈕嗎?在大多數情況下答案是否定的。作為設計師，我們塑造了用户瀏覽互聯網的方式，由我們來決定簡單操作將採取多少步驟，以及我們的網站將如何有效。

有些公約在那裏是因為他們工作，但有些是因為沒有人花費足夠的時間來評估它們。重新考慮所有組件的已建立的交互模式，看看我們如何改進它們。

想想動議

運動在設計交互式體驗時至關重要

運動在設計交互式體驗時至關重要。沒有任何設計可以自己判斷，或作為靜態組合; 每個組件都是通過與系統的關係定義的，這種關係需要運動才能正確傳達。運動可以説明您的佈局中對內容或交互狀態的動態效果。為了第二個目的，我建議您的設計進一步進行原型設計。

原型，原型，原型

原型是測試互動的最佳方法

原型是測試交互和技術的最佳方法。現在有很多原型設計工具使其變得輕而易舉，您不需要成為創建有效原型的編碼大師。這是另一種方式，您可以讓您的客户感到興奮，並與理論和想法，否則需要很多解釋。

挑戰自己

我鼓勵每個設計師在每個項目上挑戰自己。創新並不總是對項目的要求，所以我們需要提出新鮮事物。不同挑戰的例子可能包括使用新的網格系統，創建新的組件，或者甚至是避免混合模式或使用特定顏色的小挑戰。

注意細節

工作進展中：細節視圖

這個聲明最近被過度使用，但在最終產品中並不總是可見的。根據項目背後的概念，“關注細節”可能意味着不同的東西。

它可能是一個小的互動，一個意想不到的動畫或美學的觸摸，如一個按鈕的一個漸變或在背景中一個盒子周圍微妙的衝擊。但總的來説，這種觸摸是至關重要的 - 如果你真的很喜歡你所做的，這將是自然而然的。

13.優化每個組件

將每個組件視為設計比賽

處理每個組件，就像它可以呈現給設計大賽一樣。如果您注意每一個組件，整體將超過其部分的總和。我不得不承認，這件建議不是我的。我曾經在以前的一個機構聽到過，令我震驚的是，這個聲明是多麼清楚和真實。

每個組件都需要設計，因為它可以獨立於最好的組件。有時，設計師會將某個網站的某些部分留下，直到他們的待辦事項列表中，直到最後才顯示出來。

鋭化你的.工作

在筆畫和背景之間設置正確的對比度

為了避免模糊像素，請嘗試在筆畫和背景顏色或背景顏色之間設置正確的對比度。除了任何審美的考慮之外，還有一些常見的事情必須避免，以創造一個乾淨，正確的工作。

當您嘗試鋭化工作時，您應該注意的部分是包括漸變條紋，邊緣模糊，字體渲染選項(某些字體，具體取決於其特定渲染模式下的最佳尺寸)，以及與的背景。

這些只是需要尋找的幾個問題的基本例子，但實際上這個列表是無止境的。總是看你的設計作為一個整體，看看一切是否運作良好，然後仔細分析每個組件。

15.整理你的設計文件

無論您使用什麼設計工具，這一點(以及使用網格)都是最重要的建議之一。不管項目的大小和設計人員的數量如何，您需要保持文件清潔。這樣可以輕鬆導出不同的部分，加快設計過程並與其他設計人員合作。

16.設計最佳案例; 為最壞的準備

請記住，您的佈局如何在不同的設備和屏幕尺寸上工作

請記住，您的佈局如何在不同的設備和屏幕尺寸上工作。作為設計師，我們的工作是通過不同的約束來解決問題 通過網頁設計，約束範圍從概念和技術問題到內容相關的問題。

我們需要建立一個不僅可以在理想場景下工作的站點，也可以在最壞的情況下構建一個站點。例如，一個用户可能正在使用一個非常小的屏幕，並檢查該網站，當它幾乎沒有任何內容，所以它看起來破碎。

但是，為了展示我們的工作，我總是強烈建議為此建立最佳案例場景。因此，我們將顯示理想的文本數量，我們將在理想的瀏覽器大小內顯示該網站，這應該是大多數使用它的用户最常見的場景。

痴迷於設計，直到你討厭它

如果您對設計充滿熱情，我相信這是您已經在做的事情。每當我完成一個comp我感到自豪，我傾向於使這個成為我一生的一部分。我拍攝它的截圖，檢查它不同的設備，製作它的壁紙，甚至打印它，掛在牆上。

作為這個過程的結果，我得到了一個點，我終於討厭我的設計。我開始看到一切都錯了，最終我改變了。不喜歡你以前的工作是成熟的跡象，這意味着你終於從自己的錯誤中學習了。

18.早日與客户分享設計

當提出交互式概念或設計“外觀和感覺”時，您需要確保您和客户端儘快在同一頁面上。在與客户共享之前，避免花費太多時間在概念上。

一旦初始概念被批准，你可以放鬆一點，開始生產。但是，在提出了第一個概念之後，如果客户不愛上它，那麼你應該收集足夠的反饋來給表格帶來第二個更合適的概念。

作為開發人員最好的朋友

開發者是有創意的人，他們喜歡自己的工作，就像你一樣。但是，從一開始就並不總是包含在一個項目中，而且當概念被決定並且他們的創造性角色已經被超越時，往往只會涉及到。

這個過程是錯誤的 一些最好的想法來自開發團隊，所以確保從項目開始就與他們合作。與他們分享你的觀念和興奮，最終會帶來更好的想法和更好的執行。

20.儘可能清楚地呈現

產生偉大的工作同樣重要，因為它是呈現它。如果您沒有正確呈現，您的最佳設計可以被忽略或拋棄。談到演講，你想解釋你的工作，就像你展示給四歲。請記住，對於您第一次看到您的設計而言，您完全清楚的可能並不清楚。

不要太貼近你的想法

知道什麼時候提倡你的想法，並學習認識你的團隊或客户什麼時候不認為他們是“一個”，這一點很細。作為一名設計師，您需要堅信自己所做的一切，但您也應該樂意快速轉換您的任何想法並提出其他想法。不要忘記有多個解決方案。

按照您的設計進行開發

如果您在代理機構內部工作，您可能會知道，在開發新的項目時，發現自己在設計新項目時遇到困難。與一般信念相反，您的項目工作不會在PSD和樣式表交付時結束。

如果您真的關心您的設計和交互方式的執行情況，請不時檢查開發人員的老朋友，並儘可能地幫助他們確保每個小像素都是完美的。

顯示您正在進行的工作

與社區共享您的樣式表和進行中的組件

作為設計師社區的一部分，我們都非常喜歡看到最終結果，而且還在於正在進行的工作。有時，由於幾個原因，項目的最佳部分被遺漏，並在“存檔”文件夾中丟失。

一旦項目完成，您得到客户/生產者的批准，就可以推廣該項目，如果可能的話，可能會對正在進行的工作和設計進行案例研究，而不是最終版本。