紙筆素描的力量

已發表: 2022-03-10
快速總結 ↬在設計數字空間時,默認使用數字模型工具是很自然的,但這樣做會減少世界的可能性。 模擬繪圖可以釋放您的想像力,讓您一開始就專注於最重要的事情:想法。

需要設計一些東西嗎? 從基於計算機的工具開始可能很誘人,例如 Balsamiq 等線框圖軟件,或 Photoshop 或 Figma 等設計工具。 這些都有它們的位置,但我建議退後一步,從不起眼的筆和紙開始。

對於那些沒有藝術傾向的人來說,手繪草圖可能會感到陌生和不舒服,但是手繪草圖的靈活性與我們的想像力相結合,意味著我們可以比開始時更快地完成更多想法並形成更好的設計方向使用更具體的、基於計算機的解決方案。

誠然,我自己有時也會為此苦苦掙扎。 當我的童年永遠在我的手中度過,大學畢業並獲得藝術學位時,當我開始我的網頁設計生涯時,紙質速寫本被短暫地遺忘了。 在我意識到通過快速的物理草圖產生的想法是多麼強大之前,我花了很多年的時間來處理那些沒有啟發性的概念,並且感覺自己並沒有突破自己的極限。

即使我們沒有設計大型或設計師的能力,也建議使用此過程。 每個人都需要時不時地成為“設計師”; 從創建一個快速的個人主頁、一個新的開源項目的登錄頁面,或者為他們的下一個演示文稿創建漂亮的幻燈片。

拿起一張紙和一支筆,讓我們開始吧!

為什麼要從紙開始

由於我們總是在電腦上(我想現在我們大多數人都在),有時我們甚至沒有想過要離開並嘗試在屏幕外設計一些東西。

紙上素描給人的感覺就像是與視覺藝術或平面設計完全相關的東西(例如,傳奇的標誌設計師 Saul Bass 以提倡繪畫而聞名),但即使是最早的計算機界面創意也是從紙開始的。 Susan Kare 是 Macintosh 圖形用戶界面圖標的設計師,她使用方格紙為標誌性的早期像素藝術設計了她的初步想法。

紙上素描的力量在於素描的短暫性,以及它們如何感覺不如我們在計算機上快速創建的任何東西“真實”。 開始在計算機屏幕上移動單詞和按鈕,很容易陷入某個方向,從不探索替代路徑。 紙質草圖迫使我們的想像力填補空白——比我們將這些細節添加到計算機模型中要快得多。

紙素描
(大預覽)
小樣
紙質草圖與快速模型。 請注意,模型自然感覺更像是一個完成的解決方案,並且很容易使所有邊距、填充和邊框都準確——這是我們以後才應該擔心的。 Paper允許我們忽略這些細節。 (見PDF)

在進行新設計時,我們想嘗試很多不同的想法。 雖然最初的幾個想法可能感覺很好,但我們的第五、第七或第十個想法可能會更好。 快速而輕鬆地工作有助於我們快速完成許多想法。 想法流動得更快,當我們不受限制地工作時,我們可能會對頁面上出現的內容感到驚訝。

如果您還不熟悉 Photoshop、Sketch 或 Figma 等設計工具,那麼剛開始並學習如何使用工具可能會讓人不知所措。 我們最終花時間弄清楚哪個按鈕可以做什麼,而不是通過許多想法。

還有像 Balsamiq 這樣的線框圖工具? 他們產生的想法看起來像草圖——彎曲的線條、不完美的盒子——但他們仍然為我們指明了一個方向,即研究一個想法並把它弄亂直到它完美,而不是先嘗試許多不同的想法。 用筆和紙開始會更快。 線框圖工具可以是該過程的下一步(而不是第一步。)

“粗略”模型在向審閱者展示我們正在尋找的反饋方面也做得更好。 像素太完美的模型通常會提示對不相關的細節進行挑剔,但粗略的草圖會導致關於佈局的更高級別的對話。

跳躍後更多! 繼續往下看↓

對自己重複一遍:寬鬆、快速、不必完美

我們都見過那些看起來華麗而細緻的“設計”草圖。 這些不是衡量自己的標準。 別理他們。 我們的草圖應該很快,沒有太多細節。

草圖
這張草圖添加了很多更精細的細節,但沒有必要在早期添加這麼多。 (大預覽)

相反,我們將使用非常快速的線條和框,保持我們的草圖小而快。

快速簡單草圖的基本元素。 我喜歡用波浪線作為標題,直接使用內容,帶有“x”的框用於圖像,陰影用於按鈕。 隨意複製我的風格,或組成自己的白話!

我們可以使用這些小草圖來嘗試多個版本的主頁佈局:

主頁佈局的多個版本。
主頁佈局的多個版本。 (大預覽)

