# 10/04 網站企劃概論 - Site map
###### tags: `網站企劃概論` `配色` `智財` `API` `2021/10/04` `進度筆記` `前端心得`
---

講師: 佘昌霖

# 今日講課 -- 上午的部分 - 網站地圖 - 檢討

# 分類頁面的調整

- 同學範例:
> 跟後端串接的部分有點多
> 個人專題的量有點大, 這次個人專題比較偏形象網站
> 這次個人主要是前端靜態頁面

---

# 網站架構圖的部分 - 從心智圖到網站地圖

- 列出網站幾乎所有功能的選項
- 那些頁面是網頁設計師去規劃設計
- 那些功能是程式設計師去做
- 流程圖幾乎沒有制式, 可能依客戶需求

# 參考資料

[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 禮拜
- 甚至 + / - 一禮拜
- 可以用網站地圖下去劃分時間流程

---

# 課外知識 - 看配色

- Google 可以直接輸入色碼看配色

# 參考資料
[19 個免費顏色搭配網站 讓你的視覺設計不再猶豫！ — BFA 簡報](https://www.bfa.com.tw/blog/color-tools)

[設計配色完整攻略 | 色彩意義、色彩理論、色彩心理學讓您一次擁有！ (shutterstock.com)](https://www.shutterstock.com/zh-Hant/blog/complete-guide-color-in-design)

[網頁色彩配置的小發現. 這陣子下班之餘，我將經常使用的網站進行色彩擷取，並紀錄網站中主要的顏色佈局以及字… | by Logan | Medium](https://medium.com/@loganing/%E7%B6%B2%E9%A0%81%E8%89%B2%E5%BD%A9%E9%85%8D%E7%BD%AE%E7%9A%84%E5%B0%8F%E7%99%BC%E7%8F%BE-e420cfb78bde)
[網頁設計色彩搭配9技巧，不能不知的色彩心理學 (transbiz.com.tw)](https://transbiz.com.tw/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88%E8%89%B2%E5%BD%A9%E6%90%AD%E9%85%8D%E5%BF%83%E7%90%86%E5%AD%B8/)

[網站配色訣竅 | 一手掌握10種情境模擬，30種絕佳的網站配色! - Shutterstock Blog 繁體中文](https://www.shutterstock.com/zh-Hant/blog/color-palettes-for-websites)

[平面設計入門：顏色 - YouTube](https://youtu.be/_2LLXnUdUIc)

---

# 智慧財產權
# 參考知識
[智慧財產局著作權主題網-認識著作權-著作權知識+-校園著作權-教師授課著作權錦囊 (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)

---

# 下午部分 - Site map 檢討(續)

# Logo 和 icon 的差別

- icon 和 logo 的差異
> 記得商業標誌(Logo) 和 圖示(icon) 有差別
> 區塊可以改成直接用故事之類的標題
> 文件類的還是用淺色+淺色配置

---

# 文字點擊效果
- 有甚麼特效的話可以放上來~
> 文字變清楚的效果可以寫出來

---

# 把客戶講的話轉成工程師的話
- 敘述需要時間和經驗

---

# Scroll down 套件
- 有套件可以用於滾動效果

---

# 餐廳頁面 - 的商品規劃
- 主打商品可能可以用整個 banner
- 比較少的商品可以用 Carousel
> 可以想放那些動態效果進來~

---

# 甘特圖檢討 - 設計的部分
- 設計做完後才開始切版和程式開發

----

# 文件頁面的擺法
- 字數太多要怎麼呈現比較好
> 分店照片的照片擺法, 可能會很難呈現每家店的特色
> 文案很漂亮

---

- 第二層的作法
> 放活動, 當季商品

> 內容大項包小項
> 內容不留白, 有咖啡類, 奶類, 冰滴類

---

- Aside 側邊欄
- > 其實也跟nav 類似, 都是固定的

- 這像是 mock up 惹

---
---
---

# Taskade 使用示範

- 可以分很多細項
> 工作、家人、朋友等, 許多事項

- 客戶名字, 要做甚麼事情
> 設定細項

- 可以有細項中的細項

- 截止日期

---

# 找到 API 要先看套件的授權事項
- 看這些東西是否要不要錢
> 在網路上找圖片, 要注意有些公司會把圖片丟在網路上, SEO做得很好, 如果商業引用馬上就有高機會被告~

---