你一直在做你最新的設計項目，客戶已經批準了你精心創造的數字概念。現在是時候把這些設計變成現實了，你有一個開發人員排隊去做那件事。
你的任務完成了，對吧?不完全是。你要確保你的開發人員有最好的開端，以便創建你想象的網站。
安排一次與開發人員面對面的會議，討論項目的細節和目標，這將有助于調整您的期望，并使概念背后的意圖更加清晰。很有可能他們會問你一些問題，要求你提供一些你還沒有想到的東西!
這也不是一件一勞永逸的事情，隨著項目的進展，開發人員會遇到一些問題或需求。選擇一個可以輕松討論的溝通渠道將極大地幫助你們。
注釋你的概念
開發人員可能看起來像魔術師，他們給你的網站帶來生活，但他們不是千里眼!在需要高級功能的地方注釋你的概念，可以減少歧義，更有可能使你的酷，古怪的想法成為現實。如果這是一個特別不尋常的特性，您可能想要找到一個做類似事情的網站或代碼沙箱的例子。
這是一個Figma的注釋工具的例子，用來為開發者做注釋。
Figma和Sketch都有注釋功能，使注釋更加簡單，也允許多方注釋。如果要處理pdf文件，還可以通過adobeacrobat使用注釋工具。
指定基本知識
現代前端開發的基礎是干巴巴的。有些人可能會爭辯說，關于代碼的思考是非常枯燥的，但是我們并不是在討論這個問題——在這里，dry代表不要重復自己。大多數開發人員會從定義變量開始處理項目:什么顏色，字體大小，網格列…任何可以重用的東西!好的、一致的設計遵循同樣的原則——盡管這是一個很難開始的習慣。
提示:如果在項目開始時就采用這種心態，那么定義變量總是會更容易!
顏色
制作一個樣式指南，指定你在設計中使用的顏色。想想它們的邏輯應用，以幫助路標顯示它們作為變量是如何工作的——例如，你在段落文本、超鏈接和背景中使用了什么顏色?您是否考慮過用顏色來傳達狀態信息，比如成功、警告和錯誤?
字體
你在你的項目中使用過哪些字體?你使用的字體大小是否一致?如果您還沒有，可以考慮一個基于比例的類型規模—我喜歡使用ModularScale來幫助您。
基本的HTML元素
想想這些基本的html標簽的通用樣式:
按鈕和鏈接呢?當鼠標懸停、聚焦(使用鍵盤上的tab鍵)或禁用時，它們應該做什么?
表單、字段和輸入
表單字段應該是什么樣子的?提交表單時是否需要進行驗證檢查?復選框和單選按鈕怎么樣?
你不可能完全覆蓋所有的可能性——讓你的開發人員使用一些常識來填補空白，并在他們有任何問題時向他們提供幫助。用John Maxwell和你阿姨家辦公室墻上的貼紙的話來說，團隊合作讓夢想成真。
Favicons通常被認為是瀏覽器標簽欄中出現在網站標題左側的小圖標。如今，你網站上的favicon的應用已經非常廣泛了，出現在谷歌搜索結果和應用瓷磚中。還有額外的主題選項，比如可以定制谷歌Chrome Android瀏覽器欄的顏色。
使用像realfavicongenerator這樣的生成器站點，可以讓你在做決定時不那么痛苦，允許你上傳所需的特定圖形，為Windows Metro tiles和macOS Safari pins創建圖標的輪廓，并將所有內容打包到易用的文件和代碼中。
壓縮你的照片
沒有人希望在慢速連接或使用數據計劃時加載20MB的圖像——提前計劃并縮小圖像尺寸，使它們可以用于web的生產，這是有好處的。如果你擔心圖像壓縮會損害你的圖像質量，不用擔心——在質量嚴重受損之前，你可以使用圖像壓縮。
首先降低圖像分辨率——對于批處理作業，我使用Adobe Photoshop的圖像處理器腳本將圖像縮小到適合1920 x 1200像素。
另外,如果你在一個靜態的項目中工作,將使用特定的圖像只在特定的地方——你可以使用你的設計軟件(幾乎所有主流UI軟件允許你做這個現在)出口你的圖片在2 x支持設備與高像素密度大小。
我還將我的圖像顏色配置文件轉換為SRGB，以確保大多數現代顯示類型的一致性(這是可選的)
然后，我將新縮小的圖片以80%的質量在imageOptim上運行。一般情況下，我的目標是將我的圖片壓縮到300kb以下——如果有任何圖片壓縮后仍然明顯超過這個目標，我將再次以70%的質量運行這些圖片(盡管我不推薦低于這個水平)。
別忘了你也可以為png做這個!在imageOptim中啟用PNGCrush可以讓你顯著減少png的大小…不過要準備好，這需要一段時間。
使您的向量svg易于使用
如果您的設計包含使用vector軟件創建的圖形或插圖，則可以在web上作為SVG文件使用。通常，這些文件會比jpg或png小得多。您可以導出圖形在大多數(如果不是所有)矢量軟件在這種格式。
您還可以選擇使用imageOptim或SVGOMG壓縮SVG代碼而不犧牲質量。您的開發人員可能已經使用了一個腳本，該腳本在處理用于生產的站點時自動執行此操作，因此有必要提前詢問一下。
檢查你的執照
如果你使用的是高級字體，確保你已經購買了webfont許可證，這樣你就可以把正確的文件交給開發者。我建議早做而不是晚做——盡管不經常，偶爾web版本的字體會有與桌面版本略有不同的邊框，這讓開發人員在以后的工作中非常痛苦。
如果你一直在使用庫存照片的樣本(或者如果你一直在瘋狂地從谷歌圖片中找到任何你能找到的)，確保在你上線之前一切都是干凈的。確保你購買了授權的照片，如果你想使用某些照片需要署名，讓開發者知道這一點。
