免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

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

2023-05-31    分類: 網(wǎng)站建設(shè)

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

1、讓前端工程師盡早開始項目

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

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

2、文件結(jié)構(gòu)清晰

Web設(shè)計人員可以做的最重要的事情之一就是每次都以相同的方式準(zhǔn)備和打包文件。您有多少次打開包含數(shù)百個未命名圖層的Photoshop文檔?請勿將此類文檔交給前端工程師。無論您使用哪種軟件,都應(yīng)該適當(dāng)?shù)孛總€圖層和樣式。樣式、顏色、樣本和布局在整個設(shè)計過程中應(yīng)保持一致。

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

3、使用瀏覽器字體

印刷管理是設(shè)計項目(包括印刷和數(shù)字作品)面臨的大挑戰(zhàn)之一。不要將桌面字體用于為Web或應(yīng)用程序設(shè)計的打印項目,并假設(shè)它們可以正常工作。 (通常他們沒有。)

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

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

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

當(dāng)我們討論圖像資產(chǎn)時,正確導(dǎo)出和打包文件非常重要。前端工程師可以打開和導(dǎo)出所有圖像文件以滿足他們的需求,您可以詢問他們需要什么并在此過程中執(zhí)行它們。

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

不要試圖自己這樣做。詢問前端工程師如何保存、命名和壓縮文件以獲得好使用效果。

5、考慮環(huán)境

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

在開始繪圖之前,請先咨詢前端工程師,以確保在開始之前了解設(shè)計環(huán)境的外觀。沒有比在Photoshop或Sketch中看起來更好的設(shè)計更糟糕的了。

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

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

列之間的溝寬度(如果不同)

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

6、提出更多問題

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

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

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

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

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

HTML和CSS(您應(yīng)該能夠更改字體大小或顏色,并了解兩者是不同的)常見用戶模式(針對用戶與內(nèi)容的交互方式而設(shè)計)

可訪問性標(biāo)準(zhǔn)(因此您的設(shè)計將適用于更多用戶)

哪些類型的元素需要用作圖像,哪些元素可以使用純CSS創(chuàng)建!

斷點如何在響應(yīng)式布局中工作?

網(wǎng)站設(shè)計趨勢

您可能永遠(yuǎn)不會真正編寫代碼,但學(xué)習(xí)開發(fā)原則會使您成為更好的網(wǎng)站設(shè)計者,因為您將了解工具和工作流程的價值。

8、使用“常規(guī)”樣式指南

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

考慮到這一點,創(chuàng)建一個“常規(guī)”樣式指南,不僅包括顏色和字體,還包括組件。在該項目已經(jīng)開始時,每個人都應(yīng)該能夠訪問和更新文檔。

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

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

標(biāo)志風(fēng)格

調(diào)色板

字體面板

圖標(biāo)面板

導(dǎo)航菜單元素(它們鏈接到)

不同頁面的布局選項。

在整個站點中重復(fù)使用的代碼片段(例如按鈕)

9、使用網(wǎng)格

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

網(wǎng)格可以幫助您設(shè)計和維護流。 (挑戰(zhàn)在于你不能隨意違反設(shè)計規(guī)則。)

可以這樣想一想:您的設(shè)計在全屏桌面顯示屏上有四行內(nèi)容排列在屏幕上(屏幕上的寬度相同)。然后在平板上,將塊轉(zhuǎn)換為兩列,每行兩列。在移動設(shè)備上,它們被轉(zhuǎn)換為一行和四行。

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

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

網(wǎng)頁標(biāo)題:網(wǎng)站制作過程中如何讓設(shè)計師更好地配合前端工作
分享網(wǎng)址:http://m.newbst.com/news32/261682.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計網(wǎng)站策劃網(wǎng)站設(shè)計做網(wǎng)站企業(yè)建站商城網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化