在建立網(wǎng)站的過程中， 有幾個階段。 如果我們要簡化它并查看標(biāo)準(zhǔn)網(wǎng)站， 階段將是：

1. 需要 –有人出于某種原因需要網(wǎng)站。
2. 集思廣益 –確定總體結(jié)構(gòu)， 目標(biāo)等等。
3. 提案 –客戶找到自由職業(yè)者或代理商來建立站點(diǎn)。
4. 內(nèi)容 –文章， 圖片， 等等， 在目標(biāo)網(wǎng)頁上可以找到的所有內(nèi)容， 站點(diǎn)地圖， 等等。
5. 設(shè)計 –一個人/團(tuán)隊(duì)根據(jù)內(nèi)容進(jìn)行設(shè)計和布局。
6. 發(fā)展 –一個人/團(tuán)隊(duì)根據(jù)設(shè)計來開發(fā)站點(diǎn)的功能部分。

大多數(shù)時候， 您可以在這里混合使用。 您可以更改完成的順序， 而且團(tuán)隊(duì)仍然可以取得不錯的成績。 然而， 當(dāng)您有來自不同機(jī)構(gòu)的人員從事同一項(xiàng)目時，這可能會很困難， 這是選擇可以照顧所有事情的全方位代理的主要原因。

對于本文， 我們從第5步開始 設(shè)計到第6步 發(fā)展。 在這里，可能會減慢開發(fā)速度并弄亂計劃過程中先前已確定的內(nèi)容，從而導(dǎo)致問題出在哪里。

“設(shè)計師應(yīng)該知道如何編碼嗎？”是一個常見問題，這是一個非常合理的問題。 如果設(shè)計師了解背后的代碼，并且理想情況下，他們可以（在一定程度上）制作出這樣的代碼， 然后他/她可以幫助整個團(tuán)隊(duì)加快完成項(xiàng)目。

這是這種情況的一些原因：

您在Figma中創(chuàng)建的任何設(shè)計， Adobe， 等將顯示在瀏覽器中。 所有瀏覽器都使用一種稱為HTML / CSS的編程語言來呈現(xiàn)頁面。 如果使用Javascript， 您可以使您的設(shè)計變得互動。

需要注意的重要一點(diǎn)是，任何設(shè)計都應(yīng)在HTML / CSS中可行。 只要技術(shù)允許，許多才華橫溢的前端開發(fā)人員就可以實(shí)施幾乎所有內(nèi)容。 但要記住， –并非總是關(guān)于“你能做到嗎？”， 關(guān)于“您能否做好并使其可維護(hù)”。

可維護(hù)性是成功項(xiàng)目的秘訣。 您不想花幾個小時調(diào)整現(xiàn)有的網(wǎng)站元素并添加新的元素，因?yàn)榇a庫很亂。 有時，極其復(fù)雜的設(shè)計幾乎沒有可重用的組件，結(jié)果一團(tuán)糟。

一些網(wǎng)頁設(shè)計師的技巧：

• 設(shè)計時要考慮組件。 現(xiàn)在，大多數(shù)工具都提供了此功能（Figma， Adobe XD， 草圖）。 強(qiáng)迫自己更多地使用它們，直到不再煩人為止。
• 很好地對齊元素。 相似的部分之間應(yīng)具有相同的距離。 80px是一個很好的分隔， 例如。 請勿在此處使用80隨機(jī)分配部分， 那里86 第三名92名，另一名78名。 保持整潔。
• 使用網(wǎng)格！ 所有工具都提供網(wǎng)格系統(tǒng)。 理想情況下，選擇a12列網(wǎng)格。
• 在寬屏（1920像素或更高）上展示您的設(shè)計。 這有助于開發(fā)人員弄清楚每個部分及其背景的工作方式。

我們都想要一個快速的網(wǎng)站， 正確的？ 出色地， 設(shè)計師也是其中的一部分。 考慮一下：一個擁有8張高分辨率圖片的網(wǎng)站， 四個視頻和動畫元素。 。 祝您按時優(yōu)化，祝您好運(yùn)。 雖然可行， 延遲加載圖像和視頻需要花費(fèi)更多的開發(fā)時間和技術(shù)， 優(yōu)化上傳媒體 支持更好的圖像文件格式， 并添加智能動畫方法以實(shí)現(xiàn)高性能。

如果開發(fā)人員經(jīng)驗(yàn)不足或不擔(dān)心速度， 您的網(wǎng)站最終可能會在中低端的智能手機(jī)和筆記本電腦上表現(xiàn)極為落后。

作為設(shè)計師， 您要牢記的目標(biāo)之一是在保持網(wǎng)站外觀的同時使開發(fā)更加輕松快捷。

您應(yīng)該考慮在網(wǎng)絡(luò)上容易實(shí)現(xiàn)的功能。

