2021 六角 UI 設計直播班心得

Cate
15 min readJun 28, 2021

--

有幸參與到六角第一屆 UI 設計直播班 ✨

⚡️報名動機

2021 年除了是疫情變化來得突然的一年,也是自己學習歷程中影響重大的一年。因為大學及工作就是設計相關,只是出社會多年來一直沒好好學習新技術,等到回過頭才發現自身技術過時,平時也沒好好累積作品,對於自己的能力不是很滿意卻又安於現狀,而歷經一些事情後也覺得自己不能再這樣下去,於是年初時開始想學習網頁設計這塊,一方面單純覺得工作機會多,二方面也想試試看程式這塊,覺得會 coding 是一件很酷的事。

上網查了資料發現六角學院挺多人推薦,就購入了網頁相關的影音課程。整體觀看下來覺得講師條理分明,從基本觀念開始帶起,真的很適合初學者入門,工作之餘也利用在家時間多少看些課程,過年連假時更是全心投入試著寫出最終作業,那時才開始相信自己也能切版,不再是看到一行行的程式碼卻不知從何下手。但因為工作上還是占用大部分的時間,也像大部分人一樣回到家就只想放空,雖然有看影音課程,輸出的時間卻很少,以至於學習成效不彰。

雖然如此但還是停不下想學習的心,後來發現六角也有 UI 相關的課程,而且剛好預計 5 月要開 UI 直播班,因為直播班需要配合每週課程進度,衡量自己的時間控管能力,本來只有購入影音課程,心想應該是沒緣參加直播班了,沒想到此時公司卻出了狀況,以至於離開了公司,轉變成全職學習的狀態。有時回想起來,有些事情真的很妙,雖然離開多年以來工作的地方很難過,也沒了穩定的收入來源,相對來講我獲得的是更多可以自由安排的時間,也剛好能停下來好好思考接下來的方向。

於是我馬上趕在 UI 直播班截止前報名這堂課程

時機那麼剛好就衝吧!

⚡️開課前階段

俊儀老師提供的可愛素材

在還未正式開課前,老師就有安排 Adobe Xd 基本操作影音課程以及課前練習,讓同學們可以先暖暖身進入學習狀態,也先讓同學加入 Slack 群組做報到的動作,還有選擇是否進行分組活動。其中很有趣的地方就是課前練習的部分,是製作自己專屬的小怪獸頭貼,看到老師提供的元件設計稿整個被小怪獸們萌到!😍(風格完全正中紅心)另外繳交作業時,可以依造自己的能力與目標去繳交不同等級的作品,這點真的很貼心,畢竟有些可能只是好奇 UI 設計這塊,完全沒有設計底子,要一口氣達成指定條件真的會很吃力。

在頭貼的練習部分,想了想決定用自己喜歡的貓為形象,繳交了第一個小作業。而後的作業也發現都以小怪獸為主,展開了一連串的冒險與試驗,很有趣的設計!同時也在此時發現許多同學的頭貼非常有個人特色,感覺班上有很多厲害人物呢!😀

課前作業是做自己的專屬頭貼 😺

⚡️第一週:掌握介面所有元件

因為是剛開始第一週,所以教學上都是以比較基礎的觀念,慢慢由淺至深去帶入觀念。提到原子設計的觀念,把網頁上常見的結構逐一拆解,從最基本的原子及分子開始講起。

課程一律採用 Zoom 直播上課,老師講解時常穿插選擇題來讓同學們即時反應作答,有時還會出奇不意安排些陷阱題讓同學落入圈套中(?)這樣即時的互動也別於一般影音課程單調的學習環境,在家就能跟老師進行互動學習,教學過程中大家不時也會提出疑問,可愛的 Joanne 助教也會不時的提醒同學要簽到,或是幫忙回應同學以及小聊一下,整體上課氛圍非常好,第一堂下課後帶著滿足的心情入睡去。

第一週的作業是製作註冊登入頁。印象很深的是這週特地安排去高雄旅遊,平日生活範圍一直在北部,突然想去看看六角所在的高雄,加上自己也比較喜歡都市的氛圍,結果去了兩天都熱到不行,後來也懶得逛街直接躲進書店吹冷氣看書,心裡還掛念著作業沒完成,而新聞也開始報導染疫人數上升,北部變得開始不太安全。

後來搭車回到家,休息足夠後馬上開始設計註冊登入頁,本來想進階挑戰 Level 3,但對於物件對齊的觀念不是非常清楚,於是先依照範例繪製一樣的版型並稍微調整細部。

