当前位置:网站首页 / 建站知识 / 网站设计知识

如何创建一个网站设计风格指南

来源:未知时间:2014-11-27 11:03点击:

创建网站越来越复杂,通常不是一一个人的工作。这是确保设计的一致性和优化以满足业务目标和重要用户创造愉快的经历。

一种确保团队在同一页时,设计的网站或节省设计单独的部分开发商是创造设计文件或网站设计风格指南。

这是有利于为风格指南创建不同的页面有凝聚力的经验。它也有助于确保未来发展或第三方的生产将遵循品牌的指导方针,将被视为品牌的整体的一部分。

卢克俱乐部已经触及到了使用风格指南为你的网站设计的第一步,在去年的表面,我想更深入地了解如何创建一个可用的网站设计风格指南为你的项目。

网站设计风格指南是什么?

网站设计风格指南是一个预先设计的元素,图形和规则的设计者应遵循确保单独的网站作品将一致,将创建在最后一个衔接的经验。

Airbnb风格指南

Airbnb–Web UI工具包由德里克布拉德利

网站设计风格为什么是重要的?

这是非常重要的在多个设计师工作在一个大的网站或Web应用程序以确保他们没有解释太多,不改变或调整根据个人喜好的风格。在发展中,在定义元素的网站,便于开发人员重用这些元素。此外,它可以使它更容易因为他们将得到他们需要的代码元素,会看到他们是如何需要从一开始看。

为了使开发人员的生活更容易,这是设计师的职责包括所有可能的相互作用,如盘旋,点击,按钮,标题,链接访问和其他国家,等。

创建一个网页设计风格指南

1、研究品牌

首先,你需要研究品牌让你明白它代表什么。了解品牌背后的故事,了解团队和找出视觉,公司的使命和价值观。它是深入挖掘品牌风格指导你产生将视觉和情感代表组织重要。

如果你是一个设计师谁不能代码,只需打开PS图象处理软件给你的文档的标题和一个什么样的文件是什么以及它是短描述。

如果你的代码,最好是创建一个HTML文档预编码的资产,所以他们可以很容易地重复使用。

2、定义字体

根据奥利弗雷琴斯坦,字体的网页设计百分之95。

你必须把字体就因为它是一个访问者和网站之间最重要的沟通工具。

设置层次和鉴定。有标题的类型:H1,H2,H3,H4,H5和H6。然后,正文,粗体和斜体的变化。想自定义复制将用于较小的介绍文字链接,等等。提供字体,重量和颜色。

定义字体

3、调色板

令人难以置信的是人类如何感知颜色和色调与已知的品牌联想。认为可口可乐,我敢打赌,你看,现在红。

开始你的风格指南将主宰你的网站设置的主要颜色,主色调应包括不超过三种颜色。然而,在某些情况下,您将需要二级甚至三级的颜色来说明你的用户界面,确保你界定过。还包括像白色的中性色,为主要品牌的颜色脱颖而出的灰色和黑色。

调色板

4、声音

声音,我指的是实际的副本。你研究过品牌开始之前的风格指南和发现品牌年轻时尚。如果有声音的复制没有方向,你必须定义它。它可以是一个简单的例子说明的声音是专业又有趣,欢迎。而不是说“你有404个错误”你可以说“哦,你已经打破了互联网。404错误。”如果声音被更多的企业,你不会这样做的。华晨躲在小的东西。

5、图解

图标已经存在了数千年,比老课文和单词。利用在你的项目中使用的图标,因为他们会给一个即时想法向参观者到发生了什么,接下来会发生什么。选择正确的图标会给更多的上下文中的含量比色板,复制或图形。当使用的图标,要考虑目标受众,宗教,历史,所以你可以避免误解和误解。还有一件事要说,想到的品牌和价值所以你不要用手上的大银行网站绘制图标。

Iconfinder

Iconfinder是你找到好的图标,一个伟大的工具项目。

图标

nounproject正在建立一个视觉语言符号的人都能理解的

6、意象

看图说话,千言万语。确保包含图像定义方式和方向的图片网站应该使用。再次,考虑品牌和其使命的价值。例如,一个慈善用途的水惊人的图像具有很强的情感,良好的事业和调用人类的情感,他们有幸得到基本生活用品如水,食品,电力和教育。

图像

免费的图像的一些伟大的网站:16的地方找到最好的免费照片。

7、形式

的形式是什么使你的网站或Web应用程序交互的、动态的,用户可以输入数据,然后你可以利用它做的工作。

确保建立一个层次,包括从形式的活性,可能的反馈悬停,添加错误,警告,例如密码太弱成功消息,电子邮件是无效的或简单的成功的信息。“电子邮件”。

8、按钮

按钮是一个调色板的混合物,形式和声音。依靠这些先前创建的资产创造一致的外观和不同设计的功能按钮说明。

9、间距

间距在风格指南如何?这是说的间距非常重要。它可以在一个用于布局网格形式;它可以定义之间的间距的标题,按钮,图像,表格等元素。

变间距对很重要因为它给更多的喘息空间,元素,和一致的使用使你的工作看起来结构和专业。

10、DOS和注意事项

最后但并非最不重要的:使DOS和注意事项部分很像一个FAQ显示最常见的陷阱,并举例说明事情应该如何的外观和工作而不是。

推特品牌

推特品牌资产和指南

网站设计风格例子

这里是一些最好的网站设计风格指南的例子作为灵感,创造自己的风格指南的时候。记住,这些指南是由组织的设置,高度的影响,他们的愿景,使命和价值观和一些决定可能是无关的或不合逻辑的关于你在做什么,所以不要盲目跟随的东西做了。

Spotify–伙伴品牌指南(PDF)

Spotify

Dropbox的品牌和标识

Dropbox

Kickstarter网站设计风格

Kickstarter网站设计风格

LonelyPlanet网站设计风格

LonelyPlanet网站设计风格

Find Guidelines –品牌资产的最快的方式

指南

结论

你必须研究你的品牌的网站创作风格,确保得到设计合适的不同部位,确保风格指南是一致的,包括所有可能的情况时,把设计变成产品。