如何看待 Quora 跳過 Photoshop 直接用代碼做設計？
Quora 跳過PS直接用代碼做設計，"every part of http://Quora.com was designed in code from Day 1"
關於這個問題有三個不錯的資源。
首先推薦Instagram CEO做的分享：Secrets to Lightening Fast Mobile Design[1]. 看完知道用戶體驗出色的產品，對工程的考慮開始得非常的早。裡面提到Instagram每一步的載入速度都在設計階段就考慮清楚了，而不是事後再優化。
之後是推薦看@Joel Lewenstein 在Quora的工作經驗：Life Without Photoshop [2]. 補充說明裡的話也出這篇文章。除了儘早知道真正的交互效果外，非常重要的兩點好處是：第一，提高風格一致性和可復用性，其實是提高了開發效率。設想一個功能在不同的頁面風格相同或相似，並且可以實現代碼級別的完美復用，那麼很多新功能都可以用一些小功能直接拼起來；第二 設計的實用性強，文中覺得在現有的代碼結構上嘗試出的設計，會考慮更多的實際情況。不會出現在原型上看起來不錯但實際做出來達不到實際效果，或者要修改頁面更多的地方才能達到的情況。
第三篇是看Quora如何在技術上支持這種工作流程的：Techtalk - Webnode2 and LiveNode[3]. Quora實現代碼復用的不僅僅是View層，也包括頁面行為。也就是說，你用若干組件搭起一個頁面看設計效果時，js已經能工作了！只有這樣才能讓設計師一開始就知道這個頁面是怎樣工作的。
這個實踐也說明了代碼結構決定了幾乎所有環節的效率，必須作為項目的核心來設計。
[1]. https://speakerdeck.com/u/mikeyk/p/secrets-to-lightning-fast-mobile-design
[2]. http://www.quora.com/Joel-Lewenstein/Joels-Posts/Life-Without-Photoshop
[3]. http://www.quora.com/Shreyes-Seshasai/Posts/Tech-Talk-webnode2-and-LiveNode
1.這壓根就不是趨勢.
2.不管是否用photoshop來做設計,草圖是不可或缺的.
3.跳過設計,請抱歉我不想用美工這個詞. 同時某些所謂的"前端工程師" 貌似對設計和草圖階段很不顧一屑. 跳過設計,前段工程師是無法勝任的,人無完人,前端偏理性,設計偏感性, 每個職位都有其存在的價值, 請別看輕任何一個職位. 你不是一個人在工作. 知道photoshop的使用不代表你可以配出好顏色. 工程師文化所造就的就是粗糙及簡陋. 這是一個極端.
4.前邊的朋友說過,你會在沒有圖紙的情況下就開始蓋房子嗎? 如果照你這種說法,所有的建築設計師,服裝設計師,網頁設計師都應該下崗,只有裁縫上陣就可以了,對吧?
5.quora的精髓並不是他是否跳過某個階段,而是他將這種形態變成一種文化,同時他注重了美感和實用性的統一,而文化這種東西,又是及其感性的. 現階段分工細化是趨勢,除非你是上帝.
真的要看項目複雜度和員工的素質，你能想像複雜如淘寶、騰訊網的首頁頁面，跳過psd，直接寫代碼么？各個需求方還在為設計方案爭論的面紅耳赤的時候，直接進入前端開發，還是在psd里修改圖層來完善方案，哪個成本更大，顯而易見。
當然，百度公司的首頁可以。
樓上不少人說這是趨勢，我們過幾年可以回過頭來驗證一下看看。豆瓣第一年的設計也是直接用HTML和CSS做的，一個px一個px地摳。後來有時候邊改CSS邊上線邊在小組裡實時問用戶意見。
PS的中文字體、線框、陰影等等感覺和網頁效果都略有差異，有時候細微的細節差異會導致完全不同的設計決定。好吧，這種做法我在2007年起就在業內提倡和極力推動，應者寥寥無幾。因為實踐中我發現，第一互聯網產品設計的視覺風格在朝越來越簡單發展，第二客戶端表現和行為技術發展突飛猛進。因此，在團隊能力能OK的情況下，縮減交付物類型，縮短協作流程，理論上可以實現縮短工期和並行開發。並且這個設計思想，在我自己項目集郵冊（http://jiyouce.com/）中已經實踐成功，非常順利。
隨著將來同行的技能的水漲船高，以及代碼表現力和瀏覽器支持的越來越好。大膽的估計，將來做Web視覺設計都可以不需要Photoshop了，等於說與平面設計類工具完全說拜拜。
兩類線框圖的比較 http://blog.rexsong.com/?p=978互聯網設計敏捷迭代 http://blog.rexsong.com/?p=2365
網頁設計三劍客 http://blog.rexsong.com/?p=9474
首先我們要確定，Quora是做了設計的，它做的是版式設計，而html+css是web版式設計最直接而快速的方式！
如果沒有必要做太多的圖形設計，為什麼一定要先用PS什麼的！如何看待 Quora 跳過 Photoshop 直接用代碼做設計？
看上面各位對神馬神馬的大家讚賞，實在憋不住了，我也來發表點觀點。
抱歉，我對 Quora的工作方式了解的不是太詳盡，僅算美工，會手寫點代碼。
問題中提到「用代碼做設計」，這是個好想法，但是不做設計腦子裡如何知道效果？不做設計常規素材如何處理的美觀？讓一個只對代碼和邏輯興奮的人在不做設計的情況下直接開發？好笑！上面兄台說的好，一個感性一個理性，參與者思維邏輯不一樣。
看到上面有人說這是趨勢，那麼我希望出現一個推翻傳統工作流程的工具/軟體/方法，這樣能夠讓程序員用代碼直接開發頁面，他做出來的頁面必須保證美觀，良好可靠的用戶體驗，不那麼爛的代碼·····這麼程序員一下子包攬了現在一個互聯網大部分的活兒，並且他得符合各位說的那樣跳過Photoshop 直接用代碼做設計！！！呵呵，吹牛還要打草稿呢？
有人說就有這樣的能人，誰誰誰還實現了呢！大哥，你周圍有幾個這樣的能人啊？什麼？你說可以學？多少人學？誰誰誰實現了也沒說跳過ps直接代碼做的吧。
嗯，先歇會。
我喜歡這種工作方式, 因為這種工作方式會強迫自己關心結構和邏輯, 而不是視覺細節.
但不可否認這種工作方式對最後 deliver 出來的產品風格會有很大影響 (例如, 你確實很難說 Quora 的視覺做得 "好"), 所以取決於你是不是希望你的產品往這風格方向走, 不是每個產品都需要這麼強調結構和邏輯.有幾個原因可能會導致不可行：
1.改動成本相對太大，需求變更如果太頻繁的話，前端人員（此處即設計師）將會徹底歇菜
2.目前能寫出非常好的前端代碼的設計師不多，鳳毛麟角。設計追求表現層面，前端追求實現層面，兩種角色關注點不一樣，灰常不容易同時做好。
3.其實兩種角色合為一起，正是所謂的網頁設計師乾的事情，並不新鮮。很多較爛公司就是這麼乾的，大家去看看一些的企業招聘都怎麼寫的就知道了。
4.個人項目其實不具備任何參考意義，你懂的；人少的項目跟人多的項目也不可同日而語，人越多搞屎棍就越多，這就是國情，你懂的。
5.如果你能做到，那就意味著你能能做更多。既然HTML，CSS都是你寫了，JS恐怕也將會算到你的頭上。這個對於設計師，恐怕是灰常不願意看到的，特別是在工資保持不變的情況下，而工資這檔事一般不取決於你能做多少事，你懂的。
6.此方法或流程只適用於網站項目，軟體項目不大可行如果喜歡項目能夠快速迭代，那是可以放下一部分設計的工作，因為設計的初稿和改稿的時間相對比較長，而且後期還面臨實現的問題。但是這會產生一個問題，一個網站的設計需要統一，你不能讓一個前端工程師隨意設計頁面布局。所以最好的方式是，視覺設計師先設計完成一個網站的設計標準，比如說顏色的使用設定，邊框的設計規範，字體的設計規範，這樣前端工程師就可以在某些頁面離開視覺設計師快速出圖了。
另外，前端工程師和視覺設計師的工作結合併不一定合適，一個是由於工作性質的差異（一個偏理性，一個偏感性），另一個是由於同時擅長這兩種工作技能的人才比較少（讓視覺設計師學JS簡直就是折磨）。除非是在一個小團隊，需要全能的員工。
quora的頁面是重信息展示而非視覺效果，所以直接寫代碼布局也是合情合理的。代碼布局的特點：
- 可以直接向開發人員傳達頁面前端架構
- 列表或者箱形布局製作起來更容易
- 實施者既要懂代碼也要有基本的UE、UI知識
PS只是工具，原型設計一般分兩部，先確定布局與交互再由設計人員精雕細琢，對於quoea可以省下後面一步。而布局設計的工具又有很多（紙筆、Axure RP、PPT、Excel、CSS代碼等），如果代碼能夠很好地傳達信息，同時又節省了效率，何樂而不為呢。
我只想說，不同的行業不同的情況，一，不需要品牌化的產品當然不需要設計，只需要功能沒有bug就ok。二，建立在第一條的基礎之上，你想要快速的上線一個產品的情況下當然可以，三，在你沒有一個大的規劃的前提下，你可以這麼做。四，不懂品牌的人，更加可以這麼做。而且應該是IT領域的未來。因為所有的圖形界面都不需要從新創意與設計，只需要拿別人做好的，抄襲之，調用之，ok。四，關於構架，用別人的構架的前提下，抄襲被人的產品，當然可以這麼做。
總之，沒有創新，或者所謂的微創新（山寨等同）的產品，肯定可以這麼做。因為不需要全局思考，不需要創新，也不需要建立品牌識別和形象。
另外，quora 這麼的原因，不能只看網路山的幾篇文章就片面的理解了。我認為還是需要自己去根據不同的情況做不同的事情。
實際上這就是「裝修」，先把房子的框架搭好、然後是走管線、粉刷牆壁、最後才是置辦家居。但是我們也可以看到由於各個環節都由不同的人去實施，每個人對這個項目的理解都自己的角度，因而很難在這種情況下達成共識。因此對於大型項目，往往會由總設計師給出一個總攬，各部分的施工圖，在有了這樣的一個明確方向後，各個環節才能得以順暢的執行。
Quora 這樣做，不代表這就是最好的方式，只是因為在他們的團隊里CODER的氛圍佔了主導而已，每個團隊都有自己的角色分工，不必刻意改變。我說下這些年在這些工具中跨域的一些經驗吧。
Photoshop的各種技巧會為視覺添彩，但是在維護起來，很痛苦，圖層過多。而且在設計過程中，會有過度設計的天然傾向。
Fireworks是更接近Web設計的，但是，有些效果實現起來很痛苦。雖然這個軟體有些設計邏輯也很漂亮，比如Page和Status，但界面一旦複雜起來，弄清楚裡面各個layer直接的邏輯都是苦差……
Axure等就更不合適了，它有它特殊的用途，但它會毀了你還沒有萌芽的審美；我寧願你去用Photoshop，PS里有幾招可以快速搭建的技巧，比如善用柵格技術、背景渲染、光影、box container的幾種變形、分割條就好了。但說實在的，我用這樣的方式把別人相對比較快速帶入門了，但也在反省，到底缺失了什麼？這裡面有問題的，讓很初級的designer看起來都很專業（特別是加上切片、標註等），有潛質、有品位但是缺失了實現這些品位的能力。
還有，繪製類的軟體畢竟不是Web專用的，無論PS還是FW，比如弄個表格（新版的FW曾說會有這個功能的實際上早已跳單了），然後再反覆修改幾次，會弄死你的。重用性真的很低。
我有一段時間在直接調用Photoshop的介面，去繪製Web設計的界面，畢竟PS裡面很多色彩上的處理，原生的HTML/CSS是無法比擬的。但這些小程序純粹是消遣和對界面規則的探究而已。
現在我做的事情是原生的HTML/CSS/JS直接寫，像Dreamweaver用起來都是累贅，不如手寫方便。在設計的氣味不丟失的前提下，對頁面的結構要求就高了起來（特別是揉合JS的前提下）。（css維護起來想要方便，可以藉助更上級的語法，比如sass、scss 、less.etc）
像有些工具能很好的輔助你，比如一個好的IDE，比如http://www.getf5.com的F5，另外就是給自己弄兩個屏幕。
btw，我不是設計專業出身，也非程序員，在學校里的專業是管理學，出來混這麼久，做的是不用寫半個代碼的產品設計師，也就是大家口中的產品經理。
產品開發，最本真的味道就是產品+開發，誰都應該成為產品er、開發er、設計er，沒有什麼不可能的，想太多的不可能，就局限自己，變得平庸了。
如何看待 Quora 跳過 Photoshop 直接用代碼做設計？
因為，不這樣做，會讓他們覺得痛苦；這樣做，就舒心和放心了。
相信這樣做的人會越來越多。
user based的產品應該提倡這樣做。作為一個打雜的，近幾年來做的東西，我也基本傾向於跳過PS，直接用代碼輸出頁面。理由有：
1、基本的頁面結構，我已經框架化了，只有極少部分背景和banner需要上PS。
2、當團隊人手少，流程簡單的時候，跳過PS能夠極顯著地提升建站速度，而且整個前端建設過程中的細節都非常可控，溝通成本降至基本為0。
3、頁面更簡潔，結構更合理，可以完全兼顧SEO、結構化等等偏重理性思維和計算邏輯的東西，對於需要這種展現風格的網站來說，的確是有優勢的。
Quora產品設計的詳細解釋：Life Without Photoshop
http://www.quora.com/Joel-Lewenstein/Life-Without-Photoshop
他說一開始聽產品設計 Rebekah Cox說要跳過PS時候，還只是禮貌地點頭表示同意，6個月後，他也完全擁護起純代碼的設計.
1 技術有保障
Web 前端技術已經進化的很好了。足夠快，足夠所見即所得，和其他部分（後端，資料庫）分割的足夠清晰。
2 介質有變化
PS 做設計應該是雜誌時代的習慣。雜誌表現的內容大小是固定的。PS可以做到所見即所得。
但是今天的網路應用並非表現在大小固定的平面上。顯示器有大小，窗口可變化。用PS在效果表現上可能反而沒有前端代碼更加所見即所得。
3 需求不一樣
介質表現大小固定，對表現要求很高的應用仍然會用PS做。比如 iOS App 。就三種屏幕大小和解析度組合，對美觀要求很高。目前很多設計公司還是使用PS。
酷，但認為這無法成為趨勢。
1、代碼對圖形表現力不夠直觀快速，對整體效果的把握有阻礙。
2、跳過ps，即設計與前端並行由一人實現，對企業來講是縮短流程節省資源的大好事，但對個人綜合能力要求過高，排除個別天才，普及難度大，不切實際。
標題是「 如何看待 Quora 跳過 Photoshop 直接用代碼做設計？ 」，但從上看到下，部分答案都把個案歸結為趨勢，忽略是前期通過ps設計頁面的重要性。跳過ps直接用代碼做設計這個議題只局限於部分站點。或者說這是和初期產品，隨著產品不斷的迭代，1px的差異區別，如果前端開發人員都能感覺得到對於視覺體驗的差別，那還要設計師做什麼？ 要說這兩種職業壓根就不能混淆為一個人身上。
順便說下，有些跑題：
我以前是一名4A廣告公司的資深設計師，因為個人喜好也略會div+Css網頁布局重構，後來去了某門戶，被稱為美工，現在自己做互聯網創業，天天也泡在代碼里。 我只知道，曾經在廣告公司服務過蘋果的一個很小的項目，對於像素間距上下長寬的要求苛刻到無法言語。那麼對於蘋果這種也是屬於排版型的站點，直接可以用代碼直接實現就能完事的嗎？
PS不PS這是工具問題，審美思維是肯定先有的，不是說拿了一堆CSS就能堆出設計來，——這就是為什麼現在滿世界千篇一律的css based design，四處濫用的文本陰影盒陰影不必要的圓角單一的漸變……不懂設計的代碼人員沉緬於這類初級審美以及「挖哦終於得到支持了」的自high而已。
一個有平面設計技能的前端當然就是這樣的人才，但是，太少了，更不用談要設計出特色來的人才。
另一方面，一個懂得代碼實現可能性的UI，也是人才，更能跟前端無縫合作。
推薦閱讀：
※如何評價 2013 年 NHK 晨間劇《海女》？
※如何看待所有型號的小米手機不限量開放購買？
※如何看待醫生拒絕給艾滋病人做手術？
※如何評價 MIT 經濟學教授達龍·阿西莫格魯 (Daron Acemo?lu)？
※如何評價電影《安德的遊戲》？