草圖對於幾乎任何類型的設計任務都很有用:時事通訊、徽標、演示文稿、小部件——您需要快速想到許多視覺創意的任何工作。 例如,我們如何探索一些電子書封面的想法?

書籍封面佈局的想法
在這裡,我們需要使用陰影區域來幫助我們設計書籍封面佈局的想法,但草圖仍然是快速而鬆散的。 (大預覽)

開始練習這種素描技術的一個好方法是使用現有的網站並對素描進行逆向工程。 這不僅有助於讓您對繪畫行為感到舒適,而且您還可以開始對不同的設計模式有所了解。

素描技法。
圖書主頁
與我的書主頁相比的草圖版本。 練習素描技巧和訓練大腦將素描元素識別為網站對象的好方法。 (大預覽)

無論您採用哪種方法,都要在您的頁面中填滿想法! 即使你遇到了一個真正讓你興奮並且想要繼續前進的想法,也不要停下來。 填滿一頁後,轉到下一頁。 探索替代想法,以防萬一您發現自己更喜歡的東西。

一旦你有很多選擇,休息一下,讓你的大腦休息一下,然後回來圈出你最喜歡的,改進,然後可能會繼續製作模型。 你會對你選擇的方向更有信心,因為你知道你已經嘗試過並放棄了許多其他的想法。

使用靈感來幫助您的素描和創意產生

草圖應該與靈感齊頭並進,所以把那台電腦拿出來吧! 通過研究其他設計來推動您自己的設計過程,並尋找您認為可以自己解決的細節。

如果您不確定從哪裡開始,請在與您正在從事的工作相關的領域尋找靈感。 對於個人主頁,最好開始查看您所在行業同行的主頁。 如果您遇到困難或想要更一般的靈感,請查看以下資源:

  • Dribbble,特別適合研究元素的設計理念,比如登錄表單。
  • SiteInspire,了解現代設計的當前趨勢。
  • Land-book,為登陸頁面設計靈感。
  • Commerce Cream,為電子商務網站設計靈感。
  • Pttrns,用於移動應用程序設計靈感。
作者的草圖和模型
靈感(來自 Dribbble)。 我的草圖,然後是我的模型。 你可以看到我是如何受到佈局和排版的啟發的,但每個細節都是不同的。 從草圖靈感創建模型也將幫助您避免逐字複製其他設計。 (大預覽)(見 PDF)

在研究時,請注意您希望將哪些元素融入自己的設計中(記住不要完全複製!)。 例如,一個漂亮的佈局,一種靈感將內容與圖像配對的特殊方式,一種看起來特別容易使用的聯繫表格。 在紙質草圖上嘗試多種不同的導航想法比創建完整的模型或全部編碼要快得多。

當你找到你想記住的元素和想法時,把它們畫出來! 繼續在你的草圖中添加想法,並用你所有的潛在想法填滿你的頁面。 請記住,從許多不同的選項和想法開始著手,然後縮小您最喜歡的想法。

記得練習!

任何新技能在最初的幾次都會感到尷尬。 這是正常的。 不要讓它氣餒。 您在設計時練習素描並利用此技能越多,感覺就越自然。

對於您的下一個設計項目,請放下那個鍵盤,從筆和紙草圖開始,讓您的想像力和創造力流動起來。

讓我們回顧一下我們所涵蓋的內容:

  • 紙質草圖是探索設計選項的最快方式。
    通過遠離鼠標,我們可以在更短的時間內完成更多工作。
  • 在素描時利用靈感來促進創意的產生。
    不要從空白頁開始; 通過查看您想要效仿的設計作品,讓您的想法得以流動。
  • 比你認為應該做的更多的草圖和嘗試更多的想法。
    有時第五個想法可能感覺是一個不錯的方向,但你會發現後面的想法會更好。
  • 熟能生巧。
    你畫的越多,畫得越快,感覺就越容易,你會做得越好。

還有其他靈感資源嗎? 你的草圖是什麼樣的? 很想在評論中聽到你的消息!

Smashing 雜誌的進一步閱讀

  • “整天畫畫,”阿爾瑪霍夫曼
  • “手繪草圖:你不知道你的塗鴉可以完成的事情,”勞拉·布舍
  • “如何使用 Sketch 製作保時捷 911,”Nikola Lazarevic
  • “從 Photoshop 和 Illustrator 轉向 Sketch:UI 設計師的一些技巧,”Lachezar Petkov
  • “刷字:只有在練習後才會變得更好,”阿爾瑪霍夫曼
  • “世紀中葉現代插畫:用插畫家和 InDesign 製作封面書,”Manuela Langella
  • “實時繪製站點訪問者之旅,與您的客戶一起創建站點地圖,”Matt Orley
  • “從 Sketch 遷移到 Figma:遷移設計系統的案例研究”,Buzz Usborne
  • “在素描中釋放符號的全部潛力,”哈維爾·庫洛