設(shè)計(jì)者的工具集：工作流程， 軟件和網(wǎng)站

就像軟件開(kāi)發(fā)人員一樣， 內(nèi)容作者， 營(yíng)銷(xiāo)人員等等 設(shè)計(jì)師需要有一個(gè)好的工具集，以幫助他們處理日常工作。 我們?cè)谶@里嘗試做的就是概述此類(lèi)工具， 工作流程以及將它們組合在一起的方式可以加快工作速度并減少出現(xiàn)錯(cuò)誤和錯(cuò)誤的機(jī)會(huì)。

當(dāng)一個(gè)新項(xiàng)目來(lái)時(shí)， 最初的幾個(gè)小時(shí)主要是關(guān)于收集有關(guān)此問(wèn)題的信息-客戶(hù)面臨的問(wèn)題是什么， 他們的目標(biāo)是什么 他們喜歡什么， 等等。在這一關(guān)鍵步驟中， 設(shè)計(jì)者應(yīng)嘗試獲取盡可能多的有用數(shù)據(jù)， 稍后將用于做出有根據(jù)的決策。

Evernote是一款了不起的軟件–它不僅是用于做筆記的應(yīng)用程序。 它可以存儲(chǔ)文件， 將它們合并到集合中 標(biāo)簽， 團(tuán)體等 通過(guò)其強(qiáng)大的搜索功能，您可以參考以前的項(xiàng)目，等等。 當(dāng)然， 它最強(qiáng)大的方面是您如何使用它。 對(duì)于某些組織方法，它們有一個(gè)粗略的指導(dǎo)原則。

接下來(lái)是另一個(gè)明顯的例子 但是我們添加它是有原因的-推遲通話， 消息或視頻會(huì)議可能會(huì)嚴(yán)重拖延項(xiàng)目。 經(jīng)常， 共享屏幕和查看模型的能力， 線框， 概念和設(shè)計(jì)可以挽救生命。 永遠(yuǎn)別忘了

一旦有足夠的信息， 下一步是收集靈感–應(yīng)用/網(wǎng)站的外觀如何， 風(fēng)格是什么 目標(biāo)是什么 等等。 對(duì)于要使用的新技術(shù)或不同類(lèi)型的媒體，有什么好主意嗎？ 所有設(shè)計(jì)師都在左右尋找靈感-網(wǎng)站， 圖書(shū)， 雜志， 任何事物。

出于這個(gè)原因（為了讓設(shè)計(jì)師吹牛），存在像Dribbble這樣的網(wǎng)站。 那里， 我們， 設(shè)計(jì)師可以瀏覽以找到解決我們當(dāng)前面臨的問(wèn)題的想法和方法。 有時(shí)， 目標(biāo)是建立“服務(wù)A的通用銷(xiāo)售頁(yè)面”。 該銷(xiāo)售頁(yè)面的字面意思是帶有股票照片的幾個(gè)段落。 完全是一個(gè)令人鼓舞的目標(biāo)， 但這是現(xiàn)實(shí)的。 出色地， 顏色的組合 排版， 間距 等等。 都可以變得更加獨(dú)特。 也許也嘗試不同的布局！ 這個(gè)想法可以來(lái)自3-4年前發(fā)布的隨機(jī)著陸頁(yè)。 99Design的“發(fā)現(xiàn)”頁(yè)面也是一個(gè)不錯(cuò)的地方！

我們將像Awwwards這樣的網(wǎng)站放在一個(gè)單獨(dú)的類(lèi)別中，因?yàn)樗鼈儗?shí)際上展示的是已構(gòu)建并可以正常使用的內(nèi)容。 而且， 它更專(zhuān)注于藝術(shù)方式， 在“任何設(shè)計(jì)工作”上沒(méi)有那么多。 大多數(shù)時(shí)候， 這些站點(diǎn)非常繁瑣，以致只能在高端計(jì)算機(jī)上使用， 但您仍然可以從中獲得啟發(fā)。

對(duì)于全新的產(chǎn)品， 沒(méi)有預(yù)定義的顏色， 開(kāi)始工作的步驟之一是選擇適合新站點(diǎn)的內(nèi)容。 有兩種方法可以解決此問(wèn)題-選擇現(xiàn)有的配色方案或設(shè)置原色/副色，并根據(jù)它們解決整個(gè)方案。

諸如Color Hunt之類(lèi)的網(wǎng)站提供了社區(qū)制作的調(diào)色板集合。 您可以直接選擇和使用它們，也可以選擇主要的顏色作為開(kāi)始。 “顏色愛(ài)好者”看上去不那么漂亮，但也很相似。

BrandColors的目標(biāo)稍有不同-它提供了主要品牌及其配色方案的列表。 您可以在那里找到一些不錯(cuò)的陰影和組合，以啟發(fā)您的構(gòu)建。 顏色沒(méi)有任何版權(quán)， 但是我們的建議是與它們一起玩耍，而不是將所有顏色復(fù)制粘貼到諸如亞馬遜之類(lèi)的地方。

