奇思妙想是如何创造出优秀网页设计

变化无端的奇思妙想,特立独行的交互模式,独树一帜的设计手法,它们常常来自于设计师的灵光一闪。在设计项目中加入一点奇思,不仅能够提升整体设计的意境,而且常常会获得点铁成金的奇效。

不论这个奇异的点子落脚在一个微小的元素上,还是贯彻到整体的设计里,这种专属于脑洞的奇特魅力会自然地吸引这用户。许多奇妙的设计常见于女性化和儿童化的设计,但是它们的作用不仅止于这两个类型。许多不同类型的设计项目都能够融入奇思妙想,不过近期这类创意脑洞最容易同摩登复古设计风的网页结合起来使用。

说一千道一万,我们不如看看设计师们都是怎么做的吧。

相比于我们常用的衬线体和非衬线体,手写字体常常显得更加真实,更加情绪化,相比之下也更加富有魅力,能够将整个设计的情感最大化。参考上面的Summer Fridays。

当然,过犹不及。在使用手写字体的时候,有些老生常谈的问题值得注意:不要使用那些被用滥了的手写字体。为了效果最大化,越接近于手写效果的字体,越真实,效果就越好。而绝大多数的计算机设计的字体就正好缺乏这种真实性。所以,下面的几个问题值得你考虑:

·尽量挑选拥有多种样式可替换的字体族。当同一个字母使用多次又需要有细微差别的时候,可以通过替换同族不同样式的字体来实现这种差异。
·不要大规模使用手写字体,尽量最低限度的使用确保效果最大化,比如只在标题中使用。
·请务必保持风格和基调的一致性。纤细的字体尽量和细体一起搭配使用,而粗体则尽量和粗体组合使用。

水彩画属于那种上手并不那么容易,但是用好了又特别赞的设计元素。它的使用方式很多,从背景到插画都很不错,像上面的网站Made of Sundays就是很好的例子。

当你使用水彩画的时候,应当明确你的目的:拿它来干什么。想要充分用好它,要么尽可能让界面全套的元素都沿用水彩元素,要么仅仅在较小的元素上使用水彩元素。

当然,如果没有其他对比强烈的视觉效果的时候,使用水彩元素也无伤大雅。如果你觉得水彩元素会喧宾夺主的话,不妨适当地淡化它们。

没有什么比漂亮精致的插画更抓人眼球的了。插画本身就是高识别度的设计元素,而你的设计则可以借此更好的被用户所认识。所以,一份设计优秀的插画能够成为你的重要的“身份识别”。

你并不需要用大面积、整幅的插画来证明什么,一个小的插画,甚至是草图就足够了。Rachel’s Ginger Beer 这个页面仅仅只是使用几幅小的插画,就很好的营造出整体效果,展现出设计者的奇妙思路。

没有什么比鲜艳的色彩更能能营造轻松愉悦的氛围了。色彩本身就能让用户第一时间感受到,而大胆明亮的配色在情绪表达上也有着先天的优势,用户能从中直接感受到有趣或者愉悦的情绪。

设计师的奇思妙想常常会用高饱和度的黄色、橙色和绿色来表现。实际上,即使是只使用这些色彩就已经能够达到效果了,并非必须使用高饱和度。

正在影响整个设计领域的扁平化设计和Material Design 为我们贡献出许多奇妙的配色方案,如果你想调出不同凡响的配色方案,不妨从这里开始:

·Flat UI Color Picker
·Material Design Color Palette Generator

想要让你的设计显得轻盈的另外一种手法的就是将细线和纤细的笔触贯穿整个设计。从主视觉元素、图片的边缘到字体的笔画都使用线条和细笔触来表现,最关键的是,这些元素营造出轻盈的感觉的同时,还拥有强大的包容性,承载你的奇妙构思,加入更多自定义的、独特的元素。

举个最简单的例子,即使是纤细的元素贯穿始终,你依然可以使用一些不那么纤细的元素与之搭配,形成对比。看看Sonikpass这个设计,它就很好的融入了一些相对厚重的字体(注意背景),鲜亮的色彩和深沉的黑色文字、浅灰的背景形成了很好的对比,不单调也不繁复,阴阳调和。

虽然动效主要是用来同用户进行交互、引导交互、呈现效果,但是也可以纯是为了有趣而进行设计。悬停特效、舞台效果、跳动、拉伸、拟物的运动等等等等,它们都能够给用户以情绪上的触动。

当你要将一种独特的想法注入到你的动画中的时候,务必记住它是要用来取悦用户的。这也是为什么许多设计师在这么做的时候会选择明亮的色彩或者结合有趣的插画——用户吃这一套。

