---
tags: JS 直播班 - 2022 秋季班
---

# 設計師專題協作

## 協作流程

1. 提供您的 Notion 帳號信箱（到 LINE 記事本留言）
以便我們可以將您加入到 [【專題】2022 JS 直播秋季班](https://www.notion.so/2022-JS-0c3d885aceb84ac6bf05ba74a9ac20a6) 文件中

> 沒有的話可以到 [Notion 官網](https://www.notion.so/product)註冊
2. 加入後，我們會先直接**指派給您一份**
可以在設計師欄位中看到您自己的帳號

> 示意圖
> 

3. 確認後，可以自行將「設計師進度」的欄位更改為「**已認領**」
4. 開始設計時，請將「設計師進度」欄位調整為「**設計中**」
5. 設計完畢時，請將設計稿貼到「設計稿標示連結」欄位中，並將「設計師進度」欄位調整為「**提交審核**」，並到 LINE 群組中 tag Joanne

> 示意圖
> 
6. 會由 **Joanne** 協助審核，審核完畢 Joanne 會將「設計師進度」欄位調整為「**設計完畢**」
> 若是審核未通過會調整為「待修改」

7. 若學員有申請加購頁面，將請原設計師接續進行設計，並將「設計師進度」欄位調整為「**加購設計中**」，後續同第五、六點
8. 會由 **Joanne** 協助審核，審核完畢 Joanne 會將「設計師進度」欄位調整為「**加購設計完畢**」
> 若是審核未通過會調整為「待修改」

## 設計師認領機制

**作法**：當設計師被分配三份時，可以指定一份想設計的題目（總共四份）

### 流程
1. 請先按照上方「協作流程」認領第一份設計
2. 審核通過後，會再依序指派一份，一直到完成三份設計後，我們會詢問您是否有想設計的主題
對話範例：

   云：@設計師 目前設計編號 #11 ~ #14 學員已通過審核，想詢問是否有想設計的主題
   @設計師：想選 #13，再麻煩指派感謝 ／ 沒有，可以依序指派就好

## 協作內容

學生們將會提供給您：

1. 專題題目 / 發想緣起
2. 使用者故事 (User Story)
3. 網站地圖
4. wireframe 線框稿

需要請 UI 設計師，依照上方四個內容，做出首頁並符合以下六點（[範例 UI 設計稿](https://hexschool.tw/eHRkX)）

1. **依照主題搭配合適的主色與輔助色，來進行頁面設計**
2. **需設計桌機版與行動版。我們將提供 Bootstrap 5 的格線系統與字級規範，請直接套用**
3. **需依照學員提供的 Wireframe 完整設計首頁（含 Header、Footer 及學員自行規劃的五個區塊）**
4. **不需設計 LOGO，可使用較有質感的文字即可**
5. **搭配 [Unsplash](https://unsplash.com/) 免費圖庫，設計完成後需輸出成圖片包提供給學員**
6. **Icon 建議使用 Google Fonts 的 [Material Icons](https://fonts.google.com/icons?selected=Material+Icons)，若有使用其他 Icon 需另附上連結或圖片**

### 交付項目

1. **設計標示文件（[範例 UI 設計稿](https://hexschool.tw/eHRkX)），需使用 Figma 進行設計**
1. **行間、字體、字級**
2. **使用的外部資源需附上來源連結：icon、圖片**
3. **元件距離需是 4 或 8 的倍數**

### 費用（二擇一）

1. 首頁一式 $2,000。希望單一位設計師可以配合 4 個版型，並在 **11/13(日)** 前完成，共 $8,000。若學員有進行加購方案，則單一份設計主題額外多 $3,000。`（e.g. 同學委託首頁設計並進行加購方案，則針對此份設計稿，設計師可領 $2,000 + $3,000，共 $5,000）`
2. 或 兌換六角學院前端影音課程全組合包（價值 $13,950）

## 常見問題

**Q：首頁需要設計完整頁面嗎？還有不用全部 wireframe 頁面都做嗎？為什麼需要提供色系與基本排版？**
A：是的，首頁需要依照學員提供的 Wireframe 設計完整頁面，其他頁面則是看學員有沒有進行加購方案。若有加購，會限制學員的頁面資訊量不得超過首頁的 50%；若無則不需要設計其他頁面。學員最頭痛就是在**配色經驗不足**，以及沒有足夠能力做出 Banner，協助學生這段後，他們會將**您提供的色系與間距設定，套用至 Bootstrap 5 SCSS 與 Tailwind CSS 共用變數上**，就可以依照線稿圖自行設計後續內容了。