wordpress_blog

This is a dynamic to static website.

聯絡我

網頁前端養成專欄 – 來自六角學院

gee.hsu

課程介紹

歡迎你加入此專欄，
我們希望透過此專案聊到一些非技術的心法分享，
讓各位不論在各種新、中、老手時，都能保持正確的心態持續投入開發。

求職就業篇

六角學院如何協助你成為網頁設計師、前端工程師

六角學院 – 邁向前端工程師之路！

前端工程師養成手冊

共筆文件

第一關：HTML + CSS 網頁排版
  • 書籍推薦：HTML&CSS：網站設計建智優化之道
  • 線上課程：使用 HTML、CSS開發一個網站
第二關：jQuery 設計網頁互動效果
  • 書籍推薦：深入淺出 jQuery
  • 線上課程：使用 jQuery 打造互動性網頁效果
第三關：複習 HTML、CSS、jQuery
  • 觀念補充：完成 codecademy 的題目
  • 網站架設：將網頁上傳到 Github Pages，讓你的網站能夠透過網址讓其他人看到
  • 繼續練習：下載 速記表，自己找五個 jQuery Plugin 套用在網頁上
第四關：Responsive 介面練習
  • 課程推薦：一變應萬變的響應式網頁設計
  • 書籍推薦：Responsive Web Design 響應式網頁設計學習手冊
  • 作業練習：挑一個網頁版型切成響應式設計，切完後請傳給老師、助教進行程式碼檢視
第五關：JavaScript 基礎
第六關：AJAX/JSON + Bootstrap
  1. 請從下面挑一個 JSON API 設計一個作品，作品靈感可瀏覽下方六角學院學生作品，部分學生有整合 Google Map API，也可搭配 官方文件 再看程式碼來加深觀念
  2. 版型部分請試著用 Bootstrap 進行設定
六角學院學生作品：
高雄大學學生作品：
第七關：Git / Github

Git 是一個版本控制語言，多人團隊維護程式碼時，便會使用它來進行程式碼管控。
如果你看得懂下面的話，也會實際操作那就暫時 ok 了

「除了單線進行管控外，也會開 branch 將開發中的功能獨立出來，設計完後再 merge 回去」

  • 線上課程：掌握 Git、Github 程式時光機
  • 教學資源：請把入門與進階都跑過一次流程
  • 補充教學：保哥 30 天 Git 教學
第八關：設計面試用的作品集，共兩項
  • 個人介紹網站 (RWD)
  • JavaScript 介接第三方服務，下面擇一
第九關：寫一頁式履歷

寫履歷前，請先觀看這篇文章，尤其是英文術語大小寫，與中英空白部分務必留意。
請在在 cakeresume 服務寫履歷，可以在此觀看範本，寫完後再讓六角學院的講師為你調整格式

第十關：尋找職缺

可到下述列表尋找，判斷職缺內容可看這篇文章，
確認好要找的職缺後可再跟老師進行諮詢：

第十一關：前端常見面試考題
第十二關：模擬面試

可以請六角學院的老師預約模擬面試時間，
讓學生了解預期會遇到哪些問題，可看此範例影片、範例影片二、範例影片三

第十三關：順利取得 offer !

恭喜你走到最後一關，
若同時拿到複數 offer 難以抉擇時，此文章提供參考。
有時間也可以順道幫忙六角學院的學弟妹們唷！

講解

  • 平面設計 > 初級前端設計師、初級網頁設計師
  • 初期前端工程師 – 邏輯性(資工、資管以外也是可以勝任這份工作)
  • 後端工程師 node.js、php、.net
  1. 設計一個網頁出來
    1. HTML、CSS 設計網頁佈局
    2. jQuery、JavaScript 動畫效果

究竟要學到什麼程度，才可達到就業水準？

常見的通病，對自己的自信心不足

