Hahow Practice – Brand Guideline Design

這是在 Hahow 課程募資網站所開的一門課 ( 動畫互動網頁程式入門 )其中一個小練習，真心，非常推薦這門課，對於前端實戰應用做出了很多觀念上深入淺出的講解。

在這項練習中包含了一些 Sass 這項 CSS 的 Precompiler，以及 HTML 相對應的 Jade的實務應用，雖然後來覺得 Jade 的語法反而讓我有點在 HTML 的架構上感到疑惑，儘管如此，多些新技術的嘗試總是好事，不試過又怎麼會知道好不好用，適不適合自己的習慣呢?

在配色上的著墨花了不少時間去調色，苦思之餘也找到了些好用的配色靈感工具：

以上兩個網站應該足以讓你配出好看的顏色對應，建議多去玩玩順便培養自己對顏色的感覺。

BTW，之前在 Codrops 網站上看到一個超屌的 SVG Ripples 效果，一直想找個機會實際用看看，剛好看到原先架構的 Button 有點單調，便做了些小嘗試XD，但前提還是要考慮到該特效的必要性啦，畢竟這是一個重點放在品牌主視覺規劃的網頁，用太多特效反而會失焦。

大概是所生出來的樣子。

附上 Codepen 參考連結，作品主架構臨摹自 Hahow 的課程練習。