如果在不仔細考慮網站架構的情況下就去做一個網站，這就像在沒有規劃行程前而去貿然旅行。你可能最終到了你的目的終點，但是你可能也不知道在這過程中，你已經走過了多少的彎路。做網站適用同樣的道理。在開工之前，好好的規劃你的網站架構是非常有必要的：一方面使得設計流程清晰規範，另一方面更加有效的layout，SEO優化設計等都可以在這個階段有所考量。
- sitemap
sitemap是網站組織的指南。她是能在你的網站上的所有元素的視覺化反映，表明了有哪些連結，分別指向哪些頁面，這些頁面是如何連線在一起的，你如何從這個頁面到達另外一個頁面等。這實際上最終將形成網站的XML sitemap，並且可以直接向搜尋引擎提交，但是在早期設計階段，這個sitemap只是指引進一步設計的模板參考
- wireframe
這是一個非常基本的對於頁面究竟會長成什麼樣的概念化的反映。這是一個並不工作的mockup(模型)，僅僅用於初略給出一些想法：哪一個元素應該放在頁面的哪一個位置。。。比如，logo, sign-in,search box, main nav, sub nav, main content, callout, dynamic content, widget, slider等等
wireframe通常描述了頁面的layout或者網站內容的安排，包括介面元素，導航系統以及他們是如何一起工作的。其存在的目的通常是用於描述商業目標或者創意。wireframe通常缺少印刷格式，色彩，圖形等，因為其存在的原因主要是功能，行為，以及內容的優先順序。換句話說，他主要聚焦於what a screen does, not what it looks like. wifeframe甚至可以由鉛筆素描或者白板繪畫形成，當然，現在也有很多用於生成wireframe的online軟體。wireframe通常由busness analysts,user experience designer, developer, visual designer或者其他的interaction designer, infromation architecture人員來製作。wireframe focus on: the rance of functions available, the relative priorities of the information and functions, the rules for displaying certain kinds of information, the effect of different scenarios of the display. 她市一中快速page prototype的方法。wireframe通常存在於high-level structural work--like flowcharts or site maps---/and screen design.在網站製作的流程中，wireframe是將我們的概念視覺化。
- interaction
互動互動圖模擬了人們是如何使用你的網站的。她描述了人們在使用您的網站時的切實使用者體驗。雖然wireframe可能指示一個contact page是實實在在存在的，interactions圖將視覺化使用者在使用那個contactpage時的情景。她將展示當使用者submit contact form時，他們將被重定向到哪個頁面，並且展示當出錯時會發生什麼。
Website架構設計是web design的第一步。他在網站的基本概念成型後開始：你應該知道了你的網站要完成什麼商業目標，你的網站的使用者是些什麼人，你知道他們喜歡什麼。這樣你就需要決定如何使用你提供的產品來滿足這些人的需求。隨後在architecture結束後，你可能需要website prototyping這個流程，這樣你將有一個可以工作的原型，並且可以邀請使用者來測試她，在得到使用者關於原型機的feedback後，user experience design就需要精細地調整使用者體驗了。
http://www.webbizideas.com/architecture