網頁設計案例-聊天機器人Chatisfy，台灣唯一臉書官方F8二次推薦行銷夥伴
離開台灣早已屆滿一年了，在澳洲要拿到當地的設計案其實沒有想像中那麼容易。除了第一個案子是去澳洲之前剛好看到有人在找外包，之後都是客戶在幫忙轉介紹認識的，另外也有自己去跟當地recruiter面試拿到幾個小案子。此外在澳洲做過的案子幾乎都是台灣的外包，意外的插曲是有一個美國紐約的客戶，在Behance看到作品之後自己找我做logo(所以還是要好好經營一些平台，機會可能會找上門)。
回來雪梨之前，剛好台灣的客戶預告說過年之後有一個作品希望我幫他處理，時間正好是我從北新州一路road trip到塔斯，正式結束旅程的時間，很幸運地在剛回到雪梨就有飯吃yay。歷經長達半年以上沒有好好做設計，我自己在評估這個案件的工時比以往保守，多留一些緩衝期，另外希望也能在這個案件練習到新的技能。
這次工時大概有一個月的時間，總共有一個首頁跟三個內頁，此外還有動態要處理。設計的時間估兩週、切版一週，預留剩下的時間處理各種疑難雜症。因為想學的東西很多，我大概在這次的工作期間嘗試了以下：
1. 使用HTML預處理語言 — Pug開發(安裝失敗)
這明明就是聽起來就很簡單，但我還是裝不起來…安裝之前我還回去複習了Hahow”動畫互動網頁特效入門”，Pug的前身是Jade，但我只找得到Jade的安裝做法，不知道為什麼照著網友安裝了node.js和後續的步驟，在Sublime的環境就是看不見任何效果。
2. 複習CSS預處理語言 — SCSS/SASS開發(成功)
我在2014年學過SASS，在前公司也有用SASS開發的經驗，不過當時我那台Windows本機端Apache不知道為什麼安裝起來都怪怪的，工程師可能也太忙沒空處理我的問題，公司的server環境放在NAS，每次要執行SASS都等到天荒地老，所以我過去大概只實際應用在一兩個案子，就沒有再碰它了。這次花時間練習變數的寫法，釐清@extend 和@mixin，然後發現@extend居然在media query裡面無發呼叫。變數的命名原則其實滿需要邏輯及技巧的，這點可以參考一下完整的framework是怎麼執行的(如Bootstraps)。
3. 練習flex排版(成功)
雖然他的功能有點複雜，但真心覺得非常好用，一樣我也是複習了Hahow”動畫互動網頁特效入門”，這堂課我覺得講的還滿清楚了。要實踐flex排版一樣要限定IE10以下不支援的案子。
4. 使用Bootstap4的framework排版(暫不使用)
這個在前端技能開發樹裡面佔有一席之地。所以開始專案之前我有考慮是不是用框架來嘗試看看。我花了至少兩天的時間官方的英文文件看過，閱讀的當下覺得有些功能很厲害，不過要花時間記class。因為這次的版面設計自由度比較高，我在SASS環境開發的時候，發覺如果把客製化的網頁用這樣framework來執行，反而很局限，所以又花時間把之前寫的架構打掉了。不過就算這次的案子雖然沒有使用上，但我覺得Bootstrap畢竟是一套完整的系統，他的命名規則很有邏輯，非常值得學習參考。
5.使用Sketch開發UI介面(成功)
首頁跟三個內頁其實還是用Photoshop開發的。設計對我來說的工時一直比切版還難估，所以我還是先以熟悉的軟體執行，而且我一開始確實想多留一點時間學習前端技術，所以我要多留點時間研究。客戶在最後有追加一個新的頁面，風格需要沿襲之前的風格，但內容不同所以排版上面不需要follow，於是我就開始挑戰用Sketch開發。一樣也是花了兩三天的時間看官方文件還有看以前在Udemy換到的課程，但我覺得目前看到最喜歡的網路資源是這個網頁上的tutorials https://www.learnsketch.com/tutorials
中間當然遇到很多小問題，會覺得這個在photoshop超簡單就可以處理好，現在不知道怎麼辦的窘境。不過也有一種我沒有預想到，但以往在photoshop做圖幻想的一些功能，卻在Sketch發現而有相見恨晚的感覺。尤其是Symbol這個功能真的很強，還有複製CSS/SVG省了很多時間。不過我對這個軟體仍舊在摸索中，我給自己的功課是希望能在做一組完整的UI介面並串上flow。
6.研究網頁動態(學習曲線過長)
當初知道這個案件有動態的時候，想過是不是要用Canvas而不用gif，然後我又開了Hahow”動畫互動網頁特效入門”，看了最基本的單元，發覺以我想要呈現的效果，還有我熟悉的工具，果然還是只能先以gif呈現，不過我在觀察Richart官網的時候，發現他有一些動態的做法滿值得參考，有讓我的動態比較接近我的理想。
總結案子我覺得客戶給我的設計發揮空間還滿大的，不過我給自己的挑戰也不少，所以當初在估時程的時候覺得很充裕，實際上做起來是超出我自己以往開發所需的時間。另外因為東澳跟台灣時差+3，客戶是10點到七點上班，我的作息扣掉用餐和休息，很長工作時間都是早九晚十XD。回歸本行花了很多時間暖身，感謝在練功的時候得到很多人的協助。希望客戶繼續賞我飯吃:DD
設計作品集跟細節發表在Behance https://www.behance.net/gallery/78153111/Chatisfy-Official-site-web-design
