elena

0203e755366280000001dea9833337jpg@800w_1

[译者写在前面]

杂志海报风一直是网页上不太推荐的一种设计风格。

且不说图片加载的快慢,很多设计表现并不适合网页这种浏览体制。

然而,人是很bitch的。

看惯了千篇一律的板块布局,就想要尝尝口味丰富的海报风。

作者并没有直接给出很多杂志设计风的网站

而只是通过分析精品纸媒的设计来寻找解决思路,伸手党表介意哦

———————我是译文分割线——————–

大家好,还是我,quoitworks的村松。

在设计网页的工作中,有时会遇到这样的客户:“可不可以设计成像杂志海报那种风格”。

大量的网页设计工作中,我们可能时时刻刻关注布局,关注用户体验,关注网页视线的导向,

对这些的过度关注很容易忽视一个网页或者网站在视觉上的生气和活力。

从客户的角度来看,从他们出生开始,毕竟看纸媒印刷品比看网页的年头要长。

比如海报,杂志(网页上来说,相当于专题页面,商品详情页,主视觉页面等等。不是搜索页面哦)

所以这一期,我们研究下如果客户需要在商品详情页、特辑页面或者about页面上

设计成杂志海报风的话该如何巧妙的完成任务。

我收集了很多纸媒设计精品,先从他们入手看能不能有帮助。

一不小心上了很多图,那就废话少说来看图吧,如果因为图太多机器down掉表打我啊。

02d62655366387000001dea928f4c7jpg@800w_1021846553665b3000001dea936d5f7jpg@800w_1

02abc555366882000001dea90d7309jpg@800w_1

把文字稍稍压在图片上的手法,最近网页设计上也常有看到。

比如这个网站:http://www.ccopus.com/info/shop.html

026ad0553668b2000001dea9f80c11jpg@800w_1

在图片颜色较浅的地方

用黑色的字轻轻覆盖。

像上面第1张海报那样,

盖在图片上的字

用反色白色效果应该也不赖。

如果是网页文字的话怕是很难实现。

02b53c5536692a000001dea9f2e1a9jpg@800w_1

先看几个杂志海报上的案例

020a665536696c000001dea9964b38jpg@800w_1

02d0e2553669ab000001dea9af8355jpg@800w_1

以上都是把淡色或荧光色灵活铺设在背景上的印刷制品效果。

用在网站上的话,可以把主广告词或者第一标题用英语像花纹般大大的铺上去。

文字字号已经很大了,所以尽量用能融进背景的颜色而不是过于抢眼的颜色。

[译者:其实就是要有透明度,不能傻傻实实的放上去,要的效果就是既醒目又要融于背景]

02964955366b2f000001dea9c69d12jpg@800w_1

? 像X这种符号压在背景上效果也不错。

027e9755366b79000001dea965a2b6jpg@800w_1

0277a255366ba6000001dea9f13b52jpg@800w_1

网页设计中还是比较忌讳和害怕竖排文字的。

但是根据情况的不同,适当尝试一下竖排文字也许会有不一样的惊喜?

当然也要看情况。比如下边这个网站的竖排给人感觉就不错

http://www.ccopus.com/gold/sparkler/about.html

02eb3f55366bef000001dea9316d8ejpg@800w_1

[译者]

作为同样有竖排传统习惯的中文,在需要一些传统风的网页可以尝试竖排。

但最好是文字量较少的标题。

02920f55366c82000001dea922c9cfjpg@800w_1

先来看一些海报栗子

02f69855366cd5000001dea9befa56jpg@800w_1

其实一般在网页上很少把标题放这么大

但是把标题按照它表达的内容方向进行一番设计的话,的确很有杂志海报风。

02e11555366d47000001dea91c0051jpg@800w_1

这是不常用的表现手法,实现难度也大。但是一旦做出来效果很不错。

02f7bc55366d7b000001dea91a1986jpg@800w_1

02d02555366da7000001dea9cc1818jpg@800w_1

02f8ff55366ddc000001dea9b09b5fjpg@800w_1

众所周知,对齐文字是常识。

