处理空白:网站设计与开放的感觉

处理空白:网站设计与开放的感觉

用户体验时,我们总是试图纳入项目定制预紧器等小而艳丽的细节,丰富飞溅屏幕,弹出窗口或打开动画品牌标识,也就是说关注最小的事情以及以下趋势,可以添加哇因素。然而,总的来说,我们忘记了一个简单但基本的因素,使整个区别:空白。虽然它看起来像山一样古老,没有任何有趣和独特的东西,但这并不是完全正确的。

例如,一个网站的可读性就取决于这一点。此外,设计中还有许多其他的基本元素可以从中受益,比如call-to-action按钮、标语等等。今天的帖子旨在通过展示20个新鲜和精彩的网站设计来展示这一点。他们有一种强大的开放的感觉,通过熟练地处理空白。

网页设计中的空白

Creybot

Creybot明确阐述了该项目的理念。首页看起来非常宽敞,有很多新鲜空气可以轻松呼吸。选择最小的解决方案和平坦的风格,让艺术家实现一个绝对的和谐,吸引了网上观众。

Creybot

海登Bleasel

海登Bleasel利用一个独特的图像背景,给设计一个良好的自然感觉。虽然它能立即吸引眼球,但是一个简洁的标语以一种复杂的超窄字体出现在页面中间,并被空白包围,这让设计师能够为主页提供一种额外的开放感,并将内容置于一切之上。

海登Bleasel

α设计机构

阿尔法设计机构很容易体现出公司的精神。很像前面的例子,设计师巧妙地运用了单色的配色方案,并采用了微妙的排版和流线型的导航条,以给主页一个强烈的开放感。

α设计机构

粗体的人才

单纯使用颜色、干净单调的背景、精炼的重影按钮、几个短句,当然还有大量的空白,这些都让用户觉得登录页面很简单。这些技巧有助于自然地将所有的注意力引导到cta上,并传达必要的信息。

粗体的人才

弗兰克集体

Frank Collective有两个主要方向。第一个隐藏在一个汉堡包按钮下面,第二个在左边占据了相当大的空间。由于大量的空白和没有任何图像背景或装饰元素,列表样式的菜单成为页面的焦点。

弗兰克集体

Artistide Benoist

Artistide Benoist倾向于使用尽可能多的空白,用一吨的空白填充几乎每个部分。因此,网站可以被快速扫描。该方法与水平条纹布局完美协作,很容易让内容占据主导地位。

Artistide Benoist

Berengere Audo

贝伦盖雷Audo的个人作品集没有一个典型的设计;这位艺术家通过巧妙地利用空白,成功地从其他竞争者中脱颖而出。因此,首页看起来非常宽敞和干净,而友好的动画增加了整体气氛。

Berengere Audo

Engzell

Engzell用一个复杂的“欢迎”部分来欢迎在线访客,这个部分的特色是一个华丽的垃圾标语,增加了华丽的美感。设计师演示了如何轻松地在短语上添加重音,同时,通过使用空白将页面从混乱的外观中拯救出来。

Engzell

Motocharts

由于大量的空白和背景与前景之间的鲜明对比,Motocharts成功地将整个注意力引导到位于页面中心的搜索框上,并作为项目的主要导航工具。

Motocharts

尼尔·O ' reilly

Neil O 'Reilly成功地完成了一个极简主义的设计,使他的在线作品集从人群中脱颖而出。“少即是多”是关于这个项目的。经典的着色从来没有失败过,这个案例也不例外。增强了第一部分的美感,加强了整体的印象。

尼尔·O ' reilly

Myluck

Myluck采用了一个非常有趣的解决方案:每个部分都基于一个两种色调的调色板和大量的空白空间,以令人愉快的方式呈现内容。这样,设计师成功地突出了关键功能,并强调了最重要的东西。

Myluck

回声Brickell温泉

Echo Brickell成功地平衡了许多壮观的图像,通过组合部分呈现导航。由于只有一个词的标题、附带的智能小符号和大量的空白,页面不会让用户感到不知所措,相反,会将用户的注意力吸引到那些奇妙的片段上。

回声Brickell温泉

Mikii

由于它的大胆和适当选择的环境,主标题立即吸引了眼球。后者是基于郁郁葱葱,严重黑暗的图像背景,并具有一个小平面标志和流线型的导航栏紧紧放在顶部。这里的空白加强了整体效果。

Mikii

Redbadge

就像前面的例子一样,Redbadge很自然地强化了主要的口号,并通过使用大量的留白将其放在第一位。更重要的是,微导航图标和小而引人注目的基于文本的标识也脱颖而出。

Redbadge

我们是市场营销

如果没有经过深思熟虑的水槽、挡板,当然还有空白区域,模块化布局就毫无意义。虽然它可以描述内容,也可以部分地整理混乱,但是如果设计者忽略了这些因素,它仍然会看起来很混乱。我们的营销展示了如何正确地考虑这三个因素,并以最佳的方式使用网格系统。

我们是市场营销

未来

欧文妮以其干净的白色外观散发出一种纯洁和庄严的美丽。虽然标语与构图略有融合,但仍能吸引眼球。丰富的留白无疑使设计与众不同。

未来

查理以

Charlie Deets的在线作品集有着友好的氛围和有趣的元素,吸引着在线访问者,并鼓励他们前进。大量的白色空间在这种背景下工作得很好,给了设计一个可爱的开放的感觉,并为内容提供了一个坚实的基础。

查理以

马西Tupungato

Masi Tupungato是我们收集的另一个伟大的例子,它证明了在一个页面中放置4张丰富的图片不仅可以传达信息,还可以创建一个平衡的、结构化的布局。当然,这种效果是通过精心设计的大量空白、光滑的超窄型和微小的汉堡按钮来实现的,它们加在一起并没有转移人们的注意力。

马西Tupungato

真理的实验室

真理实验室有一个头版,在那里你可以感到舒适和平静。虽然它是基于一个纯色背景和功能只是一个大胆的口号,它看起来一点也不无聊。小而迷人的动画拯救了这一天。

真理的实验室

安德鲁McWatters

Andrew McWatters个人作品集的登陆页,其视觉上的吸引力来自于“少即是多”的哲学。通过保持内容和背景之间的最佳平衡,艺术家成功地使介绍部分成为关注的中心。

安德鲁McWatters

结论

无论你是需要以一种低调的方式显示大量的视觉效果,还是将整个注意力温和地引导到页面的选定部分,你所要做的就是适当地处理空白。这是实现这一目标的最廉价和最久经考验的解决方案。

我希望我们的20个不同的例子已经成功地展示了掌握这个基本但关键的组成部分的好处。

2020-03-19 17:37
相关热门