繳交作業後也收到 Joanne 助教的批改回覆,助教都會以鼓勵的語氣進行反饋,還會找出優點肯定同學們的努力!這點俊儀老師也一樣,因為作業大部分我都是給俊儀老師批改,老師都會非常仔細的檢查(據老師說法他真的會去檢查每個間距😲)也因為老師連細微部分都看得非常仔細,導致幾週下來後自己也養成沒事就檢查一下間距,看看有沒有對齊,數字是否為 8 的倍數之類😂 另外也很多被訓練出的新習慣,像是中文文案排版須注意的細節,注重細節這點不論是作為設計師也好,也同時讓人觀感上比較加分。

本來想自己畫插圖,後來都用免費素材拼拼貼貼了 😂

⚡️第二週:帶你從草稿到完稿

體驗到前期規劃之重要性

這週內容比較前一週內容多上很多,甚至隔天假日還加碼直播課,真的是辛苦老師跟助教了!加上疫情大爆發染疫數字正式破百,生活範圍也被限制幾乎只能待在家,就轉個念頭當作是專心學習的好機會。

  1. C.R.A.P. 設計準則
  2. Landing Page
  3. AIDA Model

而作業方面也相對變多,除了用模板練習排出單頁式網頁,也要開始發想最終作業的主題。單頁式網頁當時因為疫情的關係,加上自己也挺喜歡心靈相關議題,就想到正念療法,參考了一些網站架構跟資源,也用模板開始規畫完成了作業,在此時初步接觸到文案撰寫的部分。

而真正實際感受到文案撰寫這塊的重要性,是在最終主題發想時,當時真的挺挫折的,主要是因為過往的工作經驗,發想這塊都有 PM 或是由客戶那邊規劃,自己只要依照文件需求去美化設計內容,雖然也會有自己需要發揮創意的時候,但大體上整體案件的規劃還是有人幫忙設計。

因為正念這類的主題已經使用過,加上又是最終作業,於是不想要太過於草率決定,剛開始先用喜歡的文具作為主題,但是內容太過於發散沒有個主要目標,後來作業被退回後又花了段時間思考,最後決定以青年租屋議題為主,用近年來逐漸興起的共享公寓去進行行銷漏斗的規劃,不僅參考了台灣的幾個知名的共享公寓外,也看了國外的共享公寓生態,採納一些不錯的點,加上自己希望有的一些福利,於是也完成了共享公寓這個主題,提交作業後通過真的很開心,雖然創意上還非常欠缺,但規劃方面還是有通過老師這關,老師也提到說設計師往往都是通才,真的很有感,決定往後也要多看些文案及行銷方面的知識,來補充這塊的不足。

想補充這週上課還有一點很有趣,因為老師 AIDA 範例講解,是用貓咪助眠服務為主題,看到網頁上充滿萌萌的貓咪,心早已融化一半,還有同學提問說老師是貓派嗎?結果老師卻說自己是百分百的狗派,是為了平衡一下才選用貓來當作主題,但若是像狗的貓就可以接受(笑)反而 Joanne 助教跳出來說自己是貓派(想握手!)像這樣的小聊天更有種親近感,挺喜歡的 :)

照著老師建議修改後,顏色上更加統一舒適 😊

⚡️第三週:伸縮自如的響應式設計

在不同裝置下達成最佳的瀏覽體驗

這週進入響應式設計部分,除了桌機板的尺寸設計,也介紹在不同裝置螢幕解析度下,如何去做最佳的調整。另外也說明製作精稿時須注意的細節,像是圖片的選擇,色彩、icon、字型上推薦的網站,對於繪製頁面有很大的幫助!

作業方面也開始出現非必做的 RWD 練習,加上最終作業 Wireframe 。雖然已經有初步的文案構想,但實際配置區塊又花了不少時間構思,繳交作業過程中也被老師點出尺寸制定方面的問題,坦白說每次上完課,隔天我只會針對比較聽不懂的部分再做複習,沒有全程再花時間聽一遍作筆記,因此在學習效果上大打折扣,人真的不能太相信自己的記憶力。後來也乖乖回去複習尺寸對齊與制訂的部分,察覺自己的錯誤加以修正後也通過 Wireframe 的部分。

⚡️第四週:讓介面動起來

能夠互動瞬間讓網頁活潑了起來!

這週開始 Prototype 的教學,終於有動態教學的部分,覺得十分有趣!但同時也需要花時間思考吸收,上完課後也另外找時間再重頭複習實做一遍,才比較懂是如何達到動態效果的。

而且老師在示範過程中,可能講到一些比較炫砲的效果,情緒一激動就不小心罵出髒話了(全場同學跟著激動 XD)結果反而受到大家一致的好評,看看隔壁校長上直播課,髒話如語助詞般自然順口(?)跟平常正經教學判若兩人,意外地親切,一起講幹話感覺特別療癒,有助於同學保持清醒喔!😆

