21个最棒页面设计原理,以及案例

页面设计
浏览次数 1,189

你从来没有第二次机会给第一印象 – 这就是为什么你的主页无疑是你网站上最重要的网页之一。

对于任何给定的公司,主页是其虚拟的前门。如果一个新的访问者不喜欢他们所看到的,他们的下意识的反应是打“后退”按钮。

这是对的 – 不幸的是,很多人仍然通过封面判断一本书。

什么使得一个网站的主页设计辉煌而不是等等?那么,这不仅仅是一个人看起来 – 它也必须工作。这就是为什么这个榜单上最辉煌的主页不仅在美观上得分高,而且在大脑中也是如此。

但在深入研究这些例子之前,我们来分析一下网页设计的一些最佳实践。

什么使最好的网页设计?

  1. 设计明确地回答了“我是谁”,“我做了什么”和/或“你可以(访客)在这里做什么”。
  2. 设计与目标受众共鸣。
  3. 设计传达了一个引人注目的价值主张。
  4. 该设计针对多种设备进行了优化。
  5. 该设计包括号召性行动(CTA)。
  6. 设计总是在变化。
  7. 设计是有效的。

此处显示的所有主页设计均使用以下元素的组合。并不是每一个页面都是完美的,但最好的主页设计有很多这样的权利:

1.设计明确地回答了“我是谁”,“我做什么”和/或“你在这里做什么”。

如果你是一个知名的品牌或公司(如可口可乐),你可能无需描述你是谁,你做什么; 但实际情况是,大多数企业仍然需要回答这些问题,以便每个访问者知道他们是在“正确的地方”。

史蒂芬·克鲁格(Steven Krugg)在他的畅销书“ 不要让我想:如果访问者在几秒钟内不能确定你做什么,他们不会长期坚持下去”。

2.设计与目标受众共鸣。

一个主页需要狭隘地集中 – 用合适的语言与正确的人交谈。最好的主页避免“企业gobbledygook”,并消除绒毛。

这个设计传达了一个引人注目的价值主张。

当访问者到达您的主页时,需要迫使他们坚持下去。主页是最好的选择你的价值主张的地方,以便潜在客户选择留在你的网站,而不是导航到你的竞争对手。

4.设计针对多种设备进行了优化。

这里列出的所有主页都具有很高的可用性,这意味着它们易于导航,并且不存在妨碍浏览的“闪光”对象,例如闪光横幅,动画,弹出窗口或者过度复杂和不必要的元素。许多也是移动优化的,这在今天的移动世界中是非常重要的。

5.设计包括号召性行动(CTA)。

此处列出的每个主页都有效地使用主要和次要号召性用语来引导访问者进行下一个逻辑步骤。例子包括“免费试用”,“安排演示”,“立即购买”或“了解更多”。

请记住,首页的目标是迫使访问者深入挖掘您的网站,并进一步将其移至漏斗。CTA告诉他们下一步该做什么,这样他们就不会感到不知所措或失落。更重要的是,CTA将您的主页变成销售或引擎生成引擎,而不仅仅是宣传册。

6.设计总是在变化。

最好的主页并不总是静态的。他们中的一些人不断变化,以反映他们的访问者的需求,问题和问题。一些主页也从A / B测试或动态内容改变

7.设计是有效的。

精心设计的网页对于建立信任,传播价值和引导访客进行下一步操作非常重要。因此,这些主页有效地使用布局,CTA放置,空白,颜色,字体和其他支持元素。

现在,通过以下16个真实案例,准备好了解优秀的网页设计。

1. FreshBooks

freshbooks - 首页 - update.png

查看完整的主页

为什么这是辉煌的

  • 这很容易消耗。关于短期还是长期的主页运作得更好有很多争议。如果你选择做后者,你需要很容易滚动和阅读 – 这正是这个网站所做的。它几乎就像一个故事。
  • 与主要号召性用语有很大的对比和定位 – 很明显,公司希望您到达时转换的内容。
  • 在号召性用语“免费入门”中使用的副本非常引人注目。
  • FreshBooks使用主页上的客户推荐书来讲述为什么要使用产品的真实故事。
  • 这个子标题也很棒:“使用FreshBooks加入1000多万小企业主”。FreshBooks熟练地使用社交证据 – 1000万是一个很大的数字 – 强迫其目标受众加入他们的同行,并尝试工具。

2. Airbnb

制作的Airbnb - 首页 - update.png

查看完整的主页

为什么这是辉煌的

  • 它包括大多数游客前来寻找的目的地和日期搜索表单,就在前面,引导游客顺利进行下一步。
  • 搜索表单为“智能”,这意味着如果用户登录,它将自动填充用户的上一次搜索。
  • 主要号召性用语(“搜索”)与背景形成鲜明对比。但是主持人的次要号召性用语也是可以看到的。
  • 它提供游览和出游的建议Airbnb的用户可以在同一个网站上预订他们的住宿,让游客更加兴奋地预订他们的网站旅行。它还显示其中哪些产品在其他用户中最受欢迎。

