Web設(shè)計(jì)師經(jīng)?？紤]網(wǎng)頁(yè)設(shè)計(jì)過程，重點(diǎn)是技術(shù)問題，如線框、代碼和內(nèi)容管理。但偉大的設(shè)計(jì)不是關(guān)于如何整合社交媒體按鈕甚至光滑的視覺效果。偉大的設(shè)計(jì)實(shí)際上是創(chuàng)建一個(gè)與總體戰(zhàn)略相一致的網(wǎng)站，重慶網(wǎng)頁(yè)設(shè)計(jì)公司及重慶網(wǎng)站制作公司就歸納了一套網(wǎng)站設(shè)計(jì)的7個(gè)步驟。

精心設(shè)計(jì)的網(wǎng)站提供的不僅僅是美學(xué)。他們吸引游客、并通過各種指標(biāo)幫助人們了解產(chǎn)品，公司和品牌，包括視覺，文字和互動(dòng)。這意味著您的網(wǎng)站的每個(gè)元素都需要努力實(shí)現(xiàn)定義的目標(biāo)。

但是如何實(shí)現(xiàn)元素的和諧綜合呢？通過整體的網(wǎng)頁(yè)設(shè)計(jì)過程，既考慮到形式和功能。

對(duì)我而言，該網(wǎng)頁(yè)設(shè)計(jì)過程需要7個(gè)階段：

    目標(biāo)識(shí)別：我與客戶合作確定網(wǎng)站需要實(shí)現(xiàn)哪些目標(biāo)。也就是它的目的。

    范圍定義：一旦我們知道網(wǎng)站的目標(biāo)，我們可以定義項(xiàng)目的范圍。即，網(wǎng)站需要什么頁(yè)面和功能來實(shí)現(xiàn)目標(biāo)，以及建立這些目標(biāo)的時(shí)間表。

    網(wǎng)站地圖和線框創(chuàng)建：在范圍明確定義的情況下，我們可以開始挖掘到站點(diǎn)地圖，定義我們?cè)诜秶x中定義的內(nèi)容和功能如何相互關(guān)聯(lián)。

    內(nèi)容創(chuàng)建：現(xiàn)在我們有一個(gè)更大的網(wǎng)站的想法，我們可以開始為單個(gè)頁(yè)面創(chuàng)建內(nèi)容，始終保持搜索引擎優(yōu)化，以幫助保持頁(yè)面集中在一個(gè)主題。至關(guān)重要的是，您有真正的內(nèi)容為我們的下一個(gè)階段工作

    視覺元素：通過網(wǎng)站架構(gòu)和一些內(nèi)容，我們可以開始研究視覺品牌。根據(jù)客戶端，這可能已經(jīng)定義好了，但是您也可能從頭開始定義視覺風(fēng)格。工具，如風(fēng)格瓷磚，木槌和元件拼貼畫可以幫助這個(gè)過程。

    測(cè)試：到目前為止，您已經(jīng)擁有了所有的頁(yè)面，并定義了它們?nèi)绾物@示給網(wǎng)站訪問者，因此現(xiàn)在是確保一切正常工作的時(shí)候了。將各種設(shè)備上的站點(diǎn)手動(dòng)瀏覽到自動(dòng)站點(diǎn)抓取工具，以從用戶體驗(yàn)問題到簡(jiǎn)單斷開的鏈接識(shí)別所有內(nèi)容。

    發(fā)布：一旦所有的工作都完成了，現(xiàn)在是計(jì)劃和執(zhí)行您的網(wǎng)站發(fā)布的時(shí)候了！這應(yīng)該包括規(guī)劃啟動(dòng)時(shí)間和通信策略，即您何時(shí)啟動(dòng)，如何讓世界知道？之后，現(xiàn)在是打破泡沫的時(shí)候了。

現(xiàn)在我們已經(jīng)概述了這個(gè)過程，讓我們深入了解每個(gè)步驟。

一、目標(biāo)識(shí)別

在這個(gè)初始階段，設(shè)計(jì)師需要通過與客戶或其他利益相關(guān)者的密切協(xié)作來確定網(wǎng)站的最終目標(biāo)。在這個(gè)過程的階段探討和回答的問題包括：

誰的網(wǎng)站？

他們期望找到或做什么？

這個(gè)網(wǎng)站的主要目的是告知，出售還是娛樂？

網(wǎng)站是否需要清楚地傳達(dá)品牌的核心信息，或者是其獨(dú)特的重點(diǎn)在于更廣泛的品牌戰(zhàn)略的一部分？

哪些競(jìng)爭(zhēng)對(duì)手的網(wǎng)站（如果有的話）存在，以及該網(wǎng)站應(yīng)該如何受到/不同于這些競(jìng)爭(zhēng)對(duì)手的啟發(fā)？