Pharrell Williams的网站就集成了许多不错的动效,动态磁贴式的布局,鲜艳的配色和各式各样的悬停效果,它们不仅让用户读取到更多的而内容,而且更好的引导用户去寻找他们想要的内容。

通过设计来呈现完美和有目的性的设计出缺陷是同样的道理。那些小瑕疵、小缺陷惹人注意,令人侧目,是设计师故意为之,从而达到特定的目的。就像动画和电影中的各种致敬一样,这些缺陷会成为你的优势。

这些缺陷可以以不同的形式存在于不同的地方:

·一条线比其他的线都要粗或者细
·文本中某几个字和其他的字的字体明显不同
·某个线条或者插画和其他的部分明显不对齐或者不一致
·明显不匹配的元素相互混合
·不对称的图形和不一致的比例
·现实的元素和幻想的元素相互混合搭配

如果你拿不准你的奇妙想法能否迎合用户,那么就从小的元素开始尝试,一点一点尝试中打磨这些元素。不要怕脑洞大,在这个时代想法很重要。有人习惯于平庸,不过更多的人在寻求不同,也许你的脑洞正好合用。

推荐一部脑洞大的合不拢的电影,哪怕是致敬也致敬得不同凡响。B站熟肉,为了致敬字幕都是繁体的 ,希望你喜欢:《Kung Fury》

designshack

译文地址:优设

作者:CARRIE COUSINS

优设译者:@陈子木

(0)

相关推荐

  • 优秀网页设计的基本原则

    一个优秀网页设计具备的一些基本原则 操作方法 01 1 .确定网页设计的内容 一个优秀的风站要有一个明确的主题,整个网站围绕这个主题,也就是你在网页设计之前要明确你这个网站有什么目的,用来做什么,所有 ...

  • 灵感专题—2019年优秀网页设计作品赏析#4月

    设计领域时时刻刻在发生着你我意想不到的变化.许多看似熟悉的设计趋势,于不同的设计师而言,经过灵活的创意设计也许就意味着不同的可能性.而这些可能性则来源于设计灵感的持续涌现.及时汲取设计灵感,是设计师们 ...

  • 创意+视觉效果MAX的优秀网页设计

    @喪心病狂十六夜貓:在设计网页时,灵感枯竭了可是非常头疼的事情.这个时候看看同行设计师的优秀作品是一个非常有效的方法.比如今天这篇好文,集结了21个创意爆棚的网站,每一个都有简略的创意解说,灵感不足的 ...

  • 六边形元素的优秀网页设计

    小编:在网页设计中,大家在通常情况下喜欢运用一些圆.方.三角这些形状让网页更加的美观并有设计感.如果你厌倦了平常的网站设计的布局,那么今天的这些网站必将给你灵感的提升,打破之前的格局.这些网站的设计巧 ...

  • 2018年优秀动态网页设计大赏【附教程】

    随着设计行业的的不断进步和发展,动态网页设计已经成为设计师必须掌握的重要技能之一.对于许多设计师来说,缺乏设计灵感和网页设计是阻碍设计的主要问题.针对这些问题,小编在本文中为设计师精心准备了优秀网页设 ...

  • 2015年值得关注的21个网页设计趋势

    小编话:今天给大家带来的是@设计达人网分享的2015年值得的21个网页设计趋势.网页设计的发展速度是惊人的快,2014年已经过去,我们之前有总结过去年的网页设计,现在我们不妨来展望一下今年的设计趋势. ...

  • 2015年不容错过的最佳网页设计作品

    是时候开始准备挥手告别2015年了.这一年中涌现了许多优秀的设计作品,设计趋势也在时间的推移中渐渐转变.在这个新旧更替的时间节点,重温过去一年中的优秀网页设计,无疑是对2015最好的纪念和总结. 这一 ...

  • 网页设计中文字排版设计的技巧

    谈到到网页设计中的排版,这是可个大学问.网站上每一个元素都能影响浏览,排版设计的好与坏绝对能考验一个设计师的基本功底,而短短的一篇文章并不能将排版介绍清楚,本文就先主要分享网站主题部分文字的排版,后期 ...

  • 2015年流行什么色 网页设计配色趋势预测

    作为一个设计师,不但要新奇的创意,强大的构图布局能力,还要有敏锐的洞察力和流行趋势的把握.有时候难免会碰到网页色彩搭配上面的问题,今天小编给大家带来的文章是@尛沫尛沫的网页设计配色趋势预测,看完真心受 ...