分享關於網站規劃的流程以及注意事項，前端與設計溝通等問題。

1. 網站規畫的
兩三事
Hsiang from 転転

2. 転転創意的製作經理
Hi！I’mHsiang,
原本是個網頁設計師︐後來因為太想要將自己的設計
可以不透過別人處理︐索性轉會設計的前端工程師︐
而在程式碼的世界得到更多成就感︐但因應公司營運
模式︐所以轉為管理職位。

3. About Us
認識転転

4. 転転是一間位於台北︐專注於打造品牌／數位產品／使用者經驗－為台灣少數兼具
設計與創新開發能力的團隊。透過好的設計解決問題是転転的最高信念︐同時︐追
求卓越的精神也讓我們站在台灣數位服務領域的頂端為大型企業與新創公司持續打
造成功的品牌與產品。

5. Who we are
01
Design Tech Branding
Success
+ =
數位品牌服務的最前線
Ｃore Ｖalues
DESIGN TECH BRANDING
SUCCESS

6. 案例分享
Case Studies

7. HTTPS://WWW.AMBA-HOTELS.COM
服務項目
搜尋引擎最佳化 (SEO)
搜尋引擎行銷 (SEM)
評估與分析
品牌策略與識別
搜尋引擎
最佳化
台北西門町意舍酒店

8. HTTP://WWW.TSRC.COM
響應式
開發
UI/UX
設計
服務項目
響應式網頁設計及開發 (RWD)
使用者經驗設計 (UX)
介面設計 (UI)
設計規範制定/開發
台灣橡膠

10. Product Line Up

11. THE 転転 WAY
Planning

12. 我們做事情溝通瞭解客戶的預算、
想法、專案進行時間︐評估難易度
後再安排後期以及整季的Forecast。

13. 依客戶的種類以及規模︐大型的專案有大型
專案的處理方式︐小型的客戶則會用比較基
本的方式去處理。若是製作產品的話︐也是
另當別論。

14. 規畫

15. 設計

16. 開發

17. 部署

18. 行銷

19. Work Flow
前端與設計的結合

20. Embed 一個工程師
在設計發想階段
工程師
設計A 設計B 設計C 設計D

21. 範例︓
Tab, Dropdown, 善用
component 做資訊的收納
工程師
解決設計的問題
Before
After

22. 跟工程師交流，
了解 CODING
設計B
Before
After
範例︓
BEM的命名概念

23. 所以工程師跟設計師要當好朋友

24. PM 常遇到的問題
F.A.Q.

25. Problem 1
為什麼設計師做出來的設計會
跟工程師開發的頁面有差別︖

26. 設計師︓
我不是標 250px 嗎︖
為什麼距離差這麼多

27. 工程師有問題
?

28. 設計師說是工程師有問題
?

29. 工程師︓
…… 文字還有
Line-Height 呀

30. APP 、平面、跟 WEB
的算法都不一樣

31. Problem 2
因資料改變所以設計跟程式
都要改……

32. 客戶因資料一改再改︐
我設計也要一改再改︐
我程式也要一改再改。

33. CONTENT FIRST DESIGN
有對的資料才有好設計

34. 千萬別說什麼資料
最後再提供了︕

35. Problem 3
私下解決設計師未提供
的設計

36. 工程師把自己
當成設計師

37. 設計亂糟糟
物件沒有一致性
什麼鬼~

38. STYLE GUIDE
TO THE RESCUE

41. 所以工程師跟設計師一定要當好朋友
設計跟前端密不可分

42. Developement
開發

43. Safety Method

44. 開發環境容易建立
Safety Method

45. 容易維護程式碼
Safety Method

46. 轉成打包檔給客戶
Safety Method

47. 容易轉成後端需要的
模板引擎
Safety Method

48. 方便直接用
host 起來
Safety Method

49. Javascript
API
Markup
J
A
M

50. JAM Stack Method
整個網站都可以在
CDN 上

51. JAM Stack Method
前端跟後台可以
整個分開

52. JAM Stack Method
不用 DB

53. And more…

55. Developement
後台的選擇

57. 太多了

58. 自己刻

59. 花時間

60. 花成本

61. 傷腦筋

62. 我們不是後端Q__Q

63. 我們還是用最簡單的吧

65. 安全嗎︖
感覺很 LOW太慢了
很重
不好用
買theme就好了
部落格平台

66. ROOTS.IO
Modern Development for Wordpress

67. 什麼都幫你準備好了

68. 現代前端
開發
Bootstrap Boilerplate
Bower
Gulp
Blade Template
資料架構

69. 安全性
Fail2Ban
Ferm (Firewall - 只保留需要的 port）
SSL 自動安裝

70. 自動化部署
LEMP 安裝
使用 Composer 自動安裝
開發環境的最佳設定
（如︓robots.txt）開啟 MEMCACHE 快取

71. 就是懶人包呀︕

72. 前提︓
你要有時間

73. 用完後也會ANSIBLE 了
附帶︓

74. BUT ……

75. 用HeadlessCMS 最方便

76. Resources
https://headlesscms.org/
https://www.staticgen.com/

77. 靠人家不如靠自己 😆

78. Developement
工具

79. ( )

80. +
( )

81. &

84. 謝謝！
Ｑ＆Ａ？
hsiang@ten2.tw
https://www.facebook.com/hsianglee