极简主义页面设计的7的方向

当谈到极简主义时,不要认为它更容易只是因为它更简单。因为有较少的元素,你必须提供相同级别的可用性(可能更好)与更少的接口。为了平衡美学和功能,最低限度的网页设计的定义是无畏地使用空间,令人惊叹的视觉效果,引人注目的印刷术,以及对内容本身的整体关注 – 而没有别的。

我们把这些技术称为极简主义的支柱,下面我们列出了基于我们建立和欣赏网站的经验的七个最有用的。毫不奇怪,极简主义正在成为今天的流行风格 – 它直接关系到许多现代网络设计趋势,你也会在下面认出。

  1. 负空间

大多数人与极简主义相关的主要设计元素是空间…特别是负空间。和很多。

但正如我们在人类眼睛的网页设计中所描述的,最小的设计不仅仅是一个无色的广阔空间所包围的小视觉。风格还包含任何颜色的空间,虽然纹理不包括在此上下文中。白色,黑色或非常黑的背景是最受欢迎的,但一些设计师还通过全彩色背景表达负空间。

如下所示,Lindvall A&D在首页上使用了简单的导航(以及稍后将描述的其他简约元素)的明亮水色背景,以吸引用户进入建筑公司的网站。


照片来源:http://www.jonaslindvall.com/

负空间用于操纵用户的视觉流。作为一个规则,元素周围更负的空间,更多的眼睛被绘制到它 – 你可以看到这是一个强大的工具在一个简约的布局,当你只有几个,但强大的元素。

此外,负空间允许元素的更全面的组织,防止设计压倒用户。负面空间对内部页面特别有用,您可以在Lindvall的更详细的着陆页上看到以下内容。


照片来源:http://www.jonaslindvall.com/

慷慨的负空间也创造了一种奢侈的感觉。对于这个建筑设计公司来说,这种处理方式很有意义,考虑到他们如何看起来很复杂,并且注意到页面最重要的部分:他们的工作的图像。

在这一点上,请记住负面空间的目标是吸引更多的注意内容本身。内容优先设计是极简主义哲学的核心 – 我们通常与简约设计相关的裸露美学只是实现这一目的的一种手段。

使用负空间是一种技能本身。有关更多技术信息,请下载我们的免费电子书在Web UI设计中的白色空间的禅。

2. 大副和生动的照片

对于认为纯粹的极简主义网站感觉太遥远的设计师而言,超大的照片增添了一种舒适的熟悉感,而不占据前景。


照片来源:https://makgoods.com/

最简单的设计,大标题和大图像中最突出的艺术品形式是由一个戏剧性的图像或滑块放置在靠近卷轴的顶部。

这使得整个世界的情感联系和大气设置 – 所有依赖于照片的内容,同时保留最简单的设计的简单的界面。

然而,选择照片时,请记住一个关键的提示:所有的视觉极简特征应该出现在照片中,否则你失去了优势。例如,选择由充足的负空间 – 膨胀的天空或如上所述的空白墙组成的高清晰度照片。选择一个繁忙的照片充满分心的项目只否定了周围的简约界面的好处。

 

3. 戏剧性的排版

与斩波块上的大多数其他元素,每个网站不能做的没有是词。由于强调被添加到剩余的元素,通过扩展重点被添加到排版。美丽,锐利,甚至定制排版是一个最小的框架中的完美的焦点。

照片来源:Hibou Digital通过awwwards

印刷术带来即时焦点的词和内容,同时制作一个更大的有趣的视觉。正如我们在Web UI Trends Present&Future:Typography中所描述的,最小的设计和排版的最令人印象深刻的例子通常包括粗体样式(粗线条)和有趣的字体(例如标题的优势字体与其他内容的中性字体配对)。

 

4. 美丽的对比

白色背景是极简主义设计师中的一个受欢迎的选择,因为它是对比度的完美画布。简约设计,黑色或白色背景的标志通常覆盖着小的多彩元素或粗体图像。

如人类眼睛的网页设计中所述,设计师可以创建与颜色,大小,形状,位置和尺度的对比度。对比引起对某些设计元素的注意,但也有助于创建可识别的视觉层次结构。

摄影师Jorge Riera的网站使用对比,以美丽的方式,逐页更改。在主页上,一个大的白色画布包括简单的单线导航和大图像,屏幕底部为黑色,粗笔触和大胆的感觉。

移动到“我是谁”页面的排版和尺寸对比的一个教训 – 自定义刻字与简单的无衬线字体和超大字体相比,许多设计师认为更适合显微镜而不是身体拷贝的大小。


