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