AMO全媒体运营
首页 知识星球 这套网页设计,看你能偷走多少排版技巧

这套网页设计,看你能偷走多少排版技巧

当我们收集的灵感图越多,越难回头整理、查看,趁着这段时间,我仔细研究了每天在社群发布的“网页设计”灵感部分。 发现这些作品之所以受大家所喜爱,是因为它们都具有美观、统一、真实等特性…

当我们收集的灵感图越多,越难回头整理、查看,趁着这段时间,我仔细研究了每天在社群发布的“网页设计”灵感部分。

这套网页设计,看你能偷走多少排版技巧

这套网页设计,看你能偷走多少排版技巧

发现这些作品之所以受大家所喜爱,是因为它们都具有美观、统一、真实等特性。

而在 PPT 中想要出街,则需要再加一个关键词:逻辑。

下面,来看今天的主角,一套介绍油漆的网页设计灵感图:

这套网页设计,看你能偷走多少排版技巧

以深蓝色和灰白色为主,橙色作为点缀,整体非常舒适。

那么,思考一下,我们可以从这套网页中学到什么内容呢?

01. 内容排版

先来看里面的文字排版:

这套网页设计,看你能偷走多少排版技巧

虽然和中文排版有些区别,但也有很多互通之处。

无论在视觉上还是实际对齐都是一致的,仔细观察,行间距是小于段间距的。

另外,在文字的层级上,也做了大小、粗细区分。

线条辅助视线引导:

这套网页设计,看你能偷走多少排版技巧

这套网页设计,看你能偷走多少排版技巧

橙色虚线引导,逐渐消失变成灰色,引导阅读视线和方向。

这也是 PPT 制作中,非常容易被忽略掉的细节。

02. 风格统一

在大家的打卡作业中,经常能看见一些不合场景的素材,比如图文不符、图标样式不统一、装饰元素混用等。

而在这份灵感图中,可以看到所使用的素材都是贴合主题的:

这套网页设计,看你能偷走多少排版技巧

添加了油漆素材作为页面背景,既丰富了页面又不会干扰上方的图文内容。

此外,介绍每个小点的内容时,加上了墨迹素材,也刚好和油漆滴溅的状态吻合。

这套网页设计,看你能偷走多少排版技巧

配色上还利用人的“刻板印象”,大面积使用深色作为主色调,搭配浅灰色,再加以橙色点缀,使人可以快速知晓所在行业和产品。

同类的“刻板印象”还有商务蓝、科技蓝、党政红、地产黑金等,不过现在逐渐出现一些新的搭配,比如科技红。

除元素贴合主题外,里面的图片处理也值得一提:

这套网页设计,看你能偷走多少排版技巧

为了不使纯色块直接放在页面上显得单调,在色块底部叠加了一层油漆图,并将原图颜色调成色块同色调,最后调整透明度并叠加。

我们在做 PPT 的时候,也可以用这样的思路,比如这一页 PPT:

这套网页设计,看你能偷走多少排版技巧

不仅背景上叠加了图片,还在每个色块之上分别做了蜂窝形状进行叠加。

03. 素材组合

有时候客户提供的图片少、质量不高,设计师拿到图片后无法下手,经常会出现图文不符、素材乱飞的情况。

这时候不妨试试将图片中的主体拿出来,和其他素材组合使用:

这套网页设计,看你能偷走多少排版技巧

如果是在 PPT 里,可以这样用:色块与鞋子穿插,再使用云朵装饰,最后给色块加上阴影即可。

这套网页设计,看你能偷走多少排版技巧

当然,组合使用也可以克制一些,比如只截取素材的一部分:

这套网页设计,看你能偷走多少排版技巧

如果甲方不同意更换素材,那就加色块将其装进去,将图片与容器组成一个新的整体:

这套网页设计,看你能偷走多少排版技巧

根据这张灵感图,可以做出这样的 PPT 页面:用半透明色块作为图片容器,只呈现关键点和图片。

这套网页设计,看你能偷走多少排版技巧

当然,也可以用样机做个包装,这样不仅弱化了图片,还提升了整体的层次效果:

这套网页设计,看你能偷走多少排版技巧

04. 氛围强烈

风格和素材讲完了,接下来聊聊氛围感。

这套网页中有很多亮点,比如首屏的大图:

这套网页设计,看你能偷走多少排版技巧

背景使用蓝灰渐变,对比纯白色的背景,整体看起来很干净舒适。

人物左侧添加了橙色光晕效果,同时标题的渐变方向也是根据光晕的照射角度来做的,而人物的阴影则是超右,整个页面的光影、渐变非常统一。

产品介绍部分,则不遗余力地突出优点,绿色环保:

这套网页设计,看你能偷走多少排版技巧

对部分绿植进行虚化垫底,结合实景绿植素材,同时再加点淡淡的发光效果,数字的渐变方向也和光的照射方向一致。

这些,我们统称为:细节!

另外整套网页展示出来时,是被包装过的。

包装的长图上,加了很多与装修相关的物品,比如油漆滚、铲刀、美工刀等。

这样处理,也是为了进一步强化氛围感,使整体看起来更统一、美观,大家在 包装自己的 PPT 作品集时,也可以借鉴这个思路。

写到这里,这套网页已经被分析得差不多了,咱们最后总结一下:

① 内容排版

注意排版细节,段落与行间距关系,以及容易被忽略的视线引导线;

② 风格统一

使用的素材贴合主题,尽可能将行业配色、图片等要素融到页面中;

③ 素材组合

抠出图片主体和其他素材组合使用,或添加容器与图片组成新主体;

④ 氛围强烈

借用光影与虚化,结合主体素材增强页面氛围,同时调整文字的渐变。

以上,就是今天分享的全部内容,希望对大家有所启发~

生成海报
免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。
域名
Avatar photo

作者: AdobeEdu

AdobeEDU设计网址导航,为设计师提供无限的创意参考,欢迎大家同时关注微信公众号:UID的小伙伴们

为您推荐

决定未来职业高度的“软技能”,作为设计师该如何培养?

决定未来职业高度的“软技能”,作为设计师该如何培养?

如果你像我一样,关注了许多设计和技术博客,那你一定读过大量诸如:介绍如何做移动端设计,什么是精益设计,如何做到完美适配,...
我们需要用户增长设计师UGD吗?

我们需要用户增长设计师UGD吗?

一位招聘负责人和我抱怨说,他们最近刚发出UI招聘,就收到数量恐怖的求职申请,现在设计师这么难找工作了吗?又叹气说:“数量...
设计师该如何做知识管理(上)

设计师该如何做知识管理(上)

不久前,很荣幸受到 58UXD 团队邀请,做了《设计师该如何做知识管理》的线上分享。预料之外的是,这次分享收获了远超预期...
9种常用UI界面中的控件规范,UI设计师要学的哦!

9种常用UI界面中的控件规范,UI设计师要学的哦!

我们在设计UI 界面的时候,有一些控件几乎总是会用到。用户熟悉了它们的交互模式,也因此建立了心智模型,很清楚如何通过这些...
追求视觉冲击力?看这 7 大设计风格!

追求视觉冲击力?看这 7 大设计风格!

作为设计师应该都会很关注最新最前沿的视觉趋势,我们每天的工作有很大一部分时间会消耗在找素材参考图上,于是发现尽管每个人手...

发表回复

返回顶部