在一个网页设计中混用照片和插图的5个提示

深圳Clh

深圳/网页设计师/9年前/382浏览

版权

深圳Clh

你已经准备在你的网页设计中采用一些具有风险的设计了吗？试着在相同的设计项目中混合照片和插图。手绘元素往往可以给你的设计增添奇想和兴趣，这当然也包括照片。同样的，照片的使用可以使图示设计看起来更轻松以及更真实和重要。

这种技术或者设计手法可能有点难以想象，直到你看到一些例子能很好的利用这种技术。今天，我们将探索这个趋势，并提供相应的例子和提示，希望能帮助你找到创造性的方式来提升你的设计水平。

1.使用插图作为UI的主题

你可能在过去的网页设计中已经习惯了将插图元素整合到你的设计中，甚至没有真正考虑这样做是否真的适合。许多用户界面的元素通常是以不同方式的插图形式表现的，它们不一定仅仅只是手绘风格，更多的是具有较少质感以及拥有“网页按钮”外观的元素。

如果你确实想试试手绘插图的效果，为什么不现在就打破你给自己设置的界限真正尝试一下呢？或者你也可以使用手绘或素描风格来作为你网页设计的强调元素。

在上面WittyCookie的网页设计中，它使用插图和主视觉视频混合的方式，使用户一接触到设计就能够被吸引到。在这个例子中，什么创意才是真正我们应该关注和借鉴的呢——手绘元素“挂”在视频中，这么做的结果使得网站的感觉不像是一种出售商品的商业网站，更像是组织用户一起玩乐。

这个概念是有趣的，它不会给客户带去太多的压力。我觉得其中最好的部分是，当你没有完美的图像或视频时，创建视觉兴趣是一种可以提升整体网站设计体验的方式。

2.将插画作为第一视觉

如果你想将插图作为你设计项目的第一视觉，首先你需要绘制网页设计的基本大纲。以便在能够在后续添加照片或视频元素之前，先为插画元素预留一个适合的位置。

就像上面Made by Few Conference的网站设计缩呈现的那样。在整个设计中，复杂的插图作为第一视觉的确令人印象深刻，而且插图对于任何的设计师来说每一个细节都能观察的到。主视觉形象图的正下方是一个视频元素，这个小当是是真正的内容版块是什么呢？整个元素和氛围组合起来表明了这是一个现场活动。

当你考虑你的网页设计从插图开始的时候，还有一条路线可以达到你的目的。尝试为你的设计画一个惊人的背景图像。这是一个有趣的方法来获得于你预期中一样的背景画面，而不用在网上翻找那些预制的图片。

在上面的One Happy Camper案例中，网站设计采用一种有趣的方式，通过混合的背景插图板，甚至黑白照片背景的混合方式做到这一点。背景的变化有效地表明了内容的变化和新的信息。

3.像排版一样使用插图

当你没有很多很好或者适合的图像素材来供你选择时，可以用与排版相同的方式混合插图。虽然这个概念听起来很奇怪，但仔细想想：整洁的插图可以增加视频或照片的重点。它可以突出显示你希望用户了解的内容。

在上面Achrival这个案例中，网页设计同样采取了一种很有趣的设计方式。通过插图“跳舞”的A作为机构的标志，并可以将其循环播放。没有它，你可能就只是直接瞄一眼图像就带过了。但通过上面的方式就明显不同了，这种方式足以吸引你花上一些时间来观看它。

4.考虑插图动画

无论你使用的插图是手绘还是通过电脑绘制的，他们都提供了一个融合简单动画的绝佳机会。插图动画可以是富含信息的，让人意想不到的和有趣的。

不要让你的插图动过太过了，只要保持简单有目的，每个动画应该为用户设置一个目标链接、方向提示或惊喜，这可以让他们感兴趣。

你可能不会指望从财务策划小组那边得到什么好消息，但是上面的Taylor Made使用了精美的动画和摄影作品。图片的图示部分使财务计划似乎有点不那么令人担忧。

插图也填补了网站在其他图像上的空白，最终的结果是一个有趣，有吸引力和易于使用的连贯的网页设计。

5.讲述一个故事

对于那些混合了插图和真实故事的图像来说，最好的解决方式是通过它们有效传达出一个故事。视觉匹配内容的心情，并感觉到品牌的一部分。

这种技术可以在即时性的设计中工作，但通常我们使用它与更完整的品牌策略相结合。你可以看看上面的Cone Flower Creamery这个案例。他的标志是以插图的形式展现的，网站设计通过使用插图故事来营造一种情感氛围，并鼓励用户继续了解品牌。只要你想看到更多，可以线下在空白的位置继续加载图片。设计非常简单，专注于故事本身，而不是用于创建故事的技术。