• 盒子–全部都是盒子。 你可以拐彎一些是的， 您可以制作橢圓形（在方框中定義）或更多。 但是，當(dāng)您選擇與布局互動的更復(fù)雜的形狀時， 事情就變得困難了。
• 動畫化準(zhǔn)確的位置非常困難–想象一下您想單擊圖像， 然后將其移動到文本的另一邊？ 聽起來“輕松”，但事實(shí)并非如此。 圖像將移動到的位置必須相對于站點(diǎn)容器保持不變， 會根據(jù)視口等進(jìn)行更改。 然后，如果圖像較大，會發(fā)生什么？
• 動畫框尺寸會影響布局。 這指的是對動畫過程中元素排序方式的任何更改。 這在瀏覽器上可能會非常繁重，并且通常會導(dǎo)致巨大的滯后。

2倍于文本的外觀設(shè)計如何？ 還是作為肖像圖像而不是風(fēng)景圖像？ 您永遠(yuǎn)不知道編輯團(tuán)隊(duì)將上傳什么。 是否應(yīng)該有諸如寬高比甚至圖像邊緣之類的約束？ 如果可以的話， 在設(shè)計中展示這一點(diǎn)。

大多數(shù)設(shè)計工具（例如Figma或Adobe XD）都可以與開發(fā)人員“共享”設(shè)計。 從那里， 前端團(tuán)隊(duì)可以檢查顏色， 字體設(shè)置， 層的間距和其他視覺特性， 這將使他們能夠非常緊密地堅持設(shè)計。

如果您在網(wǎng)站上使用了特定字體， 提供給開發(fā)人員。 如果它已獲得許可并可以通過特定的URL訪問， 確保也分享。 從第一天開始，開發(fā)人員就必須使用正確的字體，這一點(diǎn)很重要。 如果有視頻，請確保也分享！ 視頻可以在YouTube上播放嗎？ Vimeo還是自托管的？

保持網(wǎng)站最終外觀與設(shè)計完全相同的想法是使開發(fā)人員團(tuán)隊(duì)討厭您并且可以消除按時上線的任何機(jī)會的簡便方法。 在幾乎每種情況下，設(shè)計都不是完美的。 不可能百分百確定在每個按鈕之前您都擁有18px的間距嗎？ 而不是19px？ 還是每個標(biāo)題都是38px而不是37px？ 或者，也許每個邊界都是#ddd，而沒有一個黑色但不透明度為15％的邊界？

開發(fā)人員會四處散布諸如此類的小錯誤，以保持整個站點(diǎn)的一致性。 它們內(nèi)置遵循相同規(guī)則的組件。 只要在特定情況下沒有明顯的故意改變， 應(yīng)該沒有理由說一個要素在整體上不能相同。

到底， 編碼的網(wǎng)站應(yīng)遵循設(shè)計的一般外觀。

如果您希望某個元素像標(biāo)簽一樣具有交互性， 手風(fēng)琴 滑塊之類的東西， 花幾秒鐘寫下它在臺式機(jī)上的工作方式， 移動和可點(diǎn)擊的內(nèi)容 應(yīng)該交換一次。

完成后， 停下來一秒鐘，然后想象您正在使用該網(wǎng)站。 從上往下讀 向下滾動 單擊某處以查看更多。 工作流程中可能缺少什么嗎？ 是否存在某個特定元素的視圖，該元素在用戶交互時會發(fā)生變化？ 如果這是真的，沒有設(shè)計， 那么您要讓開發(fā)人員來解決這個問題， 這增加了工作壓力。 如果截止日期很緊， 您可以與您的團(tuán)隊(duì)共享常規(guī)文件，并讓他們知道即將出現(xiàn)一些“狀態(tài)”視圖（請務(wù)必提及它們）。

在桌面上設(shè)計15個頁面，然后進(jìn)行移動版設(shè)計是一項(xiàng)艱巨的任務(wù)。 在此之上做一個稍微不同的平板電腦版本更令人討厭。 這就是為什么有些設(shè)計師會忽略添加它的原因。 然而， 這意味著開發(fā)人員將不得不用代碼來完成它。 并據(jù)此做出決策。 如果您看到復(fù)雜的元素， 理想情況下，即使您不瀏覽整個網(wǎng)站，也可以展示他們的平板電腦視圖。

設(shè)計師可以使開發(fā)人員的生活成為一場噩夢或非常好的體驗(yàn)。 實(shí)現(xiàn)后者的關(guān)鍵是更好地了解所使用的技術(shù)， HTMl / CSS， 哪些互動元素可行， 等等。

如果您有幸在開發(fā)人員身邊，并且擔(dān)心某些因素， 打電話給他們看一切。 他們一定會為您提供關(guān)于什么是棘手的東西和什么是簡單的東西的指導(dǎo)。

我們確實(shí)提供網(wǎng)絡(luò)開發(fā)服務(wù)，包括定制設(shè)計工作， 建立WordPress主題， 為成功的組織編寫WordPress插件編碼并實(shí)施完整的解決方案。

DevriX的創(chuàng)意主管和前端開發(fā)人員
亞歷克斯（Alex）的熱情在于學(xué)習(xí)新的網(wǎng)絡(luò)技術(shù)， 探索創(chuàng)新的方法來優(yōu)化網(wǎng)站性能并改善用戶體驗(yàn)。 亞歷克斯（Alex）喜歡騎自行車和數(shù)字藝術(shù)，最近開始在ELSYS技術(shù)學(xué)校教授設(shè)計。