新手設計師在 Hahow 學到的事

Yen-Yu LIN / Jenny
Hahow Tech
Published in
9 min readAug 31, 2020

--

在 Hahow 製作的官網 Banner 們

前言

Hi 我是 Jenny ,目前是 Hahow 好學校 Visual Designer 的一員

在學習與從事設計工作的路上,也是經歷了各種擔憂與自我質疑的過程,但幸運來到 Hahow 這個充滿溫暖的地方,因此想藉由這篇文章分享自己的心得和工作上的細節

這篇文章接下來會提到:

・我是如何來到 Hahow 的?

・Hahow 的設計工作如何進行?

・Design team 的學習資源

・行銷物的設計重點與小技巧

我是如何來到 Hahow 的?

想當年從設計系畢業後,先到陶藝教室打工,同時在朋友的邀請下,加入一間剛成立的小公司做教育相關的設計工作,但半年後公司解散,徬徨的我又沒有太多設計經驗,剛好看到一直關注的 Hahow 在徵行銷設計實習生的資訊,就毅然決然投下履歷當個有點老的實習生,很開心最後錄取!

記得那時候雖然認真準備了作品集,但面試太緊張,覺得問題回答得有點失敗,但大概是因為在最後的現場小測驗畫了爆炸頭蛙媽 (被笑說頭髮很像倒臥血泊中) 讓大家印象深刻而成功來到這裡 ?

在 Growth Marketing Team 實習的半年間,學習到行銷的各種方式類別、打廣告需注意的地方、迷因圖製作 (?) …等等,很喜歡大家一起發想討論新活動的時刻,之後轉正職加入 Design Team,有更流暢的設計分配流程與相關的學習機會,隨著行銷渠道的拓展,也協助製作更多不同行銷管道的設計物

