北京网页设计:使用Hero Header充分利用您的设计

2019.08.16 mf_web

104

目前网页设计的最大趋势之一是使用大图像。而不只是大而且完全超大的图像,似乎在屏幕上显现。在页面顶部使用时,通常称为英雄标题。

你如何利用这一趋势?您需要什么工具才能开始使用?在这里,我们将看看英雄标题,使用它们的提示,已经在趋势之上的网站的优秀示例,甚至一些免费赠品供您下载和使用。北京网页设计

什么是英雄标题?

英雄网站标题

英雄标题是在您的主页或任何网页顶部使用英雄图像,文本和导航元素。英雄标题可以以多种方式使用 - 作为带有文本的图像或图像,图像滑块,固定图像或视频或动画图像。设计可以是现实的或绘制的。

英雄形象是您在网站上看到的第一件事,旨在将您带入页面。它应该具有强烈的焦点和视觉兴趣。

Hero标题强烈关注视觉效果,并且通常依赖于简单的排版,最少的颜色选择和具有基本形状的用户界面元素。大多数设计元素都位于图像的顶部,通常采用策略性设计,使文本适合屏幕上的特定位置。品牌,导航和其他工具通常围绕外边缘放置 - 通常是左上角和右上角 - 以保持对图像本身的关注。

Hero标题适用于各种网站设计,几乎可以用于任何设计风格。视觉上令人愉悦的趋势真的只需要一个关键的东西 - 一个惊人的形象。

使用英雄标题的提示

哎呀

一旦你决定使用英雄标题,设计时就要记住几件事。设计需要干净,元素不要妨碍主图像,图像或视频。在这种设计风格中,创建元素分离至关重要。在使用英雄图像进行设计时,请注意以下几点:

  • 包括品牌。通常这位于左上角。选择所有白色或黑色的品牌标志或徽标,而不是有很多颜色的东西。

  • 去大胆的用标题和版式。有了大照片,但刻字将有助于吸引用户的注意力。

  • 在导航元素和辅助类型方面,与排版相比是微妙的。坚持一个大图像和一大块文字; 让其他一切都在设计意义上回归。

  • 注意颜色选择。如果您使用彩色图像,请坚持使用黑白两色。如果图像是黑白图像,请为文本选择简单或单色调色板。

  • 放置文本,使其不会妨碍图像的视觉流动。请勿遮盖图像的面部或重要部分。

  • 考虑既大又瘦的类型。(这很时髦,而且很容易阅读。)

  • 考虑使用幽灵按钮获得一定程度的微妙。(在之前的帖子中了解有关它们的更多信息。)

  • 使用固定导航。使用户可以轻松滚动并浏览页面。使用位于英雄图像内部和外部的导航。

  • 使用色调和淡入淡出来帮助文本弹出图像。所有文本都必须易于阅读才能有效。

  • 以深度和用户知道下一步操作的方式设计英雄标题 - 单击或滚动。包括视觉提示。记住英雄头不必填满屏幕; 它只是它的最顶层部分。

  • 在响应式Web环境中创建一个英雄标题。想想它将如何在较小的屏幕上呈现。什么图像和文字会显示?

鼓舞人心的例子

可以在整个网络上找到伟大英雄标题的示例。此系列包括实时网站和正在进行的作品。

粮食

英雄形象网站

杯茶

弗朗西丝

赠品

如果您只是从英雄标题开始,通常有两种类型的免费资源可供选择 - 由真实图像或三维渲染或绘图制作的英雄标题。根据项目的不同,任何一种风格都可以很好地运作。

下载英雄图像时要注意的事项是分辨率(图像需要大于最大屏幕宽度),编辑能力,文件格式和智能对象的使用(如果要移动元素)。与任何免费设计元素一样,请务必检查许可证,以便遵守条款。免费赠品通常可用于个人项目,但商业项目需要收费; 在使用之前阅读任何元素的所有细节。

2个免费的演示英雄标题

演示英雄标题

平英雄标题工具包

平英雄标题工具包

2复古英雄标题图像

复古英雄标题图像

创意套装

创意套装

免费英雄形象

免费英雄形象

虽然有很多免费赠品,但也有相当多的高质量付费英雄头资源可供选择。您可能会在付费标头包中获得更多选项。开心购物!

结论

Hero标题是我们在一段时间内看到的网页设计中最好和最具视觉吸引力的趋势之一。这项技术的优点在于它几乎适用于任何事物。想要以平面风格或简约风格或复古风格进行设计?使用英雄头。

你在项目中使用英雄标题吗?在评论中与我们分享。

北京网页设计

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP