15个展现英雄力量的图片设计案例

The-Power-of-Hero-Image-Design__-tb-962x0_meitu_21

随着现在所有超级英雄的电影问世,我们认为忘记另一种类型的英雄是极其不明智的,网络英雄也是十分重要的。

尽管他们不能拯救我们的生活也不带着耀眼的披肩,英雄形象也是十分重要的,同时对网络设计或时间来说也是特别有效的一个工具。基本上来讲,英雄形象的定义实际是一种特殊的网络广告模式,通常情况下是十分巨大的位于网站的上方。

对那些使用英雄形象的网站,对于用户来说,这是他们点击进入后第一眼看到的内容。所以,将英雄形象定义成一个介绍是十分明智的,因为他们可以为整个网站奠定基调,让用户知道可以期待什么内容。

如果你有一个高级的英雄形象,他们会期待阶级和文化,如果你有一个特别丰富多彩的且有趣的英雄形象,他们可能会期待看到喜剧和玩笑内容。

无论你定下的基调是什么,让我们看一下这15个杰出的英雄形象的例子,从中受到启发并创建自己的英雄形象。

01. 热身

1

查看一下Juliana Bicycles VentureWeb 设计的英雄形象,由权利、动力、温暖和诱人四个相等比重的部分组成。活动中产品的照片,再加上一些简单的、优雅和信息性文本才真正把这整页图像变成一个英雄。

考虑在饱和度、对比、温度等方面加强你的图片,加上一些效果来带来更暖的色调或是更冷的色调。或者给你的照片加些滤镜带来突出的颜色,让你的英雄到生活中来。

02. 把线条作为头条内容

2

你听说过引导线吗?它本身没有什么引申意义,就是线条可以代领人们的眼睛去页面或设计的指定部分。

Tectonia Tectonia Studios 设计的这项设计,它的引导下虽然不明显但是十分有效。通过地球和金属线动画图形吸引读者的双眼一直关注在整个设计、从标头的商标到页脚链接。考虑水用引导下让你的消费者的眼睛聚焦在你的作品是那个!

03. 加入一些情节

3

为了真实添加英雄到英雄形象中,考虑一下在你的照片中增添一些行动和情绪。来看一下市场营销团队Fireworx的设计。他们使用了一个充满活力内容丰富的形象,立即吸引了用户的注意力到这个充满活力和有趣的图片上。

考虑一下将一些小的动力和活动引入到你的英雄形象中去。把它带进一个有趣的、充满能量的伙食激动的照片里,然后用简单且强力的任务作为结束。就如同Fireworx做的一样:思考,感受,回复。成为一个英雄从来都不简单。

04.用色彩吸引关注

4

色彩是十分重要的的,这你是知道的。所以当你设计你的英雄形象时,这是一个必不可缺的工具。来看一下 Phoenix The Creative StudioL’Avenir Dental Clinic准备的设计,将丰富多彩的对象转换成纯白时带来的冲击效果。

所以,无论是创造冲击效果,赋予它一定的含义还是仅仅在你的英雄形象里点缀一些新意。一定要谨慎使用颜色。

05.善用图像

5

插图可以为设计带来不同的效果这一点毋庸置疑,所以一个网站的英雄形象自然也不例外。来看一下Grain & Mortar Barcamp Omaha设计的迷人的复古风插图,它为时髦的、色彩斑斓的特征显著的插画放弃了图像的路线和选择。

英雄形象是你设计的,所以在不同的平台和样式上不断探索知道找到最适合你、你的公司、你的网站的那一个。

06.实体模型

你在用你的网站推广电子产品吗?无论是软件、应用还是介于两者之间,用实力模型在兼容的设备上截图,让你的用户知道他们看到的是什么。

来看一下 ManyManyPixels为应用Pomodrone 设计的干净、新鲜且充满信息的英雄形象。通过智能手机的模型,应用内容的截图能给予用户更多实体感受。配上简单的描述和链接,一些干净的排印你会得到一个极简单(且时髦的)英雄形象。

07.使用类似物

排印认为是字体的近义词是一个很常见的错误。有时候完美的解决排印困境并不是电子字体而是手写体

举例来说,来查看一下这个网站在它的英雄形象设计上的好看的字体。这个设计是为Dreaming With Jeff设计的。网站建立者Squarespace选择使用手写体。效果如何呢?非常独特、迷人的神秘英雄形象,这和网站其余内容的基调和风格完美匹配

