Joomla! 網站規劃      講者:Asika  所有權:I	  Love	  Joomla!	  社群      h1p://ilovejoomla.tw
什麼是網站規劃?
⼀一種施工專用的溝通文件• 網站製作SOP• 照表操課不失誤• 與客戶溝通的橋樑• 制定規格、驗收標準
與「網站企劃」有什麼不同?• 網站企劃偏向行銷專案企劃書• 緣起• 目標族群• 預期效益• 廠商合作、主協辦單位、預算評估、ABC計畫、團隊 簡介、行銷時程、SWOT、PEST、UESD、五力與產品 生命週期........
我們需要的只是⼀一張藍圖
將顧客需求轉化成  網站規劃書
我們可能會碰到幾種客戶• 很清楚自己在幹嘛的
我們可能會碰到幾種客戶• 簡單想想條列下來的
我們可能會碰到幾種客戶• 手繪魔人
我們可能會碰到幾種客戶• 像在寫作文的
我們可能會碰到幾種客戶• 克隆星人         阿嬤冗
我們可能會碰到幾種客戶• 堅持自己畫版面的
我們可能會碰到幾種客戶• 混沌
因為客戶不懂網站規劃我們的服務才有價值
⼀一目了然的樹狀規劃  展現我們的專業
不要永遠顧客至上  他們重視的不見得是真正需要的
替顧客想到他們沒想到的他們不見得知道這麼多行銷輔助工具
設計適合他們的操作流程            vs有些人控制欲比較強                 也有些人碰到電腦就焦慮
該如何開始
第⼀一步:需求蒐集
第⼀一步:需求蒐集• 案件洽談時,可以依照之前經驗設計開案用的紀錄單,記錄顧客需求。• 讓洽談工作SOP化
第⼀一步:需求蒐集• 引導客戶提出需求:• 準備相關網站分析內容• 提供常見網頁項目供參考• 提供制式表格給客戶填寫• 用紙記下討論內容回去慢慢整理
參考範本I• 直接讓客戶選想要的頁面
參考範本II• 制式表格直接填寫
翻譯能力也要訓練•   我有辦法知道訪客人數嗎? -> (Analytics or 記數器)•   我們希望訪客可以問問題與互動 -> (討論區, FAQ, 留言板)•   你們會不會加上SEO? -> (其實他需要關鍵字廣告)•   你覺得需...
第二步:分類整理
第二步:分類整理• 首先,把所有內容都列出來
第二步:分類整理• 分類是人類的天性:「將相似的事物放⼀一起,不相似的分開」
第二步:分類整理• 所有內容都要有歸屬點(不要製造孤兒)
第二步:分類整理• 決定哪些頁面要用擴充套件來製作
第三步:結構設計
第三步:結構設計• 首先,清楚Joomla!的內容結構
前後台展現不同的結構層級
第三步:結構設計•   用編號連結所    有資源•   方便架站人員    照表操課
第三步:結構設計• 擴充套件清單
第四步:開始架站啦• 交給架站人員搞定,喝紅茶去吧~~~
第五步:驗收• 有了前面精心設計的結構,驗收也更方便• 列成清單,讓客戶勾選即可
還需要些什麼?
還需要些什麼?• 頁面規劃圖• 別嚇到,用PowerPoint 就可以做到了
還需要些什麼?• 時程圖
還需要些什麼?• 估價表            別忘了加上有效期限
還需要些什麼?• 主機規格           總是有些客戶想自己買主機
實際操作
簡易流程• 通常,   我們會從客戶那邊拿到…
簡易流程• 讓我們做⼀一個簡易的排版                                   FAQ"       "   "            A"       B"   C"              "          ...
簡易流程• 區分分類與單篇文章(灰色是分類)                                 FAQ"       "   "          A"       B"   C"              "          ...
簡易流程• 標出特殊功能(元件)                                  FAQ"       "   "           A"       B"   C"              "              ...
簡易流程• 這是我們需要的分類與文章,把他們對應⼀一下  •           •        o      •        o      •   •  FAQ      •        o               • 
簡易流程• 現在我們知道分類結構了(紅:分類、藍:文章)    前台選單     後台文章分類
簡易流程
簡易流程• 最後生成的表格
相關資源
相關資源•   PowerPoint 頁面設計工具    •   http://www.istartedsomething.com/20071018/powerpoint-prototype-toolkit-01/    •   http://...
相關資源•   頁面設計軟體    •   AxurpRP - http://userxper.com/axure    •   Pencil - http://pencil.evolus.vn    •   Balsamiq - http:/...
THANK YOU!
Upcoming SlideShare
Loading in...5
×

Joomla! 網站規劃 簡報 - I love joomla! 5月小聚

3,425

Published on

Published in: Business
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,425
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
162
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

