现在要放入您的设计指南的6件事

Carrie Cousins. 经过 Carrie Cousins.  |  2018年1月02日

设计指南是最大化设计团队输出的宝贵工具,并确保始终如一的品牌标识。我们看一下成功设计指南的六个基本组成部分。

设计指南不仅仅是一个新的网站或品牌标识的文件。一个好的设计指导本身就是艺术品,在日常设计工作中具有实际应用。它展示了你的项目是什么和渴望成为的东西。它应该以可管理的,可用且易于理解的方式带来设计,声音甚至代码的元素。

它从这六种设计指南元素开始,需要在您的文档中。 (如果他们不是,请立即修改您的指南!)

 

1.品牌标识示例

您的设计指南应以可视格式展示您的品牌标识,这些格式表示您希望设计材料的样子。这是一个课堂展示的例子,不要告诉。 (虽然在指南中有一些讲述的视觉示例。)

最好的例子是实际用途,其用来确保设计标准旨在描绘的内容。

当设计最佳时,使用您的网站,移动主页,应用程序或任何其他地方的屏幕截图。

什么是很好的 喜欢骑车 设计指南是,小册子中的每个页面都看起来像网站,创造品牌一致性。该指南甚至将设计的小元素带入焦点,例如在准确显示中的应用程序图标的正确样式。

关于在设计指南中使用真实示例的最佳部分是您不必创建额外的工作来展示视觉元素;你已经掌握了它们。此外,团队成员将知道书面指南在实际实践中工作,因为存在视觉证明。

 骑

 

2.设计指南

应该清楚地概述从色彩样片到排版调色板的一切,以如何清楚地概述设计元素。

为什么设计在某种程度上看起来和起作用?它背后的哲学是什么?

解释这些事情可以帮助用户更准确,跨越媒体的设计风格。涉及网站设计时,它是一个很好的想法,包括可能与印刷品牌对应物不同的元素以及它们的相关元素。例如,许多设计人员在线选择不同的排版调色板,以便模仿印刷品牌以最大限度地使用Google字体以易于使用。

如果这是设计策略的一部分,请务必注意哪些字体是替代的。

当概述设计指南特定时,当它很重要 - H1标签始终为88点或缩略图图像始终是200像素 - 但不会过度传达不必要的细节。您希望团队成员一目了然地查看信息并使用它,而不是重视尝试在规格的海洋中找到一些东西。

 netflix.

 

3.语音和人格

写作风格指南并不像设计指南的其他视觉元素一样有趣,但它们同样重要。

用于副本的描述性写作风格也可以影响视觉效果。它有助于您选择使用的图像类型甚至颜色和类型等元素。所有这些物品都携手共同为品牌创造一个整体个性。

外界世界将如何识别您。

更重要的是,强大的声音和个性也成为视觉身份的一部分。一个良好的个性在设计元素中显示,因为用户甚至可以在品牌其他地区的内容之外识别设计元素。 (认为​​可口可乐红色或迪士尼的签名字体。)

 嗓音

 

4. SEO关键词

搜索引擎优化可能是网站设计的最符合最多的乐趣部分之一。早期和经常思考关键字。

在您对品牌谈论的方式中包含它们的描述性语言,并在设计指南本身中列出顶部关键字的列表。

城市出口者 在其品牌指南中拥有精心设计的(和有趣的)关键字列表。虽然服装品牌使用大量不同的关键字,但最重要的单词是亮起的颜色,以便您立即看到它们。

一个关键字列表,例如这将带来你想说的话,每次你看到它们都会对待着头脑。大多数写副本的人会告诉你,一旦你看到或考虑某个上下文中的一个词,它就会被困在你的脑海里。这正是SEO关键字列表应该做的。

设计元素应在整个网站设计中始终与这些关键字相关联。

 城市的

 

5.模式和元素样式

使用这么多不同的媒体(更不用说也是设计印刷元素的公司),重要的是要有各种可能的用途。

这适用于仍然和动画版本的徽标,彩色调色板,模式甚至是表单字段和导航等设计元素。

您的设计本书应致力于这些元素的部分。如果您希望团队真正爱您,请在在线位置创建一个模式和元素样式指南,以便用户只能复制和粘贴元素以便快速使用。

 ollo.

 

6.代码片段

每个网站设计指南都需要包含大量常用的代码片段。从按钮到小动画到滑块效果,通过消除每个新元素手动输入规格的需要,将数小时添加到日常工作流程。

这适用于从博客帖子 - 添加代码块的代码块,即博主可以只能复制和粘贴正确的大小和裁剪 - 更详细的UI效果。

Firefox包括最近修订的品牌和徽标使用的设计指南中的设计组件信息。即使您没有提供完整的代码段库,请记住包括某些基本信息,例如网站设计中的页面上的页面中使用H1到H4的位置以及如何样式按钮和图像。

 Firefox.

 

结论

关于设计指南的最佳部分是它不一定是静态文档。随着你的品牌和视觉身份做同样的事情,它可以成长和变化。

大多数设计师 - 网站设计师,特别是为设计指南的在线版本选择,以便更改和抓取代码和颜色片段快速且简单。考虑将样式指南页面添加到您的网站,并记住频繁地引用它(并更新它)。