设计指南是最大化网页设计团队输出效率,保证品牌一致性的核心工具。成功的设计规范不是一蹴而就的,需要注意的问题很多。
对于一个网站甚至一个品牌来说,设计指南不仅仅是一个标准文档。优秀的设计指南本身就像艺术品一样赏心悦目,在实际设计工作中具有不可替代的重要作用。它展示了你的产品的风格和形式,并以一种易于管理、易于使用和易于理解的方式集成了整个设计系统。
在制定设计指南时,以下六个要点不容忽视。
1.品牌识别示例
首先,你的设计指南应该包括视觉品牌标识展示案例,这样才能把品牌标识呈现出来。
最好的案例,其实是符合实际应用场景的案例,这样的实际案例也符合设计指南的真实意图。
这些设计案例通常是品牌网站的首页、手机页面、APP的截图。这些案例展示了品牌标志的正确使用和其他元素的相应显示样式。
下图是《爱骑行》的品牌设计指南。他们设计指南的每一页都设计得像一个网页,这本身就显示出足够的一致性。设计指南中把一些常见的小元素放在一起解释,比如不同地方的APP图标应该呈现什么风格。
在设计指南中使用真实案例最大的好处是不需要创建额外的应用场景和模拟指令,而是用最真实的案例直接讲解,这也是对其他团队成员最有效的展示。
2.完整的设计描述
从配色到布局,从图形的应用到具体控件的位置,都要有详细的说明。
在整个设计中,风格和功能上应该遵循什么规律,背后的设计理念是什么,都要说明。
这些完整的解释可以帮助整个设计开发团队在不同的媒体中尽可能准确一致地采用统一的设计风格。在内核上有相同的元素和高度一致的设计,用户在查看网页和平面广告时可以感知到品牌的独特性和统一性,使不同位置的内容呈现出明显的相关性。例如,由于用户使用的设备,在线网页经常呈现不同的字体。设计师会使用Google Fonts和Typekit调用第三方字体,尽可能接近品牌默认字体,以达到尽可能一致的体验。
因此,如果字体是你品牌战略中不可替代的一部分,你应该在整体设计规范中考虑到这一点。需要注意的地方一定要解释清楚。例如,H1标签下的字体大小必须是88点,而缩略图大小总是200200像素,但不需要限制所有非关键点。只有将设计精神和风格与这些要点结合起来,你的团队才能在规定的范围内进行有效的设计。如果所有细节都被限制死,那么整个规范就变成了字典,每个人只有不断的查阅规范才能完成设计。
3.风格和调性
在设计指南中描述和标准化每个设计元素的风格可能并不那么有趣,但它足够重要。
风格的描述性复制也会影响视觉设计。这些描述性文字会影响设计师对风格体验的掌控,对图片类型的选择,甚至会影响对颜色和字体的控制。所有这些共同构成了品牌的整体个性。
更重要的是,它们决定了外界如何识别你的产品和品牌。
强烈的风格和调性是视觉识别的核心之一。设计元素要有属于品牌的独特个性,保证用户即使看不到LOGO,看不到文字,也能清晰判断自己属于谁。看看可口可乐的红色和迪士尼的字体。他们是典型的。
4.SEO关键词
搜索引擎优化的重要性日益突出。在网页设计中,关键词优化可能是讨论最多但最无聊的部分。但是,你需要尽快考虑关键词优化。
你应该用设计语言表达与你的品牌相关的关键词,并在设计指南中明确指出。
城市舾装商在其品牌设计指南中仔细列出了他们的相关关键词。作为一个服装品牌,列出的关键词很多,但是核心关键词都是用不同的颜色突出显示的,让你瞬间知道哪些应该突出显示。
这样的关键词列表,对于负责网站文案的营销策划和设计师来说,无疑是非常有用的。对于文案来说,很容易陷入无中生有的思考和回忆,但这样一个列表的存在并不会让这种情况发生。
通过统一内容创建和关键词系统,网站在排名上的优势会更加明显,离目标用户更近一步。
5.元素样式的控制
如今,各种各样的图案和设计材料正在互联网上涌现,材料的滥用已经成为一个非常普遍的设计问题。所以在规范设计的时候,要控制模式和相关元素的使用范围。
这包括LOGO和图标的使用,配色的限制,表单和导航的控制,静态和动态元素的控制。您可以在设计指南之外创建一个在线样式指南,以便设计人员可以快速复制和粘贴这些元素。6.代码片段
现在很多网站的设计指南已经包含了很多常用的代码片段。从小动作效果到按钮的滑动效果,这些代码片段都和很多细节体验有关。最重要的是他们降低了手工输入代码的成本,保证了代码重用率。
对于网站的文本和媒体内容,相关的常用代码片段是提高效率的关键之一。
Firefox在其最新的设计指南中包含了与元素使用相关的常见代码。即使你从来没有提供完整的代码片段库,也尽量包含一些基础的、常用的代码,让设计人员和相关开发人员能够更加统一高效地完成日常的编辑工作。