海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts

您不需要图形设计学位即可创建令人惊叹的图形。 您只需要了解一些基本的图形设计基础知识。 这就是我们将在本文中回顾的内容。

设计有四个基本原则:

  • 色彩理论
  • 意象
  • 排版
  • 作品

想要超越设计基础的平面设计速成课程吗? 在 HubSpot 学院学习数字营销学院的完整平面设计课程。

您需要了解的 4 个平面设计基础知识

1.色彩理论

颜色是使您的设计正确的关键元素。 它被用来吸引注意力,传达意义,当然还有美学。 我们通常甚至不会考虑我们看到的颜色; 我们快速判断事物,并且经常根据事物的颜色立即衡量事物是否可取、专业、漂亮、丑陋甚至怪异。

考虑使用颜色最重要的是它们之间的对比度。 对比度是指一种颜色从另一种颜色中脱颖而出的程度。 例如,您可以在图像中使用对比色来使文本从其背景中脱颖而出。 例如,互补色,如黄色和紫色,或蓝色和橙色,可提供最大的对比。

资料来源:99 设计
资料来源:99 设计

对比也可以用来指导人们的行动; 让人们知道你想让他们做什么。 如果您想增加“点击率”,请确保号召性用语按钮与设计的其余部分之间存在强烈对比。

资料来源:Luke Wroblewski (@lukew)
资料来源:Luke Wroblewski (@lukew)

您可以使用色轮检查颜色的对比情况。 色轮显示颜色在视觉上是如何相关的。 例如,互补色是色轮上彼此相对的颜色。

资料来源:艺术的维度
资料来源:艺术的维度

颜色也赋予视觉线索意义。 例如,绿色按钮通常表示肯定操作,如“确定”或“接受”。 但是,如果您要设计一个大的“接受”按钮并将其设置为红色,则它确实会使用户感到困惑,并且在某些情况下,结果可能是灾难性的。

海外社媒SNS代运营Tiktok代运营公司

让我们来谈谈品牌最常用的颜色,以及他们可以从观众那里唤起什么意义或感觉。

  • 红色的 可以引发强烈的情绪——积极的和消极的,以营造紧迫感——这就是它对销售有效的原因。 它还鼓励食欲,因此它经常用于快餐业。
  • 橘子,另一种暖色,被认为是轻松有趣的,所以它适合不太“企业”感的品牌。 较深的橙色与秋天有关,这适合于更“朴实”的品牌。
  • 绿 美观大方,是健康的代名词。 因此,您会经常看到它被用于宣传健康产品的品牌所使用,例如药品或食品品牌。 它还可以与增长或权力相关,例如金融或军事组织。
  • 蓝色另一方面,它对心灵有镇静作用,是理性的颜色,也是力量、智慧和信任的颜色,这就是它被如此广泛使用的原因。 对于品牌来说,这是一个安全的选择,但品牌需要考虑它是否能帮助他们在自己的空间中脱颖而出。
  • 粉色的 历史上一直被用来描绘女性气质,就像芭比娃娃和国际大都会杂志一样。 但如今,许多主流品牌都在使用它,而不管其受众如何,例如 Lyft。 它描绘了青春,但也激发了舒适,代表了希望。 粉红色已成功用于许多行业以“打破常规”。
  • 黑色的 是奢华和力量的代名词。 在与少量亮色相结合的同时,可以为精致增添活力。 黑色非常适合某些行业,例如时尚,但可能不适用于其他行业,例如健康。
  • 白色的 代表清洁,经常被用于现代的外观和感觉。 但是需要谨慎使用,因为它可能缺乏个性。 许多品牌使用白色来补充另一种更具主导性的颜色。 如果执行得当,在您的设计中添加白色可提供现代、简单和干净的外观。

2. 图像

我们已经看到图像非常适合数字媒体,但有一些一般性的要点需要考虑。 首先,观众对有人物的图像反应良好。 它有助于建立情感联系,因为活动针对的是真实的人,而您的图像需要反映这一点。

平面设计介绍 1:设计基础

图像质量也非常重要。 当客户考虑在线购买时,他们希望能够仔细检查能够提供产品高度细节的图像。 人们经常放弃电子商务网站,因为产品图片的质量不够高,无法帮助他们做出决定。 它会对他们对产品的印象产生负面影响,您可能会失去销售机会。

因此,当您选择图像作为设计的一部分时,请确保您的图像是高清或高清的,并且适合您的观众将使用的设备。 它们不应被拉伸或像素化。

其次,请记住,大多数网络流量来自移动设备——因此在移动设备上测试您的图形以确保它们在较小的尺寸上看起来仍然正常非常重要。 如果没有,请考虑创建一个单独的图形版本,专门向使用移动设备的人展示。

