建立视觉语言的10个提示

Carrie Cousins. 经过 Carrie Cousins.  |  2018年11月07日

视觉语言就像任何其他形式的沟通一样。

其中“语言”是指口头或书面通信,视觉语言进一步与某个社区连接。从颜色到样式的元素到照片类型或插图的类型建立了品牌或公司是什么。这些可视元素以人们理解的结构化和传统方式绑在一起。

视觉语言包括网站或品牌的书面和口头元素,以及每个设计技术,照片,图标,徽标和项目,用户都可以在屏幕上看到。用户通常不会知道存在视觉语言;他们只是知道他们看到他们的网站或他们认识到它的品牌。

以下是您创建用户可以理解的视觉语言的方式。

 

1.构建调色板

强大的调色板是用户的识别工具。当使用符合品牌或网站的符合颜色时,使用;用户知道它们在哪里。他们在网上的大规模宇宙中没有丢失,因为你已经在视觉上告诉他们他们正在互动的网站或品牌。

此调色板不应该是您的网站唯一的。它需要普遍应用并与品牌在线,社交媒体,赃物或包装,名片的所有内容连接。

此外,调色板应该加强品牌价值。

想想快餐餐厅麦当劳的颜色:黄色和红色。颜色代表幸福(黄色)和饥饿(红色)。您多久经常在没有“金色拱门”或包装上有红色的东西?

MCD.

 

2.创建印刷层次结构

与选择您的品牌的字体一样重要是确定它们将如何使用。

排版层次结构设置您是否与用户交谈,耳语(小光线排版)或对它们大喊大叫(大型所有帽刻字)的基调。沟通没有权利或错误的方法;它知道与你的部落有关。

构建印刷刻度的诀窍是,每个级别都应该与前面的一个级别不同,因此很容易看到文本的更改。

Airbnb具有明显的印刷量表,具有标准化的排版的尺寸和重量。这种标准化也延伸到颜色调色板和间距,以有助于潜觉的视觉语言。

airbnb.

 

3.建立一个网格

元素的间隔和放置可以与元素本身一样重要。您的视觉身份是否清洁和组织或更加混乱?

你的网格回答了这个问题。

FreeCodecamp. 解释这个结构良好:

模块化结构提供了与整个工程团队合作的可能性。因此,它可以快速生产适合所有平台的产品。如果您从消息感知创建概念设计,则集成方法将更有用。

简而言之,网格的复杂性或简单性对您进行了通信是什么?

 

4.创建组件库

从按钮到卡片或弹出窗口的图标,创建一个组件库,因此设计中的所有元素的使用都是一致的。

一个按钮不应该是一个页面上的蓝色圆圈,另一个按钮。一个图标不应该在一个页面上是线条样式,另一个图标在另一页中。如果他们错误地离开了您的网站,这种不一致可以使用户质疑。

一个很好的组件库包括为每个设备大小和IOS与Android设备的调整构建设计和规则内的设计和规则中的所有元件所需的所有元素。

在建立普通组件的同时,似乎在前端的一个大厨房,它可以让新页面稍后在线。

 

5.强调图像风格

无论您是使用照片,视频或图示,创建和维护图像风格很重要。这是用户将记住和与您的网站或品牌关联的最强大的视觉资产之一。

这种风格涉及来自照片庄稼紧密的任何东西,宽,使用过滤器,视频速度和构图风格。

看看来自的多个元素 粉碎 以下。即使它们没有分组,它们也包含将图像连接到品牌的常见元素。 (不是每张图片的热空气气球。)此图像样式设置了该公司是谁以及它们如何与用户联系的语气。

粉碎

 

6.构建动画规则

动画元素还应遵循基本规则集。他们快速或慢吗?他们是否自己移动或仅作为悬停状态?

这些交互也有助于建立视觉标识。动画可以为项目设置一个音调。使用,或不使用,他们可以对你是谁以及你想要的东西说很多。

莫吉托从Dribbble拍摄如下,具有圆周运动。想想与同一视觉语言中的其他动画如何看。它们也可能以相同的循环方式和类似的速度移动。

Mohito.

 

7.匹配单词和视觉效果

对于视觉语言要有效,它必须匹配设计中使用的实际语言。如果单词和视觉元素是不匹配的,用户可能会被体验混淆。

元素应该共同努力,创建一整体沟通,全部强调同样的事情。

下面的Steffany使用颜色,女性徽标和单词来展示她的网站是什么。这些碎片一起工作以创建整体图像,不要与不同的文本和可视消息进行竞争。

st

 

8.对自己真实

如果可观,视觉语言只会工作。它必须代表你是谁和你的。

你能想象没有人物的芝麻街吗?这是非常困难的。

品牌的整个视觉身份建在大鸟和elmo等。这些设计的每一点都反映了这一点。为了进一步连接电视节目和卡通人物的视觉标识,请注意网站设计中的两种方式。这有助于在视觉上拉动幻想和现实,以帮助维护品牌的身份。

芝麻

 

9.保持一致

一旦您开发了一组视觉语言的指导方针,请坚持他们。努力建立视觉语言时最大的错误是不一致的。

FreeCodecamp. 注意,设计语言应回答以下问题。它们也是您是否尊重视觉效果的基准。

  • 我们使用的颜色是什么?
  • 徽标在哪里放置?
  • 这种模式是否在其他地方使用?
  • 最新的文件是什么?
  • 我们如何构建此动画?
  • 这是来自组件库吗?

注意 cor 可以肯定这些问题的答案。徽标处于常见的位置,整个使用一致的颜色,并以相同的方式使用模式/动画。

cor

 

10.制定风格指南......并执行它

建立视觉语言并编纂它。

然后让某人负责执行它。你的身份太重要了,不能离开机会。人类是天生的视觉;视觉语言可以是将用户连接到您的网站或品牌的最强元素之一。

标语表