【工作】圖面排版vs直接切版

在無數個網頁設計工作經驗裡,時常需要與不同人配合執行專案,
大家都希望工作執行有效率,能夠早早打完收工最好,
而最近工作上遇到以下"問題"(或者說是"議題"較為恰當),
自己思考過後也有了結論,隨手記錄一下。
網頁開發過程中,有產出wireframe討論,大家對於功能有共識之後,終於可以進行開發階段…
身為50%設計師與50%前端工程師的我,接下來要進行的工作流程會是,
1.審視wireframe(以XD製作),看使用經驗上是否還有思考未周全的地方。
2.以wireframe為基礎,帶入視覺設計描一份prototype(以PS製作)。
3.再以prototype為成品目標,進行html/css撰寫。
4.後續工程師接手,套資料庫、檢測…等
幾年來的流程大致上都是這樣,只是依工時急緩或專案工作分配不同,各步驟間會有取捨(偷工)的部分。
但最近前輩建議我,在wireframe確認後,可以直接進編輯器刻web,避免重工。跳過視覺產出,對我來說,有點衝擊了過往的做事方法,想反駁卻不知道問題出在哪?
試著直接進入網頁編輯軟體,開始敲打版面,發現自己會不知從何開始,恩…那就照wireframe刻吧!
刻出來之後,版面當然醜到不行,自己這關都無法通過,於是又花了很多時間反覆修正樣式。
後續的反覆修正樣式所花的時間,與圖面排版要花的時間,很難量化比較,但若以成品來看,少了PS的輔助,自己覺得視覺上的細節差很多,例如邊框要用多粗細、配色、是否要陰影…等。
而且重工的問題其實是可以解決的,
以套件、表格…等區塊來說,排版時不用花太多時間琢磨,因為排完後成品也不見得會長一模模一樣樣,不如把時間多花在大架構的版面樣式上。
實作且比較過後,我終於能對前輩提出駁回(阿~也只是腦內小劇場演一下)
回歸正題,在網頁製作過程中,圖面排版是否可以跳過,進到直接切版的步驟?
我的結論是,再怎麼樣都還是要保有視覺產出,可以依案件情況不同有所精簡,但不能完全省略!
站在前輩立場來看,我可以理解會覺得有重工、浪費時間的地方,就連我自己身兼設計師跟前端工作,也常常想:"這區塊等切網頁再來排好了,這顏色等進網頁再來調好了~" 以過往接案經驗,校稿不可能出半調子圖面給客戶看,所以還是要排好排滿。但如果是現在軟體case,大多是公司內部討論,不需要直接對客戶,有些工的確就能省下來。
原本不知道如何反駁,也因為這次思考過程,而更加了解自己在做每個步驟之於工作流程的用意(之前被操到像機器人後就不知道怎麼思考了0.0)
● wireframe用來確認功能流程,講求快速產出,用於討論(這步驟希望自己以後能做到既快又好)。
● 接下來用PS(或任何其他排版工具)製作精描圖面的過程,也同時是在思考版面該怎麼排。雖然看似無意義把版面移來移去,顏色調來調去,只要調到一個正確的位置、顏色,所謂的感覺對了~版面就大致確立了。
● 設計師畢竟是視覺動物,什麼東西都要經過圖面才能理解,看著一堆程式碼很難想像產出的整體畫面長甚麼樣子。
● 現在的繪圖軟體功能越來越強大,排好版面也可以一併把圖檔、CSS都產出,只是需要多點心思在圖檔命名上,多一份工在前面,也同時少一份工在後面。
想到之前上班看到同事閉目養神,他說他是在思考程式怎麼寫(笑),其實每個人都有自己習慣的做事方法對吧!
話雖這麼說,我也不希望自己落入一個舒適圈就動不了,遇到新方法或觀念還是想嘗試看看,最後再選擇自己順手有效率的方法來實施就是~
你也跟我有一樣困擾嗎?或是有不同見解,歡迎留言跟我交流交流~ (我也想知道早點打完收工的秘訣!!)