作業也是以完成最終作業的 Mockup(精稿)為主,也因為疫情影響的關係,把作業時間延長,希望同學們能努力把握這段時間完成最終作業。自己實際上在精稿製作部分,雖然有收集些不錯的圖片,但實際搭配進去會發現跟期待中有落差,也花了段時間重新尋找圖片外,也想加上一些背景或是小巧思在作品裡,就這樣一直反覆琢磨了好幾天,也提交了幾次給老師批閱(再度被提及基礎觀念問題 😅)最後審核過了真的很開心呀!🎉

⚡️加碼場:作品整理

整理作品集的好地方♫

作品集的部分是加碼場,只給有在規定日期前,有達成指定條件的同學們來上課,老師在開場有提到會設這個門檻,是相信這些同學的行動力跟積極度是最高的。直播班的作業繳交系統,是可以看到其他同學們的作業的(不過如果還在審核中就不會顯示出來),我也喜歡四處看看其他同學的作品,有的同學畫面設計能力真的讓人非常驚豔,有的是主題十分有趣,很有構想跟創意,可以感受到大家對於自己作品很要求,都盡力想做到最好。

這堂課前期主要講到作品整理的方向,以可以精進的加分能力(e.g. 平面設計、動畫、攝影)後面提到推薦放置作品集的地方,也就是最終作業要上傳至 Bēhance,也帶大家跑過一次 Bēhance 的上傳流程。

後來試著將最終作業上傳至 Bēhance,以前用 Bēhance 看了不少作品,第一次自己規劃作品集真的挺新鮮的,雖然也出現很多狀況,一開始回報任務就發現作品又跑到草稿狀態,導致老師想批閱都沒辦法的窘況(我真想找個洞躲進去!),只能說不經一事不長一智,也算是學會 Bēhance 的用法 😂

直播班的最終作業成果

🔎 Bēhance 作品網址

⚡️最喜歡的活動

最後的線上成果發表活動收穫良多,雖然一度因為報名人數不夠而差點作廢,所幸最後陸續有同學們自告奮勇上台發表,而自己因為各方面沒信心(覺得主題很普通也沒個人特色),加上自己十分內向,對於上台發表一時間還是無法去克服,自己也清楚,設計師就是要能好好傳達自己的設計理念,有良好的溝通應對能力。所以對於那天上台發表的同學們,真的致上最高敬意,大家超棒的!👏

有的同學有著超高的執行力,無論是整個畫面或是內容安排,甚至動態還用到 AE 去製作,就像看 MV 一樣精采,報告尾聲還提出企劃,邀請同學們一起參與共同協作,完全設計人的十足榜樣,說是直播班上最優秀的不為過✨

也有同學是在公司本身就負責插畫,插畫作品給人可愛療癒感,搭配上幼教商品十分相襯,光是看到插圖就想成為粉絲了 😍 其他人不管是畫面上或是創意上也都讓人非常驚艷(細數下來這篇心得文就真的太長了),瞬間覺得這直播班簡直是臥虎藏龍,自己都不知道怎麼通過審查的 😂 還有同學雖然離完成作品還有些距離,也勇敢上台發表自己的作品,能分享自己的想法跟心得真的很棒!在我心目中也是十足的勇者了👍

看著同學們在這場直播班裡面的成長,自己也覺得很感動,不過猜想最感動的莫過於老師跟助教,過程中應該不停地在抽衛生紙止淚了(笑)我想作為教育者最大的成就,就屬看著學生們的進步🌹

⚡️對自己的檢討

雖然能自由分配的時間變多,但還是無法好好掌握時間,也常常陷入焦慮不知如何是好的狀態。直播班剛開始,校長也臨時舉辦 Bootstrap 5 新手教學實戰營的活動,雖然自己有開始學最基礎的切版觀念,但 Bootstrap 跟 SASS 以及 RWD 這些都沒實際練習過,但想著機會難得,還是跟著報名參加。

剛開始前兩週跟著每日任務,以及主線任務選擇最低等級還能完成,但最終設計稿一出現就真的吃不下覺得很無力(輸出還是太少前期基礎沒打好),而且變相對 UI 直播班的作業,就沒投入全力去做了,後來察覺這樣兩邊都無法兼顧,後來還是決定把心力放回 UI 直播班,等 7 月切版直播班在好好研究程式部分。

如果能時光能重來,會想挑戰 Daily UI,跟著大家一起繳交練習這部分,持續的輸出進步也會比較快。也想養成上課後就做筆記的習慣,不是都累積到最後才回頭去看課程有哪些重點,學習效果上就比較差。

