Puffin.com 2.0 新官網設計背後的故事
由於產品的推陳出新，舊有的官網慢慢地不符需求。過去鮮少露臉企業文化特色，在我們進行識別重塑後，也在這次的官網翻新時，得以呈現在消費者面前。
主要目標
- 導入先前實作的新識別規範。
- 整合舊有產品和公司介紹等資訊。
- 各產品文字、內容及定位重塑。
- 全新的訂閱方案 Puffin 365 首次對外揭露。
前期研究與討論
前期規劃上，邀請相關主管、工程師和同事參與，降低實作時可能的狀況及確保舊版官網既有問題是否修正外，同時，也藉由不同職能的同事的參與，納入更多想法，找出最適合的呈現方式。其中，網站的主要骨架由工程師主導架構，確保整體可行性。
設計理念
網站為識別重塑後的第一個實踐項目。除了讓品牌精神在官網上視覺化、延伸識別的規範外，在實作上，我們盡量避免使用 CSS 以外的動畫效果及第三方套件，在不同媒介上盡可能的維持最佳體驗，且簡化 RWD（響應式網頁設計，Responsive Web Design）上的變化，並嘗試將之模組化等，以便於後續維護和內容更新。
Design System
統一字形的使用：定義網站所需的標題 (Roboto Condensed)、內文 (Roboto) 及註解 (Roboto) 。配色延續企業識別，因應需求規劃出其他輔助色。
為了加速開發，Icon 依現有圖庫為底，並讓圖示線條維持一定粗細，倒圓角呼應識別規範，另外按鈕也依循圓角元素並規劃不同狀態 (Normal, Hover, Click) 樣貌的呈現。
RWD
Mobile 和 Desktop 為主要版面 (Tablet 為 Mobile 的延伸)。規劃上 Mobile 版面以「瀏覽」為主要重點、Desktop 則以「訂閱」體驗為主，兩版面盡可能共用元素、元件，簡化 RWD 上的變化，讓視覺簡潔、且便於開發及後續維護。
插畫應用
在人像呈現和 Blog、News 預設封面等，皆採用類似水彩插畫的電繪方式處理。相較手繪，這次特別透過 iPad Pro 來電繪，加速了整體的繪製過程，也能因應需求隨時調整。
想了解更多關於 Puffin 的設計嗎？請多多關注我們，希望多給我們 “拍手“，有任何想法歡迎留言讓我們知道！
