網站設計師們，你的設計作品前端工程師們是喜歡的嗎？很有可能你的一些習慣并不能很好地轉化為代碼，這就會讓前端工程師在項目上與你一起工作變得更加困難了。想成為一個更好的同事嗎？那我們今天就來學習如何更好地溝通和設計，通過對工作方式的細微改變來讓前端工程師愛上你的作品，這樣將會加快項目進度，使工作更輕松。
1、讓前端工程師在早期開始接觸項目
網站設計師和前端工程師之間最大的問題是他們經常在默默的完成自己的工作，直到設計的初稿完成，個人或團隊才開始談論一個項目。這不是正確的工作方式，網站設計師和前端工程師應該從一開始就討論項目將如何組合在一起。雖然網站設計師可能關注顏色、字體和圖像，但前端工程師可以提供對可用性、功能和性能的洞察。
網站設計師和前端工程師應該對對方的外觀有一個很好的了解。網站網站設計師應該理解足夠的代碼和可用性，以便與前端工程師交流并理解挑戰：前端工程師應該對設計理論有一點了解，這樣他們就可以在設計理念不適合web的時候提出建議。
2、清晰的文件
網站設計師所能做的最大的事情之一就是每次都以相同的方式準備和打包文件。有多少次你打開了一個有數百個未命名圖層的Photoshop文檔？不要將這種類型的文件交給前端工程師。無論你使用什么軟件，每一層和樣式都應該適當命名。樣式、顏色、色板和排版在整個設計過程中都應保持一致。
對于每個項目，以相同的方式命名文件和樣式。以類似的方式分組，并使用一致的文件夾系統。這樣，前端工程師就不必重新學習如何找到每個新項目的部件和元素。
3、使用瀏覽器字體
設計項目的最大挑戰之一，包括印刷和數字作品是印刷管理。不要將桌面字體用于web或應用程序設計的打印項目，并假設它們會起作用。（通常他們沒有。）
對于數字項目，選擇瀏覽器字體排版。這意味著你可能需要為web找到類似的字體，以便與打印的內容相匹配。
不要讓前端工程師為你做這些。挑選可比較的瀏覽器字體，并從一開始就使用它們。你甚至可以在你的風格指南中注意到打印和數字字體。
這背后的原因很簡單:嵌入字體可能有點棘手。另外，瀏覽器字體是免費的，并且將確保你不會產生額外的項目成本。（當你在做的時候，考慮一下用圖標做同樣的事情，用一個像字體一樣棒的包，這樣前端工程師就可以使用CSS樣式的圖標，而不是導入一堆圖像文件!）
4、包裝形象資產
當我們討論圖像資產的時候，正確的導出和打包文件是非常重要的。前端工程師可以打開和導出所有的圖像文件以滿足他們的需求，你可以詢問他們需要什么，并在過程中執行。
這可以確保你得到你想要的圖片，同時壓縮文件以幫助你的網站快速加載。
不要試圖自己做這件事。詢問前端工程師如何保存、命名和壓縮文件以獲得最佳使用。
5、考慮環境
在設計網站和移動應用程序時，要考慮的設備大小和縱橫比都是如此之多，作為一個網站設計師，你需要了解畫布大小、頁邊距、填充等，以創建實際可用的模型。
在開始繪圖之前，請與前端工程師交談，以確保在開始之前了解設計環境的外觀。沒有什么比一個在Photoshop或素描中看起來更棒的設計更糟糕的了。
你需要事先知道這些事情:
如果該框架具有不同大小的特定填充規格。
列之間的溝寬（如果不同）
最窄屏幕尺寸的前端工程師將編寫代碼。
6、多問問題
它已經被提到過幾次了，但是設計者和前端工程師之間的溝通是所有這些工作的關鍵。溝通可以產生或破壞項目，影響截止日期，影響最終項目的設計和功能。
多與你的前端工程師去吃午飯，去了解他們。一路上要問很多問題。如果你不確定某件事是否有用，就問一問。前端工程師不是可怕的人，在這個過程的早期回答一個問題比需要重新思考和整個概念要容易得多。
7、學習一些開發基礎知識
當你與前端工程師交談并提出問題時，要深入挖掘。如果你在你的設計庫中還沒有這些技能，那就學習一些開發基礎知識。
從事數字項目的網站設計師應該在以下方面進行自我介紹:
HTML和CSS（你應該能夠改變字體大小或顏色，并理解兩者是不同的）
常見的用戶模式（為用戶與內容交互的方式設計）
可訪問性標準（因此你的設計將適用于更多的用戶）
哪些類型的元素需要用作圖像，哪些元素可以使用純CSS來創建!
在響應式布局中，斷點是如何工作的？
網站設計的趨勢
你可能永遠不會真正編寫代碼，但是學習開發原則將使你成為更好的網站設計師，因為你將了解工具和工作流的價值。
8、使用“常規”風格指南
網站設計過程也延伸到開發中，網站設計師，你需要認識到，前端工程師對設計過程和你一樣重要。
考慮到這一點，創建一個“常規”風格指南，不僅包括顏色和字體，還包括組件。每個人都應該能夠訪問和更新文檔，因為這個項目已經開始了。
一個好的風格指南將幫助每個在項目中工作的人保持與視覺元素的一致性，為設計選擇提供上下文，為項目提供一個協作點，并幫助標準化代碼。
將以下信息放入風格指南中，充分利用:
標識樣式
調色板
字體面板
圖標面板
導航菜單元素（它們鏈接到）
不同頁面的布局選項。
在整個站點中重用的代碼片段（例如按鈕）
9、使用網格
網格的尊重。在響應式網站設計中，網格不僅僅是放置元素在屏幕上的指導原則，它還可以決定元素在不同屏幕大小下的位置，以及列的堆棧和洗牌。
網格可以幫助你設計和維護流。（挑戰在于你不能隨意打破設計規則。）
你可以這樣想:你的設計有四個內容塊在屏幕上排成一行（在屏幕上有相同的寬度），在全屏幕的桌面顯示器上。然后在一個平板上，這些塊轉換成兩列，有兩行。在移動設備上，它們會轉換成一行四行。
理解網格如何影響對象的大小，以及對象如何在不同的設備上進行轉換，這一點很重要，因為它可以決定如何設計你所擁有的內容。再想想同樣的情景。如果有五個內容塊呢？它需要重新設計，以確保你創建一個一致的視覺輪廓。
10、友好的網站設計師
確保項目順利進行的真正關鍵在于靈活，網頁的設計技術和標準一直在變化，雖然有些項目確實讓你成為一個細節和不動的人，但是響應性設計并不是這樣的。
容易與人合作的網站設計師會贏得更多的尊重，并與前端工程師建立更好的關系。這將會帶來更好更成功的項目。這應該不用說，但太多的時候，會有很多不自覺的行為。不要掉進那個陷阱。多和你的前端工程師討論項目，他們會愛你的。
1096576.jpg)
