網(wǎng)頁設(shè)計(jì)的過程！

幾乎每一個網(wǎng)頁設(shè)計(jì)師可以證明，他們的大部分工作是重復(fù)的。我們發(fā)現(xiàn)自己完成相同的任務(wù)，即使稍加修改一遍又一遍，對每個Web項(xiàng)目。經(jīng)過詳細(xì)的網(wǎng)站設(shè)計(jì)和開發(fā)過程可以加快您的工作，并幫助您的客戶了解項(xiàng)目的作用。本文試圖說明如何開發(fā)網(wǎng)頁設(shè)計(jì)可以組織開發(fā)的思想，加快項(xiàng)目的時間表，并準(zhǔn)備發(fā)展一個自由企業(yè)的一個過程。

首先，究竟是一個“過程”？一個Web開發(fā)過程是一個需要采取從開始到結(jié)束，以完成一個典型的Web設(shè)計(jì)項(xiàng)目的步驟記錄的輪廓。它劃分和歸類的工作，然后分解成任務(wù)，并可以作為每個項(xiàng)目的路線圖所使用的資源這些高層次的部分。

一個典型的過程

這里是一個標(biāo)準(zhǔn)的過程，是放在一起使用來自互聯(lián)網(wǎng)以及我自己的經(jīng)驗(yàn)例子。（注：請參閱在每個階段結(jié)束時的資源鏈接。）

1。規(guī)劃

規(guī)劃階段可以說是最重要的，因?yàn)槭裁礇Q定，并制定在這里為整個項(xiàng)目的階段。這也是階段，需要客戶的互動和隨行注重細(xì)節(jié)。

• 需求分析
  ，包括客戶的目標(biāo)，目標(biāo)受眾，詳細(xì)的功能要求，并盡可能多的相關(guān)資料，你都不可能收集。即使客戶有精心策劃的他或她的網(wǎng)站，不要怕從你的經(jīng)驗(yàn)，提供有益的建議。
• 項(xiàng)目章程
  項(xiàng)目章程（或同等文件）總結(jié)了已收集并同意后，在前面點(diǎn)的信息。這些文件通常是簡潔，而不是過分的技術(shù)，他們作為整個項(xiàng)目提供參考。
• 站點(diǎn)地圖
  站點(diǎn)地圖導(dǎo)游到底是誰在結(jié)構(gòu)丟失的用戶或需要找到一條信息迅速。而不是簡單的列表頁面，包括一個網(wǎng)頁鏈接和組織層次是很好的做法。
• 合同定義的角色，版權(quán)和金融分
  這是一個文件的關(guān)鍵因素，并應(yīng)包括付款條件，項(xiàng)目結(jié)束條款，終止條款，著作權(quán)的歸屬和時間表。小心蓋上自己的這份文件，但要簡潔，高效。
• 訪問服務(wù)器和建立文件夾結(jié)構(gòu)
  典型的信息獲取和驗(yàn)證，包括FTP主機(jī)，用戶名和密碼，控制面板的登錄信息，數(shù)據(jù)庫配置及任何語言或框架目前已安裝。
• 確定所需的軟件和資源（商業(yè)攝影，字體等）
  之外確定任何第三方媒體的需求，找出你可能需要聘請分包商及任何其他軟件，你可以親自要求。所有這些添加到項(xiàng)目的預(yù)算，客戶如有需要充電。

這一階段的資源鏈接：

• Jumpchart：客戶端/開發(fā)協(xié)作工具
• Dropbox的：文件共享和協(xié)作工具
• Mindmeister：免費(fèi)線上心智圖軟件
• 寫作防彈網(wǎng)頁設(shè)計(jì)合同

2。設(shè)計(jì)

在設(shè)計(jì)階段通常涉及移動在規(guī)劃階段變?yōu)楝F(xiàn)實(shí)進(jìn)一步所列資料。其主要成果是有記錄的網(wǎng)站結(jié)構(gòu)，更重要的是，可視化表示。當(dāng)設(shè)計(jì)階段完成后，網(wǎng)站應(yīng)該或多或少已經(jīng)形成，但對于內(nèi)容和特殊功能的情況下。

• 線框和設(shè)計(jì)元素規(guī)劃
  這是該網(wǎng)站的可視化布局初步形成。利用從規(guī)劃階段客戶端收集的資料，開始設(shè)計(jì)布局使用線框。鉛筆和紙張有著驚人的有用在這個階段，盡管許多工具以及在線幫助。