這是任何網(wǎng)頁(yè)設(shè)計(jì)過程中最重要的部分。如果這些問題在短片中并沒有全部清楚回答，整個(gè)項(xiàng)目可能出現(xiàn)錯(cuò)誤的方向。

寫出一個(gè)或多個(gè)明確的目標(biāo)或預(yù)期目標(biāo)的一段總結(jié)可能是有用的。這將有助于將設(shè)計(jì)放在正確的道路上。確保您了解網(wǎng)站的目標(biāo)受眾，并開發(fā)競(jìng)爭(zhēng)的工作知識(shí)。

對(duì)于這個(gè)階段的更多內(nèi)容，請(qǐng)查看“ 現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)流程：設(shè)定目標(biāo)”。

網(wǎng)站目標(biāo)識(shí)別階段的工具

觀眾角色

創(chuàng)意簡(jiǎn)介

競(jìng)爭(zhēng)對(duì)手分析

品牌屬性

二、范圍定義

困擾網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目的最常見和困難的問題之一就是范圍蔓延?？蛻舸_定了一個(gè)目標(biāo)，但在設(shè)計(jì)過程中逐漸擴(kuò)大，演變或變化，接下來您將會(huì)了解到，您不僅可以設(shè)計(jì)和構(gòu)建網(wǎng)站，還可以使用網(wǎng)絡(luò)應(yīng)用程序，電子郵件，并推送通知。

這不一定是設(shè)計(jì)師的問題，因?yàn)樗?jīng)常會(huì)導(dǎo)致更多的工作。但如果增加的預(yù)期不符合預(yù)算或時(shí)間表的增加，該項(xiàng)目可能會(huì)迅速變得不切實(shí)際。

甘特圖詳細(xì)說明了項(xiàng)目的實(shí)際時(shí)間表，包括任何主要地標(biāo)，可以幫助確定邊界和可實(shí)現(xiàn)的最后期限。這為設(shè)計(jì)師和客戶提供了非常寶貴的參考，并幫助每個(gè)人都專注于手頭的任務(wù)和目標(biāo)。

三、網(wǎng)站地圖和線框創(chuàng)建

網(wǎng)站地圖為任何精心設(shè)計(jì)的網(wǎng)站奠定了基礎(chǔ)。它可以幫助設(shè)計(jì)人員了解網(wǎng)站的信息架構(gòu)，并解釋各種頁(yè)面和內(nèi)容元素之間的關(guān)系。

建立一個(gè)沒有站點(diǎn)地圖的站點(diǎn)就像建立沒有藍(lán)圖的房子。這很少發(fā)現(xiàn)很好。

下一步是構(gòu)建線框。線框提供了一個(gè)框架，用于存儲(chǔ)站點(diǎn)的視覺設(shè)計(jì)和內(nèi)容元素，并且可以幫助確定站點(diǎn)地圖的潛在挑戰(zhàn)和差距。

雖然線框不包含任何最終設(shè)計(jì)元素，但它確實(shí)作為網(wǎng)站最終看起來的指南。一些設(shè)計(jì)師使用像Balsamiq或Webflow這樣的光滑工具來創(chuàng)建他們的線框。我個(gè)人喜歡回到基礎(chǔ)，并用可靠的紙和鉛筆。

四、內(nèi)容創(chuàng)作

一旦您的網(wǎng)站框架到位，您可以從網(wǎng)站最重要的方面開始：書面內(nèi)容。

內(nèi)容服務(wù)于兩個(gè)基本目的：

目的1.內(nèi)容驅(qū)動(dòng)參與和行動(dòng)

首先，內(nèi)容吸引讀者，推動(dòng)他們采取必要的行動(dòng)來實(shí)現(xiàn)網(wǎng)站的目標(biāo)。這是內(nèi)容本身（寫作）和它如何呈現(xiàn)（排版和結(jié)構(gòu)元素）的影響。

沉悶，無生命和超重的散文很少讓游客注意。短暫，有趣和有趣的內(nèi)容抓住他們，并讓他們點(diǎn)擊到其他頁(yè)面。即使您的網(wǎng)頁(yè)需要大量?jī)?nèi)容，而且通常也會(huì)通過將視頻分解成短片段，正確地“分塊”內(nèi)容，從而可以保持輕松而有吸引力的感覺。

目的2：SEO

內(nèi)容還提高了網(wǎng)站對(duì)搜索引擎的知名度。創(chuàng)建和改進(jìn)內(nèi)容在搜索中排名良好的做法被稱為搜索引擎優(yōu)化（SEO）。

獲取關(guān)鍵字和關(guān)鍵詞正確對(duì)于任何網(wǎng)站的成功至關(guān)重要。我一直使用Google關(guān)鍵字規(guī)劃師。此工具顯示潛在的目標(biāo)關(guān)鍵字和詞組的搜索量，因此您可以了解實(shí)際的人在網(wǎng)絡(luò)上搜索的內(nèi)容。雖然搜索引擎越來越聰明，您的內(nèi)容策略也是如此。Google Trends也很方便地識(shí)別用戶搜索時(shí)實(shí)際使用的條款。