08.试用纹理

纹理可以成就或者毁掉一个设计,所以最好小心谨慎地使用它。但对Quality Peoples的这个英雄形象,材质是设计的卖点。通过使用风格化的照片和一些粮食、小插曲和棕褐色过滤器,这个设计从一个日常服装网站转换成了一个吸引人的、粗糙的、复古的冲浪品牌网站。

因此,考虑试验结构如果你认为它适合您的内容和品牌。它能给平图深度,或一个新的经典的复古照片联系。

09.对称

许多聪明的人们都已经证实人眼会欣赏并被对称的事物吸引。所以,为什么不使用这一聪明的科学发现并配合使用镜像在你的设计中呢?

看一下2013 ‘Spree Conf网站的设计。它使用对称的图片,且他的导航蓝河其他元素都是中心对称的。这些对称的结果十分简单、便于导航、平衡和让设计更加有效。

10.摆脱网格

设计中,网格是最重要的。网站设计团队Float设计他们的网站时就知道这一点。让我们看一下他们将自己的英雄图形分割在两个分开的区域里,一个是图片一个是文字。

这个非常简单的科技帮助将图像分割开来,并让人的双眼在浏览网页时处于一种平缓、有逻辑的方式。更不用提,这个带有色彩块状结构让整个设计充满活力。

11.文字遇上图片

文字和图像结合的英雄图形并不意味着一场艰苦的斗争。实际上,你有许多快速、简单、时髦的方式来做到。看一下Jeremy Jantz Life In Greenville设计的这一简单但是有效的例子。

Jantz在这里选择一个相对简单的形象,并搭配同样简单类文字绑定在一个透明的黑色框架中,来保持事物的清晰和锐利。看,我告诉过你很简单!

12.极简

并不是那种闪光的、设计感很重的设计的粉丝?又或许你觉得那样设计不适合你的公司?考虑将你的产品只留下必需品来走极简路线。极简可以是很优秀、复杂、优雅和冷寂。如果你看过 Clapat Berger的设计,你会发现这样设计的英雄形象符合所有要求。

通过使用一个简单的图片提示网站内容,平面的的灰色背景和非常简单的文字,会给予英雄形象一个时髦、干净、和最简化的效果。对于一些极简设计的灵感,一定要看看这些美丽的提示和示例.

13.创建一个梦境

调整照片的颜色到特定的方式可以让你的英雄形象设计拥有一定的情绪和语调。听起来有点人工密集型,但是相信我,你不需要成为一个P图奇才将你的照片从单调弄到绝妙,尤其是考虑一定数量的过滤器听你差遣!

来看一下WILD JOHO’s设计的迷人英雄图形。它使用简单的照片、合适的颜色打造了一个梦境,带来了蓝色、紫色、灰色和红色,并在设计顶部覆盖一些时髦文字。

使用Canva’s时髦的图片过滤器,仅仅点击一下按钮,就将特殊的东西放在你的图片里

14.拼贴

当我们想到网站的时候,会想到的就是闪耀全新现代,但考虑将一些复古的魅力代人到你的英雄形象设计中去,让你的设计脱颖而出。

来让我们看一下Frances CloseFriends of Grand Rapids Parks设计的英雄形象。设计全部是由复古图像组合而成拼贴图、手型、和经典的颜色来设计的一个古怪的折衷设计。不要害怕在作品中加入自己的元素,放置元素或远离时不时抛光和闪亮的趋势!

15. 一个新观点

你有没有一个产品或服务你想通过图像藐视,却不确定?考虑翻转角度到一个有趣的方式,看看能否创建什么新东西。

就拿 Heather Luipoldthebar.com设计的英雄图像距离,从鸟瞰的角度而非通常的角度来描述这个产品(混合料饮品),最棒的是,使用一些大胆的文字隐藏在图像后,和纹理背景,都能带来一个独特、干净、美丽的英雄形象。

就如同常规问题一样,有些时候心得观点是解决问题的方法。

到你了

英雄形象就像第一印象。

你有没有看到一个很好使用英雄形象的网站呢?或者你有一些便利的技巧想要分享。无论是哪一个例子,都可以在下方留评论!