有無跟業界去做接軌

  1. 持續地設計作品，彰顯自己的前端能力
    • 網頁版型來設計 HTML、CSS 作品
    • todolist javascript 練習，設計，設計小應用
    • 接 API、firebase(儲存資料)
    • 電子商務等級的 Sass+RWD 版型 (free template)
  2. 你在找到第一份工作後，你的對自己的不信任才會慢慢消除
  3. 你對自己產生自信心了，進而昇華到工作自由

以 todolist 為例，可以從 Github 搜尋 Sample 去找一個參考、學習。

你想成為前端工程師，還是前端設計師？兩者的差異是？

找職缺前，先問問自己是前端工程師還是前端設計師？

  1. 需不需要設計網頁、使用繪圖軟體?前端設計師、網頁設計師
  2. 初期 JavaScript
    • 視覺設計 – 網頁設計師 – 動畫效果 jQuery plugin
    • 前端工程師 – 資料傳遞、邏輯運算、後端配合，設計出對應的頁面

Front end design & Front end developer

Front end designer 共同部分 Front end developer
UX Design HTML Prototypes IndexDB
CSS jQuery Git
Image editing github templating languages
Sketching grunt.js AJAX
CSS Preprocessor node.js
JavaScript
HTML

與面試官對談時的對話細節

  1. 遇到不會的問題，可以說：「如果公司有需要可以再研究」，不能說「我不會」就帶過了
  2. 請不要當下刻意簽任何合約，如果當下沒辦法決定請說：「這我可能要考慮一下，等我回去想清楚後再回覆您」
  3. 如果已經有在前端公司就職，並找下份工作時，當有被問到薪資時，請心裡一定要有個數字，測試期多少，正式改多少，保幾個月，這是你對自己所訂的價值
  4. 當面試官提出問題時，請不要讓對方單方向問，也可以盡量找些問題回問，確保雙向溝通
  5. 可以在討論細節中，把話題帶到你有把握的領域去
  6. 一定要找幾個問題問面試官，讓面試官覺得你是有備而來，常見的問法也可以聊到你未來會負責的工作項目、公司部門組成來進行詢問
  7. 請盡量保持你好學向上的心態，讓面試官覺得你能很快進入公司腳步
  8. 要自己提說未來1~2年你期望自己發展是什麼，讓面試官了解你對未來是有期望的
被邀請二次面試需要注意的細節

如果被邀請到是第二次面試的話，
大概的情況會有下面：

  1. 技術門檻夠，讓更高層確認你的適合度 (CEO、經理職位)
  2. 有許多人選，再進行二面進行最終確認，也有可能會有三面
  3. 已經確認想要邀請你進公司，討論福利細節

但不論是哪一種，都要記住：

  • 在尚未了解狀況前，不要亂簽合約
    有些公司會在確認你錄取前最後一腳希望你簽合約(競業、薪水)，
    如果當下你不能做決定，
    請說：「這我得再考慮一下，確認好再回復你」
  • 心底一定要有個薪水區間跟 hr 談判
    有時候二面時當 CEO 確認你錄取了，
    可能就會直接請人力資源部的和你談薪水與福利，
    所以你一定要有個理想 offer 跟對方談判，
    簡單討論方法就是 你理想月薪3w5，
    但 hr 只打算給你 3w2，
    那也可以折衷說試用期 3w2，但過了就 3w5

如何撰寫程式履歷？

  1. 一頁式(A4) 格式履歷
    • 乾淨、易於閱讀
先後順序
  • 個人背景、記得留下聯絡方式
  • 工作經驗
    • 不要寫用了什麼技能，而是你替公司增加多少產能與效率，前端開發、管理三人以下團隊、設計出什麼產品、導入什麼技術方式
  • 前端技能 – 可以透過會什麼語言來達到什麼樣的目的
    • 會使用 Sass 來規劃 RWD web layout
  • 作品
    • 使用 Vue 串接第三方 API – 網址
  • 自我介紹
    • 是如何投入前端，以及之前是做什麼，這段期間的投入過程是如何，希望未來可以朝什麼方向去發展，或者是寫人格特質、嘗試新的技術…等。

Mail 發送，請不要寄送 word 檔，建議是 pdf 檔

試用期三個月的迷思，該如何從企業文化中提升自身技術能力