Joomla! 網站規劃 簡報 - I love joomla! 5月小聚

  1. 1. Joomla! 網站規劃 講者:Asika 所有權:I  Love  Joomla!  社群 h1p://ilovejoomla.tw
  2. 2. 什麼是網站規劃?
  3. 3. ⼀一種施工專用的溝通文件• 網站製作SOP• 照表操課不失誤• 與客戶溝通的橋樑• 制定規格、驗收標準
  4. 4. 與「網站企劃」有什麼不同?• 網站企劃偏向行銷專案企劃書• 緣起• 目標族群• 預期效益• 廠商合作、主協辦單位、預算評估、ABC計畫、團隊 簡介、行銷時程、SWOT、PEST、UESD、五力與產品 生命週期........
  5. 5. 我們需要的只是⼀一張藍圖
  6. 6. 將顧客需求轉化成 網站規劃書
  7. 7. 我們可能會碰到幾種客戶• 很清楚自己在幹嘛的
  8. 8. 我們可能會碰到幾種客戶• 簡單想想條列下來的
  9. 9. 我們可能會碰到幾種客戶• 手繪魔人
  10. 10. 我們可能會碰到幾種客戶• 像在寫作文的
  11. 11. 我們可能會碰到幾種客戶• 克隆星人 阿嬤冗
  12. 12. 我們可能會碰到幾種客戶• 堅持自己畫版面的
  13. 13. 我們可能會碰到幾種客戶• 混沌
  14. 14. 因為客戶不懂網站規劃我們的服務才有價值
  15. 15. ⼀一目了然的樹狀規劃 展現我們的專業
  16. 16. 不要永遠顧客至上 他們重視的不見得是真正需要的
  17. 17. 替顧客想到他們沒想到的他們不見得知道這麼多行銷輔助工具
  18. 18. 設計適合他們的操作流程 vs有些人控制欲比較強 也有些人碰到電腦就焦慮
  19. 19. 該如何開始
  20. 20. 第⼀一步:需求蒐集
  21. 21. 第⼀一步:需求蒐集• 案件洽談時,可以依照之前經驗設計開案用的紀錄單,記錄顧客需求。• 讓洽談工作SOP化
  22. 22. 第⼀一步:需求蒐集• 引導客戶提出需求:• 準備相關網站分析內容• 提供常見網頁項目供參考• 提供制式表格給客戶填寫• 用紙記下討論內容回去慢慢整理
  23. 23. 參考範本I• 直接讓客戶選想要的頁面
  24. 24. 參考範本II• 制式表格直接填寫
  25. 25. 翻譯能力也要訓練• 我有辦法知道訪客人數嗎? -> (Analytics or 記數器)• 我們希望訪客可以問問題與互動 -> (討論區, FAQ, 留言板)• 你們會不會加上SEO? -> (其實他需要關鍵字廣告)• 你覺得需要Facebook粉絲頁嗎?->(資訊焦慮)• 不用做太複雜,只要......就好 -> (沒錢)
  26. 26. 第二步:分類整理
  27. 27. 第二步:分類整理• 首先,把所有內容都列出來
  28. 28. 第二步:分類整理• 分類是人類的天性:「將相似的事物放⼀一起,不相似的分開」
  29. 29. 第二步:分類整理• 所有內容都要有歸屬點(不要製造孤兒)
  30. 30. 第二步:分類整理• 決定哪些頁面要用擴充套件來製作
  31. 31. 第三步:結構設計
  32. 32. 第三步:結構設計• 首先,清楚Joomla!的內容結構
  33. 33. 前後台展現不同的結構層級
  34. 34. 第三步:結構設計• 用編號連結所 有資源• 方便架站人員 照表操課
  35. 35. 第三步:結構設計• 擴充套件清單
  36. 36. 第四步:開始架站啦• 交給架站人員搞定,喝紅茶去吧~~~
  37. 37. 第五步:驗收• 有了前面精心設計的結構,驗收也更方便• 列成清單,讓客戶勾選即可
  38. 38. 還需要些什麼?
  39. 39. 還需要些什麼?• 頁面規劃圖• 別嚇到,用PowerPoint 就可以做到了
  40. 40. 還需要些什麼?• 時程圖
  41. 41. 還需要些什麼?• 估價表 別忘了加上有效期限
  42. 42. 還需要些什麼?• 主機規格 總是有些客戶想自己買主機
  43. 43. 實際操作
  44. 44. 簡易流程• 通常, 我們會從客戶那邊拿到…
  45. 45. 簡易流程• 讓我們做⼀一個簡易的排版 FAQ" " " A" B" C" " " " " " " "
  46. 46. 簡易流程• 區分分類與單篇文章(灰色是分類) FAQ" " " A" B" C" " " " " " " "
  47. 47. 簡易流程• 標出特殊功能(元件) FAQ" " " A" B" C" " " " " " " "
  48. 48. 簡易流程• 這是我們需要的分類與文章,把他們對應⼀一下 •  •  o  •  o  •  •  FAQ •  o  • 
  49. 49. 簡易流程• 現在我們知道分類結構了(紅:分類、藍:文章) 前台選單 後台文章分類
  50. 50. 簡易流程
  51. 51. 簡易流程• 最後生成的表格
  52. 52. 相關資源
  53. 53. 相關資源• PowerPoint 頁面設計工具 • http://www.istartedsomething.com/20071018/powerpoint-prototype-toolkit-01/ • http://www.boxesandarrows.com/view/interactive • http://www.raizlabs.com/blog/294/wireframing-in-powerpoint • http://www.michaelgaigg.com/blog/2009/01/23/powerpoint-wireframe-stencils-as-free- download/• Keynote 頁面設計工具 • http://keynotopia.com/ • http://keynotekungfu.com/ • http://sonspring.com/journal/keynote-wireframe-toolkit • http://www.webdesignerdepot.com/2011/07/keynote-as-a-collaborative-wireframing-tool/
  54. 54. 相關資源• 頁面設計軟體 • AxurpRP - http://userxper.com/axure • Pencil - http://pencil.evolus.vn • Balsamiq - http://www.balsamiq.com/• 更多頁面設計資源 • http://www.1stwebdesigner.com/design/wireframing-mockup-prototyping-tools-plan-designs/ • http://www.noupe.com/design/35-excellent-wireframing-resources.html • http://inspire.twgg.org/c/internet/other/several-useful-prototype-design-tools-prototype.html • http://inspire.twgg.org/c/inspire/design-concept/wireframe-prototype-of-the-importance-of- planning-for-web-design.html
  55. 55. THANK YOU!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×