不久之前，网页设计是印刷品的反映。列和行遵循刚性线，内容和图像锚定到固定空间。但随着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先生的网站上，滑块占据了有限的屏幕空间，但避免迷失在布局中：
你想在哪里看到网页设计？
随着设计师变得如此有创意，很难跟上不同的独特布局方法。您注意到哪些趋势？你想看到设计师做多了什么？请在下面的评论中告诉我们！
