网站设计趋势:强烈的主页面形象与微妙的文字

Author: limo

这个网站设计的趋势是关于对比的…或者缺少对比。越来越多的网站设计出现了大而令人惊叹的主页面图像区域,但是文本元素更加微妙。这是一个巨大的主页面区域文本的改变,已经有一段时间了。


这些设计让您看起来与众不同,它建立了一种与其他网站的对比感,同时可能不会在设计本身产生太多的对比。


让我们看看那些带有强烈主页面图片和微妙文字的网站,它们可以帮助您为下一个网站设计项目产生灵感。


繁忙的背景,简单的版式



使用这种趋势最简单的方法之一就是将简单的排版与过度繁忙的背景相结合。


这正是Moooi在这里所做的,它有一个可以让您盯着看一整天的背景和更小的尺寸和重量比图像次要的简单文本。


好的是它仍然有一个很好的层次结构和足够的词汇来帮助您进入网站设计。这其中有一种微妙的平衡,可以让您在工作时不会感到压力过大,在这么忙碌的背景下,这会是一个很大的风险。


有限的文本



另一种充分利用这种网站设计趋势的方法是尽量减少屏幕上的文字量。如果主页面区域的其他部分包含大量的动作,它会自动感觉更加微妙。


在上面的例子中,有一个彩色边框的视频背景,标准的导航菜单,以及一个比一般情况下小的标题在底部角落。


text元素几乎是您最后看到的内容。它不是太大,使用了简单的字体,和它背后的一些视频缺乏对比。尽管如此,这个微妙的标题还是很不错的,有助于把视线吸引到中间屏幕上滚动的图标上。


放下文本大小和屏幕位置



您会发现很多带有这种网站设计趋势的小标题和副标题,这可能是因为屏幕上的实际大小或类型选项的重量。另一种使文本元素更加微妙的方法是改变屏幕上的位置。


中间的文本元素几乎是在向网站访问者喊话,这个位置承载了很多的视觉权重和隐含意义。


改变文本元素在屏幕上的位置,特别是将它们移到较低的位置或另一侧,可以弱化该元素的方式,使其更加微妙。


空间和色彩



在设计中利用主要图像、视频或背景元素的空间和颜色来创造文字的微妙。通过将注意力吸引到设计的其他部分,文本自然就不那么占主导地位了。


在上面的示例中,这是可行的,因为文本从中央屏幕中拖出,使用了较轻的现代衬线字体,颜色的变化在视觉上将您拉到屏幕的顶部。


这里有很多文本,但并没有您想象的那么多,更小的尺寸和更轻的字体选项在很大程度上促成了这一点。


小文字



如果您正在寻找一种可靠的方法,使文本成为一个微妙的元素,使它很小。


在上面的示例中,查找文本元素几乎要花费一分钟时间。背景图像是快节奏的动画,没有停止。颜色的选择引入了高对比度,但文字是如此的小旁边的主要图像,它似乎下降了屏幕。


如果您计算的话,您会发现主标题夹在屏幕的顶部,导航菜单在左边,版权声明在右下角。


对比鲜明的运动



虽然这里的很多例子使用有限的对比来创建微妙的文本,但反过来也可能是正确的。上面的三维旋转背景和静态文本元素之间的差异在上面的示例中实现了这一点。


文本元素几乎丢失了,因为屏幕的其余部分非常活跃。就像一个旋转的苦行僧,您不由自主地发现自己被移动的背景迷住了。有很多东西要看,速度迫使您坚持场景。


只有在主页图像的几次旋转之后,您才会关注文本。


尺寸



有时候,微妙的文字完全是意见的问题。如果背景和前景文本元素之间有大量的颜色对比,您可能不会认为这些词是微妙的。


但与其他项目和设计相比,上面例子中的文字大小相当微妙,这完全是一个视角问题。


此外,这种设计的微妙之处在于导航文本元素。它们很小,放置的位置很不寻常,字体很轻。


细衬线



衬线字体-除了平板-可以有一个更轻的外观比常规或普通的无衬线字体选项。对于现代的serifs来说尤其如此,它的特点是粗细的笔画宽度。


如果您想找一种更微妙的感觉,可以选择带有大碗和更宽的体位的字体。字母内部和周围增加的空间可以使它看起来更开放,更轻。


额外的字母间距



遵循上一个示例中的相同原理,更多的空间可以使文本看起来更轻更柔和。您可以选择字体,也可以用字母间距(字母之间的空间)或行间距(文本的行或段落之间的空间)。


更大的空间会让一切看起来更开放和空灵。


但这种选择有一个最佳点,如果字母间隔太大,单词就会对阅读产生挑战,并导致网站设计的可读性和可用性问题。谨慎行事。


单独的文本元素



在一组中出现的文本越多,屏幕上显示的文本就越大。


所以,如果您想让文本有更微妙的感觉,在文本块之间创建分隔。


在上面的例子中,标题和副标题在垂直上间隔,在不同的“网格线”上间隔,一个居中,一个移到中心的右边。这样的效果很容易阅读和理解,但是文字并没有太多的视觉分量。


与“幻想效应”相反



第一眼看到上面示例中的文本元素了吗?如果您点击进入实际的网站,很有可能左边的图片会吸引您所有的注意力。


当小文本不得不与花哨的效果、动画或图像竞争时,在您准备好之前,它很难被看到。这个概念和使用过度繁忙的背景非常相似,因为您的眼睛还没有准备好从效果切换到文本。


您几乎必须理解和清除意象的认知负荷,然后才有足够的精神重置,以集中精力阅读。


不对称的平衡



微妙的文字可以增加网站设计的美感,在上面的例子中,文字元素和照片创造了一种不对称的平衡感,帮助眼睛在元素之间来回移动。他们互相支持。


您可以先看图片,然后再看文字,然后再回去看模特手指上的戒指。虽然文本可能有些微妙,但它是理解和恰当参与设计的关键组成部分


总结


这种网站设计趋势的创意之处在于它是纯视觉的,您不需要改变您的品牌或整体网站设计理念来尝试它。因此,如果您想切换到您的主页,这是一个不错的选择。


它实际上还可以处理任何类型的内容,正如您从上面的示例中看到的那样,它具有广泛的应用程序。这是一种趋势,看起来很好,实用性很强。


相关阅读