即使您不熟悉术语英雄形象,您也很可能知道一个是什么。这是您首先访问一个像横幅和欢迎垫的组合一样的网站时,你先看到的那种大而突出的形象。

几乎每个网站都有一个英雄形象。在某些网站上,英雄形象在别人身上定期改变,多年来它仍然是静态的。许多网站也使用滑块,一组旋转图片和头条新闻作为英雄图像。

英雄形象的工作是创造品牌参与。因为这是访问者在网站上看到的第一件事,这通常是让他们决定是否留在该网站或导航的因素。因此,如果您想建立一个吸引人的网站并通过屋顶发送您的访客参与,请确保为您的品牌设计完美的英雄形象。

蛋糕的网站英雄图象制作业务
是你自己的英雄,通过橘子嘘

如何为你的网站创造完美的英雄形象:
- - - - - -

什么是网站英雄形象?
- - - - - -

你每天都看到它们。HERO图像是您在主页上看到的大型精选图像。他们是你在网站上看到的第一件事,一个大胆的品牌介绍(即使品牌本身也不特别大胆)。

以下是一些网站英雄图片的例子:

显示孩子的手的英雄形象拿着一个桃红色玩具熊
网站设计由Vilius Balciunas.
温暖的英雄图像,以逃避观众的人
网站设计由帕特里克
白色和红色网站,包括两个杰克罗素梗
网站设计由Orangedan

英雄图像被定位为您访问网站时的第一件事,因此它们设计用于挂钩您并让您通过网站滚动。英雄图像通常用于促进特定的优惠或内容,但情况并非总是如此。案例总是如此:精心设计的英雄形象展示了其网站的品牌清楚。

显示kettlebells和白色文本的黑白英雄图象
网站设计由Vilius Balciunas.

英雄形象通常是主页上的最大图像和一些网站上,这是唯一的图像。他们可以点击 - 但他们不必是。同样,他们可以拥有文本 - 但他们没有必要。The goal here is to design a website hero image that connects with visitors and keeps them on your website long enough to do the thing you want them to do, whether that’s buy a product, read or watch your content, download something or interact with others on the site.

是什么让一个好的英雄形象?
- - - - - -

一个好的英雄形象是展示,而不是讲述。

它在图像中显示你的品牌,但不是以标识的方式。一个标志象征性地总结了你的品牌,而一个英雄形象是一个网站访问者可以期望从你的品牌的体验的快照。

一名男子坐着,面对冠状病毒云风暴
网站设计由Mnoriega.
白色网站与瓶装产品和碗咖啡豆的图像
网站设计由Prismonline

一个设计良好的英雄形象包含多个组件。虽然英雄的形象和他们在网站上看到的一样独特,但他们都包含了相同的精心设计,以吸引和维持访问者的注意力。这些设计选择是:

  • 使用标题的图像
  • 一个与网站的品牌和目的相关的形象
  • 清晰的行动呼吁
  • 高质量的图像
  • 响应性
  • 清晰的品牌与网站设计的其他部分相结合

这听起来很多,但请相信我们,设计一个有效的英雄形象遵循许多相同的原则,设计一个网站的其他部分。继续读下去,了解更多设计良好的网站英雄形象的元素。

使用标题

一个好的英雄形象必须与标题合作。即使是最聪明的副本也不能挂钩访问者的注意并自己卷起它们,也不能成为最好的形象。但是,一个强大的标题和完美的图片是您网站的英雄形象的完美动态二重奏。

显示一个男孩和一个人的例证样式网站设计在龙虾小船的,当另一个男人时会带来龙虾陷井
网页设计DSKY

看看图像和标题复制如何在上面的设计中一起工作DSKY。在观众甚至读取段落中解释的段落中的段落是缅因州的投资公司,英雄形象讲述了这一品牌的很多。It shows they’re based in New England, they promise to help you pursue financial independence and by trusting your money to them, you can achieve the kind of lifestyle depicted in the image: spending time with loved ones, pursuing hobbies in a picturesque setting, all because you have the financial security to do so.

蓝色和白色网站设计与与屏幕一起使用的人的半平的图象
网页设计Mnoriega.

Mnoriega.英雄形象设计做同样的事情:它使网站的目的是从现场完成装载的那一刻到游客的目的。该插图以吸引人的方式可视化复杂的主体,易于掌握方式。

相关的图片

它听起来很明显,但值得讨论:您为您的英雄形象选择的图像必须与您的网站和品牌相关。

这并不意味着抽象图像无法工作。这绝对可以,只要它适用于您的其余设计。这可能意味着一种几何图案,可以在品牌的调色板中创造有趣的视觉纹理或刷子海。

与蓝色嗡嗡声导线的黑网站英雄图象在白色文本后
网站设计由MercClass

最好的图片不仅是相关的,而且是高质量的。不要在低于高清图像的东西上便宜——人将要请注意,将要影响他们如何看待你的品牌(不是好的方式)。

你的英雄形象不必一成不变。很多品牌,比如fivefootsix,在主页上具有动画的英雄图像。

Fiffootsix Hero GIF

如果您的品牌是动态的,异想天开的或乐趣,那么动画的英雄形象可能是正确的选择。如果您是一个动画师或一个提供或专门从事动画的创意机构,那种英雄形象很可能是一个没有脑子的。同样,如果您是视频的视频家或视频是您提供的关键部分,则实时视频可能是最完美的英雄形象,以迷住您的网站的访客。

