返回顶部
北京海空设计
4000 981 891 4000-981-891
4000 981 891 电话
专注
设计潮流

Airbnb,Uber和Mailchimp:10个品牌网页设计风格指南

 

关键词:网页设计网站配色网页设计案例

 

有些网站好到我们可以盯着看几个小时。

 

它们是不同的、令人上瘾的,并且被精心制作的网页。在互联网出现之前,品牌不得不依赖有限的渠道,比如平面广告、电视广告、广告牌和各种各样的平面宣传资料来分享他们的故事。这些频道无论是否是多用途,都无法与网站提供的深度相比拟。

 

Airbnb,Uber和Mailchimp:10个品牌网页设计风格指南

 

Airbnb,Uber和Mailchimp:10个品牌网页设计风格指南

 

想要更多地了解产品背后的团队吗?完成了。需要联系支持团队吗?只需点击几下鼠标即可。想看一段关于某个特定功能的视频吗?可能就在那里。在许多方面,网站已经成为品牌的宣传中心。因此,确保这个“家”与品牌的整体身份保持一致是至关重要的。这正是一个精心制作的网站风格指南发挥作用的地方。

 

Airbnb,Uber和Mailchimp:10个品牌网页设计风格指南

 

Airbnb,Uber和Mailchimp:10个品牌网页设计风格指南

 

什么是网页设计风格指南

简单来说,网页设计风格指南是一套指令和资产,供负责建立在线业务的每个人使用。这包括开发人员、设计人员、内容创建者、甚至是合作于不同在线计划(竞赛、社交活动、登陆页面等)的合作伙伴。由于各种设计规范必须与它们进行交互,因此你可能听说过不同名称的网站设计风格指南:模式库、UI工具包、前端样式指南、人机界面指南,UI指南等等。无论你如何称呼它们,请记住:网站样式指南包含负责构建在线属性的任何人的基本构建模块。

 

让我们看看精心设计的网页设计风格指南的10个鼓舞人心的例子:

 

01. AIRBNB

Airbnb的UI 工具包(可以有不同的叫法!)提供了一个清晰的概念:表单字段、输入、菜单、广告和工具栏应该是什么样子。特别有趣的是,它们还包括了一些颜色和谐的例子。

 

Airbnb,Uber和Mailchimp:10个品牌网页设计风格指南

 

我们可以从Airbnb学到什么:

网页设计涉及不同级别的层次、深度和对比度。虽然你可能希望将主要品牌颜色限制为3、4种,但请考虑添加一系列辅助色调,这些颜色可以帮助网页设计师和其他用户塑造品牌在线形象。

 

02. MOZILLA

Mozilla是Firefox浏览器背后的才华横溢的团队,他们的网页设计风格指南完全公开。为了统一他们的整个在线形象,他们创建了一个名为Sandstone的框架。这本全面的指南定义了所有网络属性的样式和形式,解决了从最小的按钮到整个网格的所有问题。

 

Airbnb,Uber和Mailchimp:10个品牌网页设计风格指南

 

Mozilla选择统一的概念来指导网页设计并不意味着一切都看起来完全一样。为了证明这一点,他们的网页设计风格指南还包括其使用概念的示例,其中很明显这些构建块可用于创建多样性:

 

Airbnb,Uber和Mailchimp:10个品牌网页设计风格指南

 

我们可以从Mozilla学到什么:

当你考虑网页设计风格指南时,提出像Sandstone这样的总体概念将帮助你保持品牌一致性。无论你以后需要在指南中加入哪些元素,始终会有一个中心思想来决定站点的整体外观和感觉。

 

03. DISQUS

为了满足印刷和网页设计的需求,Disqus的团队将他们的风格指南分为两个部分:品牌&风格和组件。它们包括图标、排版和按钮的特定资产。在这种情况下,创建web设计风格指南是为了通知内部设计工作和第三方(使用其API)创建的组件。

 

Airbnb,Uber和Mailchimp:10个品牌网页设计风格指南

 

参与该项目的设计师上传了一个动画镜头,展示了他们无可挑剔的风格指南:

 

我们可以从Disqus学到什么:

有时,你正在创建一种产品,其本身就是其他产品的构建块。Disqus就是这种情况,它有一个开放的API,可以向世界各地的数千名开发人员展示他们的品牌。如果是这种情况,请务必公开并在高度可见的位置显示网页设计风格指南。

 

04. MEDIUM

此UI指南显示了描述Medium的在线身份的最重要元素:按钮、背景、下拉菜单、图标、工具提示、弹窗等。帮助塑造这种身份的Teehan + Lax(此后加入Facebook)分享了产品开发阶段发生了很多变化。大多数新产品都是这种情况。这些视觉变化应该鼓励你不断更新品牌的网页设计风格指南,而不是让你感到沮丧。

 

Airbnb,Uber和Mailchimp:10个品牌网页设计风格指南

 

我们可以从Medium学到什么:

还有机会将品牌标识带入看似小的UI组件,如加载器、弹窗、图像上传器和进度条。尽管一些Web开发框架为这些项目提供了开箱即用的外观,也要尝试对其进行自定义以增加其真实感。

 

05. UBER

优步的网页设计风格指南特别关注排版和层次结构。他们对权重的数量有一个特定的规则,而不是一个可以在单个设计中组合的权重。

 

Airbnb,Uber和Mailchimp:10个品牌网页设计风格指南

 

同样令人着迷的是,他们如何将自己的品牌标识引入到地图等组件中。因为他们是一家专注于运输的公司,地图的使用成为他们用户界面的一个关键部分。注意到这一点,设计团队建立了一套指导方针来处理不同类型的地图。

 

Airbnb,Uber和Mailchimp:10个品牌网页设计风格指南

 