• 需求分析的基礎(chǔ)上實(shí)物模型
  設(shè)計(jì)模擬- UPS在Photoshop中相對容易的修改允許的話，它保留了設(shè)計(jì)元素在各層組織，它素?cái)?shù)的切片和編碼您到時以后。
• 審查和批準(zhǔn)周期
  的審查，調(diào)整和審批的實(shí)物模型周期經(jīng)常發(fā)生，直到（理想）客戶端和承包商與設(shè)計(jì)感到滿意。這是最簡單的時間進(jìn)行更改，而不是設(shè)計(jì)后已編碼。
• 切片和代碼有效的XHTML / CSS
  它的編碼時間。切片最后Photoshop的實(shí)物模型，并編寫HTML和CSS的基本設(shè)計(jì)規(guī)范。互動元素和jQuery還在后面：現(xiàn)在，只獲得視覺效果一起在屏幕上，并且一定要驗(yàn)證在移動之前的所有代碼。

這一階段的資源鏈接：

• 為線框草圖打印模板
• 顏色方案設(shè)計(jì)
• 型測試儀，字體比較
• iPlotz，在線模板和線框工具
• 條紋發(fā)生器
• Favicon發(fā)生器
• 圖標(biāo)搜索器
• 證券交易所，自由照片

3。發(fā)展

開發(fā)涉及到大量的編程工作，以及裝載的內(nèi)容（不論是由您的團(tuán)隊(duì)或客戶端的）。保持代碼的組織和評價，并參考不斷的規(guī)劃細(xì)節(jié)完整的網(wǎng)站需要的形狀。采取的戰(zhàn)略方針，并避免通過不斷的測試，當(dāng)您去未來的麻煩。

• 構(gòu)建發(fā)展框架。
  這是唯一的要求時，可能會迫使你偏離的過程。如果你使用Rails的，一個ASP / PHP框架或內(nèi)容管理系統(tǒng)，紅寶石現(xiàn)在是時候落實(shí)，取得了基本的引擎啟動和運(yùn)行。這樣做早期確保服務(wù)器能夠處理的安裝和設(shè)置順利。
• 每一頁的類型代碼模板。
  一個網(wǎng)站通常有幾頁（如家，大致內(nèi)容，博客文章，形式），可以基于模板的。為此，創(chuàng)建自己的模板是很好的做法。
• 開發(fā)和測試的特殊功能和互動性。
  這里就是看中要素開始發(fā)揮作用。我想借此在添加靜態(tài)內(nèi)容的網(wǎng)站，因?yàn)檫@個服務(wù)現(xiàn)在提供了一個比較干凈，整潔的工作空間。有些開發(fā)商想獲得形式和驗(yàn)證并在此階段運(yùn)行也是如此。
• 填寫的內(nèi)容。
  對于枯燥的一部分時間：加載客戶端或作家提供的所有內(nèi)容。雖然平凡，不失誤在這里，因?yàn)榧词故亲詈唵蔚男枨缶o張的頁面排版和精心注重細(xì)節(jié)。
• 測試和驗(yàn)證的鏈接和功能。
  這是一個完整的網(wǎng)站檢討的好時機(jī)。作為一個指導(dǎo)你使用文件管理器，穿行每一個頁面上，您已經(jīng)創(chuàng)建了，一切從主頁，提交確認(rèn)頁面，并確保一切工作正常，這是你沒有錯過任何視覺或功能。

這一階段的資源鏈接：

• Wufoo，形成發(fā)電機(jī)
• 土坯Browserlab，跨瀏覽器的分析
• 選擇合適的Web平臺

4。啟動

對發(fā)射階段的目的是準(zhǔn)備供市民瀏覽該網(wǎng)站。這就需要設(shè)計(jì)元素，互動性和深刻的測試和功能，最重要的是，一個用戶體驗(yàn)審議的最后拋光。在這個階段的一個重要步驟是將早期的網(wǎng)站，如果需要的話，其永久Web服務(wù)器。在生產(chǎn)環(huán)境中進(jìn)行測試非常重要，因?yàn)椴煌姆?wù)器可以有不同的功能和異常行為（如不同的數(shù)據(jù)庫主機(jī)地址）。

• 拋光
  特別是如果你不急于滿足最后期限，打磨基本完成設(shè)計(jì)可以有很大的不同。在這里，你可以識別的網(wǎng)站，可以在小的方面改進(jìn)的地方。畢竟，你想成為這個網(wǎng)站的客戶端自豪。
