欧美激情一区二区三区国产-免费无毒A网站在线观看-久久久久久久国产视频-丰满人妻中文字幕乱码网站

網(wǎng)站制作過(guò)程中如何讓設計師更好地配合前端工作

網(wǎng)站設計師，您喜歡您設計工作的前端工程師嗎？您的一些習慣很可能無(wú)法很好地轉換為代碼，這使得前端工程師更難以與您合作完成項目。想成為更好的同事嗎？然后我們將學(xué)習如何更好地進(jìn)行溝通和設計，讓前端工程師通過(guò)對工作方式進(jìn)行微妙的改變來(lái)愛(ài)上你的工作。這將加快項目進(jìn)度，使工作更輕松。

1、讓前端工程師盡早開(kāi)始項目

網(wǎng)站設計師和前端工程師之間最大的問(wèn)題是，他們經(jīng)常在設計的第一稿完成之前默默地開(kāi)展工作，個(gè)人或團隊開(kāi)始談?wù)擁椖?。這不是正確的工作方式，網(wǎng)站設計師和前端工程師應該討論如何從一開(kāi)始就組裝項目。雖然網(wǎng)站設計人員可能會(huì )關(guān)注顏色、字體和圖像，但前端工程師可以深入了解可用性、的功能和性能。

網(wǎng)站設計師和前端工程師應該很好地了解彼此的外觀(guān)。網(wǎng)站設計人員應該了解足夠的代碼和可用性，以便與前端工程師溝通并了解挑戰：前端工程師應該對設計理論有一點(diǎn)了解，以便在設計概念不適合網(wǎng)絡(luò )時(shí)提出建議。

2、文件結構清晰

Web設計人員可以做的最重要的事情之一就是每次都以相同的方式準備和打包文件。您有多少次打開(kāi)包含數百個(gè)未命名圖層的Photoshop文檔？請勿將此類(lèi)文檔交給前端工程師。無(wú)論您使用哪種軟件，都應該適當地命名每個(gè)圖層和樣式。樣式、顏色、樣本和布局在整個(gè)設計過(guò)程中應保持一致。

對于每個(gè)項目，以相同的方式命名文件和樣式。以類(lèi)似的方式分組并使用一致的文件夾系統。這樣，前端工程師就不必重新學(xué)習如何找到每個(gè)新項目的部件和元素。

3、使用瀏覽器字體

印刷管理是設計項目（包括印刷和數字作品）面臨的最大挑戰之一。不要將桌面字體用于為Web或應用程序設計的打印項目，并假設它們可以正常工作。 （通常他們沒(méi)有。）

對于數字項目，請選擇“瀏覽器字體排版”。這意味著(zhù)您可能需要為Web找到與打印內容相匹配的類(lèi)似字體。不要讓前端工程師為您做這件事。選擇可比的瀏覽器字體并從一開(kāi)始就使用它們。您甚至可以在風(fēng)格指南中注意到打印和數字字體。

這背后的原因很簡(jiǎn)單：嵌入字體可能很棘手。此外，瀏覽器字體是免費的，可確保您不會(huì )產(chǎn)生額外的項目成本。 （當你這樣做時(shí)，考慮用圖標做同樣的事情，使用像字體這樣的好包裝，所以前端工程師可以使用CSS風(fēng)格的圖標而不是導入一堆圖像文件?。?/span>

4、打包圖像資產(chǎn)

當我們討論圖像資產(chǎn)時(shí)，正確導出和打包文件非常重要。前端工程師可以打開(kāi)和導出所有圖像文件以滿(mǎn)足他們的需求，您可以詢(xún)問(wèn)他們需要什么并在此過(guò)程中執行它們。

這可確保您獲得所需的圖像并壓縮文件以幫助您快速加載網(wǎng)站。

不要試圖自己這樣做。詢(xún)問(wèn)前端工程師如何保存、命名和壓縮文件以獲得最佳使用效果。

5、考慮環(huán)境

在設計網(wǎng)站和移動(dòng)應用程序時(shí)，需要考慮很多設備大小和寬高比。作為Web設計人員，您需要知道畫(huà)布大小、邊距、填充等，以創(chuàng )建實(shí)際可用的模型。

在開(kāi)始繪圖之前，請先咨詢(xún)前端工程師，以確保在開(kāi)始之前了解設計環(huán)境的外觀(guān)。沒(méi)有比在Photoshop或Sketch中看起來(lái)更好的設計更糟糕的了。

你需要提前知道這些事情：

如果框架具有不同尺寸的特定填充規格。

