主页示例:下一个网页设计项目的 8 个鼓舞人心的想法

已发表: 2022-04-02

正在寻找可以用作下一个网页设计项目灵感的主页示例? 主页设计很重要。 我们与您同在,因为我们知道正确的主页设计可以为您的企业带来竞争优势。

您的主页对于正确处理非常重要。 毕竟,这是您的客户对您的第一印象,大多数消费者倾向于在登陆您主页的前三秒内形成对您和您公司的看法。

您的主页也有责任吸引您网站的流量。 与其将其视为围绕一个操作构建的登录页面,不如将主页设计为支持来自各种受众和来源的所有流量。

这意味着您的主页需要吸引流量、教育访问者并邀请转化。 没有压力吧?

尽管做对很重要,但许多企业都在努力正确设计他们的主页。

一个设计良好的主页需要的不仅仅是外观——它还必须有目的明确的内容,为访问者的网站之旅提供一个起点。 这就是为什么此列表中的主页不仅因其设计而著称,还因其创造力和转化潜力而著称。

以下是我们在网络上看到的一些最好的主页设计,按使它们如此有抱负的设计或优化技术分类。

1. 清晰的身份

如果您是知名品牌或公司,您可能无需描述您是谁以及您所做的事情就可以逃脱惩罚。 但是,除非您是 Coca-Cola 或 Apple,否则您的企业仍需要明确您是谁,以便每位访问者都知道他们来对了地方。

即使你有义务说明你是谁,你仍然可以以一种聪明而引人注目的方式完成它。 为此,请看下面的第一个示例,KIND 零食:

种类主页

为什么我们喜欢它:

  • 我们马上就知道这家公司是什么:特色产品图片和较小的产品缩略图的结合让我们知道 KIND 不仅仅是一个酒吧。
  • KIND Snacks 的标语非常棒。 用简单明了的语言,信息立即引起共鸣,让我们想自己阅读小吃店的标签。
  • 大胆的颜色产生对比,使文字和图像在页面上脱颖而出。 此外,颜色与您在商店中看到的 KIND 产品的包装一致。
  • 我们不需要立即知道 KIND Snacks 是什么时候成立的以及他们的使命:这些都是为导航链接而保存的。

2. 轻松导航

这给我们带来了下一个启发性的设计技巧:用户必须知道如何绕过您的页面。 精心设计的导航显示了合法性、可信度和权威性。 所有客户都希望轻松导航,否则他们会快速点击您的页面。 直接从主页为他们需要的页面提供清晰的路径。 使导航菜单在页面顶部可见,并以层次结构组织链接。 为每个导航链接编写巧妙但清晰的副本的奖励积分。 对于这个例子,以令人垂涎的 Slim & Husky's Pizza 为例。

Slim & Husky 的披萨主页

为什么我们喜欢它:

  • 右上角的菜单导航再好不过了。 每个可点击的导航链接中都有简单而直接的号召性用语。
  • 字体和颜色与品牌一致。 大标语将您的视线吸引到右侧,导航链接的样式相同,位于正上方。
  • 两个导航选项的简单而智能的分层可帮助用户轻松四处走动。 更常见的点击,如菜单、订购和位置,首先出现。 不太常见但仍然很重要的商店、媒体和活动更小更轻。 我们肯定会考虑从他们那里订购披萨!

3. 迷人的心情

每种颜色、字体、图像和线条都会在心情、色调和氛围方面对游客产生不同的影响,因此每个决定都很重要。 好消息是,您的公司或品牌在提出其使命和目标时可能已经集思广益。 因此,在设计您的主页时,只需选择符合您心情的元素即可。 但是,您希望您的用户和消费者对您的产品的感受应该在最初的三秒内传达出来。

对于这个例子,我们求助于 Airbnb,它知道如何推销情绪。

爱彼迎主页

为什么我们喜欢它:

  • Airbnb 知道他们出售独特的住宿,所以很自然,当您点击他们的主页时,您的旅行癖会立即激活。
  • 使用整页图片非常强大——用户立即希望在 Airbnb 正在销售的冒险中看到自己(更多关于以下整页图片的力量)。
  • 它包括大多数访问者在前面寻找的搜索表单,可以立即将这种情绪转化为有意义的点击。

4.整页图片

由于 65% 的人是视觉学习者,因此使用整页图片是吸引观众的一种方式。 但是,不要仅仅因为它看起来很时髦就粘贴任何旧图像。 确保使用清楚地表明或支持您提供的产品和您的业务的图像。 使用能够捕捉情感、推动行动并以视觉方式讲述您想要讲述的故事的图像。 使用图像时,文件大小较小的高质量图像(TinyPNG 等工具可以提供帮助)并用于向图像添加替代文本,以使使用屏幕阅读器的人可以访问它们。

有关高效图像的示例,请查找 4 Rivers Smokehouse 以外的内容。

4 Rivers Smokehouse 主页

为什么我们喜欢它:

  • 图像立即使我们想要产品。 世界上没有任何作品能像令人垂涎的形象那样畅销。
  • 如果单击此链接的人不确定 4Rivers 单独读取的名称是什么,那么这张图片肯定会回答这个问题。
  • 这张图片肯定会吸引 4River 的客户群。 与标题配对的图像营造出一种高需求感,这意味着该产品一定值得卷土重来。
  • 该图像是标语和“在线订购”按钮放置的适当对比度和焦点,顶部有足够的空间用于清晰的导航栏。 请记住选择一个既迷人又能为文本导航留出足够的负空间的图像。

