怎样创建一个好的网页设计风格

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

在设计网站的不同部分或从开发人员那里节省设计时，确保团队在同一页面上的方法之一是创建设计文档或web设计风格指南。

为了在不同的页面之间创建一个连贯的体验，有一个风格指南是有益的。此外，它还有助于确保未来的开发或第三方生产将遵循品牌指导方针，并将被视为整体品牌的一部分。

Luke Clum已经触及了使用风格指南的表面，这是您去年web设计的第一步，我想更深入地了解一下如何为您的项目创建一个可用的web设计风格指南。

什么是风格指南?

风格指南是预先设计的元素的集合，图形和规则设计者或开发人员应该遵循，以确保独立的网站片段将是一致的，并将在最后创造一个连贯的体验。

airbnb风格指南

Airbnb UI工具包- Web by Derek Bradley。

它为什么重要?

当多个设计师在一个大的网站或网页应用程序上工作时，确保他们不会过多的解释，也不会根据个人喜好改变或调整风格，这是非常重要的。在开发中，定义了网站的元素使得开发人员可以很容易地重用这些元素。而且，它可以使它变得更容易，因为他们将获得他们必须编码的元素，并将从一开始就看到他们需要什么样子。



为了使开发人员的生活更轻松，设计者的职责是包括所有可能的交互，如鼠标悬停、点击、访问等，以及按钮、标题、链接等。

创建Web设计风格指南。

1。研究品牌

首先，你需要研究这个品牌，让你明白它代表什么。了解品牌背后的故事，观察团队，了解公司的愿景、使命和价值观。深入挖掘品牌是很重要的，这样你的风格导向就会在视觉上和情感上代表公司。

如果你是一个不能编程的设计师，只需打开Photoshop，给你的文档一个标题和一个简短的说明文档的内容和内容。

如果您可以编写代码，那么最好使用预编码的资产创建一个html文档，这样就可以方便地重用它们。

2。定义字体

根据Oliver Reichenstein的说法，印刷术是95%的网页设计。

因为它是访问者和网站之间最重要的沟通工具之一，所以你必须正确地进行排版。

设置层次结构并识别它。标题类型有:h1、h2、h3、h4、h5和h6。然后是正文，粗体和斜体。考虑自定义复制，它将被用于更小的链接，内含子文本等等。提供字体系列，重量和颜色。

风格指南

Zech Nelson的风格指南。



3所示。调色板

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

首先为你的风格指南设置主色调，这将主导你的网站，主导色彩应该包括不超过三种颜色。但是，在某些情况下，您需要使用次要的甚至是第三种颜色来说明您的用户界面，确保您也定义了它们。也包括中性的颜色，如白色，灰色和黑色的主要品牌颜色突出。

调色板

客人中心调色板由科洛伊帕克。

4所示。的声音

我所指的声音是真实的。你在开始时尚指南之前就已经研究过这个品牌，并且发现这个品牌是年轻和流行的。如果没有语音的方向，你就必须定义它。它可以是一个简单的例子，说明声音必须是专业的，但有趣和欢迎。而不是说“你有404错误”，你可以说“噢，孩子，你破坏了网络。”404错误。如果声音更大一些，你就不会那么做了。智慧隐藏在小事情中。

5。图解

图标已经存在了数千年，比文字和文字还要古老。利用在你的项目中使用图标，因为他们会给访问者一个即时的想法，告诉他们接下来会发生什么，以及接下来会发生什么。选择正确的图标将提供比颜色调色板、复制或图形更多的内容上下文。使用图标时，一定要考虑目标受众、宗教、历史，避免误解和误解。还有一件事要提，想想这个品牌和它的价值，这样你就不用在大型银行网站上使用手绘的图标了。

iconfinder

Iconfinder是一个很好的工具，可以为你的项目找到很棒的图标。

图标

“名词项目”正在构建一种任何人都能理解的图标的视觉语言。

6。图像

图片能讲几千个单词。 本文来源：杰云网络，转载请注明出处！如果需要 营销型网站建设、 微商城、 小程序商城、 多端小程序 请联系我们！