设计世界中的阴阳:带有微妙文字的强大英雄形象

Tom Hanks once said, “I have gone through so many examinations of what a hero is, between World War II stuff and the astronaut stuff.”

汤姆·汉克斯(Tom Hanks)曾经说过: “在第二次世界大战和宇航员之间我经历了很多关于英雄是什么的检查。”

Often by the mention of the word ‘hero’, a memory is triggered — someone we idolize, someone we look up to, whose personality is our alter ego, or what we want to strive for. That might be Hercules or Dr. Martin Luther King. The concept is ‘perspective-specific’.

通常,通过提及“英雄”一词,就会引发记忆-我们崇拜的人,我们仰望的人,其性格是我们的自我意识或我们想要争取的人。 可能是赫拉克勒斯或马丁·路德·金博士。 这个概念是“特定于视角的”。

However, when we mention the word ‘hero’ and cross-refer it with website design trends, we stumble upon a unique phrase — hero images with subtle texts. Experts believe this is the lovechild of gracefulness and minimalism.

但是,当我们提到“英雄”一词并将其与网站设计趋势交叉引用时,我们偶然发现了一个独特的短语-带有微妙文字的英雄形象。 专家认为,这是优雅和简约的挚爱。

Take a look at this -

看看这个 -

Considered an ideal sample for the discussed trend, this has all the desired impact on the viewers. To sum up, all that you will be reading, you are looking at a trend that is soon going to be at a hero for modern for the modern web design in 2020. The sense of contrast along with the subtlety in colors and the stunning hero image areas is a soothing touch that is a serenity in the design modules.

被认为是讨论趋势的理想样本,这对观看者具有所有希望的影响。 总而言之,您将阅读的所有内容,都在展望一种趋势,该趋势很快将成为现代人对现代人的英雄 2020年的网页设计。对比感以及色彩的微妙和令人惊叹的英雄形象区域令人舒缓的触感,这是设计模块中的一种宁静。

Considering that it would help you have the edge over your competitors, your site needs to embrace the trends. And as an added incentive, this trend is not cumbersome to follow. We have set down the ground rules for you coupled with a complete concept of this trendy web design. Enjoy the read!

考虑到这将有助于您在竞争者中占据优势,因此您的网站需要顺应潮流。 作为一种额外的激励,这种趋势并不难遵循。 我们为您制定了基本规则,并为您提供了这种时尚网页设计完整概念 。 享受阅读!

含文字的英雄形象的阴阳趋向 (The Yin And Yang Trend of Hero Images with Subtle Texts)

We have decided to call this web design trend, the Yin and Yang trend considering its complete focus on the contrast features. The trend is not high on flashing its elements, rather, they are doing the next best thing — pleasing their viewers in terms of its aesthetic appeal. The design is spruced up via the hero images in addition to adding a certain depth to the content of the page.

考虑到其完全关注对比功能,我们决定将这种网页设计趋势称为“阴阳”趋势。 流行元素的趋势并不高,相反,他们在做次佳的事情-就其美学吸引力而言取悦观众。 除了向页面内容添加一定深度之外,还通过英雄图像对设计进行了修饰。

However, such said, this hero among the modern website design trends can only gain clarity when it is bifurcated. Let’s go ahead with that -

但是,这样说,这个英雄在现代网站设计趋势中 分叉时只能获得清晰度。 让我们继续-

第一部分:英雄形象 (Part I: Hero Images)

A tinge of this gave us a peek-a-boo when it came to bold typography. However, with hero images, the concept is straightforward. Much like its name suggests, it is all about hailing the image.

当涉及到大胆的排版时,这种色调给我们带来了窥视。 但是,对于英雄图像,这个概念很简单。 就像它的名字所暗示的那样,这全都在于称呼图像。

Image for post
Source: https://d3ui957tjb5bqd.cloudfront.net/uploads/2016/04/hero-image-examples-05-edge.jpg
来源: https : //d3ui957tjb5bqd.cloudfront.net/uploads/2016/04/hero-image-examples-05-edge.jpg

For the hero image, the most common features include -

对于英雄形象,最常见的功能包括-

  1. Fullscreen backgrounds

    全屏背景
  2. Large headers

    大头
  3. Rotating galleries

    旋转画廊
  4. Single-page designs

    单页设计
  5. Featured post content

    精选文章内容

第二部分:微妙的文字 (Part II: Subtle Texts)

How do you draw the eyes of our sites to the image? “Elementary, my dear Watson” — divert them from the texts. All that you do is insert strong imagery and place the texts around the image so that the client needs to move their eyes all across the image on the screen. That’s how you tickle their intrigue!!!

