时间:2019-08-17
编辑:网站制作公司
5632
0
创建网站变得越来越复杂,通常不是一个人的工作。重要的是确保设计一致和优化以满足业务目标并为用户创造愉快的体验。
在设计网站的单独部分或从开发人员保存设计时确保团队在同一页面上的方法之一是创建设计文档或Web设计样式指南。
上海网站制作有一个风格指南是有益的,以便在不同的页面之间创造一个有凝聚力的体验。此外,它还有助于确保未来的开发或第三方生产遵循品牌指导方针,并将被视为整体品牌的一部分。
去年,Luke Clum已经触及使用样式指南的表面,作为您在网页设计中的第一步,我想更深入地了解如何为您的项目创建可用的网页设计风格指南。
样式指南是预先设计的元素,图形和规则设计师或开发人员应遵循的集合,以确保单独的网站部分将保持一致,并将最终创建一个有凝聚力的体验。
Airbnb UI工具包 -由Derek Bradley撰写
当多个设计师在大型网站或网络应用程序上工作时,确保他们不会过多地解释并且不会根据个人喜好改变或调整样式,这一点非常重要。在开发过程中,通过定义网站元素,开发人员可以轻松地重用这些元素。此外,它可以使它变得更容易,因为它们将获得它们编码的元素,并且将从一开始就确切地看到它们需要的样子。
为了让开发人员的生活更轻松,设计师有责任将按钮,标题,链接等所有可能的交互(例如悬停,点击,访问和其他状态)包括在内。
首先,您需要研究品牌,以便了解它的含义。了解品牌背后的故事,观察团队并找出公司的愿景,使命和价值观。深入挖掘品牌非常重要,因此您制作的风格指南将在视觉和情感上代表组织。
如果您是一名无法编码的设计师,只需打开Photoshop并为您的文档提供标题和简短描述文档的内容及其用途。
如果您可以编码,最好创建一个带有预编码资产的html文档,以便可以轻松地重复使用它们。
根据Oliver Reichenstein的说法,排版占网页设计的95%。
您必须正确排版,因为它是访问者和您的网站之间最重要的沟通工具之一。
设置层次结构并识别它。有标题类型:h1,h2,h3,h4,h5和h6。然后是身体复制,粗体和斜体的变化。考虑将用于较小链接,介绍文本等的自定义副本。提供字体系列,重量和颜色。
Zech Nelson的风格指南
令人难以置信的是人类如何看待颜色并将色调与知名品牌相关联。想想可口可乐,我打赌你现在看到那个红色。
首先为您的风格指南设置主要颜色,这将主导您的网站,主色应包括不超过三种色调。但是,在某些情况下,您需要二级甚至三级颜色来说明您的用户界面,请确保您也定义它们。还包括白色,灰色和黑色等中性色,使主要品牌颜色脱颖而出。
Chloe Park的宾客中心调色板
我指的是实际的副本。您在开始风格指南之前已经研究过该品牌,并发现该品牌是年轻时尚的。如果没有复制语音的说明,则必须对其进行定义。这可以是一个简单的例子,表明语音必须专业而有趣和欢迎。而不是说“你有404错误”,你可以说“哦,小伙子,你已经破坏了互联网。404错误。“如果声音更公司,你就不会这样做。华晨隐藏在小事上。
图标已经存在了数千年,并且比文本和文字更早。利用项目中的图标,因为它们可以即时向访问者提供有关正在发生的事情以及接下来会发生什么的建议。选择正确的图标将为内容提供比调色板,复制或图形更多的上下文。使用图标时,请务必考虑目标受众,宗教,历史,以免误解和误解。还有一点要提一下,想想品牌及其价值,这样就不会在大型银行网站上使用手绘图标。
Iconfinder是一个很棒的工具,可以为您的项目找到很棒的图标。
NounProject 正在构建一个任何人都能理解的图标的视觉语言
图片讲千言万语。确保包含定义网站应使用的图片样式和方向的图像。再一次,考虑品牌的价值和使命。例如,水资源慈善机构使用具有强烈情感,良好事业和人类情感的醒目图像,使他们有幸拥有水,食物,电力和教育等基本生活用品。
免费图像的一些伟大的网站:16个地方找到最好的免费股票照片。
表单使您的网站或Web应用程序具有交互性和动态性,因此用户可以输入数据,然后您可以操作它并完成工作。
确保建立层次结构并包括来自表单的可能反馈 - 活动,悬停,添加错误,警告和成功消息,包括密码太弱,电子邮件无效或简单的成功消息,例如“发送电子邮件”。
按钮是调色板,表格和声音的混合物。依靠这些以前创建的资产来创建具有不同陈述设计的一致外观和功能按钮。
间距如何在风格指南中?提到间距非常重要。它可以是用于布局的网格形式; 它可以是在标题,按钮,图像,表格和其他元素之间定义的间距。
正确的间距非常重要,因为它为元素提供了更多的喘息空间,并且一致的使用使您的工作看起来更有条理和专业。
最后但并非最不重要的一点:将DO和DON'Ts部分与常见问题解答一样,显示最常见的陷阱,并举例说明事情的外观和工作方式。
Twitter品牌资产和指南
以下是一些最佳风格指南示例,可在创建自己的风格指南时用作灵感。请记住,这些指南受到组织设置,愿景,使命和价值观的高度影响,而某些决策可能与您正在做的事情无关或不合逻辑,所以不要盲目地遵循那里所做的事情。
您必须研究您正在创建样式指南的品牌,确保设计的不同部分正确,并确保样式指南是一致的,并包括将设计转换为工作产品时的所有可能方案。
上海网站制作
3
s后返回登录3
s后返回登录