可以用photoshop模型開始網站的佈局嗎？

Question

這是一個最佳實踐主題。

我把它看作是一些網頁開發者的首選方法。他們沒有從頭開始做CSS佈局，而是首先啓動一個photoshop模型，然後將其解碼爲CSS。

您對這種方法有什麼看法？

最好，

Answer 1

它快。這就是爲什麼我總是使用這種方法。在實際設置佈局之前，您不希望花費時間構建跨瀏覽器的CSS。

Answer 2

Agile methodology會建議一些與客戶協商時容易修改的內容。戴夫托馬斯在Agile Web Development with Rails建議在紙上塗寫。但是，除非你真的知道你想要什麼，否則任何事情都必須比直接用手工製作CSS更好。

我還想着說：「塗鴉可能不會削減它的正式演示」，但真棒SO人羣在評論打我吧...

Answer 3

如果你生產的是這樣，爲什麼不？並不是每個人都能夠完美地設想他們的網站，因爲他們正在輸入一串尖括號。

更嚴重的是：這是你的工作，所以你有責任以一種有效的方式來完成它。

Answer 4

樣機非常棒，但我不知道photoshop是否是您想爲此目的嘗試的第一件事情 - 在一開始，當您只是試圖獲得邏輯佈局時該網站的各個頁面（在按照外觀& c改進之前），具有乾擦標記和便利貼的白板提供用於早期頭腦風暴的非常快速，重複的模型重新排列。一旦對一個（或幾個）可能的信息安排達成一些合理的協議，然後視覺上更準確的工具進入。

順便說一句，只是不要忘記在改變它之前拍攝白板（任何像樣的手機都會這樣做，你不會嘗試這裏的高品質;-)任何時候有任何想法或建議，你可能想重溫或思考未來！

Answer 5

原型時，選擇正確的保真度非常重要。 This article from BoxesAndArrows提供了一個很好的介紹各種選項及其用途。

我特別喜歡這行Bill Buxton文章引述其中：

有沒有這樣的東西作爲高或低的保真度，只有適當的保真度。

在this TechTalk by the Facebook Design Team，他們提到他們是如何在他們的設計過程中使用Photoshop（IIRC它是某處的中途，但我似乎無法通過視頻轉發）。

Answer 6

大多數網頁設計圖形藝術家都是這樣工作的。

許多程序員只是覺得浪費時間。

它有優點和缺點。

優點：

• 許多圖形藝術家神交的Photoshop /插畫比他們多一點的Dreamweaver。

• 客戶得到無處不在的最終產品預覽：mac，pc，firefox，即safari，不管。在開發者使用firefox和使用MSIE的客戶使用MSIE時，在生產的早期階段發送html預覽總是會引起麻煩。
  
  而不要認爲是在聰明的一面，塗寫MSIE驅動的HTML。以非標準html開始並轉換爲標準比以其他方式做起來更加痛苦。
  還有一個問題：許多網站客戶都傾向於使用Mac並使用Safari。網絡犯罪分子對圖形的喜好往往比平均水平更高，所以在這個領域碰到Mac瘋子的機會比其他人高。

• 更多的設計替代品可以準備花在每一個更少的時間。在處理客戶方面沒有指定決策者的高管雲層時，這可能是一個巨大的優勢。替代性的實體模型將會在一個設計或另一個設計上達成一致的共識。

缺點：

• 「切割」的圖形設計成html成爲額外的工作，它目前還不清楚誰是對多餘的時間要工資。

• 它傾向於圖形爲中心，剛性，設計工作流程。客戶同意預先進行預覽，這就是他們通過合同獲得的結果。每個圖形修改都意味着金錢，行爲和編程傾向於不明確，或者最差，由模型定義。

• 追求像素完美的跨瀏覽器堅持模型可能會讓你瘋了。如果您與客戶達成了一個嚴格的設計，那麼這可能會成爲一個可怕的問題。

• 骯髒的CSS技巧鞋在到您的設計。使用HTML模型，客戶應該已經批准了一個由代碼驅動的設計，其中包含更少的技巧。

無論如何，我不會建議的Photoshop的樣機，但Inkscape中。 （或插圖畫家，如果你在午夜時刻通過燃燒成堆魔法圈來崇拜土坯）

在與客戶討論合同的同時，塗鴉階段也很好。

我更喜歡鉛筆和紙氈尖，我的攝像頭拍攝想法歸檔和電子郵件轉發。說到塗鴉，任何人都會什麼感覺更自然。

沒有做任何工作，依靠示例站點示例和屏幕截圖進行圖形參考始終是一種選擇。

Answer 7

就我個人而言，在我工作過的每個webdev公司，我總是先在photoshop中嘲笑。直接跳入CSS和標記是更多的自下而上的方法，對許多程序員來說很有意義，但是在Web開發中，您必須牢記，有一些美學需要考慮，並且要遵循一個創造性的方向。您的產品功能性還不夠，它需要專業的創意導演/圖形設計師的投入，才能使產品看起來更舒適。

根據我的經驗，這個問題一直與團隊成員的不靈活性搏鬥。美學專注於平面設計師並拒絕妥協他們的設計完整性;這有時會導致不可能或非常困難和非語義的佈局。開發人員在可行的解決方案中堅決拒絕損害其代碼的完整性 - 這可能不太優雅。關鍵是要有一個非常熟悉CSS的創意團隊，什麼是和不可能的，以及對設計和美學的重要性有多少讚賞的工程團隊。

在我的自由職業生涯中（曾在兩個陣營中工作過），我發現先輕鬆地在photoshop中進行模擬，因爲我知道我能做什麼，不能做什麼。與CSS和標記相比，photoshop模型更容易改變客戶反饋。此外，如果您可以向客戶展示模型，他們會感覺更安全，因爲他們知道他們的資金正在按照明確的方向進入精心策劃的項目。

希望這會有所幫助！

Answer 8

我是一個非常瞭解html和css的web程序員。我可以爲它的基本功能使用圖形程序，但設計一個完整的圖形網站不是我的事。

我讓一個平面設計師使用他或她的圖形程序來創建一個漂亮的外觀佈局，並且在html和css中手動編寫網站。

它適用於我，併爲我的客戶提供他們喜歡的設計（因爲圖形設計師總是會比大多數網絡程序員製作更漂亮的外觀設計）。