---
tags: 網頁切版直播班 - 2022 夏季班
---

# 設計師專題協作

## 協作流程

1. 提供您的 Notion 帳號信箱（到 Discord 留言）
以便我們可以將您加入到該次協作文件中
> 沒有的話可以到 [Notion 官網](https://www.notion.so/product)註冊
2. 加入後待課程開始，我們會直接**指派一份給您**
可以在設計師欄位中看到您自己的名字
> 示意圖
> 
3. 確認後，請自行將「設計師進度」的欄位更改為「**已認領**」，並前往 Discord 的論壇建立自己的設計貼文
> Discord 示意圖
> 
4. 開始設計時，請將「設計師進度」欄位調整為「**設計中**」
5. 設計完畢時，請將設計稿貼到「設計稿標示連結」欄位中，並將「設計師進度」欄位調整為「**提交審核**」，並到 Discord 專屬的論壇中 tag 設計助教 Joanne ／Jessica
> 示意圖
> 
> 
6. 會由設計助教 **Joanne / Jessica** 協助審核，助教審核完畢會將「設計師進度」欄位調整為「**設計完畢**」
> 若是審核未通過會調整為「待修改」，修改後再重複第 6 點直到審核通過

---

## 設計師認領機制

### 流程｜
1. 請先按照上方「協作流程」認領第一份設計
2. 做完後於 Discord 論壇中自己的設計貼文 tag 設計助教長，回報完成並可再接續指派
範例：

> 初次合作設計師一次限認領一份設計稿，完成後才可認領下一份、已合作過設計師可同時認領兩份設計稿
> 完成三份可自行選擇想做的第四份題目
範例：

## 協作內容｜

學生們將會提供給您：

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

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

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

### 交付項目｜

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

### 協作注意事項｜

- 請使用 Bootstrap 5 的格線系統（桌機網頁寬度 1920px、行動版網頁寬度 375px）
- Icon 如使用 Material Icons 以外的需要另外備註來源（請盡量使用開源，方便工程師進行開發）
- 本次協作**不限制修改次數**，但不合理的要求我們絕對會擋下（若未達基本標準則會進行退件或大幅修改）
- 學員團隊會有窗口負責溝通，六角會從中幫助協調，如有同學直接私訊的狀況可向我們反應
- 可使用 [LOGO 產生器](https://logo.com/?_gl=1*h6bncx*_ga*NTI2OTM0MTMzLjE2Nzg2NzMxNDA.*_ga_8Y782WJ29W*MTY3ODY3MzEzOS4xLjEuMTY3ODY3ODkwOC42MC4wLjA.)，依照同學風格需求產生相符的 Logo（也可自行額外設計）
- 使用外部資源（e.g. icon、web font⋯⋯請一定要附上載點連結）
- 首頁 Section 不重複樣式（e.g. 不同區塊需使用不同排版）
- 文字請使用 **web font**，方便同學開發使用
- 如有自己的設計考量而需要修改同學的 Wireframe 規劃時，請在 Figma 中跟同學說明備註，若有需要我們從中協助也可以跟設計助教說
- 設計師擁有設計稿展示權，學生擁有網頁展示權

### 審核標準｜

未達以下標準將退件修正

- 格線系統、字級行高符合 Bootstrap5 格線系統
- 包含 LOGO
- 基本的對齊邏輯（置中、齊左、齊右⋯⋯）
- 間距需為 8 的倍數
- 符合同學提出的風格需求
- 完整的 Guideline（元件狀態⋯⋯）

### 常見錯誤｜

以下常見設計稿錯誤請盡量避免：

1. 格線設定錯誤：請依照 Bootstrap 5 的格線系統進行設計
2. 元件間的間距錯誤、元件內間距不符合 8 的倍數、間距有小數點
3. 行動版畫布寬度錯誤：請使用 375px 的網頁寬度進行設計
4. 行動版漢堡選單：未做出展開的樣式
5. 元件未貼齊格線：請放大檢查細節
6. 行高邏輯錯誤：依照 Bootstrap 5 的規範，一般文字段落的行高會是字級的 150%，標題的行高會是字級的 120%。e.g. 文字段落字級為 16px 則行高為 24px