3w → 4w
企業在觀察應爭者的工作狀態
你也是在評估你在該企業「能獲得什麼？」

  1. 工作內容不如預期
  2. 工作項目無挑戰

你在半年內、一年內，你可以在該企業獲得什麼？

js/jQuery
SPA、vue.js、react

三個月的時間，3~7天，一整個月
進入到公司後，你要去評估，「你在這半年~一年的期間」，你想從企業中獲得什麼？

提供給你更具有挑戰性的題目或產品？

  1. 你又有精進技術的機會
    沒有的話，每年過一樣的技術活(長久下來是種傷害)

舉例：
2010年底，RWD 響應式設計
2011第一季：由自己去推動技術，技術是可以讓公司賺錢的

如何規劃自己的工作職涯，讓第二份工作、第三份工作達到百萬年薪

如何規劃職涯技術發展，並有效提高薪資與生活品質

年薪
– –
第一分初級工作
30~45 萬 年薪

創新公司、大公司
創新公司 – 結構夠彈性、新項目
大公司 – 福利好、單純維護，沒辦法碰到新項目
– 「在工作上可以有哪些工作項目？」

開發流程 –
– –
第二間 初級 – 資深工程師
50~70 萬 / 年薪
藉由人力銀行參考出該年薪需要哪些技能和能力
ex: 104、f2etw / jobs

– 公司實務的需要為主
– 多益門檻(自我目標820分)、外國人溝通或書信

—
第三間 資深工程師
80~150 萬 / 年薪

– remote 遠端作業、git
– 博弈、電商(金流)
– 外商公司、成熟軟體開發公司

toptal – 是一家全球性的遠程公司，它提供自由工作平台，將企業與軟件工程師，設計師和業務顧問聯繫起來。

更好的薪資、工作和生活品質

  • 用的哪些語言幫這間公司做了哪些的事情。

選擇大公司還是小公司

小公司

  • 公司類型：產品類型、接案類型
  • 人員組成：設計師、工程師、企劃、行政人員 (會計、行政)
  • 工作流程
  • 工作氣氛

大公司

  • 公司類型
  • 人員組成：開發部門、營運部門
  • 工作流程：以部門主管做決定，有時候會大幅度更改目標、方向
  • 工作氣氛：看公司文化

比較

  • 分工：大公司相對精深、小公司分工沒那麼細
  • 學習：大公司學得較深、小公司學的廣
  • 薪水：
    • 專案類型 – 40k上下、年終1~2個月
    • 新創、產品 – 自由、肯接觸新東西、一開始給的薪水比較高一點，風險比較高
    • 大公司 – 績效不好的部門還是會裁員，相對較好的福利政策、加班不一定會給薪、薪資起薪大幅超過一般的小型公司，基本14個月以上、紅利2個月

現在的環境變化快速，需要不斷的去學習新的東西。

小公司 大公司
分工 每個人負責事項較多 工作較單一
學習 面相較廣 可以學得比較深
薪資 新創：高月薪，風險也高。
接案類型：月薪普通，工作穩定		 薪水較高、福利好
發展 穩定發展入股 升遷內部創業
其他 換工作
轉職
創業		 換工作
轉職
創業

如何解讀廠商徵才職缺內容？

原文來源

【熟悉 JS Framework，jQuery、Vue、Angular、React尤佳】

有些廠商可能剛接觸前端職業，
不了解目前 JavaScript 趨勢，
所以就熱門的全寫上，
這樣很容易造成求職者的惶恐，
就連我自己也只能說對 JQ、NG 算稍微精通，
其他也頂多算是玩到建立個 todolist、寫些玩具的程度，
根本還沒成熟到敢用在專案上。

web 廠商要前端會 JavaScript Framework，
主要也是希望會下面兩項技能：
1.設計網頁互動性動畫效果
2.串接 Ajax、Restful API，具系統性地規劃前端架構

那就建議廠商寫明工作任務，
再從履歷、面試來去評斷他是否勝任就好，
現在前端框架多到爆炸，
我也認識不少純用 Native、冷門框架但強到爆炸，
要記住框架只是工具，你就算有關刀，但不會耍也是白搭

