程式學習紀錄舖

在畫好 Wireframe、定版後，就可以依照線框稿內容製作 Mockup 了。Mockup 有很多種說法，我當它是視覺稿，所有跟視覺有關的部份都會在這個階段產出。能夠用來製作 Mockup 的軟體有很多種，最大宗的就是 Photoshop。之前的文章都會說提升 PS 技巧，其實指的就是製作 Mockup 的能力，字體設計、按鈕樣式、扁平化、擬物風等等。

我自己是 Photoshop 派的，因為它的外掛多、功能多、網路上的資源教學也最多，和影像有關的設計幾乎全包了、還可以畫畫 CG 圖。另外還有 Fireworks、Sketch、Xara等等，不一定要用 PS 設計，挑自己最順手的就好。（不推薦使用 Illustrator 製作任何螢幕使用的 Mockup，AI 是印刷用的設計軟體。）

設計的工作流程

身為一個過來人，應該說我也還正在這條路上行走，有一些心得想跟大家分享。我是從設計起家的。設計的領域又可粗分為圖示設計跟排版設計…等等，而我是屬於排版這一塊。做網頁的流程大致是：

1. 打開 PhotoShop / Sketch 從一張空白的圖層開始做出一個網站
2. 進切版(用 PhotoShop / Sketch 切出需要的 icon) 以及 Layout (用 HTML + CSS 做出網站)
3. 會碰到 JS 的互動時，我能找套件就先幫忙做好，不行就放著給後端
4. 丟給後端套程式。

如果你不是純視覺，我想你的工作流程可能跟我差不多。那，這樣不算是前端嗎？