2

Hahow 新 Logo!設計師邏輯推演的靈光乍現

 2 years ago
source link: https://tech.hahow.in/hahow-%E6%96%B0-logo-%E8%A8%AD%E8%A8%88%E5%B8%AB%E9%82%8F%E8%BC%AF%E6%8E%A8%E6%BC%94%E7%9A%84%E9%9D%88%E5%85%89%E4%B9%8D%E7%8F%BE-d49f7ddf6aa
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Hahow 新 Logo!設計師邏輯推演的靈光乍現

Hahow 一直以來的目標,就是幫助每個人都能夠更自在地跨領域學習,同時創造知識技能相互交流的社群。我們也期待能與使用者一同成長,不停進步,努力能讓每一位使用者都有良好愉快的學習體驗。因此在 2016 年 10 月初,我們發布了新版首頁以及品牌識別,期望以嶄新的面貌,陪伴 Hahow 的使用者一起體驗學習的迷人之處!

為什麼要更換

0*sbdGJxdBsQASIz3k.png?q=20
hahow-%E6%96%B0-logo-%E8%A8%AD%E8%A8%88%E5%B8%AB%E9%82%8F%E8%BC%AF%E6%8E%A8%E6%BC%94%E7%9A%84%E9%9D%88%E5%85%89%E4%B9%8D%E7%8F%BE-d49f7ddf6aa

原先的 icon 是三個帶著學士帽的小人,象徵 Hahow 最初的核心價值 — 知識共享、群眾力量。但由於呈現的圖形較為複雜,在使用上不容易辨識,也缺乏獨特的記憶點。隨著今年 Hahow 的發展腳步越來越快速,我們開始著手規劃新的品牌識別,在不偏離原本想傳遞的感受 -活潑,友好,愉快-的前提下,保留了原本的企業色,重新設計新的標誌及標準字,期望以新的面貌,讓 Hahow 的使用者從內容到視覺,都有同樣美好的體驗。

代表的涵意

Hahow 成立至今,目標都是希望透過人與人之間知識的碰撞,創造新的價值與火花。因此新的標誌在設計時圍繞著兩個關鍵字:「學習」與「交流」。

0*FMjyORzPFy45yOKr.jpg?q=20
hahow-%E6%96%B0-logo-%E8%A8%AD%E8%A8%88%E5%B8%AB%E9%82%8F%E8%BC%AF%E6%8E%A8%E6%BC%94%E7%9A%84%E9%9D%88%E5%85%89%E4%B9%8D%E7%8F%BE-d49f7ddf6aa

新版標誌中,綠松色和亮橙色分別代表教與學,以幾何的彎曲線段,呈現彼此交互密不可分的概念。並以這兩個元素組成抽象化的學士帽圖樣,象徵 Hahow 期望讓教與學更加容易的核心目標。

在發想的過程中,由於「學習」這樣的關鍵字,太容易聯想到書本、學士帽、眼鏡…這類直白具體的符號,而「交流」又顯得太過抽象。因此在過程中做了許多嘗試,希望介於兩者之間,設計出承載意義,同時也兼具美感的圖像。

0*zSmvqpVtGvV7Ov51.jpg?q=20
hahow-%E6%96%B0-logo-%E8%A8%AD%E8%A8%88%E5%B8%AB%E9%82%8F%E8%BC%AF%E6%8E%A8%E6%BC%94%E7%9A%84%E9%9D%88%E5%85%89%E4%B9%8D%E7%8F%BE-d49f7ddf6aa

初期的設計方向非常發散,分別嘗試從圖像上與字形上做變化,構想了各式各樣的發展方向,在其中不停探索各種可能性,並以手繪的方式快速將每一個想法記錄下來。

0*qP3DA24ChWcf16hy.jpg?q=20
hahow-%E6%96%B0-logo-%E8%A8%AD%E8%A8%88%E5%B8%AB%E9%82%8F%E8%BC%AF%E6%8E%A8%E6%BC%94%E7%9A%84%E9%9D%88%E5%85%89%E4%B9%8D%E7%8F%BE-d49f7ddf6aa

接下來逐漸限縮想法,將幾個比較可行的方案在電腦上製作進一步的繪製。

0*M8THTEtxx3uHSavR.png?q=20
hahow-%E6%96%B0-logo-%E8%A8%AD%E8%A8%88%E5%B8%AB%E9%82%8F%E8%BC%AF%E6%8E%A8%E6%BC%94%E7%9A%84%E9%9D%88%E5%85%89%E4%B9%8D%E7%8F%BE-d49f7ddf6aa
嘗試符號拆解再組合

最後同時考慮 Logo 的使用彈性、辨識度,並與團隊共同討論後,選擇出確定的方案,逐漸完善細節。

0*WSKD_uJtj1qsVtnF.png?q=20
hahow-%E6%96%B0-logo-%E8%A8%AD%E8%A8%88%E5%B8%AB%E9%82%8F%E8%BC%AF%E6%8E%A8%E6%BC%94%E7%9A%84%E9%9D%88%E5%85%89%E4%B9%8D%E7%8F%BE-d49f7ddf6aa
繪製細節與顏色確立
0*UlPOXhNzZogtkU4l.jpg?q=20
hahow-%E6%96%B0-logo-%E8%A8%AD%E8%A8%88%E5%B8%AB%E9%82%8F%E8%BC%AF%E6%8E%A8%E6%BC%94%E7%9A%84%E9%9D%88%E5%85%89%E4%B9%8D%E7%8F%BE-d49f7ddf6aa

在標準字的部分,捨棄了原本感覺厚重的大寫 H,並延續標誌圓滑的特徵,設計圓角的字型相搭配。

在設計確立以後,繼續以標誌元素作延伸,應用在所有 Hahow 的製作物上,並且結合我們的吉祥物形象,讓品牌精神能夠更全方面的展現。

0*NOiybqULIaqHi-V7.jpg?q=20
hahow-%E6%96%B0-logo-%E8%A8%AD%E8%A8%88%E5%B8%AB%E9%82%8F%E8%BC%AF%E6%8E%A8%E6%BC%94%E7%9A%84%E9%9D%88%E5%85%89%E4%B9%8D%E7%8F%BE-d49f7ddf6aa
Guideline

而品牌識別的更新,不僅僅是換上新 Logo 圖檔、或是新的印刷品,開發團隊同時也將努力在網站上延續一致的品牌視覺,逐步重新設計平台的頁面,在視覺以及使用流程上進行改善。

我們希望你能夠感受到 Hahow 想要傳遞的價值,也希望你喜歡這次的改動。就讓我們一起期待,接下來還會有哪些新的變化吧!


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK