---
tags: 設計師專題協作
---

# 設計師專題協作

## 協作流程

1. 提供您的 Notion 帳號信箱（到 LINE 記事本留言）
以便我們可以將您加入到 [【專題】2022 Vue 直播冬季班](https://chalk-freedom-ec6.notion.site/2022-Vue-a76bdf53e72b4a789c21ffbc67819dee) 文件中

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

> 示意圖
> 

3. 確認後，可以自行將「設計師進度」的欄位更改為「**已認領**」

5. 開始設計時，請將「設計師進度」欄位調整為「**設計中**」

6. 設計完畢時，請將設計稿貼到「設計稿標示連結」欄位中，並將「設計師進度」欄位調整為「**提交審核**」，並到 LINE 群組中 tag Joanne

> 示意圖
> 
6. 會由 **Joanne** 協助審核，審核完畢 Joanne 會將「設計師進度」欄位調整為「**設計完畢**」

> 若是審核未通過會調整為「待修改」

## 設計師認領機制

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

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

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

## 協作內容

學生們將會提供給您：

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

需要請 UI 設計師，依照上方四個內容，做出首頁並符合以下六點（[範例 學員 Wireframe](https://whimsical.com/delifans-wireframe-EtCfk7f38ZP8LCXxj13zLy)）

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://www.figma.com/file/IKvczbEBf2PzcOxUQhMvFT/%E9%AB%98%E7%B4%9A%E9%A3%9F%E6%9D%90%E9%9B%BB%E5%95%86%E7%B6%B2%E7%AB%99?node-id=0%3A1&t=IaXHGCpxmTG3joNt-1)），需使用 Figma 進行設計**
1. **行間、字體、字級**
2. **使用我方提供的 Bootstrap 5 格線模板**
3. **使用的外部資源需附上來源連結：icon、圖片**
4. **元件距離需是 4 或 8 的倍數**

### 費用（二擇一）

1. 首頁一式 $2,500。希望單一位設計師可以配合 4 個版型，並在 **2/26(日)** 前完成，共 $10,000。`
2. 或 兌換六角學院前端影音課程全組合包（價值 $13,950）

## 常見問題

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