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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Photoshop是用于網(wǎng)頁設(shè)計的領(lǐng)先軟件。 今天，這聽起來可能很奇怪，尤其是因為我們擁有所有主要針對Web的出色工具。 但是Photoshop仍然是一個很棒的工具，當有需要編輯或裁剪形狀/表格的照片時，我們經(jīng)常使用它。

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

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

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

最好備份它們并使它們始終可用， 特別是在多臺機器上工作時。 分享分享時， 這非常容易。

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

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

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