3. 薄荷

薄荷主页,update.png

查看完整的主页

为什么这是辉煌的

  • 这是一个超级简单的设计,强大的,没有行话的标题和副标题。
  • 主页发布了一个安全而易用的氛围,这对于处理财务信息的产品非常重要。
  • 它还包含简单,直接,引人注目的号召性用语:“免费注册”。CTA设计也非常出色 – 安全的锁定图标再次将安全信息带回家。

4. Dropbox(商业)

Dropbox的业务 - 首页 - update.png

查看完整的主页

为什么这是辉煌的

  • Dropbox进行简单的设计和品牌。它只包括重要的内容:一个大的,相关的图像与支持副本,并“30天免费试用”号召性用语按钮
  • Dropbox的主页和网站是简单的最终例子。它限制了对复制和可视化的使用,并且包含了空格。
  • 其子标题简单而强大:“员工和IT管理员信任的安全文件共享和存储解决方案”。没有必要解码行话来找出Dropbox真的做什么。

5. 四河吸烟室

4 rivers-homepage-update.png

为什么这是辉煌的

  • 流口水。当我到达4 Rivers Smokehouse的网站时,这就是我所想的。结合伟大的摄影,标题“胸肌,18年掌握,你的品味”。听起来像一个值得尝试的经验。
  • 视差滚动引导您通过服务,菜单和人们度过愉快的时光 – 大量使用这种流行的设计趋势。
  • 唯一的负面?我住的地方不够近 嘘。

6. 科布儿科治疗服务

柯布 - 小儿疗法 - 首页 - design.png

查看完整的主页

为什么这是辉煌的

  • 标题和副标题吸引了游客的感情方面:“与获得公司合作”; “相信我们,我们也到了,我们会找到可以发展的工作。” 这个价值主张是独特而有说服力的。
  • 从上面的截图很难说,但标题是在旋转的旋转木马,迎合特定的人物角色,从求职者到寻找治疗师为他们的学校的人。
  • 访问者访问页面时可以采取多种方式,但呼吁行动的位置很好,措辞简单,与页面的其他部分形成对比。

7. 吉尔·康拉斯

吉尔 - konrath - 首页 - design.png

查看完整的主页

为什么这是辉煌的

  • 这很简单,直接点。从标题和副标题中,可以清楚地知道Jill Konrath做了什么(以及她如何帮助您的业务)。
  • 这也使吉尔的思想领导素材很容易获得,这对于确立她作为主讲人的可信度很重要。
  • 订阅新闻简报并取得联系很容易 – 她的两个主要号召行动。
  • 弹出式订阅CTA使用社交证据让你加入她的成千上万的粉丝。
  • 它包括新闻插座标志和证明作为社会证明。

8. Evernote

Evernote的 - 首页 - update.png

为什么这是辉煌的

  • 多年来,Evernote已经从一个简单的节省注意的应用程序变成了一套商业产品。这并不总是很容易在主页上传达,但印象笔记很好地包装了许多潜在的信息,几个关键的好处。
  • 该主页在视频中使用丰富的静音颜色,以及其亮绿色和白色高亮显示的组合,使转换路径脱颖而出。
  • 在一个简单的标题(“记住一切”)之后,眼睛的路径会引导您进入号召性用语“免费注册”。
  • Evernote还通过Google提供一键式注册流程,帮助访问者节省更多时间。

9. Telerik by Progress

Telerik的 - 首页 - update.png

为什么这是辉煌的

  • 当你到达Telerik的网站时,“Stuffy enterprise”并不是你的感觉。对于提供许多技术产品的公司来说,其大胆的色彩,有趣的设计和录像带给人一种类似Google的感觉。只是让游客感到欢迎,让他们知道他们在与真人打交道的一个重要方面。
  • 我喜欢简单,高水平的六个产品提供的概述。沟通公司所做的事情以及人们如何学习更多内容的方式非常清晰。
  • 副本重量轻,易于阅读。它讲的是客户的语言。

10.电子  婚礼

ewedding - 首页 - update.png

为什么这是辉煌的

  • 对于那些正在规划他们的大日子的爱情鸟,eWedding是建立定制婚礼网站的好地方。主页不杂乱,只包含让人们开始建设网站的必要元素。
  • 标题为“超过800,000个婚礼网站”!是很好的社会证明。
  • 它包含了出色的产品视觉效果,很棒的标题,以及一个号召性的行动,可以减少副本“开始网站”的影响。

11. 大本营

大本营 - 首页 - update.png

为什么这是辉煌的

  • 很长一段时间,大本营有辉煌的主页,在这里你可以看到为什么。它经常以真棒标题和聪明的动画片为特色。
  • 呼吁行动是大胆的,在上面。
  • 在这个例子中,公司选择了一个更类似博客的主页(或单页面网站方法),它提供了更多关于产品的信息。
  • 客户的报价是对使用产品的好处和结果的大胆和有力的证明。

12. 慈善:水

