官網設計
去年在 電子豹 https://newsleopard.com 擔任產品設計師，接手到的是已經有品牌 logo 與色碼規範。進入公司觀察（打混）後發現：設計要做的有兩件：銷售產品官方網站（Landing Page / Official Website），以及整體企業品牌視覺規劃 (Branding and Identity)。
開始著手設計時感到非常的挫折，我往年的設計經驗著重於介面 UI/UX 、單頁式活動網站、資訊設計（懶人包），沒想到從 0 到 1 的整體視覺執行這麼困難，隔行如隔山，不過公司給我很大的自由（放任？），沒有經驗的我就從蒐集 landing page 參考資料開始 [1]。
1. 規劃內容
網站架構從 PM 與行銷那邊了解需求後，先將預計的內容區塊排上 sketch（因為頁面不多就跳過 wireframe 階段直接畫 UI），再來發想視覺。網站的主要目的是賣產品，希望來的人能夠點擊那個註冊按鈕，所以 SEO、介紹產品特色、價錢、客戶推薦為重點，在規劃單元、排版時需要仔細考量進去。
2. 定調產品、繪製插圖
在蒐集參考資料 [1] 時就發現，因為產品為抽象的軟體，很難使用照片來表現，所以近幾年 landing page 才這麼流行插畫的表現形式，也比較貼近人性。(當然你也可以解讀為現今流行的就是這樣，自己還沒想到更好的就先 follow)。
依照公司品牌決定視覺方向為：簡單、貼心、專業、科技、快速等等調性，開始用 mind map 發想插圖元素、練習符合形象的插圖表現手法，並想辦法在接續的圖片延續一致的風格，參考資料[2]。這蠻需要一段時間練習才能抓到訣竅，畫完一陣子再回頭整理有助於統整。主要 tips 就是：
- 瞭解品牌，知道插圖會被運用的範圍（形象官網、後台、facebook、雜誌等等）。
- 定調的風格要具彈性與一致性。
- 立定插圖規則：規範色盤、背景表現手法、著色方法、陰影表現等等。
- 強調：用色很重要。
官方網站設計完後，有再回頭調整產品裡面的 icon、插圖、系統通知信等等，以求統一的形象呈現。
3. 前端製作
官網前端使用 GatsbyJS 開發，算是一個很容易上手、蠻方便的靜態頁面框架 (static website generator)，推推 ⭐⭐⭐️
部落格設計
1. 購買適合的 Wordpress theme 再做調整
由於之前的部落格已經累積了不少流量，所以在設計新的部落格時就不考慮其他的平台（無法承擔搬移資料遺失的風險），挑選一個看起來乾淨不錯、文件完整的 Wordpress theme 購買，把資料倒進去之後，再針對現有的需求調整該 theme 的 child-theme 原始碼。
目的用內容行銷品牌，致力打造中文界最優質的 Email Marketing 內容平台，希望藉由優質的內容進而提升品牌形象，所以部落格的 header, footer, style guide 皆需要與網站一致，讓讀者不費力的感受是同一家出品。
2. 頁面 UI/UX 設計
UX 設計著重於 CTA 區塊、訂閱表單區塊、文章分類。單篇文章注重閱讀體驗，捨棄一般常見的 sidebar、大 banner 格式，採用小圖片、內容為主的形式，並出一份文章撰寫規範給協作的作者群。
各篇文章首圖的設計，跟設計同事研究覺得，文章首圖最主要的目的是要吸引讀者點擊，讓純文字的文章有一點生命力，設計上著重：色彩鮮豔、圖案有趣、畫出內容的關鍵字。
3. 使用 GTM 追蹤網站 UX、轉換
設計部落格的同時也考慮到 GA 追蹤，以便將來檢視成效。例如簡單的追蹤 UX 的部分包含：top header 按鈕點擊次數、CTA 點擊次數、不同位置的訂閱表單點擊次數、分類 navigation 點擊次數，如果後續追蹤發現點擊狀況不佳，再想辦法做優化（例如：同事 A 覺得分類 navigation 長成那樣使用者不會點，我們就來埋 event 看看到底點擊狀況怎麼樣，如果真的不佳，再來檢討設計怎麼優化）。
關於 GTM 如何使用可以參考很多網路上的文章，或是我這兩篇筆記（是個超級麻煩但有時間不得不用東西）：
設計師該做的到底是什麼？UI/UX Developer? Visual Designer? illustrator?
在規劃設計官網時，一直困擾我的是，身為一個網頁設計師，主攻的設計項目到底是什麼？UI/UX 設計、插畫設計、前端、GA⋯⋯常常覺得事情很雜每件事都碰一點又做不精。但後來因為接觸到 UX ，轉一個念想：回到設計的初衷就是「解決問題」，想想身為一個設計師在現階段能夠幫助到公司產品的什麼、能夠優化的地方有哪些，並以現有的資源做最好的運用。
對我來說，在電子豹做設計學到最多的就是，如何在一間公司找到自己可以正常發揮的位置。因為是做自己產品的公司，不會像接案公司一樣，手頭上一次卡三個以上不同的案子（還每一個都結不了案），可以想辦法從各角度幫助公司產品成長，不停的優化並且追蹤數據用以驗證設計是否有效。
\ 本文感謝 電子豹同仁們的參與協助 /
註[1] 官網設計參考資料
科技業官網 / landing page：
- https://www.zendesk.com/
- https://www.intercom.com/
- https://baremetrics.com/features/segmentation
- https://slack.com/pricing
- https://www.atlassian.com/
- https://www.shopify.com/
- https://acquire.io/mobile-sdk/
- https://usepastel.com/
- https://eco.com/
- https://www.paymoapp.com/
- https://hellopingpong.com/
- https://teambit.io/
- https://www.hellobonsai.com/
- https://canny.io/
- https://gusto.com/
- https://asana.com/
- https://www.instagram.com/fearlessagency/
- https://www.googlesciencefair.com/student-resources
- https://supergoop.com/pages/sun-101
Design Agency ：
- https://www.stinkstudios.com/
- https://ueno.co/
- https://locomotive.ca/e
- https://wonderlandams.com/studio/
Design System:
- https://atlassian.design/
- https://www.uber.design/
- https://dropbox.design/
- https://polaris.shopify.com/design/colors
註[2] 圖片延續一致的風格
- Designing Adobe’s Brand Illustration Style
- Brand Illustration 101: Visualizing the Narrative
- Everything you need to know about Design Systems
註[3] 部落格參考
- https://resources.sigstr.com/blog
- https://blog.benchmarkemail.com/
- https://www.mailerlite.com/blog/category/tips-resources
- https://sproutsocial.com/insights/product-updates/
- https://www.helpscout.com/blog/
- https://explore.reallygoodemails.com/
- https://www.intercom.com/blog/
- https://www.intercom.com/blog/email-marketing/#email-service
- https://wistia.com/learn/marketing