【工程師、設計師職稱傻傻分不清楚】
我在輔導學生就業前端的時候，
常常遇到職稱寫「前端工程師」，
但去面試時卻要求需設計畫面(Mockup)，
這真的是比 HR 要找 JAVA 但卻找 JavaScript 工程師還要更雷！
所以每次高雄前端社群聚會要結束時，
我都會不厭其煩播這個影片，
主要希望讓會眾了解前端設計師、前端工程師的差異。

所以這裡建議廠商，
如果工作項目需要設計畫面，
我自己是建議職稱加上「設計」，
例如「網頁設計師」、「前端設計師」。

如果完全不用設計畫面，那就加個「工程」，
例如「網頁工程師」、「前端工程師」。
至少能讓求職者有個基本判斷，點閱轉換率也比較高。

至於有些朋友提說如果只單純切版，
不會接 Ajax、SPA 的職稱要叫什麼，
我個人覺得叫「前端工程師」也沒什麼不妥，
也有在104看過「網頁切版工程師」、「切版工程師」也OK的。

【懂後端 Framework 尤佳】
有幾次幫前端朋友討論職缺的時候，
常發現對方濾掉些我認為他們可以勝任且薪水也給到位的公司，
細問後才得知他們會對工作項目裡面有寫到「懂某某後端語言尤佳」的條件而卻步，
儘管那是加分條件而不是必備條件。
我問了幾次徵才廠商，實際狀況只是：
(1)擔心與公司後端工程師合作不順 (佔80%)
(2)只是現階段大案需要，未來「有可能」需要負責後端(佔20%)

老實講如果你是一個：
1.已經會 Template Language(jade、slim、ejs)，了解 partial、Layout的觀念
2.曾經有跟後端工程師合作經驗

那其實就已經可以跟全部的後端工程師合作了，
很多都是大同小異的，
每次我跟不同後端工程師合作，
只要了解 View 放在哪裡，
CSS、JS 的路徑在哪就直接上工改 Code了。

不過會建議徵才廠商要和面試者主動表達要找的對象是哪種，
有些廠商會希望先騙進來，等前端需求沒那麼高再誘導轉後端，
不過為了建立長久關係，建議還是事先說清楚會比較好。

【懂 UI/UX 尤佳】
老實說除非是 UI Designer轉前端，
或者本身對這塊領域有興趣，
否則真的是有點強人所難。

但經由我和許多徵才廠商詢問過後，
他們要的大多是「能夠與美術、後端合作，提出可操作性的前端介面建議」，
其實這才是徵才廠商為什麼要找前端工程師的最主要原因。

每當 UI Designer設計 Mockup 出來後，
我都會提出四、五種可行性操作流程，
同時瀏覽器兼容性也相當成熟的建議，
彼此再激盪出更佳的使用者介面，
所以 UI/UX 並非是 UI Designer的工作，
我個人認為是全部團隊都該參與的事項，包含PM與後端，

如果你看到徵才內容條件有「懂 UI/UX 尤佳」，
我建議就自己腦補成「能夠與美術、後端合作，提出可操作性的前端介面建議」就好了哈哈。

六角學院提供前端就業管道查詢

工作心法篇

瞭解自己的一天的生產力曲線，替自己增加最大產能

資源

舉例：
11~12 一小時
下午1~3點 溝通事情(客戶、行政作業)
下午4~6點 寫程式
—
我很瞭解我在公司寫不出
– 邏輯重，晚上沒人會打擾你

技術變遷快速，該如何調整心態？

技術上的抉擇
react、angular、vue.js
— 投入的過程才是重要的，是幫助你學習上更加的快速

肯定的答案
– –
你希望學那個語言達成什麼目的？

– –
HTML、CSS、JS – 網頁排版
D3.js – 透過網頁設計圖形化報表
react、angular、vue.js – 想要設計 Single Page Application (SPA)