您如何吸引我们网站的目光? “基本,亲爱的沃森” —将它们从文本中转移出来。 您要做的就是插入清晰的图像并将文本放置在图像周围,以便客户需要在屏幕上整个图像上移动视线。 那就是你逗他们的阴谋的方式!!!

With a holistic representation of this responsive web design for the year 2020, now its time to get into its approach. One layer at a time? Are you ready? Let’s start!

通过这种响应式网页设计的整体表示 在2020年之前,现在该采取行动了。 一次一层? 你准备好了吗? 开始吧!

列出趋势的特征 (Listing Out the Features of the Trend)

This trend earmarked a significant shift from the oversized typographies that had been capturing eyes (literally) for some years now. The main appeal of the design trend can be tracked down to its uniqueness. There is an established sense of contrast in its presence that sets your site apart from the others in the business.

这种趋势标志着从几年前一直吸引人们(从字面上看)的超大字体出现了重大转变。 设计趋势的主要吸引力可以追溯到其独特性。 在网站中存在一种确定的对比感,使您的网站与企业中的其他网站区分开。

So, here’s to getting you unique!

所以,这是为了让您与众不同!

受限文字 (Limited Text)

We understand that texts on your page are essential to completely convey the core of your business. However, this is proven that crowded content on a site often does more damage to your conversion rate than good.

我们了解页面上的文字对于完全传达业务核心至关重要。 但是,事实证明,网站上拥挤的内容通常会对您的转化率造成更大的损害。

Taking this into account, this top web design trend for 2020 asks for a minimized content on the screen. Thus, you have the desired subtle content effect because the hero area will be reflecting all the action on the site.

考虑到这一点,2020年这种顶级网页设计趋势 要求在屏幕上显示最少的内容。 因此,您具有所需的细微内容效果,因为英雄区域将反映站点上的所有操作。

Image for post
Source: https://wordstream-files-prod.s3.amazonaws.com/s3fs-public/styles/simple_image/public/images/hero-image-infatuation.jpg
资料来源: https : //wordstream-files-prod.s3.amazonaws.com/s3fs-public/styles/simple_image/public/images/hero-image-infatuation.jpg

繁忙的背景,简单的版式 (Busy Background, Simple Typography)

Take a look below -

看下面-

Image for post
Source: https://www.artonicweb.com/learn/wp-content/uploads/2018/05/move-hero-image-2017.png
来源: https : //www.artonicweb.com/learn/wp-content/uploads/2018/05/move-hero-image-2017.png

What do you see?

你看到了什么?

An extensively active background with minimal content that has simple typography. This is what it means to ace this web design inspiration. You have a background that can continue to stare all day and content that has been intentionally made secondary to the imagery. This delicate balance works only when the image is not made overwhelming — so make sure to work that out!

内容广泛的活动背景,内容最少,具有简单的排版。 这就是获得此网页设计灵感的含义。 您的背景可能会整天继续凝视,而故意将其作为影像的次要内容。 只有当图像不被压倒时,这种微妙的平衡才起作用-因此请确保将其校正!

单独的文字元素 (Separate Text Element)

The larger the group of letters, the more attention you draw. So ‘divide and rule, but not the ‘Lord Minto’ way! Create a spacing in the texts, vertically or horizontally as you deem fit.

字母组越大,您越会吸引注意。 因此,“分而治之”,而不是“ Minto主”的方式! 在您认为合适的垂直或水平方向上在文本中创建一个间距。

放下文字大小和屏幕位置 (Drop Text Size and Screen Location)

With this design trend, one thing goes without saying — it is a delicate balance to bring out the contrast. Thus you often come upon smaller subheads and headlines to gauge the weight of type choices.

在这种设计趋势下,有一件事不用说-展现对比是一种微妙的平衡。 因此,您经常会遇到较小的副标题和标题,以衡量类型选择的重要性。

You can also opt to move the positioning of the screen. In case you place the text at the center of the site, it screams attention. Considering that this central position has a lot of implied meaning and holds a lot of visual weight, this is the ultimate place to hail your hero. Shift the content positioning to the sides of the image. This often softens the approach and hence, makes it subtle.

您也可以选择移动屏幕的位置。 如果您将文字放在网站的中心,它会引起注意。 考虑到这个中心位置具有很多隐含的含义,并且具有很大的视觉分量,因此这是向英雄致敬的终极场所。 将内容定位移到图像的侧面。 这通常会软化方法,因此使其变得微妙。

