# 11/04 Personal and Team Project - Summarize
###### tags: `Personal and Team Project` `2021/11/04` `進度筆記` `前端心得`
---
講師: 佘昌霖(技術 PM) & 盧政憲(視覺設計 / 介面設計)
# 履歷部分
- 可以用 Illustrator 用成一頁式
- 或是參考 Cake Resume
- 也可以參考前人!
> 提交履歷及就業媒合活動提醒(sparkle)
(sparkle)《前端工程師培訓班》(sparkle)
大家好：
結訓在即，就業媒合活動也即將上線囉！
準備專題跟作業的同時也請配合課程當中的「就業輔導」，
提交作品集、履歷並參加線上就媒。
就媒廠商會在面試前正式公佈，目前尚無法確切提供間數及資訊。
(red check mark)履歷提交截止：11 / 12 前
→ 請提交電子檔，pdf尤佳，附上作品集！
(red check mark)就業媒合活動：11 / 23
(warning)履歷都可以不斷修改，單位亦會長期協助尋職，
不用擔心一次定生死喲！
(warning)履歷可以修改！
請當作11 / 12 是第一次截稿日，不要害怕！
(warning)履歷可以修改！
----
# 之後會有履歷製作
- 常見的履歷大概長這樣 ↓
> 
> 盡量不要以制式化去投遞
> [CakeResume: 製作履歷、找工作、搜尋人才 - 從人才出發的求職平台](https://www.cakeresume.com/zh-TW)
----
- 如果是要以前端設計↓
> 
> 可以輸出成 pdf
----
- 配置也可以考慮↓
> 
> 調整背景顏色
> 第一眼就會被 Hello 吸引到
> 再來就是被 Experience 吸引
> 閱讀順序、整齊度...等
> 是很常見的履歷設計
----
- 可以上 [Pinterest](https://www.pinterest.com/) 去找找 ↓
> 排版這種東西是比較沒有智慧財產權的問題
---
- 比較難的就是裝飾影響到編排的風格
> 
> 很多設計師會用這種方式產生風格
> 加到履歷或是作品集上
----
# Summarize
---
# 如何開始網站專案規劃
- 之後可以用在個人專題規劃上
1. 了解需求 (需求訪談)
2. 初步規劃
3. 用到心智圖工具去界定範圍
4. 流程圖 - 去規劃流程(通常不會跟網站地圖明確劃分, 不過流程圖會先做)
5. 網站地圖
---
# 個人專題網站 (一頁式網站)
- 找興趣的主題, 這一步就像是業主訪談
> 找一個有興趣的主題, 當作個人專題網站主題
> 合法的, 正常向 (?) 內容
> 盡量找沒有網站的店家(介紹文或粉絲專業)
> 範圍: 賣吃的 / 辦活動的 / 旅遊類 /賣東西 > 可以想一下購買 / 銷售的東西
## 例如:
---
---
---
# 網站地圖 - Site map
> 我們現在在網站地圖
> 下禮拜會先 wireframe
> 有些會直接根據網站地圖 → 設計 & 設計的描述 → 直接前端開發網頁
- 網站地圖沒有既定格式
> 讓人一看就了解怎麼連結
> 從心智圖中找發想的內容文字去連結/做
一頁式地圖可以用在個人專題上
> 作網站地圖把每個區塊寫出來
> 每個區塊有甚麼結構
> 企劃階段(網站地圖), 也會依照業主需求去更動
# 參考資料:
[\-網站企劃\- 製作網站企劃書 @ 索尼的紅燈人生 :: 痞客邦 :: (pixnet.net)](https://sony1708.pixnet.net/blog/post/24115622)
[淺談網站企劃的工作 \- INSIDE](https://www.inside.com.tw/article/2003-about-website-planning)
---
----
# 網站架構圖的部分 - 從心智圖到網站地圖
- 列出網站幾乎所有功能的選項
- 那些頁面是網頁設計師去規劃設計
- 那些功能是程式設計師去做
- 流程圖幾乎沒有制式, 可能依客戶需求
# 參考資料
[Dribbble - Discover the World’s Top Designers & Creative Professionals](https://dribbble.com/)
[流程規劃和流程圖範例：微軟VISIO【桑河數位科技blog】 (shanger.net)](http://blog.shanger.net/article.asp?id=218)
[淺談網站企劃的工作 \- INSIDE](https://www.inside.com.tw/article/2003-about-website-planning)
[\-網站企劃\- 製作網站企劃書 @ 索尼的紅燈人生 :: 痞客邦 :: (pixnet.net)](https://sony1708.pixnet.net/blog/post/24115622)
[做網站需要經過哪些步驟？網頁建置流程大解密│愛貝斯網頁設計 (ibest.tw)](https://www.ibest.tw/website-proccess.php)
[徹底解說網站的製作流程 \- 塞巴貓網頁設計服務 (cybercats.com.tw)](https://cybercats.com.tw/how-to-build-a-website/)
[如何做好 網站建置 流程 及在 網站製作 前制定 網站架設 計畫 ？ | 鵠崙設計 (design-hu.com)](https://www.design-hu.com/web-news/webprocess.html)
---
# 時程管理 - 已經做了網站的設計, 下一步?
- 預估工期, 工項, 多少事情要做, 要做多久之類的
- 這時候預估的流程會用到(Gantt chart)
# 參考資料
[線上免費甘特圖製作：甘特圖製作模板及設計素材 | Adobe Spark](https://www.adobe.com/tw/express/create/chart/gantt)
[甘特圖是什麼？成為一流人才一定要學會！【2021最新版】 - Verakey拓璞工程 (veracityconsultant.com.tw)](https://veracityconsultant.com.tw/what-is-gantt-chart/)
[一步步教你用Excel 畫出專案甘特圖 - Project Club 專案管理輕鬆學](https://www.projectclub.com.tw/hard-power/1507-excel-gantt-chart.html)
[甘特圖 \- 維基百科，自由的百科全書 (wikipedia.org)](https://zh.wikipedia.org/zh-tw/%E7%94%98%E7%89%B9%E5%9B%BE)
---
---
# 時程管理
- 例如 ↓ 甚麼時候會完成甚麼東西
```
> 一開始要學怎麼抓時程時間, 這很吃經驗
> 一開始估算時程, 命中率有四成就算不錯了
> 可能因為業主需求, 或每個東西的眉角, 專案常會反覆改
*如果能把四成往上提升, 能力增加, 薪水也會增加
```
- 目前我們不知道, 網頁切版要花多久時間, 像是微軟要花多久時間, 例如學習成本, 哪些才是實際下去做的工
- 如果是個人接案就會用到抓工期, 才不會在報價的時候才有問題發生
- 例如微軟, 再切一次這個頁面要花多久時間, 學習的時間成本也要抓出來
- 如果一個小時可以做超過其他人兩個小時能做的事情, 就比較知道執行效率和價格
- 合約看是工作天, 還是日曆天, 例如工作天報價, 大部分可能都是以一天八小時下去算
---
# 老師示範甘特圖(時間管理流程)
- 會議記錄算企劃提案一部分
- 設計階段, 跟業主訪談完確認需求(等業主猶豫)
- 記得工作天, 遇到假日休息
- 程式製作估算
- 有些案子也是邊做邊驗收的
> 一個網站兩個禮拜差不多
> 知道概念後做, 甘特的工具很多~
# 通常專題會給三個禮拜下去做
- 2~3 禮拜
- 甚至 + / - 一禮拜
- 可以用網站地圖下去劃分時間流程
---
---
# 介面設計(4hr)
- 甚麼是介面設計?
- 要怎麼處理專案?
- 要怎麼應用在個人專題?
## UI/UX 這堂課最終目標
- One page website **User** interface design, UI
---
# 一頁式網站
- 選單作為定位用
---
# 網站設計 流程
- 大致可分三個
1. 企劃階段: 需求 / 目標 / 架構 / 欄位 / 材料 / 參考資料
```
開需求 → 專案目標(團隊才能做) → 企劃才能寫文件, 網站資訊架構, 網站欄位
材料(例如企劃請業主提供的產品照片), 備妥參考資料(業主希望高調大方, 活潑之類的, 方向明確的業主也會提供), 也有使用者文件、情境要注意
```
> 企劃還沒結束時不太會開始動設計
> 最怕的是業主希望你提供範例, 先做個三個範例來看看, 然後你的 PM 還答應了
2. 設計階段: Wireframe(Layout) → Mock up
```
Wireframe(Layout) / prototype: 不包含 color / pic / decoration
```
Wireframe ↓
```
Mock up(design phase):
平面設計的展示階段, 一個東西好像有印刷出來的 fu
會有 color / pic / decoration 的製作並完成
```
Mock up ↓
Prototype ↓
```
完成的雛形, 要有可以點擊的樣子, 一個偽網站
```
3. 程式技術: 前端 / 後端技術
---
# 完成個人專題的網站地圖後, 看項目內容
- 企劃真的很重要, 地基打越穩, 後面做網站越輕鬆
- 例如, 裡面的文案
> 尋找畫面參考, 例如 s5-style, muuuuu 網站參考
> 尋找各區塊的長相參考, 來截圖
> 例如形象區塊的特效參考
---
# 螢幕解析度與 RWD
1920 → PC
1600 → Pad
1366 → Laptop
1366x1024 4:3(平板 / 早期 TV)
---BP1200--- 斷點
1280x720 (平板)
768x1024 (平板最窄的邊)
375 → 之後可能會替代 320
320x568 (最小的手機, iPhone 5s) → 再來可能會淘汰
> 滿足最小的版面的情況下, 我們就能滿足需求
- 如果是這種特殊規格
[Galaxy Z Fold3 5G Folding Smartphone | Samsung US](https://www.samsung.com/us/smartphones/galaxy-z-fold3-5g/)
> 可能會等到有一定市場, 再去對這規格做 RWD
---
---
# 找到 API 要先看套件的授權事項
- 看這些東西是否要不要錢
> 在網路上找圖片, 要注意有些公司會把圖片丟在網路上, SEO做得很好, 如果商業引用馬上就有高機會被告~
---
# 智慧財產權
# 參考知識
[智慧財產局著作權主題網-認識著作權-著作權知識+-校園著作權-教師授課著作權錦囊 (tipo.gov.tw)](https://topic.tipo.gov.tw/copyright-tw/cp-415-855924-5dd9b-301.html)
[創用CC - 維基百科，自由的百科全書 (wikipedia.org)](https://zh.wikipedia.org/wiki/%E7%9F%A5%E8%AF%86%E5%85%B1%E4%BA%AB)
---
# 記得作品集最後要附註
XXX XXX-XX屆 for 教育用途 (避免違反著作權
如果你的照片含文字被上線後的網站引用就沒甚麼問題
不過只引用照片就比較危險
----
# 平面設計 - what is UI ?
- 課堂結尾時, 有海報要做?
---
----
# 介面設計工具
- 個人專題主要使用 AI 製作
- 團體可能用 Figma
# 團體專題 - 鑑定職訓成果
- 盡量貼近現實 (企業專題, 要上線的網站)
- 企業提供素材, 認識如何跟業主去談
- 依照能力分組(作業要交), 大概 5~6個人一組
# 會有海報製作
- 團體專題做完後會有海報
- 有完成個人專題也可以做一張海報
----
-----
# 海報設計
> 
> 
```
主題 協辦 授課 成員
```
- 直式海報
> 
> 
----
# 海報有留邊框
- 安全邊界
> 
- 先用兩個 15mm 方塊抵在對角線
> 
- 盡量讓資訊維持在安全邊界內
- 如果有 QR Code 不要在安全邊界上(怕裁切問題)
> 
> 
> 安全邊界也是格線系統
> 海報 在 11/18 交
> 團體的部分要出來
-----
Sign in with Wallet
Connect another wallet