如何为您的品牌创建网站样式指南

了解随着网站的发展,样式指南如何使您的品牌在视觉和色调上保持一致.


创建网站样式指南

让我们在这里画一个场景。假设您的网站的内容范围和需要维护的人数都在迅速增长。您已经聘请了设计师,开发人员,文案撰稿人,社交媒体经理,整个工作人员都是如此。每个人都来来去去,为整个宏伟计划做出自己的贡献—但您的品牌的一致性却始终保持稳定。一些按钮链接是蓝色的。其他都是绿色的。一个小标题的大小为26像素;另一个子标题是24px。您的徽标在一页上的填充太多,而在另一页上的填充太少…

作为网站的所有者,您的网站上已有太多东西了,那么您怎么可能期望将数百个品牌设计规则牢牢锁定在脑海中?您还记得如何告诉新聘的设计师您以前的设计师已经建立的每个样式规则?您可能无法.

这就是样式指南的来源.

什么是样式指南,为什么我的业务需要一个?

样式指南是一种统一资源,可通过一致使用设计,语气,声音和标识来定义品牌.

一个好的风格指南将成为您品牌的最终参考。这是一个蓝图。它定义了排版规则,颜色,布局,徽标使用,语气,内容准则,用户体验以及与品牌进行公众互动的几乎所有方面.

样式指南(或品牌圣经)的概念并不是什么新鲜事物,尽管它们在网站上的应用是最近的热门话题。在印刷界很常见,每个主要报纸都会保留样式指南,以保持格式一致性。对于大型公司来说,从电视广告到半卡车的侧面,品牌的独特颜色必须与确切的规格相匹配,全面的样式指南是绝对必要的,并且它可以成为 彻头彻尾的大规模 在尺寸方面!

如果您正在阅读此书,则您的业务可能尚未达到规模,您需要整个营销部门来掌控您的品牌形象。然而, 创建样式指南永远不会太早. 现在,巩固您的品牌原则将使您摆脱业务发展过程中潜在的混乱局面,而不仅仅是您自己可以跟踪.

该何时创建样式指南

我敢打赌,您已经可以想象没有样式指南的后果。如果没有关于如何和不应该表达品牌的预先定义的准则,那么您雇用的任何设计师或开发人员都可以在网站上添加自己的个性化或诠释,最终最终会形成风格上的泥潭,而不是凝聚力十足的整体。.

在以下情况下,您的在线业务将受益于样式指南:

  • 您开始将任务委派给团队成员或第三方。样式指南将使每个人都在同一页面上,并确保文稿标准化.
  • 您的网站已经变得很大(在此过程中杂乱无章),并且您的CSS文件已经失去控制,无法添加新样式来替换您已经忘记的样式.
  • 您需要简化对网站进行更新的过程。建立了可供参考的指南,以确保快速实施新添加并与品牌保持一致.

您的样式指南存在于您的网站中

在开始构建样式指南之前,您需要指定其位置。最佳做法是在您的网站中分配自己的区域,或者作为目录(www.yourdomain.com/styleguide)或作为子域(styleguide.yourdomain.com).

快速提示: 请记住,您的样式指南必须与网站的其余部分共享相同的CSS文件。这样可确保一个设计中的更新将立即反映在另一个设计中,并使所有内容保持一致和一致.

您的风格指南有自己的布局

让我们解决这个问题: 创建您的样式指南需要花费时间. 但是将您投入其中的能量视为一项投资,从长远来看将为您节省更多时间(和金钱).

就像您的网站一样,您的样式指南以易于遵循的布局将用户体验考虑在内。它实际上将作为一个独立的网站运行,通常会有一个 导航菜单 以逻辑上的重要性顺序列出网站的每个元素。这些元素的显示和样式设置与在主网站上一样,当然也包含上下文指导和为什么以这种方式设置样式.

查看实际情况: 最流行,最全面的样式指南之一属于 星巴克. 看一下他们的,如果您需要启发来基本掌握一些知识.

样式指南与模式库

术语“样式指南”和“模式库”通常可以互换使用,为简单起见,我将引用这两种样式并将其示例作为“样式指南”。但是,您应该注意两者之间的重要区别.

模式库 仅会展示设计元素,而无需解释如何在网站或应用中使用它们. 风格指南 会适当地指导您利用所选设计参数的最佳做法,并解释为什么介绍品牌时要遵循某些规则.

本质上,在模式库中,可能会为您提供H2标签的样式选项。但是,缺少的是样式指南所提供的内容:有关在什么情况下应使用每个特定的H2标签的说明.

如何创建样式指南

要制作一个样式表将所有方框打勾,请按照以下步骤操作:

步骤1.定义品牌的本质

花时间研究和思考品牌的定义特征,然后将其分解为一两个段落。提供任务说明,有关您的价值观的信息以及一些 关键词 这将为所有后续设计和内容贡献奠定基础。一个了不起的 图片 还可帮助轻松确定品牌的基调和特征.