并非總是有足夠的時(shí)間來(lái)處理網(wǎng)站的每個(gè)組件。 有時(shí)， 最好抓住一個(gè)圖標(biāo)包， 由另一位設(shè)計(jì)師/攝影師制作的插圖或庫(kù)存照片，并直接使用。

• 令人敬畏的字體–以字形形式顯示的大量圖標(biāo)
• Envato Elements –以合理的價(jià)格大量選擇優(yōu)質(zhì)資產(chǎn)。
• Unsplash-大量免費(fèi)使用的高質(zhì)量照片集
• SVG發(fā)生器，例如squircley， 掀起波瀾， 斑點(diǎn)制作者
• Adobe字體（付費(fèi)）和Google字體（免費(fèi)）

最好的提示是找到上述類(lèi)似地點(diǎn)并將其靠近， 這樣您就可以盡可能減少搜索和找到適合該工作的最佳圖形所花費(fèi)的時(shí)間和精力。

隨著最初工作的進(jìn)行， 涉及到實(shí)際構(gòu)建設(shè)計(jì)。 由于所有面向設(shè)計(jì)師的漸進(jìn)式軟件都具有構(gòu)建Web /應(yīng)用設(shè)計(jì)的所有必要工具， 我們將跳過(guò)線框圖工具。

DevmaX在設(shè)計(jì)工作中的核心選擇是Figma。 它提供了強(qiáng)大的協(xié)作功能以及基于瀏覽器的應(yīng)用程序，團(tuán)隊(duì)中的任何人都可以訪問(wèn)， 無(wú)論是Linux， Mac或Windows。 以前我們使用Adobe XD， 但基于Linux的成員無(wú)法使用它，因此Sketch僅在Mac上被鎖定。

要進(jìn)行更多定制工作， Illustrator或Affinity Designer絕對(duì)是一些最佳選擇。 在過(guò)去的一兩年中， 自定義插圖是網(wǎng)站上最流行的部分之一。 大， 色彩豐富的圖形占據(jù)了首屏，使用正確的工具獲得更多的經(jīng)驗(yàn)絕對(duì)是一件好事。 在這個(gè)地方， 我們還可以添加3D軟件（例如Blender）來(lái)渲染3D模型， 可以用作網(wǎng)頁(yè)上的資產(chǎn)。

Photoshop是用于網(wǎng)頁(yè)設(shè)計(jì)的領(lǐng)先軟件。 今天，這聽(tīng)起來(lái)可能很奇怪，尤其是因?yàn)槲覀儞碛兴兄饕槍?duì)Web的出色工具。 但是Photoshop仍然是一個(gè)很棒的工具，當(dāng)有需要編輯或裁剪形狀/表格的照片時(shí)，我們經(jīng)常使用它。

但這不僅僅是設(shè)計(jì)工作，而是靜態(tài)PNG。 一些設(shè)計(jì)師將更多的精力放在運(yùn)動(dòng)圖形和交互上。 一個(gè)很好的演示，說(shuō)明元素在懸停時(shí)應(yīng)如何表現(xiàn)， 滑動(dòng)或單擊將大大有助于前端開(kāi)發(fā)人員的工作。 Figma和Adobe XD均可提供幫助， 但兩者也都有限。

After Effects被認(rèn)為是動(dòng)態(tài)圖形的首選之一。 它提供了代表所有動(dòng)作和動(dòng)畫(huà)的所有必要工具。 在此提醒設(shè)計(jì)人員的一件好事是動(dòng)畫(huà)應(yīng)遵循網(wǎng)絡(luò)的限制。 添加運(yùn)動(dòng)模糊不是您能做的。 因此，當(dāng)您進(jìn)入更高級(jí)的動(dòng)畫(huà)時(shí)， 絕對(duì)要與您的前端開(kāi)發(fā)團(tuán)隊(duì)進(jìn)行討論，或閱讀有關(guān)網(wǎng)絡(luò)動(dòng)畫(huà)的更多信息以及可能的方法。 UX和A11y也是如此。

Figma和Adobe XD幾乎都集中在云上， 這樣您就不必?fù)?dān)心失去工作， 但并非所有事物都是這樣– Photoshop， Illustrator文件， 您下載的字體， 相片， 等等。 全部都駐留在您的計(jì)算機(jī)上。

最好備份它們并使它們始終可用， 特別是在多臺(tái)機(jī)器上工作時(shí)。 分享分享時(shí)， 這非常容易。

首選是Dropbox。 憑借其易于使用的桌面應(yīng)用程序， 進(jìn)行任何更改后，它將繼續(xù)監(jiān)視您的文件并將其同步到云中。 從那里， 只需單擊一下，即可與客戶(hù)或您的團(tuán)隊(duì)共享它們。

也許是時(shí)候重新設(shè)計(jì)您的網(wǎng)站了。 DevriX可以幫助您根據(jù)技術(shù)規(guī)范構(gòu)建定制的定制解決方案。 提交您的提案或請(qǐng)求一個(gè)完整的發(fā)現(xiàn)會(huì)話，以確定您的要求并評(píng)估您的業(yè)務(wù)需求。

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