5. 恰当的号召性用语

所有网站都希望访问者在访问其网站后采取行动。 号召性用语 (CTA) 并不总是立即推动销售,但它可能会引导客户进入销售渠道。 在设计主页时,CTA 必须与其他必要的按钮合乎逻辑地放置。 它可以是“立即订购”或“免费试用”或“了解更多”。 一个简单但有效的 CTA 会告诉他们下一步该做什么,这样他们就不会不知所措或迷失方向。 CTA 也应该在视觉上引人注目,最好是与主页的其余部分形成对比色,以便它弹出。

看看下面 FreshBook 的绿色 CTA 按钮。

FreshBooks主页

为什么我们喜欢它:

  • CTA 可以很好地利用对比度和定位。 虽然原色图案是浅蓝色,但绿色调是很好的按钮颜色。 加上用户可以“免费”开始使用,肯定也会获得更多点击。
  • CTA 旁边的统计数据——97% 的小企业主推荐 Freshbooks——正是那一刻摇摆不定的客户需要看到的鼓励。
  • 虽然有一个信息标题和一个小的产品简介,但该页面主要集中在让用户点击该按钮。 另外,你的眼睛不禁低头看到提到 Freshbooks 的大公司和出版物,为 CTA 提供更多可信度。

6. 将福利放在首位

描述您的工作不仅很重要,而且为什么您网站上的人们也应该关心您的工作。 潜在客户想知道从您那里购买的好处,因为这将迫使他们留下来。 保持副本轻巧且易于阅读,并使用客户的语言。 对于一家预先销售福利的公司,请向 Evernote 学习。

印象笔记主页

为什么我们喜欢它:

  • 好处再清楚不过了:“驯服你的工作,组织你的生活。” 然后,视线路径会将您引导至其号召性用语“免费注册”。
  • 它在主页上以简单的白色字体列出好处做得很好,不会太分散注意力,并以易于理解的副本捕捉产品的精髓。
  • 该主页充分利用整页图像及其标志性的亮绿色和白色高光,使转换路径脱颖而出。
  • Evernote 还通过 Google 提供一键式注册流程,以帮助访问者节省更多时间。

7.极简主义

正如我们之前所讨论的,极简主义有望成为今年的顶级网页设计趋势。 想想主页上的时尚和复杂的效果。 更少的拥挤,更多的呼吸空间。 一个很难的问题,你的主页需要完成的所有事情。 但是,如果用户能够快速清晰地阅读和查找信息,那么这比无法加载的浮华图像或视频更重要。 考虑用轻巧简单的 CTA 按钮替换蓬松的消息或库存图像,并消除它们周围的干扰。

对于一个总是时尚和简约的网站,我们转向 Medium。

中型主页

为什么我们喜欢它:

  • 这个替代主页上充足的空白使其周围的一切都清晰可见。 在此页面上,目标是让用户下载 Medium 应用程序,因此该页面是围绕该功能设计的。 网站的其余部分仍然存在于导航链接中,但在这里,开发人员知道他们当时的目标是什么。
  • 通过使用文本链接而不是电子邮件,Medium 使注册变得容易。 这对于移动网站来说是个好主意。 当用户低头看他们的手机寻找文本链接时,不要离开这个页面。
  • 主页使用浅色字体,以保持极简主题。 绿色的流行音乐变得更加有效。
  • 很好地利用社会证明让访问者开始点击。 “Popular on Medium”和“Staff Picks”部分让用户知道在哪里可以找到高质量的内容。

8. 拥抱视频

如果您花时间在社交媒体上,就会知道每个角落都有视频。 网页设计也正在通过在主页上播放卷轴或短视频的页面来拥抱视频趋势。 这让了解您的公司成为一种被动活动,用户可以简单地坐下来通过简短的视频演示查看您的产品的全部内容。 但是 - 它必须吸引人或引人注目,否则用户不会长时间停留。

如果您考虑在主页上使用视频,请确保您有明确的目的和计划。 考虑加载时间以及视频如何增强您网站背后的目的。 您的产品或公司是否是用户必须在采取行动之前看到的东西?

例如,请参阅 A24 胶片。

A24电影主页

为什么我们喜欢它:

  • 它肯定回答了必要性问题:一家电影公司肯定适合在其主页上播放整版视频。
  • 看到该视频是即将上映的电影项目的预告片,它立即告诉用户美学和产品是什么。 这只是你必须看到运动才能完全理解的东西。
  • 在主页顶部,A24 提供了一个简单的导航栏,用于了解更多信息或联系方式。 它知道这个网站上的用户最有可能想了解电影制片厂,然后想联系某人以获取更多信息,因此找到它再容易不过了。 所有这一切都有一个完整的视频来启动!

为您的下一个主页感到鼓舞

您的主页就像一个握手。 它需要给人留下第一印象,并鼓励用户留下来了解更多信息。 在他们决定成为客户之前,他们会查看您的主页,以了解您销售的产品、为什么这对他们很重要,以及他们如何从您提供的产品中受益。

一个出色的主页应该至少包含上面提到的一些元素,如果不是全部的话。 希望通过查看这些示例以及它们的工作原理,您会受到启发,尝试一种最能传达您身份的主页设计。 然后,您可以返回创建令人惊叹的主页以供所有人查看!

下载免费电子书:你应该知道的 65 个网页设计术语
下载 PDF