設計者的工具集:工作流程,軟件和網站

已發表: 2020-12-17

就像軟件開發人員,內容編寫者,市場營銷人員等一樣,設計師也需要擁有一個好的工具集來幫助他們處理日常工作。 我們在這裡試圖做的是概述這些工具,工作流程以及將它們組合在一起以加快工作速度並減少出現錯誤和錯誤的機會的方式。

收集信息

當一個新項目到來時,最初的幾個小時主要是收集有關該項目的信息,即客戶面臨的問題,他們的目標是什麼,他們喜歡什麼等等。在這一關鍵步驟中,設計師應嘗試獲得盡可能多的有用數據,以後將用於做出有根據的決策。

印象筆記

Evernote是一款了不起的軟件–它不僅是用於記筆記的應用程序。 它可以存儲文件,將它們組合到集合,標籤,組等中。通過其強大的搜索功能,您可以引用以前的項目,等等。 當然,它最強大的方面是如何使用它。 他們為某些組織方法提供了粗略的指導。

Evernote主頁截圖

電子郵件,鬆弛,縮放...

接下來是另一個明顯的例子,但是我們添加它是有原因的-推遲電話,消息或視頻會議可能會嚴重延遲項目。 通常,共享屏幕並遍歷模型,線框,概念和設計的能力可以挽救生命。 永遠別忘了

尋找靈感

一旦有了足夠的信息,下一步就是收集靈感–應用程序/網站的外觀,樣式,目標是什麼等。對於使用新技術或使用不同類型的媒體,有沒有很酷的想法? ? 所有設計師都在左右尋找靈感–網站,書籍,雜誌等等。

Dribbble,Behance和類似網站

由於這個原因(為了讓設計師吹牛),存在像Dribbble這樣的網站。 在這裡,設計師可以瀏覽解決當前問題的想法和方法。 有時,目標是建立“服務A的通用銷售頁面”。 該銷售頁面的字面意思是帶有股票照片的幾個段落。 完全沒有目標,但這是現實的。 好吧,顏色,版式,間距等的組合都可能更加獨特。 也許也嘗試不同的佈局! 這個想法可以來自3-4年前發布的隨機目標網頁。 99Design的發現頁面也是一個不錯的地方!

Dribbble示例截圖

阿瓦德

我們將像Awwwards這樣的網站放在一個單獨的類別中,因為它們實際上展示的是已構建且可以看到的內容。 而且,它更側重於藝術性,而不是“任何設計作品”。 在大多數情況下,這些站點非常繁瑣,以致只能在高端計算機上使用,但是您仍然可以從中獲得啟發。

調色板/品牌

對於沒有預定義顏色的全新版本,開始工作的步驟之一就是選擇適合新站點的內容。 有兩種方法可以解決該問題–選擇現有的配色方案或設置原色/副色,並根據它們解決整個方案。

色彩獵人

諸如Color Hunt之類的網站提供了社區製作的調色板集合。 您可以直接選擇和使用它們,也可以選擇主要的顏色作為開始。 “顏色愛好者”看上去不那麼漂亮,但也很相似。

色彩狩獵示例屏幕截圖

品牌色彩

BrandColors的目標稍有不同-它提供了主要品牌及其配色方案的列表。 您可以在那裡找到一些不錯的陰影和組合,以啟發您的構建。 顏色不受任何版權保護,但是我們的建議是稍微玩些顏色,而不要復制粘貼所有顏色(例如來自Amazon之類的顏色)。

溢價和自由資產

沒有總是足夠的時間來處理網站的每個組件。 有時,最好拿起另一個設計師/攝影師製作的圖標包,插圖或股票照片,然後直接使用。

  • 令人敬畏的字體–以字形形式顯示的大量圖標
  • Envato Elements –以合理的價格選擇大量優質資產。
  • Unsplash-大量免費使用的高質量照片集
  • SVG發生器,例如squircley,getwaves,blobmaker
  • Adobe字體(付費)和Google字體(免費)

最好的秘訣是找到上麵類似的幾個站點並將其靠近,以便您盡可能減少搜索和找到最佳工作圖形所需的時間和精力。

主要設計工具

隨著最初工作的進行,涉及到實際構建設計。 由於所有面向設計人員的漸進軟件都具有構建Web /應用程序設計所需的所有必要工具,因此我們將跳過線框圖工具。

菲格瑪

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

Figma主頁截圖

插圖畫家/親和力設計師

對於更多定制工作,Illustrator或Affinity Designer絕對是一些首選。 在過去的一兩年中,自定義插圖是網站上最流行的部分之一。 大型彩色圖形佔據了上風,並且使用正確的工具獲得更多的經驗絕對是一件好事。 在這裡,我們還可以添加3D軟件(例如Blender)來渲染3d模型,該軟件可以用作網頁上的資產。

Photoshop /相似照片

Photoshop是用於網頁設計的領先軟件。 今天,這聽起來可能很奇怪,尤其是因為我們擁有所有主要針對Web的出色工具。 但是Photoshop仍然是一個很好的工具,當有需要編輯或裁剪形狀/表格的照片時,我們經常使用它。

介紹

但這不僅僅是設計工作,而是靜態PNG。 一些設計師將更多的精力放在運動圖形和交互上。 一個很好的演示如何在懸停,滑動或單擊時元素表現如何,將大大有助於前端開發人員的工作。 Figma和Adobe XD都可以提供幫助,但是兩者也都受到限制。

Adobe After Effects

After Effects被認為是動態圖形的首選之一。 它提供了代表所有動作和動畫的所有必要工具。 在此提醒設計人員的一件好事是動畫應遵循網絡的限制。 您無法執行添加運動模糊的操作。 因此,當您使用更高級的動畫時,一定要與您的前端開發團隊進行討論,或者在網絡上閱讀有關動畫的更多信息以及可行的方法。 UX和A11y也是如此。

存儲

Figma和Adobe XD幾乎都集中在雲上,因此您不必擔心丟失工作,但是並非所有事情都如此-Photoshop,Illustrator文件,下載的字體,照片等都駐留在您的計算機上。

最好備份它們並使它們始終可用,特別是如果您在多台計算機上工作時。 共享它們時,這非常容易。

投寄箱

首選是Dropbox。 憑藉其易於使用的桌面應用程序,它將在您進行任何更改後立即監視您的文件並將其同步到雲中。 只需單擊一下,即可與客戶或您的團隊共享它們。