但这是可以使动画英雄形象强硬的东西:动画可以减慢网站的装载时间。较慢的装载网站是一个较高的弹跳率和较低的搜索引擎排名的网站。但多少动画速度减慢了您的网站取决于几个因素,如果您可以将此放缓至最低限度,则动画的英雄形象的福利可以超过其缺点。

让动画放慢你的页面的一种方法是用CSS而不是Javascript来创建它。您还可以通过消除任何同步动画和/或将动画延迟几分之一秒来加快页面速度。使用第二种策略,您就为页面的其余部分提供了足够的时间来使用浏览器的能力加载,而不会让查看者等待。

如果你的动画是一个gif,你也可以压缩文件以优化它你的页面的加载时间。

一个明确的CTA

对动作(CTA)的调用是文本的一点,通常在一个按钮或右边的一部分中,告诉观众采取特定操作。您的英雄形象欢迎访客到您的网站,并与您开始旅程,但旅程并没有结束那里。您的英雄形象应该使访问者的下一步明显,并且可以做的方式是一个明确的行动呼吁。

五颜六色的网站以一名微笑的妇女为特色
网站设计由Prismonline
显示一个人和红色CTA按钮的网站设计
网站设计由MercClass

在您设计英雄形象时,请考虑设计的层次结构和平衡。平衡只是意味着以感觉,良好,平衡的方式铺设图像和文本。它不能太靠近或者太远了;它不是在一边束缚,而另一侧矗立在鲜明的情况下,它不仅略微略微到左(或右)或更高(或下方)图像的中心,足以使图像感觉不对准。

等级制度这意味着观众的眼睛会跟随一个清晰的进程,在这个进程中,信息会有逻辑地呈现出来。你的读者应该先看你的标题,然后是副标题,然后是任何补充文字,最后是你的行动号召,你选择的图像应该有助于这一进程。

显示有文本的网站设计一个人
网站设计由dmitrij.

当您的层次结构不清晰时,读者会感到困惑和厌烦,因为他们处理您以错误的顺序呈现的信息。这可能意味着在知道他们被要求做什么之前就看到行动号召,在知道你的品牌名称之前阅读标语,甚至完全错过标题。

敏感英雄图像尺寸

今天,超过一半的网络流量是由手机驱动的。这意味着一个响应的网站 - 如果您想与您的目标受众联系,那么响应的英雄映像是不可谈判的。响应设计是设计的设计,响应用户,通常是指适应它们显示的设备的网页设计。

选择网站英雄图像时,请务必测试不同屏幕上的样子。图像的任何关键部分都切断了吗?是否有任何细节或复制难以查看/阅读?无论您的访客使用,您的英雄图像都需要保留其有效性并传达相同的信息。

黄色和灰色的网站与黄色和白色的文本在不同大小的屏幕
网页设计迈克·巴恩斯

当你与英雄形象设计师一起工作时,与那些在创建响应式图像方面有经验的人一起工作,他们可以创建不同屏幕尺寸的英雄图像。

咖啡网站在不同大小的屏幕上
网页设计迈克·巴恩斯

为网站的其他部分定下基调

一般,访客在网站上花费不到15秒在离开之前,或者用分析学术语来说就是“弹跳”。15秒的时间不足以以任何有意义的方式与你的网站进行交互。这就是为什么你的英雄形象能够吸引访客的注意力,并立即传达给他们,你的网站和你的品牌作为一个整体就是他们所寻找的。

这是你的访客通过你的网站旅程的第一步。与此相关的设计被称为用户体验(UX)设计。有效的UX设计手工携带网站访客并通过网站指导他们的逻辑结论,使游客觉得旅程的每一步都是逻辑的,遵循自然进展。当您使用UX设计器创建您的网站时,英雄图像展示位置将成为设计计划的一部分。

为你的品牌设计正确的网站英雄形象
- - - - - -

如上所述,您的网站Hero Image发挥着重要作用:从您的网站和访问者开始谈话。将其视为您品牌的灯塔。如果它与您的品牌审美不匹配,准确地描绘了您的品牌的个性或使其其余的网站可以保留,游客不会在您的品牌中获得多大信任。

网站以衣服的一个女孩为特色,用过滤器灰色灰色
登陆页面设计粉末点设计
网站上有三个彩色的3D渲染怪物
网站设计由VisualMedia.

通过参考您开始设计英雄映像品牌标识。你为什么选择你最初选择的颜色,形状,字体和整体美学风格?为那些为您的英雄形象的灵感的设计选择。当您与您的品牌身份合作时,以确定您的英雄形象的正确方向,也可以进行市场研究。

市场研究还涉及测试不同的英雄图像。测试英雄图像的一种常见方法以及网页设计的其他方面,是做A / B测试。使用A / B测试,您可以使您的网站的一半是您的主页的一个版本,一半看到另一个版本。然后,您可以分析反弹率,点击每个版本的速率和其他统计数据,并确定您的受众更好地共振。

拯救一天与惊人的英雄形象设计
- - - - - -

为了少于最好的英雄形象,可能意味着较短的访问,少点击,少参与和更少的转化。不要在网站上使用低质量或品牌的英雄形象来妨碍您的品牌的成功。与经验丰富的网络设计师一起使用,为您的品牌创建完美的网站英雄形象。

需要一个设计令人惊叹的英雄形象吗?
我们的设计人员可以确切地创建所需的内容。