纸笔素描的力量

已发表: 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
  • “在素描中释放符号的全部潜力,”哈维尔·库洛