但有时,根据人类视线移动的规律,可以故意不对齐文字。

比如上边的栗子,按照人们在读取时视线的顺序,从右上到左下,

文字也按照这个顺序排列而非对齐,也没有影响浏览阅读。

比对齐文字更活泼。

特别注意:尝试这种做法时一定要好好研究下人们视线移动的规律,乱放一气只会被领导骂的,呵呵。

0249b255366e3b000001dea976cbf9jpg@800w_1

028f6455366e5d000001dea91ed08ajpg@800w_1

通过控制文字的大小、粗细来突显标题是比较基本的做法。

像上边,把文字放在正中央,放大到覆盖整个图片的做法会更有海报风的效果。

027f8255366eac000001dea9d70db1jpg@800w_1

0202cf55366ed6000001dea9396f77jpg@800w_1

据说当下流行的扁平化设计理念是瑞士极简风的复活。

所以,如果尝试扁平化设计,与其模仿国外不知名的扁平化设计,

还不如好好参考下极简扁平化的鼻祖-瑞士国际极简风(swissted)。

这是瑞士国际极简风的朋克摇滚show的海报网站 http://www.ccopus.com/。

[译者] ?swissted是一位名叫Mike Joyce的平面设计师在上世纪八十年代尝试的一种风格。他把摇滚秀的海报用瑞士极简风进行设计,把两种怎么看都不搭边的风格元素糅合在一起,在设计爱好者和音乐发烧友里引起极大好评,并由此推广。很多评论认为,swissted风格是当下的扁平化设计的鼻祖,是对它的复活。

0214c255366f7f000001dea956f692jpg@800w_1

?

1.摇滚重口style

02265c553670cb000001dea9013a60jpg@800w_1

泼墨效果,黑白图片

028be7553670e2000001dea934a2eejpg@800w_1

把图片处理成黑白做旧效果,覆盖上荧光黄色的字让整体不至于太沉重。

如果是帮朋友的硬核摇滚乐队做网站的话,可以尝试这种。

2.把图抠出来像铺花纹一样

028be455367112000001dea9eb4375jpg@800w_1

?

?

3.把文字沿着某种路径弯弯曲曲的摆放,比较小清新的一种手法。

024b0e55367128000001dea9c05c59jpg@800w_1

?

总结一下~

以上都是为了解决手头的课题而提供的思路。

如果本末倒置,

因为“我想用这种设计风格”而刻意为了某种风格而设计大错特错了!

个人看法,作为设计是这样一个流程:

“出现问题→这个解决思路怎么样?那个思路呢?”——try and error

一个不断试错的循环才是找出最合适设计的最快方法。

所以,为了锻炼这种思路习惯,

平时看到好的设计时,

应该多分析他的解决思路。

比如:

这到底是为了什么而设计的

这个设计的对象人群是谁

用了怎样的设计解决思路

图片用了什么样子的

最有个性的点是什么

不流俗的地方是什么

它对浏览者的视线导向如何

用了什么色系

广告词用的怎么样?很难懂吗?

属于哪个行业领域

用了怎样的字体?

等等……

原文地址:站酷

作者:youzhen118

转载请注明:学UI网—UI设计师学习教程平台 » 网页如何实现“杂志海报风”

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
腾讯实例分析:设计产品化的微型实践腾讯实例分析:设计产品化的微型实践
怎么为你的产品选择最合适的颜色?怎么为你的产品选择最合适的颜色?
50个设计精美的蓝色系网站欣赏50个设计精美的蓝色系网站欣赏
7大原则让列表页面更好看7大原则让列表页面更好看
浅谈网易严选企业购的交互设计!浅谈网易严选企业购的交互设计!
20个使用3D动画背景的网站欣赏20个使用3D动画背景的网站欣赏
2017年最新的流行WEB的设计方法2017年最新的流行WEB的设计方法
网页设计中的大事件 - 彩色字体网页设计中的大事件 – 彩色字体
图表设计-远不止“好看”这么简单图表设计-远不止“好看”这么简单
网页正文字体应该更大的四个理由网页正文字体应该更大的四个理由
?