Web DesignFront-End 製作網頁從0到有
前言
此篇文章主要在分享在一間非常講究設計與質感的網頁設計公司擔任前端，在收到美美的設計圖前後分別會做哪些事情? 接下來將整篇文章分成四大區塊跟大家分享我的個人經驗：
． 知道自己被分配到專案內時該做什麼
． 拿到設計師設計作品後的任務
． 實際製作網站，將設計師的作品轉為HTML的自我要求
． 自我提升分享
知道自己被分配到專案內時該做什麼
-
執行任務前一定會先收到行前通知，此時身為前端，也可以開始做好開始製作網站前的行前準備。
從前端規格表中了解專案
專案內一定會需要一位可靠的 Project Manager(以下簡稱PM)在管理整個專案的進度、流程，我們可以預先檢視 PM 提供專案的【前端規格表】，了解整個專案 欄位項目 及 文案限制 被如何規範。
仔細檢閱 WireFrame (以下簡稱 WF )每一頁的細節、說明及欄位
將前端規格表及WF兩份資料進行比對，可以協助我們在接下來接收到圖稿後要進行製作網站時有很大的幫助，不但預防頁面繁多有些又相似時產生的疑惑，還能更快速理解哪些區塊如何選用標籤來製作，這能大大減少製作完成後若寫法錯誤導致系統無法串接的問題，更能減少出現問題自己的重工機率。
製作一份提供給自己使用及團隊夥伴瀏覽的切版進度表
藉由切版進度表可以在未來執行專案時更精確的清楚當前進度，不管是過完周休二日後還是抽身進行其他專案後回歸，都能藉由進度表快速進入狀況理解上次的結束點，接下來該如何繼續執行。團隊中的夥伴也能由切版進度表在不打擾彼此工作的情況下更清楚目前的進度狀況，真的一舉多得！
拿到設計師設計作品後的任務
-
設計師會先將客戶的期望及喜好元素依著 WF 的訊息帶入圖稿中，看到設計圖的此時已經對專案有了一些基本的認識，帶著對專案的基本認識在網頁上實現設計師創作出來的核心價值，而我們也不是單單把圖稿做成網站這麼簡單，一個網站可以寫得很簡單也可以寫得很複雜，我們的工作是把需要的、重要的做到最好，能讓客戶滿意，也能將設計師的設計作品價值最大化。
與設計師對話
欣賞美美的圖稿時也要同時分析區塊的劃分、互動可能性，並且與設計師詢問設計方向，客戶有無動畫要求及期待…等。
製作整體 Layout，運用最適合自己的前端工具開發
設定好許多接下來在開發專案時會用到的樣式設定後，不外乎就一定是開始製作整體框架(我們選用Gulp)。謹慎挑選套件引用、撰寫會使用到的功能、製作 touch-icon、favicon.ico。
抓出主要色碼、文字大小及相似區塊的通用樣式
這也許會花我們一些時間，但絕對在未來的開發上能更有效率的執行專案！例如在不同頁面上重複出現的按鈕、icon、搜尋區塊、選單、表格…等等。
編寫 README.md 檔案
這一步看似不起眼，實則重要到不行！當同一個專案有多人開發時， ReadMe 絕對是一個能夠快速使加入專案的夥伴能快速理解整個專案細節的重要文件！一份完整的 ReadMe 你會在裡面看到：
a. 專案開發版本
b. 製作網站的日期紀錄
c. 版本控管相關檔案
d. 啟動專案相關資訊
e. 使用套件列表
f. 注意事項
g. 檔案說明
h. 專案相關文件
i. 其他資訊
就是有這麼多的細節要編寫(甚至更多)，儘管會花時間與心力，卻都是能讓專案更順利執行的重要環節！專案進行到某個階段時也不能忘記回頭更新最新的切版進度資訊。
製作全站通用的 header 與 footer
全站區塊劃分的三大區塊為 header、footer、content
根據設計稿樣式不同，所製作的時間也會有差異，將內容 content 以外的兩大區塊 header 及 footer 優先在編寫內容前製作完成，隨著設計及功能性的複雜度(加上現在幾乎每一個專案都一定會有 RWD )，花費的時間也會有所不同。
實際製作網站，將設計師的作品轉為 HTML 的自我要求
-
經過一連串的前置作業，才真正開始編寫網站的content內容。這個部份我們除了談論會做什麼外，還會提到一些在編寫網站時的想法、理念、堅持。
觀察設計的巧思，動畫與視差的搭配
設計圖設計到前端手中實現在網頁時，若無法把設計的用心一同做出來是真的非常可惜(個人拙見)，因此收到圖稿的第一件事就是思考如何體現與設計師討論時接收到的資訊，將設計作品想訴說的話在網頁上發揮至最大化，動畫與視差的呈現上也必須搭配設計風格才能與設計師的作品達到一致性。
重視每一個頁面上的互動
網頁上的每一個互動都很重要，無論是hover、focus都不輕易忽略，加上互動可以更清楚的讓使用者直覺清楚知道哪些地方可以被點選，也能使網站更加分。
不同瀏覽器皆能適應的網站
談到不同瀏覽器，絕對是90%以上的前端工程師都有共同的心聲！！！！！
IE 瀏覽器絕對就是一個不願意跟上軌道的異世界瀏覽器 (／‵Д′)／~ ╧╧
不過雖然異世界的 IE 讓人頭痛，瀏覽器皆適應也是能讓網站完成後更完美的必須條件。
追求完美的 RWD
完美的 RWD 至今都依然都是非常值得學習的課題，我為自己設定的完美 RWD 並不是所有版本都不要有跑版就好，而是所有版本都美觀並且能盡可能的保有設計師原先的設計元素。
專案製作一個適合的 Loading
一個舒適順眼的 Loading，也能替專案加不少分數喲！
信任自己的夥伴，與夥伴溝通，並且從中學習
網站製作完成後，不代表自己做出來的網站是最好的，畢竟真正在面對客戶的是設計部的主管及PM，做完的網站在一些細節上與團隊內的夥伴溝通編修後，我認為網站才是真正的初階段完成。而每一次的編修都要細心觀察，讓自己未來製作網站的完整度能更加提升！
自我提升分享
-
前端工程師是一個永遠都不能停止學習的職業，裝置不斷的在進化，語言也跟著大環境不停的在更新，因此我也會在專業能力的部分要求自己不斷進步與成長。
為自己設立最低限度的進步
設立最低限度的用意並不是要求自己進步一點點就好，而是在繁忙的生活中，無論多忙，依然要求自己每天都要有收穫！小至一個標籤的新用法、大至一個新語言的運用都是進步，都是讓自己更強的步伐。
利用瑣碎或是空閒的時間提升美感
提升美感可能對某部分的前端工程師來說不是非常重要，但一個網站要做出細節、做出設計的巧思，美感在很多時刻是不可或缺的。準備一些可以隨時看的設計作品分享平台，像是在Pinterest或是behance上欣賞設計甚至是藝術作品，也可以參加一些社群，參觀一些展覽，從社群跟展覽中了解設計師、創作家的理念堅持，我認為都是非常好的自我提升與學習。
Pinterest
https://itunes.apple.com/tw/app/pinterest/id429047995?mt=8
behance
https://www.behance.net/
欣賞網站，從中學習
我認為欣賞網站作品也是一個非常好的自我提升方式，可以看到網站中的製作巧思，一個簡單的動畫有時候運用的好也能達到讓人非常驚艷的效果。舒服的排版、細節的呈現方式等等，在欣賞的過程工也能從網站感受到好與不好的體驗，這都是非常值得參考的！
io3000
onepagelove
awwwards
S5-Style
日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト
結語
提升自己的核心價值，堅持信念，除了與團隊一同成長外，更要要求自己今天比昨天更進步！
以上跟大家分享了這些，依然想說並不表示我的網站做的完美、無可挑剔，而是在這個科技不停進步的時代 (IE除外)，提供一些三年來的前端經驗與大家分享，除了自我進步，與團隊的信任合作溝通也是非常重要的！希望無論是你我都能永不放棄，一起不斷的成長！一起加油！
最後，謝謝你的閱讀 :)
海棠網頁設計公司
https://begonia-design.com.tw/
海棠網頁設計公司 medium
https://medium.com/begonia-design
