如何创建Web设计风格指南_深圳爱企网科技有限公司（爱企云）

如何创建Web设计风格指南

点击()网络发布时间：2018-05-02关键词：网页设计网站建设网页设计趋势

创建网站变得越来越复杂，通常不是一个人的工作。确保设计的一致性和优化以满足业务目标并为用户创造愉快的体验非常重要。

在设计网站的不同部分或从开发人员保存设计时，确保团队处于同一页面的一种方法是创建设计文档或网页设计样式指南。

有一个风格指南，以便在不同的页面之间创建一个有凝聚力的体验是有益的。此外，它有助于确保未来的发展或第三方生产将遵循品牌指南，并将被视为整体品牌的一部分。

Luke Clum 在去年使用风格指南作为您网页设计的第一步时已经触及了表面，我想深入了解如何为您的项目创建可用的网页设计风格指南。

什么是风格指南？

风格指南是一组预先设计的元素，图形和规则设计师或开发人员应遵循的内容，以确保单独的网站片断将保持一致并最终形成一致的体验。

它为什么如此重要？

当多个设计人员在大型网站或网络应用程序上工作时，确保他们不会解释太多，并且不会根据个人偏好更改或调整样式，这一点非常重要。在开发中，通过定义网站的元素，开发人员可以轻松地重用这些元素。此外，它可以使它更容易，因为它们将得到他们必须编码的元素，并从一开始就看到他们需要从什么方面看待。

为了让开发人员生活更轻松，设计师有责任包括所有可能的交互，例如按钮，标题，链接等的悬停，点击，访问和其他状态。

创建Web设计风格指南

1.研究品牌

首先，您需要研究品牌，以便了解它的含义。了解品牌背后的故事，观察团队并找出公司的愿景，使命和价值观。深入挖掘品牌非常重要，因此您制作的风格指南将在视觉和情感上代表组织。

如果您是一位无法编码的设计师，只需打开Photoshop，并为您的文档提供标题以及文档内容及其用途的简短说明。

如果您可以编码，最好使用预先编码的资产创建一个html文档，以便轻松重复使用它们。

2.定义印刷术

据Oliver Reichenstein介绍，排版是网页设计的95％。

你必须得到排版权，因为它是访问者和你网站之间最重要的沟通工具之一。

设置层次结构并识别它。有标题类型：h1，h2，h3，h4，h5和h6。然后是正文，粗体和斜体变体。考虑将用于较小链接，介绍文本等的自定义副本。提供字体系列，重量和颜色。

3.调色板

令人难以置信的是人类如何感知颜色并将其与知名品牌联系在一起。想想可口可乐，我敢打赌，你现在看到了这个红色。

首先为您的风格指南设置主色，以支配您的网站，主色应不超过三色。然而，在某些情况下，您将需要二级甚至三级颜色来说明您的用户界面，请确保您也定义了它们。还包括中性颜色，如白色，灰色和黑色，以突出主要品牌颜色。

4.声音

我所说的声音是实际的复制品。在开始制作风格指南之前，你已经研究过这个品牌，并发现这个品牌是年轻时尚的。如果复制的语音没有方向，则必须定义它。它可以是一个简单的例子，表明声音必须专业而又有趣而且很受欢迎。不要陈述“你有404错误”，你可以说“哦，男孩，你打破了互联网。404错误。“如果声音更公司化，你不会那样做。华晨藏在小东西里。

5.图像

图标已经存在了几千年，比文字和文字还要古老。利用在您的项目中使用图标的优势，因为它们会立即向访问者提供关于正在发生的事情和接下来会发生的事情的想法。选择正确的图标将比调色板，复制或图形提供更多的内容上下文。使用图标时，一定要考虑目标受众，宗教信仰和历史，以避免误解和误解。还有一件事要提及，请考虑品牌及其价值，以免在大型银行网站上使用手绘图标。