• 轉(zhuǎn)移到現(xiàn)場服務(wù)器
  這可能意味著轉(zhuǎn)移到現(xiàn)場的Web服務(wù)器（雖然希望你已經(jīng)在生產(chǎn)環(huán)境中進(jìn)行測試），“取消隱藏”的網(wǎng)站或消除“正在建設(shè)中”頁面。你的最后一分鐘的直播網(wǎng)站審查發(fā)生了。要確保這個階段的客戶都知道，和敏感的時間，如果該網(wǎng)站已流行。
• 測試
  運(yùn)行通過使用可用的工具的最終診斷，網(wǎng)址為：代碼驗(yàn)證器，破碎環(huán)節(jié)跳棋，網(wǎng)站健康檢查，拼寫檢查等等。你想找到自己的任何失誤，而不是從客戶或最終用戶聽力的投訴。
• 最后的跨瀏覽器檢查（IE，火狐，鉻，野生動物園，歌劇院，iPhone，黑莓）
  不要忘記檢查在多個瀏覽器的網(wǎng)站最后一次。正因?yàn)榇a是有效的，并不意味著它會與在IE 6脆布局神采奕奕。

這一階段的資源鏈接：

• W3C驗(yàn)證（HTML，CSS）
• 土坯Browserlab，跨瀏覽器的分析

5。后啟動

經(jīng)營重新進(jìn)入在這一點(diǎn)上的圖片作為你把相關(guān)的項(xiàng)目關(guān)閉所有的小任務(wù)的照顧。包裝源文件，使用說明和提供任何必要的培訓(xùn)在這個時候發(fā)生。始終保留為盡可能簡潔地告知客戶，并試圖預(yù)測任何問題，他們可能有。不要留下一個封閉的門項(xiàng)目;溝通您是在為將來的維護(hù)提供，并致力于持續(xù)的支持。如果維修費(fèi)尚未得到共享，建立他們現(xiàn)在。

• 手頭寬裕客戶
  確保客戶端與產(chǎn)品，而且所有的合同義務(wù)已得到滿足（參考項(xiàng)目章程）感到滿意。一個封閉的項(xiàng)目應(yīng)該離開你和客戶滿意，沒有燒毀的橋梁。
• 提供文件和源文件
  提供的，如軟拷貝的網(wǎng)站地圖上的框架和語言使用的詳細(xì)信息的網(wǎng)站，文檔。這將防止任何意外，為客戶以后，它也將是有益的，他們應(yīng)該永遠(yuǎn)與其他Web開發(fā)人員。
• 項(xiàng)目結(jié)束時，最后文件
  獲取客戶簽字的最后檢查，提供您的支持聯(lián)系信息，并正式關(guān)閉項(xiàng)目。保持與客戶的關(guān)系，雖然，在路上檢查在一個月內(nèi)，以確保一切都很順利，往往贊賞。

如前所述，這只是一個樣品的過程。您的版本將被修改根據(jù)您的客戶群和設(shè)計(jì)風(fēng)格。進(jìn)程也可以根據(jù)不同產(chǎn)品的性質(zhì)，例如，電子商務(wù)網(wǎng)站，Web應(yīng)用程序和數(shù)字營銷都有著獨(dú)特的要求。

記錄過程

創(chuàng)建和保留兩個版本的Web設(shè)計(jì)過程：
一為你或你的團(tuán)隊(duì)為指導(dǎo)使用你在后端的工作，一個與客戶分享。兩者本質(zhì)上的差異應(yīng)該是清楚的：你會更詳細(xì)，包括技術(shù)資源，以幫助發(fā)展客戶的將是一個簡潔，非技術(shù)性的過程圖，從開始到結(jié)束。

用于記錄業(yè)務(wù)流程常用的工具是一個簡單的Microsoft Word文檔，Microsoft Visio和心智圖軟體如Freemind。如果你雄心勃勃，甚至可以開發(fā)自己的內(nèi)部基于Web的工具。

使用過程

現(xiàn)在，你應(yīng)該明白什么是過程的樣子，包括每個階段的具體細(xì)節(jié)，并有一定的如何構(gòu)建您的特定網(wǎng)頁設(shè)計(jì)的構(gòu)思過程。這是一個偉大的第一步，但它仍然只是第一步！不要錯過這個下位：知道進(jìn)程如何能提高你的整體業(yè)務(wù)，以及如何使用它時，接近并與客戶進(jìn)行交互。