小文字 (Tiny Text)

So, we are talking about making the text subtle enough not to draw attention to itself. How do we do that? The best way out would be tiny texts on the page that takes viewers some time to locate. The content can quite well fall off the site or may look like it is falling off.

因此,我们正在谈论使文本足够微妙以至于不会引起人们对其注意。 我们该怎么做? 最好的解决方法是在页面上显示一些小的文本,从而使查看者需要一些时间来定位。 内容很可能从网站上掉下来,或者看起来好像掉了下来。

Image for post
Source: https://lh3.googleusercontent.com/YLlOdT8tCveuMJ1Okq6a5bngpW_pMNBCrmec2mZqFsVeyLJ9VPKq3rwu8Im20lXOk9wA=s136
来源: https//lh3.googleusercontent.com/YLlOdT8tCveuMJ1Okq6a5bngpW_pMNBCrmec2mZqFsVeyLJ9VPKq3rwu8Im20lXOk9wA=s136

微妙的衬线 (Subtle Serifs)

Speaking of website design trends for 2020, you know what would be ideal? Modern serifs that come with thin and thick stroke widths.

谈到网站设计趋势 对于2020年,您知道什么是理想的吗? 具有细而粗的笔触宽度的现代衬线。

Image for post
Source: https://creativetacos.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2018/04/97-Modern-Sans-Serif-Fonts-That-Are-Perfect-For-Brands-696x464.jpg.webp
来源: https : //creativetacos.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2018/04/97-Modern-Sans-Serif-Fonts-That-Are- Perfect-For-Brands-696x464.jpg.webp

That is subtlety personified with a lighter appearance as compared to that of normal or regular sans serifs. Talk about less weighted letters with increased space around and inside individual letters!

与普通或常规无衬线字体相比,这是一种微妙的拟人化外观,外观较浅。 谈论重量较轻的字母,并在单个字母周围和内部增加间距!

空间与色彩 (Space and Color)

The web design color trends are often the talk of the digital town. It is nothing short of fashionistas discussing the color for the Fall of the year, for the digital individuals.

网页设计色彩趋势 经常是数字城的话题。 时装达人为数字个人讨论了今年秋天的颜色,无非就是如此。

When it comes to the ‘hero images with subtle texts’ trend, this quotient is crucial. You would need to create text subtlety with the color and space used in the hero imagery, the background element in the design, or the video. This successfully draws the eyes of the viewers to other parts of the website design and makes the text less dominant.

当涉及“带有微妙文本的英雄图像”趋势时,这一商数至关重要。 您将需要使用英雄图像,设计中的背景元素或视频中使用的颜色和空间来创建文本细微之处。 这成功地将观众的注意力吸引到了网站设计的其他部分,并使文本的主导地位降低了。

While there are multiple ways to do it, the most proven ways include opting for smaller sizes of content with lighter typography.

尽管有多种方法可以做到这一点,但最有效的方法包括选择内容较小且排版较浅的内容。

对比运动 (Contrasting Motion)

Image for post
Source: https://designshack.net/wp-content/uploads/3dweblab.jpg
资料来源: https : //designshack.net/wp-content/uploads/3dweblab.jpg

Like what you see?

喜欢你看到的吗?

Here, there is a play to use subtle contrast with limited text. With the rest of the screen being in so much motion, the text is almost lost. Viewers are drawn and entranced to look at the backdrop. This whirling approach makes it almost inevitable to make a few rotations of the page prior to even concentrating on the image.

在这里,有一种戏剧可以在有限的文字中使用微妙的对比。 屏幕的其余部分运动得如此之快,文本几乎丢失了。 绘制并进入查看器以查看背景。 这种旋转方法几乎不可避免地在甚至集中于图像之前对页面进行了几次旋转。

Web designers all across the globe are seeking to perfect their move with this trend. The purely visual effect of the design adds a philosophical and aesthetic angle. Boosting visualization and usability, this trend will get you to the top of your business vertical and widely acknowledged, thereby increasing chances to boost conversion rate.

网页设计师 世界各地的人们都在寻求通过这种趋势来完善自己的行动。 设计的纯粹视觉效果增加了哲学和美学角度。 增强可视化性和可用性,这种趋势将使您在垂直业务中脱颖而出并得到广泛认可,从而增加了提高转化率的机会。

翻译自: https://uxdesign.cc/the-yin-and-yang-in-the-design-world-strong-hero-images-with-subtle-text-afcad71d4267

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值