慈善water-homepage-update.png

为什么这是辉煌的

  • 这不是你典型的非营利网站。大量的视觉效果,创意复制和交互式网页设计的使用使得这一点脱颖而出。
  • 动画头部图像是捕捉注意力的好方法。
  • 它利用视频和摄影的巨大用途,特别是捕捉引起行动的情绪。

13. TechValidate

高科技 - 验证 - 首页 - design.png

为什么这是辉煌的

  • 这个主页设计精美。我特别喜欢使用空格,对比色和以客户为中心的设计。
  • 标题清晰且引人注目,呼吁行动也是如此。
  • 还有一个很好的信息层次结构,可以很容易地快速浏览和理解页面。

14. Chipotle

墨西哥辣椒 - 首页 - design.png

查看完整的主页

为什么这是辉煌的

  • 主页是一个敏捷和不断变化的好例子。Chipotle目前的主页是关于即将到来的假期,它作为一个独特的价值主张,让你开始点击你的网站。当我想到Chipotle时,我不一定会想到餐饮,但是这个网站是一个很好的提醒,考虑到你已经知道和喜欢的卷饼的不同用途。
  • 食物摄影细腻美观,实际上让我饿了。现在,这是一个有效的使用视觉效果。

15. 中等

中等主页,design.png

查看完整的主页

为什么这是辉煌的

  • 这也许是我见过的空白的最佳用法之一。它允许中等的应用程序标语和照片占据中心舞台,同时吸引您注意网站上较暗的部分标题。
  • 中可以方便地注册 – 在网站上,或通过简单的文字信息到您的手机。我对文本的反应比电子邮件更响,所以这是让人们参与注册过程的一个很好的策略。
  • 主页使用社交证据让访问者开始点击:“中等热门”和“精选”部分让我知道在哪里可以找到高质量的内容。

16. Digiday

是Digiday - 首页 - design.png

查看完整的主页

为什么这是辉煌的

  • 不同于其他在线新闻出版物淹没主页和尽可能多的图像的主页,Digiday的第一部分只展示了一篇文章。它的特色图片(在这个例子中是一个吓人的图片)引人注目,标题只是要求被点击,以便访问者了解他们将要阅读的内容。
  • 首页的顶部,网站通常展示大量不同的部分和点击选项,只有一个图标点击 – 这导致您订阅页面。

17.  种类小吃

那种 - 首页 - design.png

查看完整的主页

为什么这是辉煌的

  • 大胆的色彩产生对比,使得文字和图像在页面上突出显示。
  • CTA – “Shop KIND” – 很聪明。它敦促游客点击“学习”一词,学习更多,这意味着在这里购物是一个不错的选择。
  • KIND小吃的口号是直白的 – 当我读到它时,这个信息立刻引起了共鸣,让我想要读一下小吃店的标签。

18. Ahrefs

Ahrefs - 首页 - design.png

查看完整的主页

为什么这是辉煌的

  • 蓝色,白色和橙色之间的色彩对比引人注目,使标题和CTA流行起来。
  • 子标题和CTA是一个引人注目的一对:为了能够开始跟踪和超过竞争对手免费是一个伟大的提议。
  • 首页为访问者提供了多种选择,但由于其坚实的背景和简单的排版,它不会造成混乱。

19. A24电影

A24-主页,design.png

查看完整的主页

为什么这是辉煌的

  • 该电影公司的主页是由其新电影的拖车组成的。我们知道视频内容是观众希望看到更多内容的格式,而这是以非常吸引人的方式展示A24作品的绝佳策略。
  • 在首页的顶部,A24立即提供了无数种方式通过社交媒体和电子邮件与我们联系 – 我非常欣赏作为访问者,当其他许多网站将联系信息埋在页面底部。

20. Ellevest

ellevest - 首页 - design.png

查看完整的主页

为什么这是辉煌的

  • “像女人一样投资:因为金钱就是力量。” 这些头条新闻是强大的,使我想要了解更多有关产品 – 作为一个女人,作为有兴趣作出明智的财务选择的人。
  • 这些图像显示了公司的价值主张之一,而不是告诉你:一个桌面网站和移动应用程序随你移动。
  • “开始”是一个很棒的CTA–实际上,我们在HubSpot上自己使用它。点击后,游客可以通过几个简单的步骤设置个人资料并开始投资。

21. HubSpot

hubspot,网页设计,update.png

查看完整的主页

为什么这是辉煌的(如果我们自己这么说)

  • 乐高角色吸引了你的注意力(因为他们很可爱),然后巧妙地说明和加强了标题和副标题的信息。
  • 它有另一个引人注目的“开始”CTA – 与奖金显微镜详述我们的免费版本用户可以选择升级在未来。
  • 在整个首页,我们的明亮的蓝色和橙色主题不断回来吸引你的眼睛链接和CTA。

下载辉煌网页设计的50个例子

最初发布于2017年5月5日,更新于2018年2月2日
我们将在15分钟内联系你

免费提供行业网站方案以及海外推广计划