小小美工的網站設計之路Joanna Huang

自我介紹

� Joanna Huang� 現職: 美術設計工程師� 背景:資訊科學系

資訊傳播學系

� 角色扮演� 美工?� 網站企劃?� PM?� 業務?� 助理?

PM

美工

助理

業務

網站企劃

2

美工要做甚麼?

� 文件排版、美化� 公司文件形象化� 支援軟體專案

� UI 動線規劃� Prototype by PhotoShop + Dreamweaver� HTML + CSS

� 網站專案� 風格設計、Prototype� HTML + CSS� 網站攝影� 溝通with 工程師、客戶、業務 3

網站專案剛開始接觸

� 有新的案子，設計風格

� 確認客戶需求，下單

� User改變需求

� 結案，收錢� Or …..

� 設計三個首頁風格頁+網站建置企畫書

� 完成HTML+CSS，交給工程師Coding

� 需求修改跟工程師溝通

� 網站完成，裝機� Or …

上頭指示 美工

業務

4

網站專案現在

� 有新的案子，業務已談過初步需求

� 二次訪談確認Prototype架構

� 確認視覺設計，user下單

� User改變需求、溝通

� 結案，收錢

� 了解客戶需求，製作Prototype

� 設計網站風格頁，將Prototype加上視覺

� 將視覺轉成HTML+CSS� 交給工程師Coding，

溝通user需求

� 網站完成，裝機

業務、PM 我要做

5

客戶的超凡審美觀

圖片來源: http://www.wretch.cc/blog/markleeblog/21959366

6

PROTOTYPE → DEGIGN

7

失敗案例一

� 客戶說詞反覆無常� 需求一加再加

� 商品拍攝數量

� 幫我當成他家美工� 替客戶撰寫網站文案� 網站已上線一年多� 遲遲不肯結案，交付尾款

� 結果：雙方老闆撕破臉，中止合作關係8

失敗案例二

� 我方與客戶方皆換人接手� 當初談的規格及需求全盤推翻� 當初說網站平面設計由客戶完成

我方做網站建置及功能撰寫� 溝通過程中，E-mail紀錄很重要� 網站已完成90%，客戶說老闆不滿意網站整體風格

� 結果：客戶中止合約，一毛錢也沒收到

9

感謝聆聽

HP8• 小小美工的網站設計之路

Joanna Huang (其達科技 美術設計工程師)

• 網站企劃工作流程十年變化蔡明哲 (悠識數位 首席資訊架構師)

• Rapid Prototyping 應用於 facebook 應用程式開發流程梁凱智 (Cacafly CTO)

• 使用者中心設計到行動中心設計︰互動設計的再次典範轉移？李峻德 博士 (交大傳播研究所)

• 眼動(Eye Tracking)與使用者經驗研究陶振超 博士 (交大傳播科技系)

• Mobile Design薛良斌 hlb (和多 Handlino)

http://userxper.com/courses/events/hp8/