校長跟副校長都有說過,學習第一階段就是只聽過,效果也是最差的,第二階段就是做作業,第三階段是做自己看得懂的筆記,第四階段是整理過發表出來的筆記,因為要給大家看勢必要能清楚好懂、脈絡分明。現在打這篇文章也都是看著直播班的講義,以及自己零碎的記憶拼湊成的,說實在每完成一樣作業,就有點懂為何老師要這樣安排,只有實際去做了,才會知道自己欠缺什麼。

⚡️給直播班的建議

整場體驗下來,直播班如果可以改兩個月會更加合適,四週內要消化好這些知識並掌握還是比較吃力,尤其對設計新手來講,印象最後一堂課很多同學也反應還想多學一點,或是增加學習時間。

之前每堂課都在晚上 8 點開始,幾乎到 11 點結束,有時還會超時(也跟同學們的熱情發問有關),其實到最後都會有些昏迷(有次真的在螢幕前打盹起來了),雖然也跟年齡及體質有關,不過人專注學習的時間有限,或許可以考慮改一週兩次,每次約一小時半,或是拉長直播班的週數。

週數一拉長,前期就可以出比較基本觀念的作業為主,看到有同學說感覺作業等級一下跳太多,像剛開始第一週的作業繳交通過的人就很多,可是到了後期發現人數越來越往下掉,可能這落差間挫折感變重,放棄的人也變多,但也可能有部分同學,是本身對作業的自我要求就高,反覆一直在花時間修改調整。

假設今日的我依舊在上班,照我自身的時間控管能力,應該就不會來報名這堂直播課程,會以影音課程為主。直播班本來就是主打高強度訓練,所以這也是一些意見上的反饋,能夠好好運用時間的人還是有,只是對大部分人來講,時間分配上還是個問題。只是我有時會在想,連沒正職工作的我繳交作業都很崩潰了,那些有正職工作的人豈不是崩潰到不行,再度敬佩正職工作還入坑的同學們,說到底可能還是自己毅力不夠 😂(←再度自我檢討)

上課到最後已失魂

⚡️想跟未來的學弟妹們說

如果想對 UI 設計有興趣,卻不清楚如何安排學習的人,真心建議可以來上六角所開的 UI 直播課!俊儀老師講解上清楚易懂,就算真的遇到了問題,也可以在課堂上直接提出發問,或是課後在 Slack 上詢問,有時老師還未回答同學們就幫忙解答了,不好意思公眾發言也可私訊老師跟助教(像我比較害羞會傾向私訊) Slack 上同學們有不錯的資源也會分享及討論,學習氛圍很不錯,體會到能夠給予才是精神上的富有,謝謝熱於分享的同學們 😀而且課程結束後,也可以購買影音課程加強練習;或是先購入影音課程,再考慮是否要上直播課也是很不錯的選擇!

六角在課程規畫這塊,是真的很有經驗跟能力,並以遊戲化讓學習不再枯燥,網路上 Google 一下心得就會發現很多六角的正面評價,自己也是看著這些心得文,再加上自己實際買過影音課程所決定的。現在體驗過直播班,更是覺得收穫良多,跟當初只買影音課程的感受差距頗大,有一群人帶領你一起前進還是比較快的,如果時間上允許,很推薦來上直播班,感受六角大家族的力量與溫暖!🥰

好老師加上好學院,不來上課嗎?

⚡️最大的收穫 & 結語

直播班期間整個好像被附身(?)

寫文到此我已經再度失魂,不知不覺中也寫了好多字,一直以來都想好好學習,卻不知從何開始,今年加入六角學院真的是最慶幸的事,感覺就是個大寶窟,怎樣挖都挖不完!🤩

雖然上完這堂直播班學習到許多,但對於自己的人格特質,我還是不知道是否適合往設計方面走,個性上比較低調不習慣太過於顯露,但現在社群媒體都強調展現自我,要懂得推銷讓我有點迷失,尤其設計這行業就是要懂得銷售自己的作品才能,才能找到不錯的工作機會 / 案子。

自己也不是剛出社會的新鮮人,已在江湖上打滾多年,但累積的能力卻不成正比,難免會覺得惶恐,真的能適應這社會嗎?不論是熱情、能力甚至創意發想上,我都覺得自己很不足,說實在自卑感一直都很重。

但現階段能確定的是,我還想試著學習新的技術、探索新的領域,也許在其中我會領悟些什麼。我也相信就算未來不走 UI 設計這條路,在課程中所學會的觀念也會持續影響發酵,抱持著只要不排斥就先嘗試的心態。

接著的目標是參加 7 月即將開課的切版直播班,全力投入好好補足這方面的能力(已證實是地獄極試煉,加上算新手的我,真的怕😂)等被切版班虐完後,再看看是否想繼續投入 UI 或是網頁設計這塊,屆時也會以六角的資源來好好學習,再度謝謝六角的老師們及助教群,你們最棒了!😘

收穫滿滿的 UI 直播班 🎉

--

--