建立視覺庫:設計技巧和挑戰

已發表: 2020-12-17

經驗豐富的設計師與初級設計師之間的最大區別之一是他/她建立的視覺庫。

什麼是視覺庫?

關於UI元素和UX實踐,這就是您的頭腦。 您已經建立了什麼並且對它如何工作有所了解。 您的圖書館越豐富,就地解決方案的速度就越快。

讓我們舉個例子:作為設計師,您的任務是建立一個新網站。

什麼網站? 你可能會問。 好吧,這就是您的所有要求。 來自同事的挑戰。 哦,還有,你有一個小時要做。 這是我們在DevriX所做的挑戰,這是3600秒後的結果之一:

Alex Dimitrov設計

沒有太多時間考慮這個主題,因此它直接出現在標題中。 標頭有哪些組件?

  • 確定標題
  • 導航
  • 搜索欄
  • 一些社交聯繫
  • 一些號召性用語按鈕,主要用於註冊和/或創建帳戶
  • 一些導航使其變得有趣

這些都是從哪裡來的? 以前是空白頁。 首先,甚至沒有一個話題。 這一切都是由於多年來在網站,應用程序及其周圍所有內容的構建過程中設計師一直在腦海中創建的視覺庫而發生的。

您可以用幾種方法設計標題? 數百種方式。 元素,地形,顏色,覆蓋,按鈕,元素等等種類繁多。 這是一個有趣的實驗。

如何建立視覺庫

雖然最簡單的答案是“進行更多的設計”,但這並不是一個非常令人滿意的答案,僅僅是因為它還有更多的餘地。 更重要的是多樣性。 建立不同的設計。 解決此問題的一種直接方法是重新設計大型站點。

這裡有一些例子:

臉書:

圖片來源:Dribbble

Gmail:

圖片來源:Dribbble

推特:

圖片來源:Dribbble

例子太多了。 設計越複雜,進度越快。 但是,它究竟如何工作?

讓我們以清單為例。 列表可以包含一個為其命名的標題,它可以具有彩色,設計相似或設計不同的圖標。 它也可以具有較大的標題和副標題,可能帶有數字的標籤。 然後,您可以添加懸停狀態,可以選擇或禁用的項目,等等。 通過所有這些變體,您可以進行各種各樣的列表設計。

圖片來源:Dribbble

能夠提出這麼多的配置和佈局就是擁有一個良好的視覺庫。 要知道您可以那樣做。 這就像在您旁邊有人說“給我畫個盒子”,然後說“添加標題”,然後您不假思索地做到了。 之所以做出所有這些決定,是因為您之前已經做過。 的確,它也遵循設計基礎,但是您無法一直接觸筆記或書籍。 這就像訓練AI一樣–您需要使用“元素的成功順序”來構建模式。

所有視覺藝術家都需要建立圖書館

一個典型的例子就是金正基(Kim Jung Gi),他是個天才,可以從任何角度製作栩栩如生的藝術品。

金正基的藝術

他在一次採訪中說,他一生都在觀察周圍的所有物體,試圖理解它們的形狀並從不同的角度繪製它們。 有了這項技能,他現在可以簡單地從一張沒有任何參考的白紙上繪製出您在上圖中看到的所有內容。

更好的說法是-他的視覺庫是沒有參考的,因為他的參考在他腦海中。 這是大師作品的一個例子,這是爭取設計師的一個偉大目標。

就像網頁設計師了解按鈕,列表,卡片,輸入字段,彈出窗口等等的方式一樣,數字藝術家也了解材質,燈光,輪廓,肌肉如何工作,重力如何使您下沉以及對您造成壓力身體等等。

Suzanne Helmigh的圖片

這是數字藝術家如何通過嘗試將其應用於球體來學習各種材料的示例。 岩漿,木材,毛皮,酒,雞蛋,奶酪,任何有效的東西。 學習它,用手做它,將它逐漸烙印在您的大腦中。 當需要將這種材料應用於一幅真實的繪畫時,您現在可以更好地了解它的實際工作原理以及最終的效果。

這是一個示例,其中皮膚,皮革,金屬和頭髮都被用來生產外觀非常漂亮的最終產品。 對這些材料缺乏基本的了解可能會使金屬看起來像塑料,像皮革的紙等。

圖片來源:Artstation

網頁設計組件的挑戰

現在,讓我們再次看一下您將在Web設計中經常使用的一些常見組件以及一些實踐:

1 –按鈕

網站上最基本的組件之一。 按鈕有各種形狀和大小。 您可以設置漸變,更改顏色,添加文本陰影,添加邊框(不止一個),添加光澤樣式,勾勒輪廓,更改其形狀(正方形,圓角,圓形),其中一些帶有圖標,另一些帶有圖標分隔可點擊的區域。

圖片來源:Dribbble

任務:設計20種不同樣式的按鈕。 它們之間的差異越大越好。 對於每一個,都要在對比度,平衡性等方面遵循最佳設計實踐。

2 –卡

卡或盒子是另一個超級通用的組件。 它可以容納任何類型的內容,儘管某些常見元素可能是頁眉/頁腳+主要內容。

圖片來源:Dribbble

任務:使用內容,在上面形成卡片,設計10個變體,最好是盡可能不同。 更改樣式,添加新元素,旋轉它們,使用漸變,陰影,圖標和插圖。 嘗試去瘋狂。

3 –評論

幾乎所有博客都有某種形式的評論系統。 但是您是否認為評論組件可能並不真正包含實際評論,而更像是“狀態”更改?

圖片來源:Dribbble

任務:上面的示例僅說明了這一點。 現在,嘗試提出與註釋組件相關的所有內容–用戶的註釋,任務更新狀態(在註釋區域中),類似聊天的註釋等。 7-10個變化之間的任何值都是一個好數字。 再次–嘗試使它們保持不同。 研究更多,找到想法,瀏覽網站。

這些練習的目的是找到以您以前不知道的新方式處理常見元素的方法

4 –滑桿

滑塊是許多前端開發人員討厭的組件之一,因為它們會產生大量問題,並且可能在後台運行大量JavaScript。 但這並不意味著您無需製作一個。

圖片來源:Dribbble

任務:瀏覽網絡和各種設計,以了解有關不同佈局和方法的更多信息。 也許看看JS庫,他們在其中做幻燈片以查看所擁有的內容。 從那裡開始,為滑塊設計10-15種不同的設計。 再一次–嘗試使每個設計與以前的設計盡可能不同,而不僅僅是使用一些小的增強。

5 –輸入表格

輸入表單是幾乎所有網站的另一個核心部分。 他們感興趣的是他們接收信息而不是輸出信息。

圖片來源:Dribbble

任務:您在這裡的工作是想出某人可能在網站上需要的最奇怪的信息類型。 上載PDF或PSD(選擇一個),信用卡信息,添加Cookie配方,計算塗料混合比,創建汽車經銷商配置器。 任何想法,越獨特越好。 再次繼續瀏覽網站以查看實際的解決方案。 用獨特的設計設計至少10種不同的獨特形式。

概要

以設計師的身份建立設計庫是改善工作流程,快速生成設計,為客戶解決問題以及提出獨特而巧妙的方法來改善用戶體驗的主要踏腳石之一。 當您開始瀏覽並仔細查看Web上的每個元素時,您將開始考慮用戶的操作,他們看到的內容以及如何進行改進。

將以上任務用作家庭作業,將有助於您填補您的投資組合。 不要把自己局限於上述5個任務,去那裡,瀏覽網站,進行重新設計,研究它們,然後繼續發展設計感並建立自己的視覺庫!