我的設(shè)計(jì)流程著重于圍繞SEO設(shè)計(jì)網(wǎng)站。您要排名的關(guān)鍵字需要放在標(biāo)題標(biāo)簽中 - 越接近開始，越好。關(guān)鍵字也應(yīng)該出現(xiàn)在H1標(biāo)簽，元描述和正文內(nèi)容中。

內(nèi)容豐富，信息豐富，關(guān)鍵字豐富的內(nèi)容更容易被搜索引擎所接受，所有這些都有助于使網(wǎng)站更容易找到。

通常，您的客戶端將生成大部分內(nèi)容，但至關(guān)重要的是要提供他們?cè)谖谋局袘?yīng)包含哪些關(guān)鍵字和短語(yǔ)的指導(dǎo)。

五、視覺元素

最后，現(xiàn)在是為網(wǎng)站創(chuàng)建視覺風(fēng)格的時(shí)候了。設(shè)計(jì)過程的這一部分通常由客戶規(guī)定的現(xiàn)有品牌元素，顏色選擇和徽標(biāo)塑造。但這也是網(wǎng)頁(yè)設(shè)計(jì)過程的一個(gè)階段，一個(gè)好的網(wǎng)頁(yè)設(shè)計(jì)師可以真正地發(fā)光。

圖像現(xiàn)在比以往任何時(shí)候都更重要。高質(zhì)量的圖像不僅可以使網(wǎng)站具有專業(yè)的外觀和感覺，而且還可以傳達(dá)信息，移動(dòng)友好，并有助于建立信任。

已知視覺內(nèi)容可以增加點(diǎn)擊次數(shù)，參與度和收入。但更重要的是，人們希望在網(wǎng)站上看到圖像。圖像不僅使頁(yè)面感覺不那么麻煩，更容易消化，而且還增強(qiáng)了文本中的信息，甚至可以傳達(dá)重要信息，而無需人們閱讀。

我建議使用專業(yè)的攝影師來獲取圖像。請(qǐng)記住，大量美麗的圖像可能會(huì)嚴(yán)重地減慢網(wǎng)站的速度。我使用Optimizilla來壓縮圖像而不損失質(zhì)量，節(jié)省了頁(yè)面加載時(shí)間。您還需要確保您的圖像與您的網(wǎng)站一樣響應(yīng)。

視覺設(shè)計(jì)是一種溝通和吸引網(wǎng)站用戶的方式。正確的，它可以確定網(wǎng)站的成功。錯(cuò)了，你只是另一個(gè)網(wǎng)址。

六、測(cè)試

一旦網(wǎng)站具有所有的視覺效果和內(nèi)容，就可以進(jìn)行測(cè)試了。

徹底測(cè)試每個(gè)頁(yè)面，以確保所有鏈接都正常工作，并且網(wǎng)站在所有設(shè)備和瀏覽器上正確加載。錯(cuò)誤可能是編碼錯(cuò)誤的結(jié)果，雖然找到并修復(fù)它們往往是一個(gè)痛苦，但現(xiàn)在做的更好的是向公眾展示一個(gè)破壞的網(wǎng)站。

最后一次看看頁(yè)面標(biāo)題和描述。即使元標(biāo)題中的單詞順序也可能影響搜索引擎頁(yè)面的性能。

七、發(fā)布

現(xiàn)在是大家最喜歡的網(wǎng)頁(yè)設(shè)計(jì)過程的時(shí)候了：當(dāng)一切都經(jīng)過徹底的測(cè)試，你對(duì)網(wǎng)站感到滿意，現(xiàn)在是時(shí)候推出了。

不要指望這樣完美。可能還有一些需要修復(fù)的元素。網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)流暢而持續(xù)的過程，需要持續(xù)的維護(hù)。

網(wǎng)頁(yè)設(shè)計(jì) - 實(shí)際上是一般的設(shè)計(jì) - 是關(guān)于在表單和功能之間找到正確的平衡。您需要使用正確的字體，顏色和設(shè)計(jì)圖案。但是，人們?yōu)g覽和體驗(yàn)?zāi)木W(wǎng)站的方式同樣重要。

熟練的設(shè)計(jì)師應(yīng)該精通這個(gè)概念，并且能夠創(chuàng)建一個(gè)在兩者之間走過精細(xì)的鋼絲繩的場(chǎng)地。

關(guān)于發(fā)射階段的一個(gè)關(guān)鍵事情是，這個(gè)工作沒有結(jié)束。網(wǎng)絡(luò)的美麗是它從未完成。網(wǎng)站上線后，您可以持續(xù)不斷地對(duì)新內(nèi)容和功能進(jìn)行用戶測(cè)試，監(jiān)控分析和優(yōu)化消息。