煉油過程

這一過程將會是不同的每一個設(shè)計(jì)師，并為每個項(xiàng)目。制定自己的過程，并確定什么是有用的你或你的團(tuán)隊(duì)。只有這樣，才能真正有用的過程。畢竟，自由職業(yè)者可以起到顯著不同的目標(biāo)市場。

項(xiàng)目符號列表是很好，但是這個過程可以更有效和較復(fù)雜。的資源，工具和網(wǎng)頁設(shè)計(jì)博客和Twitter發(fā)布的許多鏈接送入過程的不同部分適合。這是一種非常有用的方法來改進(jìn)過程就是添加資源鏈接到每個階段，并開發(fā)自己的資源，如品牌的文檔模板。

自由職業(yè)者的一些常用的文件：

• 客戶調(diào)查問卷，
• 發(fā)票，
• 項(xiàng)目章程，
• 文檔交付給客戶，
• 用戶帳戶，
• 數(shù)據(jù)庫表的圖表，
• 網(wǎng)站地圖。

文件和歸檔

文件和儲存是非常重要的把握。由于世俗的，因?yàn)檫@些任務(wù)就可以了，他們一定的幫助時報(bào)稅季節(jié)來臨時，或當(dāng)小自由企業(yè)開始擴(kuò)大。你永遠(yuǎn)不能過于紀(jì)律，當(dāng)涉及到工作效率和時間。你可以建立一個標(biāo)準(zhǔn)的文件格式，所有的客戶端和文件夾結(jié)構(gòu)，或保持以前的客戶和項(xiàng)目文件的列表或存檔。你可以使用任何東西，從簡單的名單，以全力以赴的小企業(yè)會計(jì)行為。

一個過程使得客戶放心

許多客戶認(rèn)為作為一個黑盒子Web開發(fā)，即使你試圖教育他們的方法。對他們來說，他們提供他們的要求，建議和內(nèi)容，然后一段時間后會出現(xiàn)一個網(wǎng)站或開始初具規(guī)模。他們往往完全主要方面的過程中，如設(shè)計(jì)和開發(fā)分離，不知道。手頭上有一個有組織的，簡潔的過程可以幫助組織客戶的想法，并于安心，更何況幫助他們了解他們的錢哪里去。

大綱作為自由職業(yè)者我的基本過程是迄今為止最常見的第一步，我與潛在的或新的客戶需要。快速，高層次“，這是它的工作原理”的討論提供了整個項(xiàng)目的框架。一旦你有這樣的討論，客戶將能更好地了解哪些是他們特別需要，你會在某些點(diǎn)提供的時間表，什么類型的工作你會參與，當(dāng)您去。最重要的是，可以討論任何誤解或扼殺在萌芽狀態(tài)混亂。

設(shè)計(jì)師往往過于深入到網(wǎng)頁設(shè)計(jì)，以實(shí)現(xiàn)大多數(shù)人不知道他們做什么或了解他們的術(shù)語，知道創(chuàng)造一個成品所涉及的步驟。開始與理解“無能”客戶端新鮮可以艱巨。

它是一個商業(yè)

這是一個企業(yè)，并概述了這里的步驟基本的路徑小型企業(yè)管理。當(dāng)你在客戶或員工或承包商成長，你會發(fā)現(xiàn)有一個不斷增長自己的工作清單，并從所有的事情頭痛的跟蹤。給自己一個突破，并在尋找投資工具，以幫助您有效地完成工作一段時間。擴(kuò)大的過程文件是一個偉大的這條道路上邁出的第一步。

提示

• 問一個非技術(shù)的朋友，審查您的進(jìn)程。如果他們是有意義的，它會使你的客戶意識。
• 以此為出發(fā)點(diǎn)，以建立或完善自己的其他設(shè)計(jì)師的過程。查看相關(guān)資源的鏈接。
• 構(gòu)建到您的過程文檔模板和Web應(yīng)用程序。這將節(jié)省時間，讓你更專業(yè)。

風(fēng)險(xiǎn)

一個進(jìn)程不能被應(yīng)用到每一個項(xiàng)目。雖然你的進(jìn)程將是有益的，當(dāng)你第一次參加在規(guī)劃討論客戶端，一定要審查之前發(fā)生的討論，以確保它適合的項(xiàng)目。