步骤2.设置徽标规则

徽标的大小,位置和颜色对于品牌的体现至关重要。这也是您经常会看到的地方 该做什么和不该做什么 这样就很清楚地将您的公司形象地呈现给全世界.

Twitter徽标指南示例推特 有关其徽标正确使用的广泛规则不容出错.

步骤3.建立版式

字体印刷为您的品牌塑造了非常明显的个性感。标题的不同大小,它们之间的间距以及字体的样式都为您的网站带来了特殊的色调质量。您可以详细了解如何建立品牌的版式.

BBC排版指南示例英国广播公司 共享其印刷元素的标记和布局-对于大型新闻机构来说,这是必需的,它使用了许多不同意义的标题.

步骤4.确定您的调色板

颜色不仅是品牌的视觉表现,而且会影响用户的心理。某种红色甚至可以减少颜色,而更多地是与之的潜意识联系 一杯软饮料.

Mozilla颜色指南示例Mozilla 通过定义软件的调色板来使其品牌保持一致。请务必在HEX,Pantone,HSB,CMYK和RGB中包括颜色代码;如果出现您的品牌必须存在于计算机屏幕之外的情况,您将为之做好准备!

步骤5.确定正确的图像

图标将想法简化为可立即访问的图形。隐藏的地方不多;如果图标略微超出范围,将杀死预期的效果。有些图标比其他图标更加设计繁重;这并不能使一种风格比另一种更好,但是它们只需要保持一致即可。避免图标不协调.

IBM图标样式指南示例IBM的 图标库为其图标提供基于上下文的操作。注意它们如何遵循相似的样式,即单色,平面和简单.

步骤6.确定正确的影像

哪种图像最能支持您的品牌,充满活力的风景照或手绘卡通?您将通过股票照片代表您的公司,还是会聘请摄影师提供独特的作品?无论哪种情况最适合您的情况,请考虑 情感 您的品牌希望交流.

步骤7:构建布局和网格系统

这是您的计划肯定会得到回报的地方,因为尝试在没有参考的情况下创建未来的页面布局通常会花费大量的时间。记住要保留布局 体液 适用于多种屏幕尺寸.

MailChimp的网格指南示例MailChimp 列出了其主要内容在网格中的结构。无论用户的屏幕大小如何,装订线和填充物的特定像素量可确保网格保持真实.

步骤8:为元素设定样式

根据网站的范围,从视频到博客评论再到电子商务项目,您可能需要考虑数百个单独的元素。以下是一些最常见的网站,这些网站无疑将包含在任何网站中:

形式

这不仅与您输入字段和标签的颜色和大小有关;您还应包括在成功提交表单,错误或警报消息时要显示的文本.

纽扣

您的调色板和版式将处理这些问题。按钮的颜色和大小可以表示各种内容:按钮链接,提交按钮,CTA按钮,取消按钮,菜单按钮等.

选单

同样,您已经建立的很多东西都会带您进入这里。间距和文本对齐是要指定的主要样式。您的徽标可以用作“主页”按钮吗?您是否放弃了熟悉的“汉堡图标”以获得更多创意?

模态

一个好的样式指南不仅会显示模态(或弹出窗口)的设计,而且还会规定其外观的条件。用户必须执行哪些操作才能看到模式?模式如何说服用户采取行动?

互动和动画效果

信不信由你,您的品牌可以用细节来表达,甚至是悬停效果的毫秒数。值为{动画:500ms缓入; }与{动画:100毫秒线性; }.

网站上不同链接之间的动画时间安排不匹配可能会混淆用户体验,因此请花点时间计划动画和交互传递的消息,并遵守这些规则.

不要忘记内容

我要特别注意这一点,因为在样式指南中包含内容和副本同样重要,但经常被忽略。如您之前所听到的, 内容 是网站成功背后的最大推动力。与漂亮的按钮或精美菜单相比,有用,原始且写得很好的内容将给用户带来更深的满足感。这就是为什么除了设计师之外,还必须向文案撰写人传达品牌准则的原因.

伟大的内容不仅写得好,而且还必须传达 语音 一致的写作风格来塑造您的品牌这两个关键词非常重要,MailChimp甚至将其命名为 内容样式指南 在他们之后.

从此示例中,您可以看到MailChimp如何指导他们的撰稿人制定与他们的品牌特征相符的措辞,同时考虑到 情绪 在任何给定时间的用户.

内容样式指南可能会非常详尽,甚至包括您可能会期望英语教授教给您的语法规则。指南 ts+ 就是那样。 (他们的内容指南甚至告诉我将其写为“ Tuts +”而不是“ Tutsplus”!)

结论

样式指南消除了扩展您的在线业务时的猜测。有了这一至关重要的资源,您将不再需要去赶上新的团队成员,而不必紧跟着您的品牌规则.

那里有数以百万计的企业,但只有一个。通过坚定地表现自己,保护自己独特性的价值。现在为将来仍可识别的品牌采用样式指南.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map