Sass、Less 都學會不會有比較有競爭力？
– 管理你的 CSS 結構
– 學深入，學到他的精隨
– 是否要學新的？我學新的是否可以達到更進階的工作項目、提升開發效率，如果有顯著提升，就可以去投入

寫程式沒有「標準答案」

軟體開發沒有 「標準答案」，只有 「目前你想到最好的方案」

—

一定要用某某方式去做？

「標準答案」，
寫程式 「沒有所謂的標準答案」 ，
就算那是很爛的解法，但你卻還是把功能寫出來了
– –
時程壓力 – 寫出來才有辦法優化

接外包時需要注意的事項

參考老師的個人經驗：

該如何估時程與報價？

這裡提供兩個方向：

思考你肯付多少心力在品項上

今天的報價不是看業界行情，
也不適看削價競爭，擔心自己報高，業主會找其他廠商，
而是你能為項目灌入多少期待與價值？
舉裡一個 RWD Parallax Scrolling 的網站來說好了，
需要注意的細節多如鴻毛，報價上所提的規格也是，例如說：

  1. 瀏覽器兼容性到哪？多個 IE 版本，細節處理也會加倍
  2. 螢幕解析度是否只能客製熱門解析度？還是大至 4K，小至 320px iPhone SE 都能近乎完美？
  3. 事件處理是否完善？使用者在 mousewheel、touchmove、KeyDown 時是否皆會觸發？
  4. 效能與載入速度 ok 嗎？在行動裝置上替換小圖或使用 lazy loading 減輕負擔
  5. 窗口靠不靠普？設計師是否給你一個 PC 版，就要你變出其他解析度，漸變效率你必須自己通靈？

以上的種種細節，都在考驗一個前端工程師的專業與耐心，

所以在報價上的依據，都是 「能夠淋漓盡致地發揮出品牌價值，對自己所設出來的要求與期待」。

會提這案例是因為有朋友公司外包一個類似專案，請他們找的兼職前端報價，最後報了一個天文數字讓他非常咋舌，但我看了下朋友提供的範例網站後，和她說我覺得還蠻合理的，若是我承接也會是這個價目上下，原因自然如同上面所說。

說真的不要去參考所謂的 業界行情、怎樣報才是合理，

你今天碰到的業主他心裡已經有數字了，

所以你就爆自己覺得這樣的專案內容，你要報多少覺得有賺就好，

你問一百個業界人，就會得到一百個行情價，這樣真的太累人了

業界行情根本是個假議題，重點是業主覺得ok，你也賺得爽最重要，

不要為了練功降低自己格調，事情多又沒賺到錢只會更哭。

以照工作天來報價

這個真的是下下之策，除非你對報價或市場行情完全沒有概念，

才建議你選擇這個。

首先你先自估你 1小時 的鐘點是多少，假設是 200 好了，

一個工作天是 8小時 = 1600，你預估幾個工作天完成？然後何時可以交件？

舉個例子，

一個案子你估 7 工作天完成，每天你也很忙，最多只挪 4小時 做他的專案，

那麼你就是 向他報價：

7 工作天 * 1600 = 11,200 (總金額)

總時數是 7工作天 * 8小時 = 56小時
56 / 4 = 14 天 (實際交件天數)

所以你回應對方的話，報價就是 11,200，工作天 14天，不含假日。

但有個細節要注意一下，

有兩個東西的鐘點是比較高的，

第一個是如果你在職，只有晚上到凌晨幫對方弄，鐘點請算高些，因為干擾到你學習與休息時間。

第二個如果工作天要含六日的休息日，表示是急件，你理應也要加倍你的鐘點，原因承第一點。

該如何訂立合約？

報價與合約設計細節

合約範本

  1. 如何找外包(?)
  2. 需求訪談
  3. 報價單
  4. 簽約細節

沒有任何工作經驗>>不建議找外包
廠商需要外包 >> 很趕

如何找外包?

可以到各大平台去 Po 你的個人能力

寫部落格、官網的技術文章以及 Facebook 粉絲團
– 整理你的學習過程
– 今天客戶有問題
– 關鍵字搜尋

