设置密码

验证码错误,请重新填写

免费建站旅程马上开始

开始建站
建站中

已有帐号?直接登录

首页>森动学院>网站建设教程 > 网页设计教程:网页增加插画的趣味性
网页设计教程:网页增加插画的趣味性
发布时间: 2014-07-21
插画的定义:
插画又叫插图就是用来解释说明一段文字的画。插画的重要性,早已远远地超过这个“照亮文字”的陪衬地位。它不但能突出主题的思想,而且还会增强艺术的感染力。
插画的分类按现在市场的定位:矢量时尚 卡通低幼 写实维美 韩漫插图 概念设定等等.
根据制作方法分类:手绘,矢量,商业,新锐(2D平面,UI设计,3D),像素。
按插画绘画风格分类:日式卡通和插画 欧美插画 香港插画 韩国游戏插画 台湾言情小说封面插画,由于风格现在太多样话所以我只是简单的分类,另在国外风格更广还有手工制作的折纸,布纹啊,各种风格都有,并驾齐驱。

使用插画在当今的网页设计中已经越来越司空见惯了,它可以为模式化的东西增加一些独特的品牌元素。大约几年前的网页设计还很少见到使用插图,现在已经不同,我们处在一个大量新潮的网页设计趋势兴起的时代。
插画通常是以漂亮的背景图片、动物或吉祥物的形式参与到网页设计中,甚至在全球范围内的网页设计师的作品页里,经常以设计师卡通形象的形式出现。网页插画师在网页设计领域开始占据越来越重要的地位,相应的职位需求也变高了。


1.树立品牌的重要性
通常,建设网站是整个品牌的商业活动的一部分,你要使网页的设计服从于整体的品牌形象,不论是将公司标志加入网站中,还是创建令人印象深刻的网页体验,都应该使网站匹配品牌。网站建设要给访客深刻的印象,让访客容易记住网站。
使用插画可以帮助达到这个目的,因为插画场景或者矢量图片容易吸引眼球,这些插画是网站独特的视觉元素,容易使页面变得有个性,从而更容易令人记住。


2.案例分析
让我们来看一个优秀的例子,看它如何通过插画来有效地增强品牌形象的识别,这是一家SEO服务公司ten24 Media。
这个网站的背景是淡蓝色天空、绿色的草地和一顶醒目的帐篷(Tent),这顶帐篷除了作为视觉焦点作用之外,还是一个双关语,这个网站的名字是ten24media,ten刚好和帐篷的英文单词tent发音相似,这个网页设计的插画大致解释了网站提供的服务。如果需要更详细资料,可以点击旁边按钮。

假如你进入其他页面,会发现网页的设计风格是统一的,你会发现其他页面有着和首页相同的设计元素。如其他页面的导航区域的插图是帐篷的顶部。

底部也是一样,绿色的草地又重复出现。这些插画元素使得整个网站显得生动有趣,营造了一种活泼的情绪,消除了一些人对SEO的消极看法。


3.使用简单的插画

不要低估简单插画的作用,在网页设计中使用太多复杂的插画甚至可能适得其反。
Fatburgr是一个有趣的网页应用程序。虽然有人会认为这种设计还是web2.0的设计风格,但是它有一些自己的设计概念。

浏览这个网页会发现插画无处不在,整个网站很吸引人,每块区域的卡通插画都恰到好处。
你可以分辨出网站的各个区域,并且注意它是如何将网站的品牌形象结合起来的。甚至网页的按钮和文字也是经过考虑的,增加一些卡通化的效果。
从这个网站例子,也可以知道排版的重要性。排版应该和整体插画设计风格匹配起来,一些关键的文字应该很显而易见,不仅能访问者一眼看到而且还可以和插画元素相得益彰。


4.结合插画做UI设计

现在要探讨一下如何是插画和网页的UI和谐相处。看一下Forrst,这是一个设计师和开发者的交流社区,用于代码和设计的交流。
你可以看到这个网站创建了一个公园的环境,绘制了树木、蓝天白云、公园门牌、路牌等插画,网站把介绍放在公园门牌上,把导航栏放在木头路牌上,登录窗口放置在一朵白云上,这些元素都为网站增添了森林的气氛。
不仅如此,深入到“公园地下”,你还可以发现注册的功能,整体的网页设计生动活泼,很具个性。
类似这样的设计会比较复杂,设计师需要掌握很多技能,这些插画可能需要一个有几年类似illustrator这种矢量图形软件使用经验的插画师。

5.不要只是为了美观而使用插图
网页设计美观是很重要的,但是如果单纯追求设计的美观则是一种错误的观念,设计应该为网站的功能服务,网页设计的每一个元素都应该有其特定的目的,插图也不例外。
在开始考虑结合插图设计网页时要先考虑,是否真的需要使用插图?使用插图会有什么帮助?在开始正式绘制之前,先拿出笔和纸好好考虑和规划,并参考其他的人的网页设计,看那些地方需要学习。并不是每个人都是专业的插画师,但是通过类似Twitter、博客、论坛等网络交流工具,也可以很方便地和世界最优秀的设计师交流。



文章来源:森动网小鱼儿,转载请注明出处!
更多资源请关注:http://www.sendong.com/jianzhan.htm