一、原型階段

  原型設計階段的任務就是根據用戶的需求描繪出頁面的草圖。這時候有效的工具其實就是鉛筆和紙。當然，也有一些比較不錯的原型設計工具，比如balsamip, mockingbird 等。當然，傳統的平面設計工具在這個階段也有幫助，比如photoshop等。

二、編碼階段

  在完成了基本的效果圖設計后，就需要將相應的設計效果轉換為html ,css和javascript，這時候，常用的工具有dreamweaver, expression blender 等。但亦有不少前端工程師在這個階段就會采用文本編輯器，比如vim,textmate來實現原型。由于CSS是一個與視覺效果密切相關的要素，因此在CSS的設計方面，有大量所見即所得的輔助設計工具，網站設計和前端邏輯一般來講是不能完全分離的，對于前端設計師來說，掌握基本的javascript知識是需要的，如果能夠熟練地掌握一種基本的js框架更好。

三、測試階段

  由于眾所周知的原因，目前主流的某一知名瀏覽器經常有著與其他瀏覽器截然不同的表現。作為一個認真的前端工程師，網站制作中你應該還要掌握跨瀏覽器兼容性測試的技術和工具