B2C
– 使用 Facebook 粉絲團、Google搜尋

花若盛開，蝴蝶自來，人若精彩，天自安排。

需求訪談

– 網站

報價單
  1. 聯絡方式
  2. 提供服務品項
    • 網址、空間
    • 網站設計開發
    • 民宿、旅館，延伸出拍攝費用 (40張 10,000)
  3. 遊戲規則
    1. 本報價單有效期間至 109/07/03 止，結案後提供一年平台保固。
    2. 需求若有變更，依實際製作內容重新規劃報價。
  4. 簽約

說明一 –

保固不等於維護

保固 = 現有東西有 bug

維護 = 修改功能，(以不超過總預算 20% 為底線，五個工作天)

  • 需要保固內容
    • 現有開發上的 bug 才需要保固
  • 不需要保固內容
    • 新的變數
    • 不符合當初開發的時空背景

說明二 – 合約內容

– 將在 3/20 完成第一階段，甲方需支付25%，共多少元

– 0%，驗收結束後全部付清也有

– 第一階段簽約後交付 20% 定金

合約內容雙方討論達成共識即可。

– – –
個人單位
– 要請你開發票 (8%)
– 開薪資

驗收完的後兩個禮拜，或者是公司下一次的行政付款時交付款項。

乙方則有完成專案之公開展示權及複製權–複製權行使前須事先知會甲方。
報價：1.5~10 倍

不偏向甲方不偏向乙方，和平合約。

網頁切版報價細節

參考網站：psd2html

web layout 網頁切版
  1. 網頁版型頁面數量
  2. 動畫效果數量
  3. 特定需求(瀏覽器、特定 framework)

如何提升網頁設計師、前端工程師的價值

文章的延伸

當你自學有成、找到第一份初級網頁設計師、前端工程師的工作後，再來該如何逐步漸進提升自身價值？

認清自己目前的實力

得到複數 offer 的學生常會遇到難以抉擇的選擇題，大部分不外乎有兩種狀況，一種是福利不錯，穩定的大公司，但並非研發而是維護固有產品。另一種是新創公司，技術更新快，較容易經手研發產品核心。
在雙方薪水差不多的情況下，諮詢老師該選哪間公司？
通常替學生分析完後，老師就會接著說：「你不覺得這兩個職缺點剛好是互補？跑過一輪面試你也清楚目前就只值這個 offer 區間，與其如此不如思考哪間公司能夠給你未來有更好的發展」
老師都會建議學生在面試時，要好好詢問會投入的「產品項目」有哪些，然後再去評估是否有興趣，這樣做起來才能享受工作的過程。

不要滿足、仇視現狀，以為自己掌握全世界

每間公司都有其生存之道，裡如曾經有朋友和老師反應他學了前端覺得很無聊，每次都是 PM 去跟客戶確認好 BS 付費版型，ART 設計好底圖後傳給他，改改文字與圖片就收工，所以不清楚自己的價值到底在哪，做了兩年也沒加薪，想要轉行。
老師的回答是：待在一個業務比工程師多十倍的公司，你覺得老闆會重視哪個部門？你應該去找能提升你前端功力與瞭解價值的公司才對。
要知道你去一個在資源權重上輕如鴻毛的公司，自然沒辦法對你職涯有更好的發展。

發掘自己想投入的方向，花比其他人十倍甚至一百倍的時間成為該領域的專家