列之間的溝寬度（如果不同）

屏幕尺寸最窄的前端工程師將編寫(xiě)代碼。

6、提出更多問(wèn)題

它已被多次提及，但設計師和前端工程師之間的溝通是所有這些工作的關(guān)鍵。溝通可以創(chuàng )建或破壞項目，影響截止日期，并影響最終項目的設計和功能。

與前端工程師共進(jìn)午餐，了解他們。在此過(guò)程中有許多問(wèn)題要問(wèn)。如果您不確定某些內容是否有用，請詢(xún)問(wèn)。前端工程師并不是一個(gè)糟糕的人，在過(guò)程早期回答問(wèn)題要比重新思考和整個(gè)概念容易得多。

7、了解一些開(kāi)發(fā)基礎知識

當您與前端工程師交談并提出問(wèn)題時(shí)，您需要深入挖掘。如果您的設計庫中還沒(méi)有這些技能，請學(xué)習一些開(kāi)發(fā)基礎知識。

從事數字項目的網(wǎng)站設計師應該在以下方面進(jìn)行自我介紹：

HTML和CSS（您應該能夠更改字體大小或顏色，并了解兩者是不同的）常見(jiàn)用戶(hù)模式（針對用戶(hù)與內容的交互方式而設計）

可訪(fǎng)問(wèn)性標準（因此您的設計將適用于更多用戶(hù)）

哪些類(lèi)型的元素需要用作圖像，哪些元素可以使用純CSS創(chuàng )建！

斷點(diǎn)如何在響應式布局中工作？

網(wǎng)站設計趨勢

您可能永遠不會(huì )真正編寫(xiě)代碼，但學(xué)習開(kāi)發(fā)原則會(huì )使您成為更好的網(wǎng)站設計者，因為您將了解工具和工作流程的價(jià)值。

8、使用“常規”樣式指南

設計過(guò)程也延伸到開(kāi)發(fā)，網(wǎng)站網(wǎng)站設計師，你需要意識到前端工程師對你的設計過(guò)程同樣重要。

考慮到這一點(diǎn)，創(chuàng )建一個(gè)“常規”樣式指南，不僅包括顏色和字體，還包括組件。在該項目已經(jīng)開(kāi)始時(shí)，每個(gè)人都應該能夠訪(fǎng)問(wèn)和更新文檔。

一個(gè)好的樣式指南將幫助項目的每個(gè)人保持與可視元素的一致性，為設計選擇提供上下文，為項目提供協(xié)作點(diǎn)，并幫助標準化代碼。

將以下信息放入樣式指南中以充分利用：

標志風(fēng)格

調色板

字體面板

圖標面板

導航菜單元素（它們鏈接到）

不同頁(yè)面的布局選項。

在整個(gè)站點(diǎn)中重復使用的代碼片段（例如按鈕）

9、使用網(wǎng)格

網(wǎng)格尊重。在響應式網(wǎng)站設計中，網(wǎng)格不僅僅是將元素放置在屏幕上的指南，它還確定了元素在不同屏幕尺寸下的位置，以及列的堆疊和改組。

網(wǎng)格可以幫助您設計和維護流。 （挑戰在于你不能隨意違反設計規則。）

可以這樣想一想：您的設計在全屏桌面顯示屏上有四行內容排列在屏幕上（屏幕上的寬度相同）。然后在平板上，將塊轉換為兩列，每行兩列。在移動(dòng)設備上，它們被轉換為一行和四行。

了解網(wǎng)格如何影響對象的大小以及對象如何在不同設備上進(jìn)行轉換非常重要，因為它決定了如何設計您擁有的內容。再想一想同樣的情況。如果有五個(gè)內容塊怎么辦？它需要重新設計，以確保您創(chuàng )建一致的視覺(jué)輪廓。

10、友好的網(wǎng)站設計師

確保項目順利進(jìn)行的真正關(guān)鍵是靈活性。網(wǎng)頁(yè)設計技術(shù)和標準不斷變化。雖然有些項目確實(shí)讓你成為一個(gè)細節而且是一個(gè)不動(dòng)的人，但響應式設計卻不是這樣的。易于使用的網(wǎng)站設計師將贏(yíng)得更多尊重并與前端工程師建立更好的關(guān)系。這將帶來(lái)更好，更成功的項目。應該說(shuō)，但是太多次，會(huì )有很多無(wú)意識的行為。不要陷入那個(gè)陷阱。與您的前端工程師討論您的項目，他們會(huì )愛(ài)你。