一般來說，要建立一個網站或平台，一共有4個步驟。
他們分別是：
用家體驗 （USER EXPERIENCE）
資訊架構 （INFORMATION ARCHITECTURE）
設計 （VISUAL DESIGN）
開發 （DEVELOPMENT）
1. 用家體驗 （USER EXPERIENCE）
建立一個網站的第一步，原來並不是直接坐下來畫layout或是做Programming。反而，你應該要跳出自己是設計師的身份，把自己當作網站的用戶，想想看：
網站的用戶是誰？
他們年紀有多大？是男是女？
他們有什麼特點？興趣？
他們為什麼要上你的網頁？有什麼目標？
有什麼功能是他們喜愛/不喜愛的？
如果可以的話，最好是找出這班目標用戶，和他們聊聊天吧！
和目標用戶聊天，除了可以了解以上問題的答案外，更重要的是，你可以從與他們對話中，了解他們說話的用字，語句，把他們都記下來。
不要小看這些語句！遲一點你在為網頁寫文字內容的時候，這些語句會對你幫助很大。因為他們都是從目標用戶親口說出來的。
2. 資訊架構 （INFORMATION ARCHITECTURE）
第2步，我們叫「資訊架構（INFORMATION ARCHITECTURE）」。這一步有點像一個橋樑，去把你想做的東西，變成編程員會看得懂的東西。
資訊架構（INFORMATION ARCHITECTURE）通常有以下的東西：
Sitemap
WireFrame
Sitemap很容易去理解。你網頁將會有什麼頁，便把它們都列出來。如下圖，網站有Home, Service, Contact等頁：
WireFrame則是用一枝筆，把網頁大概的樣子畫出來：
上圖其實是twitter的wireframe! (來源：
https://www.flickr.com/photos/jackdorsey/182613360)
WireFrame不用畫得漂亮，它只是你網站外觀的大概，初稿。接下來我們還是會把它交給設計師去設計。
3. 設計 （VISUAL DESIGN）
當有了sitemap及wireframe後，我們便會把它交給設計師去做設計。
設計師通常會使用AI，Photoshop，ADOBE XD等軟件去做設計。如下圖：
要注意設計出來的會是一個圖檔。圖檔是靜態的，而網頁則是動態的。因此，設計師在設計時，還應考慮當中的動態元素。
4. 開發 （DEVELOPMENT）
當設計完成後，你便可以把設計交給編程員，去做開發了。
編程員通常會跟著設計，把外觀Frontend做好，然後再做後面的功能Backend或把網頁連上CMS。
此文章轉載自鬍子科技學院http://mtache.com/html