當你找到第一份網頁設計/前端工程的工作後，接下來你必須放寬視野，從中找到你想精進的技術，不要以為前端價值就只有在網頁上呈現內容而已。
前端技術發展飛速，工作內容也變得非常多樣化，這裡老師也拋磚引玉列舉出一些前端工作經驗：

  1. 品牌設計公司：為標示品牌獨特性，在介面設計上也極致追求，技術追求於 SVG、Canvas、Parallax Scrolling 各種技巧
  2. 博弈與遊戲研發：橋牌、骰寶、拉霸各種你想像到能賭得東西，都可用 web 介面來開發，最近常被廠商要會懂 HTML5 API、WebGL、Canvas 來研發相關產品，可見需求量極大
  3. 資料視覺化：利用網頁技術設計圖表內容，例如地圖視覺化，讓 user 一目了然用地圖與色塊得知目前的房價比重，或是開發全球地圖，顯示各經銷點上面的訂單與銷售量，技術會使用到類似 D3.JS、Google Map API
  4. 3D與VR技術：透過 WebGL、three.js 設計業界領域的模型設計(賽車、建模用)，現在 Mozilla 更是推出 WebVR 技術，讓你設計的場景可用 VR 來呈現
  5. 前後端通吃：現在 JavaScript 已有辦法使用 isomorphic 進行前後端整合開發，當前端摸熟，也可考慮用所學的 JavaScript 投入後端
  6. 電商優化：與行銷、後端部門合作，精通各種分析、廣告服務的 event 投放，優化使用者體驗與 request 數量，大幅提升訂單轉化率與降低伺服器成本

以上所列舉工作內容老實說只是冰山一角，但每個領域都足夠你投入個一年半載了，所以好好挑條道路，盡情揮灑你的才華吧！

不畫地自限，跨領域成為 T、卍型人才

當你專精一個技術時，有天想要推動技術複雜性更高的項目便自然會覺得有瓶頸。
身為面對技術變化快速也能坦然以對，並立即掌握的 F2E 來說，研究一個新的領域也是駕輕就熟。
所跨領域也不用一定要技術層面，也可以是管理、商業等等，
例如你看到一個可以與傳產合作並創造出新價值的機會，身為技術底的你自然有辦法設計出你要的平台出來。
或者跟其他夥伴一塊組隊，共同入股成立公司，瞭解經營一間公司需要注意哪些細節。
或是成為一個 Growth Hacker，掌握各種廣告投放技術與 marketing 技巧，以後想推動各種產品與活動都能找到對的受眾進行銷售。
方向真的非常非常的多，老師會自稱自己是「前端工程師」，但在工作歷練下，如果專案需要老師成為純 PM 時，老師也能將專案控得很好，想要策展時，老師也了解如何規劃出各種提案，已達成各種 KPI。
每個工作內容在技能比重上都會有所不同，但也能讓你能夠挑戰各種關卡，享受破關的過程！

總結

每位老師培育出來的前端，老師都會和他們說「未來的你們擁有無限可能」，原因自然是上面老師所列的幾點，
這篇文章敬 憧憬想要成為前端、目前已經在坑裡、正準備想成為 T、卍型人才的所有 F2E

網頁設計師如何精進設計

合作困境
  • 案例：
    • 工程師不能接受使用…
    • 不符合規範 (網頁框架規範、iOS、Material Design)
    • 認知差異
      • 可行性
      • 誤解

工程師不能接受使用表格排版、執行流程(技術上的限制)

設計技術本身的問題
  • 設計語言較為抽象 – 閱讀 UI 設計規範
  • 初期缺乏文件 – 使用現成的文件
  • 流程規劃問題 – User Story

閱讀設計規範

使用現成文件

  • Web Framework
    • Bootstrap

User Story

假設要做一個購物頁面

  • 買家
    • 買家不需要註冊
    • 買家可以選購產品
      • 可以選擇類別、數量
      • 需要加購
  • 管理者
    • 查看訂單
    • …
訓練自己成為專業的網頁設計師
  • 了解設計規範
  • 學習框架
  • 參與規劃

工具篇

繪圖軟體選擇 – Sketch

為什麼使用 Sketch

  • 輸出的格式接近網頁可執行的格式
  • 套件多方便 (一鍵輸出)
  • 整合工程師思維 (插入 JSON)

工作轉換的訣竅

  1. 先找教學看一次有什麼功能
  2. 從目前的習慣做轉移
  3. 尋求目前的困擾點的解決方案

軟體 (繪圖、文字編輯器、作業系統)

  • Adobe → Sketch
  • Sublime Text → Atom → VSCode
  • Windows → Mac
    • excel → google sheet
    • word → markdown
    • ppt → keynote