可愛的同事們,剛進來加入的 Growth Marketing Team 和當初加入時的 Design Team(現在有更多設計師夥伴了

在 Hahow 的設計工作如何進行?

設計工作流程

・行銷在 Trello 掛單發設計

・由 Team Lead 分配工作或認領

・行銷與負責設計師討論

・製作完成後 Design Review

・設計師交付稿件

Design Review 制度

Design Review是什麼呢?簡單來說就是設計物完成後會先給其他設計師看過再交付行銷,設計師們可以留言給意見,透過這個方式可以讓 Hahow 的設計品質更一致,了解自己沒發現的盲點,同時藉由觀摩彼此作品得到新想法與點子,能夠一起進步

工作環境

Hahow 的工作環境舒適且自由,坐太久累了可以到站立桌工作,或移動到各個你喜歡的工作區域 ,懶骨頭、沙發都可以,也可遠端到咖啡廳工作,還有最棒的是彈性上班時間,是晚睡設計師的救星~

Design Team 的學習資源

讀書會

選一本書閱讀,分配段落與主講人,讓大家更容易吸收書中內容,有時也會根據其中提到的設計概念,加入實作時間

設計師小聚

由於目前設計師分屬不同團隊,藉由每兩週舉辦設計師小聚,讓大家有互相交流的機會,每次小聚時間會輪流分享最近關注的設計資訊與分享自己擅長的設計技巧,一起練習並分享作品,有任何設計方面的問題都可以共同討論

Design Corner

設計小角落,目的是讓設計師們可以分享自己的創作、帶來成就感,也讓經過的同事們可以看到這個空間,增添一點工作樂趣,目前掛的是設計師們繪製的同事似顏繪,桌上放的是自己創作的明信片、貼紙等等

預計更新方式:由各組負責 Host 策展,兩個月一期、三人一組,Host 組負責空間規劃跟徵稿,更換佈置與展示主題

行銷物的設計重點與小技巧

這邊會介紹工作上各類行銷物製作需注意的細節,或曾經遇到的問題和心得

・ 首頁 Banner :將主標題與次要資訊做清楚區分

主標題(綠框處)可以運用裝飾圖形、色塊、顏色、大小等,與次要資訊(黃框處)做區別,讓使用者在閱讀資訊更順暢清楚

以下舉例為舊首頁 Banner ,最近更新了新首頁~

・左右兩側會根據網站縮放,因此重要資訊須放置於中間

・兩側部分可製作裝飾線條、色塊等作點綴,使畫面較豐富一些

・文字或圖盡量不要使用純黑色

剛開始在使用黑色文字時,常常不小心都選擇RGB0的純黑,其實在視覺呈現上深灰會比純黑色更有質感

上方的字看似純黑 但其實是深灰~

舉返校社群文為例,模擬在紙張上的文字部分使用深灰,會與背景的作業紙顯得更加協調

加入一些塗抹痕跡,讓整體有在作業簿上的實感

・文字間距

遇到數字與文字排列在一起時,可以使用【段落 — 全形間距行尾除外】,讓數字和文字間留有適當的空隙較好閱讀,使用這個功能也會比一直按空白鍵分隔更簡單快速

・陰影顏色

陰影不直接用黑色,而是選擇配合底圖的相似色調,會使整體畫面更自然
細節可以藉由透明度、使用色彩增值模式來調整

左圖按鈕使用黑色陰影,看起來會比較生硬,右圖使用藍綠色陰影,畫面比較柔和

・廣告素材製作 — Facebook 廣告審查(更新:此限制已解除Ya!)

製作 FB 廣告素材時會需要經過廣告審查(這時可將圖片上傳 FB 的 ”文字覆蓋檢查工具” )若字數過多會影響廣告投放的成效,有時要嘗試到適中是很累人的,簡單分享通常會調整的方向

1. 文字縮小或間距加大 — 可能會使文字看起來偏小

2.文字的背景物件減少 — 因為背景重疊文字或背景部份物件有可能被感測為文字

3.分成幾張製作 GIF 動圖減少字數 — 其中一張截圖畫面符合廣告標準即可

・廣告素材製作 — Facebook 粉專首圖

FB 官方表示:粉絲專頁的封面相片:在桌上型電腦的粉絲專頁畫面上顯示的寬為 820 像素、高為 312 像素,在智慧型手機上顯示的寬為 640 像素、高為 360 像素。

不過建議可以用大一點的尺寸製作,避免解析度不夠而模糊

這邊有兩種作法分享

|方式1 : 依照手機比例作圖並將主要資訊放置在電腦版框線比例內

|方式 2 : 依照電腦版比例作圖並將主要資訊放置在手機版框線比例內

|結論是可以選擇手機或電腦其中一種當製圖比例,並注意主要文字內容位於在框線中即可!

・廣告素材製作 — GDN

GDN 是什麼呢?相信大家一定都有在觀看網頁時,旁邊跑出一堆廣告的經驗吧! GDN 是 Google Display Network 多媒體廣告聯播網的簡稱,會透過使用者在觀看網頁時推播廣告圖

設計重點:需放LOGO,通常會製作按鈕吸引使用者點擊,可製作GIF檔 ( 影格速率不得超過 5 FPS ,所以無法製作太細緻的動畫 )

這幾個為常用尺寸,還有更多可Google查詢

・為什麽存出來GDN多了1px

首次使用 AI 製作 GDN 時,存出來的圖檔寬或高常常會多1px,導致廣告無法正常上傳,讓人非常困擾

以下分享調整方式

|調整方式 1:查看工作區域的 X . Y 軸是否有小數點

只要把 X . Y 軸後面的小數點去除【 檔案>轉存> 轉存為螢幕適用 】,存出來就會是我們設定的大小了!若不想每次都調整工作區域,可在第一張調整好之後,選【 檢視>靠齊像素 】 ,後續拉動工作區時,就不會一直出現小數點

|調整方式 2:在選取工作區域時,按左上角 " 將選取的圖稿對齊像素格點 "

這樣圖稿就會對齊格點囉!

|調整方式 3:儲存為網頁用(舊版)

使用【 檔案>轉存>儲存為網頁用(舊版) 】功能,缺點是檔案中有多個工作區域,須單張分多次儲存

|調整方式 4:使用 Photoshop 製作

Photoshop 存檔就沒有這個問題囉!

備註:若需要的圖片尺寸尾數是單數 ex: 1029 ,illustrator 存檔可能也會自動變成 1030 ,這時可能就需要用 ” 儲存為網頁用(舊版) ” 儲存單張圖片來解決了

・廣告素材製作 — Line

LINE 圖文選單設計:有各種版型選擇,尺寸規範爲 1200 x 810,點選旁邊設計規範可查看詳細與下載範例檔!

各個區塊可設定不同連結or功能

LINE選單實例:兩者為搭配不同版型的效果,按鈕不一定要填滿整個框,位置可於框線中微調,視覺上會較活潑

版型四格或六格 ( 無按鈕的區域可不設定連結 )

最後的心得

透過這篇文章分享了在 Hahow 的設計工作樣貌,與在工作中慢慢學習到的關於行銷設計的細節,希望閱讀完也能帶給你一點收穫

總結喜歡這裡的原因:自由彈性的工作時間、順暢的工作流程與學習進步的機會,最開心的是遇到好多用心生活與持續前進的人們

從前偶爾接設計案都是自己單打獨鬥,因此加入 Hahow 團隊感覺特別溫暖,感謝這裡的設計師們都不藏私的分享自己的經驗或方法,也因為我也是個熱愛學習的人,覺得工作之餘可在 Hahow 平台上學習設計相關課程很棒 (有員工coupon ) 想想來到這裡居然就這樣滿一年了,跟從前的自己比起來應該有更成長一點吧!

感謝你的閱讀!喜歡的話歡迎幫我拍手

之後如果有空再寫一些自己的 Hahow 線上課程學習心得放上來

|想看看課程|Hahow 好學校官網

|其他作品|我的 Behance

--

--

熱愛水果、甜點和設計,目前在 Hahow 擔任 Visual Designer。 興趣還有插畫、攝影、漫畫、電影、學習各種奇奇怪怪的事物🌖 插畫作品:https://www.instagram.com/yenyuisland 合作聯繫:jenny0921008@gmail.com