以下是针对不同屏幕尺寸的最佳图像尺寸指南:

  • 横幅图片:宽 2000 像素,长 800 像素
  • 滑块:宽 1920 像素,长 890 像素
  • 图标:宽 300 像素,长 300 像素
  • 帖子/事件:425 px 宽和 220 px 长
  • 作品集:宽 1920 像素,长 768 像素

3. 排版

你使用的排版或字体怎么样? 为您的视觉选择字体时很重要,不要尝试做一些完全不同的事情。 读者希望看到熟悉的字体,例如系统字体——例如 Arial、Helvetica、Roboto。 在一个网页上最多使用两到三个字体系列,对于您的广告和图片则更少。 注意下图。 你能数出多少种字体?

资料来源:加州农场
资料来源:加州农场

什么是字体家族? 字体系列仅表示由共同共享的设计样式定义的一组字体。 例如,roboto 是一个具有粗体、斜体或细体样式的系列。

您还会遇到“Serif”和“Sans-serif”字体。 “衬线”是添加到字符上的一条小装饰线。 最常见的衬线字体是 Times Roman。 一种没有衬线或“无衬线”的常见字体是 Helvetica。 衬线字体用于提高博客、文章或报纸等文本的可读性。 尽量不要每行使用超过 10 个单词。 对于标题,请考虑使用大号的重磅无衬线字体。 确保根据文本的优先级对文本进行正确的强调——或大小和“重量”。

平面设计介绍 1:设计基础

最好不要将文本直接添加到图像中,尤其是在网页设计中,而是与您的网络团队合作在图像上叠加响应文本。 为什么? 图片上文字的问题在于,如果图片在手机上,有时文字太小而无法阅读。

另一个考虑因素是本地化。 因为文字是固定的,所以不能自动翻译. 下图显示了一个通过谷歌翻译翻译成匈牙利语的网站。 您会看到号召性用语不是 HTML – 相反,它们是包含文本的图像,这意味着文本无法翻译。

平面设计介绍 1:设计基础

如果您需要添加文本,例如社交媒体图片或博客图片,请确保有足够的颜色对比度。 例如,这里的这个网站已经用背景颜色的两种变体进行了分析。 第二个具有更好的对比度,使文本更清晰。 添加更好的背景颜色对比度的快速“技巧”是使边框变暗,就像这个例子一样。

平面设计介绍 1:设计基础

请记住:这是图像加上您的信息及其措辞方式,甚至您使用的字体的组合,这可能意味着影响您的受众的成功与失败之间的差异。

4. 组成

一旦您知道图像的颜色、图像和字体,您就需要以最佳方式将它们组合在一起——这就是构图的用武之地。您的目标应该是使设计尽可能简单和优雅。 消除杂乱和视觉噪音有助于用户一次专注于一项任务。

当你删除了所有不必要的信息后,你应该确保你的内容——意味着你所有的图像、按钮、颜色、形状和文本——以清晰和合乎逻辑的方式排序。

平面设计介绍 1:设计基础

每一条平面设计内容都应该服务于一个目的。 在创建设计时,问问自己:“它的目的是什么?” 它应该引导用户做某事吗? 通知他们?

推动他们继续阅读? 填一张表格? 还是只是为了给他们提供信息? 即使您对内容有多个目标,请选择一个并确保您的设计让最终用户非常清楚目标是什么。

现在让我们谈谈设计中简单的力量。 正如 UX 专家 Nick Babich 所说,

“极简主义不是剥离元素,而是添加足够多的元素,让它们讲述你的故事。”

有两种关键方法可以让您的设计保持简单。 首先,确保使用空格; 其次,删除任何不是绝对必要的东西。 空白有助于将注意力集中在您希望用户看到的任何内容上。 它帮助用户不会被他或她正在看的东西所淹没。 设计中的每个项目都应该有一个目的。 不必要的信息会使您的设计变得复杂和分散注意力。

“空白”的一个很好的例子是博客平台,Medium。 Medium 的网站不会通过广告横幅或令人沮丧的弹出窗口来分散用户的注意力。 相反,它优先考虑正确的内容,并显示读者真正想要看到的信息。 它没有显示发布日期,而是显示了阅读所需的时间长度——这非常聪明!

平面设计介绍 1:设计基础

现在,每个人在看到一个“难看”的网站时都知道它。 举个例子,看看2000年的CNN。我们认为它不好的原因并不一定是因为它很旧,而是因为构图很乱,内容很难不分心地阅读。

简单的设计不一定是沉闷的,但它应该优先考虑一件事作为页面的焦点。 Instagram 是另一个很好的例子。 主要目的是查看图像,其他一切都被剥离了。 需要一些灵感吗? HubSpot 列出了 32 个鼓舞人心的网站设计。

所以请记住:专注于把关键的事情做好——颜色、图像、排版和构图——你的设计将在你的观众中打响。

想学习如何创建品牌风格指南? 查看该系列的下一篇文章。

海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts