因此，在相继分析网页情感化设计，网页UI文案设计以及网页视觉层级设计之后，Mockplus为大家整理了17款最新创意网页排版设计和相关教程。和大家一起探讨，作为设计师，应该如何进行网页排版设计，增强页面视觉魅力的同时，快速引导用户，提升用户体验。

1. Pittori Di Cinema

设计师: Bunker

网页类型：艺术类网站

亮点：简约大胆的首屏排版设计

简约的背景，配合大胆直观的粗体文本设计，是最近几年日益流行起来的网站排版方式。而本款单页艺术类网站就采用这一设计理念，利用超大粗体设计突出页面内容，直观时尚。其独特的文本字体，也极具吸引力。恰到好处的网页配色， 也使页面更加美观吸睛。

学习点：

利用简约直观的粗体文本设计，突出页面主题内容

文字越大，越突出，就越能引起用户的注意。简约大胆的粗体文本设计，结合图标，色彩以及动效的变化，突出文本内容的同时，能够有效地赋予页面活力。

在线预览

视频教程分享：

初学者排版布局设计指南：https://www.youtube.com/watch?v=CAAbMj_vaW8

2. Noaka

设计师: Charmer

网页类型：文化&教育网页

亮点：仿真书架模式的排版设计

本网页，作为文化&教育类网页设计，为了帮助用户更好的查看和搜索各类书籍，通过独特的垂直文本排版方式，结合红色背景条以及选中效果的设计，给用户呈现了极具趣味性的仿真书架模式的导航设计。

学习点：

结合网站主题或产品特色，选择独特的页面排版方式

在线预览

视频教程分享：

如何设计更具艺术特色的网页排版设计：https://www.youtube.com/watch?v=DLeSPCTA9Wg

3. Iglucraft

网页类型：商务类

亮点：图文混搭

图片与文本的混搭——高清精美的图片结合美观易懂的文字排版设计，漂亮而不失实用性。本款商务类网站设计就采用图文混搭的方式，展示各类产品同时，通过文字进行介绍，直观而高效。

学习点：

图文混搭的排版布局方式，图片文本相辅相成，简洁干练，而不失实用性

在线预览

视频教程分享：

网页设计之图文搭配技巧：https://www.youtube.com/watch?time_continue=13&v=fbBYfYyfv5c

4. QWIC

设计师：Booreiland

网页类型：商务网页

亮点：图文混搭与网格的完美结合

图文混搭的排版布局，结合一定的网格设计，使网页设计或商品展示结构和条理更加清晰明了，能够快速的引导用户查看需要的页面信息。

学习点：

文本混搭，结合网格，优化网页排版布局

在线预览

5. Cambridge International School

设计师：OKC.Media

网页类型：文化教育类网页

亮点：文本结合按钮的阶梯式排版布局设计

作为ambridge International School Russia学校的官网设计，本款网页采用图文搭配的方式，简约直观的同时，利用文本结合按钮的阶梯式排版布局设计，为用户提供简单直观的页面导航，极具功能性和趣味性。

学习点：

排版设计可结合按钮、页面导航、或菜单进行设计，增强其功能性

在线预览

6. Reflektor Digital Website

设计师：Reflektor Digital

网页类型：Design agency website

亮点：3D技术；流体和发光特效；音频的应用

在线预览

视频教程分享：

提升网页或App排版布局高级感，只需5招：https://www.youtube.com/watch?v=O3fVMm-Ef0Y

7. Eleven Plants for Dum Dums

设计师：Drew Marshall

网页类型：植物类网页设计

亮点：巧妙的使用纯文本排版设计

纯文本排版设计也是当今极简主义网页设计的重要设计手段之一。通过不同文本字体，尺寸，样式以及色彩的应用和对比，清晰直观的呈现页面结构层次。非常适合需要呈现大量文本内容的网页选用。而本款植物类网页设计，首屏就采用类似的设计理念，结合对应的植物图片，使整个页面设计结构层级更加清晰直观。

学习点：

纯文本排版设计，也能轻松呈现页面结构和层次