我们可以从优步学到什么:

如果你的品牌有特色产品或服务(如优步地图),请认真考虑如何通过它来塑造你的品牌身份识别。优步不仅为地图等大型组件设定了固定外观,还通过连接这些地图上两个位置的线路来制定其品牌标识。在构建网页设计风格指南时,请考虑如何将品牌带到像点一样小的,或者像大英雄图像一样大的项目上。

 

06. MAILCHIMP

随着产品变得越来越复杂,风格指南会考虑更多的在线组件。例如,Mailchimp提供了一个相当全面的分析包,涉及大量不同的图表。因此,他们的网页设计风格指南很自然地包含了符合Mailchimp品牌的图表类型的清晰提示。

 

Airbnb,Uber和Mailchimp:10个品牌网页设计风格指南

 

为了增加品牌个性,他们还定制了一套“Freddicons”图标,以吉祥物Frederick von Chimpenheimer IV命名。

Airbnb,Uber和Mailchimp:10个品牌网页设计风格指南

 

我们可以从Mailchimp学到什么:

在一个大多数站点似乎都在使用相同图标集的环境中,冒险将定制图标添加到品牌资产中。虽然耗时,但创建一个独特的图像包来表示网站功能可以满足产品的特定需求。

 

07. BUFFER

Buffer将其样式指南定义为“可重复使用的样式和组件的集合,以加快产品开发”。有趣的是,他们正在应用称为原子设计的实践原则。这些原则表明,网页设计风格指南应该从小的、独立的部分(原子)开始,这些部分结合起来创造分子,最终形成整个有机体。

Airbnb,Uber和Mailchimp:10个品牌网页设计风格指南

除了拥有这种独特的网页设计方法之外,缓冲区样式指南还包含一组规则来创建一个日益重要的组件:行动呼吁。

Airbnb,Uber和Mailchimp:10个品牌网页设计风格指南

我们可以从Buffer学到什么:

网页设计不仅仅是关于按钮和网格。设计有效的在线资产需要首先考虑建立网站背后的实际意图。你对行动的主要呼吁是什么?你想怎么表达呢?将这些注意事项添加到web设计风格指南中,以获得更一致的表单和功能。

 

08. YELP

Yelp的设计师打开他们的网页设计风格指南,问你今天用过你的风格指南吗?强调养成重复一系列视觉规则的习惯是多么重要。

 

Airbnb,Uber和Mailchimp:10个品牌网页设计风格指南

 

他们的综合指南超越了简单的建议,并为开发人员提供了实时的代码。在此示例中,指南提供了营销块的具体说明:

 

Airbnb,Uber和Mailchimp:10个品牌网页设计风格指南

 

我们可以从Yelp中学到什么:

更进一步,为开发人员提供开箱即用的有用代码。当然,任何人都可以理解你在网页设计风格指南中包含的图像的含义。问题在于:不是每个人都会以同样的方式执行它。除非你提供一些标准化方法,否则不同的开发人员将尽最大努力使每个组件生机勃勃。向他们提供一些标准代码,将有助于保持与网站的前端和后端交互的每个人之间使用共同语言。

 

09 EVERNOTE

Dribbble已成为一个令人印象深刻的展示生活,演变风格指南的几十个创意团队。例如,Evernote团队热衷于分享他们不断发展的web组件集。他们不断上传照片,与设计社区分享他们的图标、插图、徽章、布局、用户流等等。与内部网页设计风格指南不同,公共作品集为反馈和持续改进打开了大门。

 

Airbnb,Uber和Mailchimp:10个品牌网页设计风格指南

 

从Evernote中我们可以了解到:

大胆尝试,与社区分享网页设计最佳实践。你会惊讶于数千英里之外的创作者可以分享的可操作的反馈数量。在网页设计的世界里,只有一件事是肯定的:一切都会很快改变。只要这是真的,你最好利用其他人的不同知识水平。

 

10. VIRGIN AMERICA

这家航空公司最近重新设计的网站被《连线》杂志形容为“十年来对预订体验的第一次彻底反思”。负责这一变化的Work & Co公司分享了一个完整的案例研究,讲述了该品牌新网页设计指南的故事。

 

Airbnb,Uber和Mailchimp:10个品牌网页设计风格指南

 

这个例子特别引人关注,因为在这个案例中,一家公司的网页设计风格指南是如此成功,以至于它也被跨传统渠道部署。“数字第一品牌”的概念将越来越流行。很快我们就会讨论一个品牌的网页设计风格指南应该如何告知其印刷指南,而不是反过来。

 

Airbnb,Uber和Mailchimp:10个品牌网页设计风格指南

 

我们可以从维珍学到什么:

构建基于Web的产品?将品牌发展置于首位,首先考虑网络元素。某些互动应该是什么样的?依靠品牌故事的精髓来设计一套理想的网页设计资产。然后,回到绘图板,基于这个视觉系统创建其他传统品牌资产(如文具、广告和商品)。

 

本文由海空设计 (北京海空影视文化咨询有限公司)翻译整理,版权归本公司所有,如需转载到其他平台,请联系作者(微信ID:haikongsheji)。

原文地址:https://www.canva.com/learn/apple-google-starbucks-inside-the-web-design-style-guides-of-10-famous-companies/

北京画册设计

专业为您 ▪ 交流分享

立即咨询

因为专注 所以专业
海空设计由15年画册设计经验的设计总监督导; 数十位画册设计资深设计师主持,为您量身定制设计方案; 我们在符合您之所需的同时,引领画册设计版式设计潮流,崇尚简洁、清晰的设计理念,成功服务过数家世界500强和国内众多上市公司......

轻松写下您的需求

统计