不久之前,网页设计是印刷品的反映。列和行遵循刚性线,内容和图像锚定到固定空间。但随着HTML,CSS和JavaScript等工具的发展,布局设计的可能性也在不断发展。以下是设计师用于创建独特布局和推动新设计设计的9种实践
1.添加具有视差效果的深度
使用视差是一种给出布局设计深度的方法。分层图形,图像和文本,同时将其移动与滚动位置相结合,使布局更具动感和趣味性。这种效果的定义特征是移动前景中的内容比背景更快。
在Epicurrence(上图)的例子中,一个专注于户外活动的创意非会议,他们将精心设计的插图与视差相结合。请注意背景如何变大或变小,具体取决于您滚动的方向?Parallax让您感觉自己正在进入一个物理空间,而不仅仅是盯着平面屏幕。
Parallax是一种多功能的效果 - 这里是法国瓷器公司Jaune de Chrome,将带有文字的陶瓷图像叠加在一起,形成一种艺术和复杂的独特布局,就像他们的品牌一样。
2.使用重叠元素
如今,网站不再需要平整的独立盒子了。设计师将z轴与设计元素叠加在一起,意味着远离“干净”,自足的极简主义,带有文本,图像,颜色和图案层。
WebINTENSIVE是一家软件公司,在他们的项目页面采用三层方法,在一块图像上放置一张卡片,在一块颜色的顶部,将内容推到最前面:
图像上的分层类型是另一种使设计感觉不那么紧缩的方法。在这个来自品牌和设计机构Bauhem的例子中,他们对标题和正文文本使用延迟淡入效果,将它们分层叠加在单色背景图像上。这使设计不会感觉过于四四方方或基于卡片。
在英雄图像上浮动标题是设计师使用重叠元素的另一种方式。这是一个熟悉的设计实践,但一些网站采取了独特的方法,真正脱颖而出。
阿姆斯特丹环球公司采用这一基本概念并赋予其自身的灵感 他们缩小了他们的英雄形象,并将其标题文本的一部分浮动在其上,以进行创意布局设计:
3.使用偏移标题,子标题和列分解内容
并非每个版面设计都需要复杂的动画和其他装饰。简单地抵消元素和列可以保持布局不受对称的枯燥限制。
制药公司Alvogen使用这种交错设计方法来实现更有趣的布局:
4.使用水平卡布置内容
水平布局是保持设计过度拥挤的简单方法。它也适用于较小的移动屏幕,其中设计转换为相关内容的垂直滚动。
Hypergiant是一家为公司提供高级软件解决方案的公司,它使用横向卡片来处理一些最重要的内容:
这个网站关于Waangari Maatha,第一位获得诺贝尔和平奖的非洲女性,在风景照片旁边有引号:
免费电子书:网页设计101
掌握网页设计的基本概念,包括排版,色彩理论,视觉设计等等。
现在读
5.分屏
分屏可让您在布局中分解大块内容并最大化屏幕空间。将屏幕的每一侧专用于互补内容可以提供更强大,更统一的信息。
在这个例子中,食品工具包公司Ono使用带有滚动触发动画的分屏,为用户提供充满色彩和动感的体验。
电动自行车公司Cowboy还使用分屏,冷静,现代的摄影和简洁的复制品,告诉消费者他们的产品。
6.显示你的网格
在这个投资组合网站中,Hiro Shibata在其着陆页下方显示了网格。戏剧中有一种叫“打破第四面墙”的东西,演员直接向观众发表讲话。显示你的网格就像打破了设计的第四面墙 - 剥离布局并揭示下面的内容。
显示网格提醒一个页面只是仔细排列的像素。使这些指南可见水泥元素到位,使它们与它们占据的屏幕空间之间更强的凝聚力。
7.将标题推到后台
将标题放在后台似乎违反直觉,但不是每个设计元素都需要大喊大叫。
这种趋势是一种微妙的方法,可以维持内容的影响。当与相关图像或动画组合时,标题消息不会丢失,而是会被强化。
以工业粉碎公司Weima为例。“碎片”隐藏在机器的旋转叶片后面,为动画提供补充和重点。
8.选择侧滚动
好吧,这不是一个布局的做法本身 -但它确实影响内容需要如何进行组织。要实现这一目标,需要认真规划和管理文本,图像和其他元素,以便将正确的消息传递到紧密约束的空间中。
Grand Image是一家定制艺术品公司,采用侧面滚动,布局精巧,使所有内容井井有条,易于阅读:
在这个例子中,Keus是一家背包公司,所有东西都采用横向滚动设计,并且感觉整洁。
9.插入滑块
这是另一种不是独一无二的布局,但它突破了设计协议,通过节省空间为设计师提供了更多的创作自由。
让我们面对现实 - 滑块可以很笨重。他们可以打破设计的一致性,带您走出体验。但是设计师正在改进滑块,使它们不那么突兀,同时保留它们的功能。
在能量饮料X先生的网站上,滑块占据了有限的屏幕空间,但避免迷失在布局中:
你想在哪里看到网页设计?
随着设计师变得如此有创意,很难跟上不同的独特布局方法。您注意到哪些趋势?你想看到设计师做多了什么?请在下面的评论中告诉我们!