PSD2HTML

6

國外盛行的服務 PSD to HTML 漸漸開始出現在台灣,自己也開始在接觸這塊,畢竟大多數情況下這技術對自己並不是問題,有這樣的市場就沒道理跟銀子過不去,但內心仍舊感到這種模式並不是一個好的發展空間,感覺存在很多淺在的問題。

正常情況下 Visual designer 最清楚自己設計的東西,在設計畫面同時往往已經明白考慮過在實際頁面上會是什麼狀態,HTML/CSS 該怎麼寫來達到心中想要的效果,滑鼠移過去又該是怎麼樣的一個變化,所有細節都在心中盤算過才會出 PSD。

Visual designer 將設計好的畫面交給另外一位 Coder 進行切版(html/css)的動作,Coder 並不清楚 Visual designer 當初為什麼會這樣設計,當中微妙的變化 Visual designer 如果沒仔細說明 Coder 不會知道,只會完全按照 PSD 進行處理,問題往往會到最後出 HTML/CSS 成品時才被發現,小問題或者好解決,如果是一整個區塊內的內容都得重新調整,這部份的工作成本該由誰負責?更糟的是,套程式時才發覺原始設計不可行時,後面延伸的問題該誰承擔呢?

另外一個問題是,一個設計與程式開發的專案,廣告行銷承接後發包給程式開發公司,程式開發將設計部份外包給 Visual designer,Visual designer 再將 PSD2HTML 外包給 Coder..。沒有一個固定的 Team 重頭到尾做完整的溝通與協調,出來的成品往往難以達到百分百的完美。

當然,或許工分的越細越好,各個部分分別交由專門的人負責,最後再一件一件組合在一塊,但前提是每一塊拼圖的角度都是經過事前完全溝通協調過的,不幸的是,完整協調溝通這樣的時間成本通常不會是發包者願意付的,所以一般現行方式是在發覺無法密合時再用剪刀東修西剪的硬湊成一塊。

對於網頁設計而言,視覺設計與 HTML/CSS 基本上就是一體的,最好的情況是再包含程式開發,完整度最佳。再把視覺設計與 HTML/CSS 拆開感覺已經有點變相的病態,這似乎是在透露一個訊息,就是任何會操作繪圖軟體、甚至手繪可出畫出近似網頁 prototype 的人,不管你了不了解構成一個完整網站的基本元素、User interface、或者熟悉網路文化,都可以設計網站,至於設計出來的東西好不好操作、流程對不對、對使用者親不親和都可以不用理會?

或者像 minipai 所說,PSD2HTML 較適合的對象為平面設計師、插畫家等藝術創作類族群的作品網站,他們能夠設計,但沒有 HTML/CSS 方面的能力。至於資訊量大的網站,或許只能各退一步坐下來好好談了?

Saturday, June 6th, 2009

Category: CSS, Design, 雜記

Bookmark and Share

6 條評論

2009/06/07

minipai

我切過社群網站的PSD,我也蠻懷疑我切的東西到底有沒有減輕對方工程師的負擔。不過收錢辦事…我也懶得替對方想這麼多XD

2009/06/11

BobMarche

Thanks for the useful info. It’s so interesting

2011/04/12

Tracy

很高興發現這裡,我也是平面設計轉網站設計
一直覺得國內所謂網站設計和Coder這部份很模糊
PSD2HTML有時由設計師做 有時就是工程師來做
PSD2HTML的服務 在國外有它的專業要求
至少要做到html 與css完全分離
也就是完成後真的只要動css就可以完全換掉版面設計
但有誰會去監督呢?到下一次版面更新時,才有發現當初根本沒有分離乾淨
所以也只能有限的改版了

小小看法 請多多包含囉~

2011/04/14

underfire

to Tracy
看別人的設計常常越看越不順眼 XD
所以現在也不再接 PSD2HTML 了
話說 html/css 還有分離不乾淨的情況已經很難想像了 :P

2011/07/10

shallker

我认为一个完整的流程是: Wireframe(pixel, interface, …) -> Graphic Design(Color, Visual, …) -> Front-End(Html, CSS, JS, …)
Wireframe是一个前期共同讨论创造的产品, 主要在于需求分析, 客户分析, UI分析等等, 可以想象的理解为电影前期的Concept这一产品, 思维集中于交互式的Creative Thinking
Graphic Design是将Wireframe在视觉上呈现出来, Color, Font, Icon, Button … 将线条框架转变为与用户直接接触的产品, 思维集中于Visual Thinking(感性)
Front-End, 依据Wireframe将Graphic Design Coding成给用户使用的最终产品, 主要在于代码优化, 性能调试, 技术实现( HTML5, JS … ), 思维集中于Code Thinking(逻辑, 缜密)
当然, 以上三个流程在一起最终也只能归属为Front-End, 我们还需要有整个项目的另一半Back-End! 视项目大小而定, 项目越大, Back-End的投入就越多.

OK, 这是我对网站项目的流程总结, 你有什么想法吗? I’m always excited to see your opinion!

2011/07/10

underfire

to shallker
你的 wireframe 應該是我們的 mockup,與客戶討論出的頁面規畫。photoshop 所畫出來的為 wireframe,切出來的 html/css/js 為 prototype。話說這種分類在 wireframe 與 mockup 時有些時候界線的確不太明顯。