對於一個web專案，在實際編碼之前，有一些通用的步驟來planning a website:
0.Defining the project (predr0->dr0)
對於外部專案，客戶一般會發出一個RFP,向潛在的服務提供商徵詢proposal,通過和客戶溝通首先了解到他們所面臨要解決的一個問題，並且通過不是很清晰的初步探討討論轉換成一個可以被感知到的建議 proposal，並且輸出很高層次的proposal,該proposal由很高層次的outlined feature list或者叫做scope of work(比如：網站需要blog的功能)這個過程需要深思熟慮的思考和相應方法。RFP需要客戶確認，該階段結束後將進入下一個階段planning。
在Research階段回答以下問題：
- 網站的使用者是哪些群體？
- 他們訪問我們的網站是為了達到什麼目標，完成什麼任務？
- 他們希望解決什麼問題，消除什麼憂慮？
- 為了達到他們的目標，他們需要什麼資訊或者什麼步驟來達到目標？
- 網站的 商業目標是什麼？
- 按照使用者角色模型來分別分解網站的功能(user story)
1.Planning(dr0->dr1)
首先你需要對於網站擁有什麼樣的內容有一個清晰的想法（have an idea for the site's content）;
這個階段通常是大多數專案的第一個階段，勾畫出專案的整個詳細的scope.在一些諮詢公司裡，這個階段緊隨對proposal的approve或者scope of work.在許多公司內部的專案中，專案由計劃階段開始。我們定義計劃階段就是由RFP啟動對需求文件的細化，輸出requirement文件/user story/product backlog，並且輸出wireframe檔案，這些被確認後進入下一階段。
Information Architecture and Content過程需要完成以下工作：
- Gathering content,蒐集內容
- Organizing information,組織資訊(information architecture)
- Creating potential site maps，建立網站地圖
- Potential user flows:
Quickly wireframe需要完成：
- 快速將自己的idea視覺化
- 建立資訊層次結構和layout pattern
2.Visual Design(dr1->dr2)
這通常是一個專案中變數最大的部分。在一個web開發專案中，design phase通常是non-technical team members有最多輸入輸出的領域，也是很多小專案run over budget的地方。通常由視覺團隊開發。你能夠保持visual design phase on track並且On-budget的最好辦法是：在第一個階段建立一個非常清晰非常棒的requirements document以及wireframes。輸出由image來承載的每個網頁視覺化資訊；
- establish look and feel
- Mockups
- style guides
- Mood boards
3.Development(dr1->dr2)
在這個開發階段，我理解有兩大領域需要開發：
3.a)前端生成html-mockup;
protypes might be anything from linked images in a tool like inVision, or they might be a working prototype coded with front-end languages like HTML and CSS.
- Test out design
- get a better idea of the experience
- Discover problems sooner
- 使用類似invision的工具來輔助
3.b)後端customize development；
3.c)並且在適當的階段需要將這兩個前端後端合併膠合起來。
開始設計網頁 designing the site
在這個階段，你需要有更多更細緻的關於你的使用者將看到的細節以及如何和你的網站、應用來互動。這個流程又包括： graphic design;users compability; available technology;future proofing;responsiveness;
這通常是專案的最大階段，在這個階段你可能最大機會能夠保持高效聚焦，你的開發團隊在這個階段將有充分施展才能的舞臺；相反地，這也是你避免危險錯誤的最大機會所在。依賴於專案的大小，開發階段可能在planning phase之後立即進行，直到測試階段結束。
4.content階段(dr1->dr2)
這個階段通常和開發及測試階段有些重合。這個階段你可能engage你的使用者或者客戶向你正在buid的系統中Populate內容或者資料。在這個階段，你也可以向你的客戶提供培訓。培訓對於你的專案成功也是非常重要的。
4. 構建網站的前端 build the site's front-end
一旦你的網站設計工作告一段落，你已經知道了你需要什麼，那麼是時候我們開始building it了。
5. 如果有需要，則給網站開發後端(前期對於web app開發可以以json來代表後端，對於web網站的開發則將動態資料先做死了，後期由後端模版來動態替換)
很多網站使用類似於一個CMS的管理後端。如果你的網站需要這些功能，那麼你需要要麼以wordpress作為後端，你的前端以模版的形式存放在系統中
5.測試(dr2->dr4)；
6.部署(dr4->dr5->dr6)
Wireframing
什麼是wireframing呢？wireframing是web design的一個部分：你構建一個最基本的網站layout，使得你的每一個網頁概念視覺化，這有助於讓你想清楚在哪裡放置什麼元素。在這個階段，你應該思考你的網站是否需要target desktop或者mobile user;如果你決定你需要你的網站需要在desktop和mobile上面同時使用，那麼很重要一點需要使用responsive design;
visual mock-up和wireframe有什麼區別?
一個web redesign專案的視覺化的mock-up 可能在header區域包含一個正在使用中的公司logo標誌，而在wireframe中，logo只需要使用一個squre box來代替，標註為"logo"。wireframe通常被export成為一個pdf檔案，design mock-up通常被輸出為jpg檔案