照片来源:http://www.jorgerieraflores.com/。

通常,我们建议反对这种策略,由于可访问性和可用性问题,但小身体复制是可以接受的,因为它不是焦点。相反,大多数页面都占据着图像和工作的例子(当你向下滚动),这对于一个艺术总监可能更喜欢显示而不是告诉的意义。

5.愚蠢的简单导航

极简主义符合汉堡包图标。

一个简单的设计美学配对与最简单(和最有争议的)导航工具。即使是最小框架的退伍军人的设计师正在为汉堡包图标进行传统导航,以进一步修剪UI元素的数量。


照片来源:http://thru-you-too.com/#!/

在实现汉堡菜单以帮助简化您的界面之前,请确保您正确的原因。正如Adobe UX Designer Sandyha Talwalker建议的,首先了解导航设计背后的主要,次要和第三方功能。

记住,汉堡菜单还导致导航项目的可发现性较低,而对于44岁以上的人来说,它们可能不太清楚(如可用性问题的Linn Vizard指出的那样)。

知道你的用户和上下文,然后决定汉堡包菜单是否有意义。不要只是因为它看起来时髦,否则你会最终隐藏导航选项,必须很容易被发现。

 

6.视觉和谐

为了最有效,最小设计框架需要坚实的骨干。视觉组织的关键组成部分包括强网格,视觉平衡,以及对齐的密切关注。

强网格是组织的基础。网格 – 通过战术使用负空间建造 – 让设计师以一种沟通目的的方式放置和排列元素。

这也是非常重要的是要澄清,对齐方式不同于中心的内容。

虽然许多最小的设计包括在屏幕中心的大量内容,它不是唯一的解决方案。元素可以沿着网格在任何地方对齐 – 文本,特别是可以对齐到左边,右边或中心。

下面的Arko做了很大的工作,混合和匹配对齐方式,创造视觉的兴趣和平衡,同时使用大量的空白。


图片来源:http://www.arko.co.nz/

当谈到极简主义时,许多人跳到完全对称的概念,但这不是必要的。因为内容可能是简单和流线型的,最流行的方式来实现这一点是通过大和小元素的配对,彼此平衡。

视觉平衡有四种形式:

  • 1.水平对称:屏幕的两侧具有相等的权重,具有相似的元素分组。

    照片来源:Hungcwot通过awwwards
  • 2.近似对称:屏幕上的元素不同,但视觉重量相同;这通常通过将大量空间或一个大元素与较小元素的分组配对来实现。

    照片来源:Squarespace
  • 3.径向对称:设计的焦点从屏幕中心开始,以几乎同心圆形式向外移动,例如下面的Carlo Barberis站点。

    图片来源:http://www.carlobarberis.com/en/
  • 4.不对称:对象被设计为在屏幕上有目的地相互对立,形状,颜色和对比风格的尺寸。这可能是最困难的布局执行得很好,考虑只有一个视觉上有趣的布局和混乱混乱之间的细线。

    照片来源:Julie Flogeac via awwwards

 

7.平面设计演进

虽然最初定义由丰富的明亮的颜色,平面设计已经降低,现在工程异常良好的最小框架。

技术网格化,因为在视觉规划和内容本身的使用中具有相似的特性。由于平面设计不强调设计技巧,剥离的概念与极简主义的哲学非常吻合。这种组合在现代网站中非常常见 – 最小的视觉层次结构强调了UI元素(如图标和颜色)中平面设计的触动。


照片来源:http://wonderfulcolorado.karshhagan.com/

当谈到比较平面设计和极简主义时,设计师和博客Addison Duvall描述它最好的食物类比:

“如果平面设计是一个时髦的新成分用于所有的最繁华的餐馆,那么极简主义是经典的食谱,最好的厨师都提出了新的想法的菜肴。

因为平面设计是一种视觉美学,​​而简约主义是一种设计哲学,当你结合来自每个学科的技术,你可以享受两个世界的最好的。您的设计仍然高度关注内容,但由于平面设计的美学价值,它仍然看起来很丰富。

结论

如果你认为创建一个简约的网站就像拿走一堆元素一样简单,再想想。极简主义需要锐利的眼光和来之不易的专业知识,如果处理不当可以作为一个看起来不好,什么都没有的网站。在设计极简主义时,请记住这七个要素 – 在将它们编排到一个令人惊叹的以内容为中心的网站之前,您需要掌握每种技术。

,

关注微信公众号

上一篇文章
外贸网站极简主义页面设计的原则
下一篇文章
50个极简主义外贸网站设计
菜单