前端工程師作品集 | 從零建構品牌網站(上) 網站企劃篇
前端工程師養成班課程設計中，非常吸引人的一部分，就是會在結業時產出 2 個網頁作品，可以放到履歷上。（原本的學經歷跟前端工程師不相關到只能讓主管拿履歷去墊便當吧 XD ）
2個網站作品分別為 “ 個人專題 ” 跟 “ 團體專題 ” 。
個人專題成品會是一個跨裝置 ( RWD ) 、使用者只能看的靜態網頁，主要是 HTML+CSS 就能完成的。
團體專題的成品，則會有資料的串接，使用者可以在網站上多一些操作，像是登入註冊、搜尋資料、po 文等效果。進行的過程同時也在模擬就業後的團隊開發模式。
本篇文章是我在 【前端工程師養成班】的個人專題製作紀錄，包含主題發想與設計階段、寫程式碼階段、作品呈現階段，每一階段重點分別是什麼以及各階段的心路歷程，內容很多所以拆成三篇來寫，分別是【網站企劃】(本篇)、【網站設計】、【程式碼撰寫與發表】。
對於想職轉前端工程師卻苦無沒有作品集、或已經在養成班苦苦掙扎準備個人專題的人，這系列可以給你一些準備方向或參考內容。
前情提要
個人專題製作流程大致為：網站企劃 > 網站設計 > 網站製作與發表
網站企劃 (本篇)
- 主題發想（要做什麼主題、可能會有什麼內容 )
- 視覺設計（顏色搭配、字體大小、使用者分析等）
- 網站架構
- 框線稿與設計稿
- 使用流程
網站製作與發表
- 撰寫程式碼
- RWD
- 專題評比
作品至少包含 7 種不同排版的網頁，要可以跨裝置瀏覽
如何進行網站企劃？
企劃流程與目的
專題的第一階段，從企劃開始，流程如下
- 主題發想：找有興趣的主題，這樣至少 coding 很痛苦時，找參考資料是愉快的 ( 自欺欺人? )
- 使用者分析 Persona：與 UX ( User Experience ) 有關，使用者描繪越清楚，網站風格與功能設計就能越能符合他/她的需求
- 視覺設計：包含字體、網站顏色 ( 主色、輔色 )
- Logo設計：設計出 3 個 Logo，讓同學給建議並做選擇
- 參考網站：用意是讓同學多看一些網站培養美感 ( ? )、參考專業的 UI Flow、收集靈感
以上這些內容，要整理成簡報發表，在發表過程，老師會給一些建議，像是：這個設計有點複雜，以我們定的時間要完成會有點困難…（就憑你！太自不量力了）
這階段養成班安排了 3 次的上台簡報，分別是在
- 決定好主題跟網站內容
- 分析使好用者與決定主視覺
- 設計三款 Logo 並分享設計理念
主題發想
找自己有興趣的主題
一開始有想過，看之後想去甚麼產業，做相關主題會比較加分吧？！ (當時想去金融業或做商城) 或乾脆幫前公司做官網，做的好畢業後搞不好可以拿去賣 ( 天真又正面 )
但所有老師都強力阻止這種想法，認為那些商業的、實用的、符合市場需求的、你沒興趣的、無聊的要死的網站，畢業後做都做不完 ( 是不是有什麼沒聽懂的暗示 ? )
我們好傻好天真的學生，應該要做開心的主題，抓緊還沒成為核可社畜碼農的愉快時光！乖巧聽話學生如我，最後還是選擇跟興趣有關的主題。
以上這是養成班的考量，但如果是自學要準備作品集。還是可以想想未來目標公司可能需要哪樣的網頁，如果想去商城，在自己模擬商城的過程中，會對商城的使用者流程等小細節會有更多的了解，但如果都沒有想法，找自己的興趣來發揮也是不錯的方法。
使用者分析（Persona）
你的網站會是誰在用？把那人的底細，從三圍到她家貓貓的名字都搜出來
使用者定義的愈明確，在規劃網站時很多細節會更清晰。舉例來說年紀、收入、性別都會對作品有很明確的影響，其他像是工作、學歷、喜好等也都是很容易拿來定義的項目。
像是如果使用者偏年長，字體大小需要偏大。收入低或還沒有收入的學生族群，商品的定價就需要考量、或式商品定價太低，反而有可能推開高收入族群等社會心理。
之前的工作就很愛分析 TA ( Target Audience 目標客戶)，不知不覺也分析了 10 年；既然是自己的興趣當網站主題，就直接把自我描繪及喜好寫到Persona，簡單暴力最棒！
視覺設計
找 5 個相同主題的龍頭網站，列出共同之處，那些就是你的重點視覺設計！
視覺設計離不開風格顏色，日常生活中也是如此。像是 3C 產品愛用金屬色或黑白色營造科技與現代感、知識分享類愛用灰或藍，給人知性理性與智慧，想帶出活力會用橙色或黃色，像是 nike，健康議題則會用綠色褐色等自然界的常見色等。
我的話，主題是精油品牌，概念為療育、自然、健康，一樣簡單暴力的選擇了跟自己一樣親切的無襯線字體、最愛的大地色系、極簡風格以及線條+色塊營造出輕鬆的俐落感，另外再訂出網站不會出現藍黑白等較高冷的色調的規範以維持整體風格
網站主題影響網站風格、網站風格決定使用者，使用者被網站吸引，環環相扣到天邊 ~
Logo 設計
愛用 logo 設計 app，讓專業的來~
在前幾年追求藝術之路發現，上帝在製作我的大腦時，忘記加入”創意”元素，所以很認命的下載了幾個設計 Logo 的 App，把顏色、風格、主題設定好，匯出幾個喜歡的
同時去看那些喜歡的品牌 Logo 是怎麼構成的，整理出幾個常見規則，像是
- 從品牌名稱取首字母：pinter, google, Netflix
- 從品牌商品取形象：Wikipedia, cama, 迷克夏
- 用品牌名稱構成有設計感的線條或色塊：apple, Disney, LV
- 使用品牌想要帶出的風格做主色：PUMA, Tiffany
依樣畫葫蘆的參考了自己的品牌商品形象、顏色、品牌名稱，硬是擠了 3 個 Logo 出來，沒想到後來 3 個都廣受好評，但最高票的還是自己手繪了一個上午的那一個 (港動)
參考網站蒐集
當時很天真地去專門的網頁設計平台找了一堆動畫有夠酷炫、或編排色系美翻了了網站，視覺動物如我，選了一堆酷炫設計的網站
事後證明以當時學習的進度，根本不可能做出來，而且，會被搜尋到的厲害網站，大多是拿了網頁設計相關獎項，連碼農都沾不上邊的幼稚園學生，看那些參考網站，真的是好傻好天真！
p.s 最後還是靠簡單好上手的套件做了一些特效啦，沒特效很不舒服耶~
當時有使用的簡單好上手的特效
憑著神農嘗百草的精神，當時還在同個網站用了不同套件的輪播來玩，如果是工作用，一定一個套件用到底 XD
網站企劃學習重點
- UI/UX 在做什麼
- 如何從使用者分析來設計網站視覺
- 如何使用 Illustrator, Photoshop 做簡單的圖、照片去背
網站企劃階段總結
這階段這重點在構思與設計，完全沒有 coding 的成分
以職稱來說，前端工程師不太會碰到這塊。這階段是設計的範疇（其他領域可能類似企劃），反而是 ’’UI/UX”、“網站設計師“、”前端設計師”，這類的職稱比較可能做這些事(還是看公司，沒有絕對)。但如果是小規模的網站或活動網站，需要包設計加網頁製作，這部分就會是全包了。
養成班在這部分的規畫很不錯，在學 coding 的同時，強迫大家練習教過的 UI/UX、視覺設計概念，製作企畫簡報也是職場生存必備軟技能，名符其實的 ”就業養成”
從人資的角度來看，非常務實且專業，可惜很多新鮮人不理解，不太珍惜 coding 以外的課程，個人覺得滿可惜的~
如果只想學寫 code，或只想把職缺描述上那些看不懂的職能學會的話，直接在 udemy 或專門教特定程式語言的教程來練習就好，養成班額外囊括了許多職場軟技能，如果沒有心力，不如一開始就別花那個錢（回想起某些 coding 以外的課程都在聊天干擾別人上課的同學就火大，還不如直接翹課的同學有骨氣）。
沒想到文章才在企劃階段就快3000字了！先讓我為你拍拍手，然後起來伸個懶腰吧！
下一篇會從網站架構設計開始，內容會包含建立網站架構、畫出設計稿的過程。
如果喜歡我的文章，歡迎拍拍手讓我知道，更歡迎你追蹤並持續關注更多的分享。
我們下篇文章見！