品牌创新驱动商业变革

品牌战略定位 + 品牌形象塑造 + 商业体验空间

6件必须放到网站设计指南中的注意事项

设计指南是一个宝贵的工具,以最大限度地提高设计团队的产出,并确保一致的品牌身份。我们来看看成功设计指南的六个要素。

设计指南不仅仅是一个新网站或品牌标识的文档。好的设计指南本身就是一件艺术品,在日常的设计工作中有实际的应用。它展示了你的项目是什么和渴望成为什么。它应该以一种易于管理、使用和易于理解的方式将设计、语音甚至代码的元素结合在一起。

首先介绍文档中需要包含的六个设计指南元素。(如果不是,马上修改你的指南!)

,

1. 品牌标识的例子

你的设计指南应该以一种视觉形式来展示你的品牌身份,这种视觉形式代表了你想要的设计材料的样子。这是show, don ‘t tell的一个例子。(尽管在指南中有一些关于视觉例子的说明。)

最好的例子是实际案例的使用,它们准确地说明了设计标准所要描述的内容。

当设计处于最佳状态时,使用来自网站主页、移动主页、app或任何其他地方的截图。

《Love to Ride设计指南》的妙处在于,它的每一页都像网站一样,创造了品牌一致性。该指南甚至将设计中的小元素纳入重点,比如正确显示应用程序图标的样式。

在设计指南中使用真实的例子最好的部分是你不需要创建额外的工作来展示视觉元素;你已经有了。另外,团队成员将知道书面的指导方针在实际操作中是有效的,因为有可视化的证明。

ride

,

2. 设计指导方针

从色板到排版调色板,再到形状和设计元素的使用,每件事都应该清晰地勾勒出来。

为什么设计的外观和功能在某种程度上?它背后的哲学是什么?

解释这些内容可以帮助用户更准确、更一致地跨媒体应用设计风格。当涉及到网站设计,这是一个好主意,包括可能不同于印刷品牌对手的元素,以及它们之间的关系。例如,许多设计师选择了一个不同的在线印刷调色板,模仿印刷品牌,以最大限度地使用谷歌字体的Typekit的易用性。

如果这是您的设计策略的一部分,一定要注意哪些字体是可替换的。

当概述设计指导方针时,当它重要的时候要具体——h1标签总是88点或缩略图总是200×200像素——但不要过度传达不必要的细节。您希望团队成员能够一眼看到信息并使用它,而不是试图在规格说明的海洋中寻找某些东西。

netflix

,

3.声音和个性

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

文案的描述性写作风格也会影响视觉效果。它有助于你选择使用的图像类型,甚至元素,如颜色和类型。所有这些项目一起创造了品牌的整体个性。

外部世界如何识别你。

更重要的是,强大的声音和个性也成为视觉识别的一部分。良好的个性体现在设计元素上,因为用户几乎可以识别设计元素,即使是在品牌其余部分的内容之外。(想想可口可乐红(Coca-Cola red)或迪斯尼(Disney)的标志性字体。)

voice

,

4. SEO关键字

搜索引擎优化可能是网站设计中谈论最多、最无趣的部分之一。尽早并经常考虑关键词。

包括你谈论品牌的方式,关于设计的描述性语言,并在设计指南中列出最重要的关键词。

Urban Outfitters在其品牌指南中有一个精心设计的(而且有趣的)关键词列表。虽然服装品牌使用了大量不同的关键字,但最重要的字是通过颜色高亮显示的,这样你马上就能看到它们。

这样的关键字列表会在你每次看到它们的时候把你想说的话放在你的脑海中。大多数抄写的人会告诉你,一旦你在特定的语境中看到或想到一个词,它就会在你的脑海里留下印象。这正是SEO关键字列表应该做的。

设计元素应该始终与这些关键字相关,而内容则贯穿整个网站设计。

urban

,

5. 模式和元素样式

网上有这么多不同的媒介(更不用说还设计印刷元素的公司了),所以有各种可能的使用指南是很重要的。

这适用于标识、调色板、模式甚至表单字段和导航等设计元素的静态和动画版本。

你的设计书应该有一节专门介绍这些元素。如果你想让团队真正喜欢你,在一个在线位置创建一个模式和元素样式指南,这样用户就可以快速复制和粘贴元素。

ollo

,

6. 代码片段

每个网站设计指南都需要包含大量常用的代码片段。从按钮到小动画,再到滑块效果,这些小代码为您的日常工作流程增加了几个小时,从而消除了为每个新元素手动输入规格的需要。

这适用于从博客文章到更复杂的UI效果的所有东西——为图片添加一个代码块,这样博客就可以复制粘贴到合适的大小和尺寸。

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

firefox

,

结论

设计指南最好的地方在于它不必是一个静态文档。它可以随着你的品牌和视觉识别做同样的事情而成长和改变。

大多数设计师——尤其是网站设计师——都选择在线版本的设计指南,这样修改和抓取代码和颜色片段就变得又快又容易。考虑为你的网站添加一个风格指南页面,并记得经常参考它(并更新它)。

Leave a Reply

品牌战略定位 × 品牌形象塑造 × 商业空间设计

中小企业 – 上市公司 – 跨国企业 – 国有企业 – 世界500强