请选择 进入手机版 | 继续访问电脑版

产品设计

    今日:132| 主题:18350
收藏本版 (1)
软件产品、PC、移动、网站、平台的开发、策划等内容。

[其他] UI as Art. Illustration in Interfaces.

[复制链接]
林深处 发表于 2016-10-4 06:35:35
391 15

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
The phrase well-known all over the world and claiming that “...a picture is worth a thousand words” is still popular and actual nowadays, getting more and more shades of meaning with human progress. People still get attracted with visual images such as pictures and photos faster than with the copy, in lots of cases image is recognized and understood more quickly, and even more, it is able to satisfy not only informative but also aesthetic needs of the recipient. Taking this into account, today we would like to consider some functions of illustration in perspective of modern UI/UX design.   The essence of illustration

  According to the definition of Merriam-Webster dictionary, the verb "illustrate" in its wide-spread and most recognized meanings means "to clarify"; "to make clear by giving or by serving as an example or instance"; "to provide with visual features intended to explain or decorate" ; "to show clearly". However, it should be remembered that initially it derived from Latin "illustrare" meaning "light up, enlighten, illuminate". Although it is the obsolete meaning now, it really adds much to all the diverse potential of illustration in digital graphic design, in particular for UI/UX projects.  Historically, illustration has a long and amazing path and perhaps could be included into the list of the most diverse directions in art. On the basis of its progress in print production like books, comics, magazines and newspapers, advertising materials and so on, illustration as the sphere of visual art found the new lease of life with the development of technology. The design tasks got even more challenging and therefore interesting. Digital illustration as well as the platforms for which it had to be created brought new horizons in this sort of art.   

UI as Art. Illustration in Interfaces.

UI as Art. Illustration in Interfaces.
    Sketches  for UI illustrations     Anyway, no matter where illustrations appeared, how and for what purpose they were created, the basics were still the same: the aim of illustration was to enlighten, to clarify, to deliver the message by means of visual elements. In modern graphic design, therefore, illustration is an image which creates a visual message. To make the illustration functional, this image should be easily recognizable and preferably the information it transfers should be decoded similarly if not identically by different viewers.   Earlier we have already published the article about such small but highly meaningful visual elements as icons, their types, functions and vital role in creating efficient UI/UX solutions. As well as the icons, illustrations, mostly being more detailed and artistic images, also have important functions behind them and often become the effective way to boost usability and at the same way to present nice artistic elements.    Features

  Illustration used as a part of the interface should become a working functional element. Making the decision in favor of using illustration of any kind on the screen or a webpage, the designer has to think thoroughly how to take everything possible from its broad potential. Illustration in most cases becomes the efficient way to provide the user with a piece of information faster and easier than it could happen with the text. Using illustration in layout, it is possible to fulfill multiple user needs that is why it is so popular in user interfaces of different kinds.  So, to become an efficient element of a layout, illustration applied in user interface should be:  - meaningful  - recognizable  - preferably straightforward and unambiguous  - clarifying  - attractive  - harmonic and corresponding with general stylistic concept of the interface  - improving usability and user experience in general  - not overloading the screen or page.   

UI as Art. Illustration in Interfaces.

UI as Art. Illustration in Interfaces.
    UI illustration for Toonie Alarm    Considering these positions, let's look at some practices of using illustration in design.   Mascots and characters

  Perhaps, one of the most efficient ways to apply illustration techniques in design both as a visual and functional element are mascots of different types. Mascots are images, usually personified, which in most cases represent the brand, product or service identity and therefore become its symbolic convention via all the application or website.   

UI as Art. Illustration in Interfaces.

UI as Art. Illustration in Interfaces.
    Veggie App Concept      Mascot as a graphic design object needs great attention as they have to represent the nature of the brand or product. Mascot becomes the element of identity and inter-connector between the user and the product. In many cases, mascot is the basic element of communication and interaction, therefore in different states it can become the basic way to deliver the message to the user.   

UI as Art. Illustration in Interfaces.

UI as Art. Illustration in Interfaces.
    Design version of Saily app mascot    Obviously, mascots are very helpful in interfaces: they liven up the general process, catch up user's attention, become the memorable element, create important support for a stylistic concept and make the illusion of direct communication with the user. Also, wisely used in illustrations featuring actions or interactions, mascot can become a good way to avoid using too much copy on the screen and in this way save space for other important elements of layout or just more “air” also really needed to create good perception of data on the screen or page.   

UI as Art. Illustration in Interfaces.

UI as Art. Illustration in Interfaces.
    Sheriff Foxx Character      

UI as Art. Illustration in Interfaces.

UI as Art. Illustration in Interfaces.
    Astrocats     Tutorials and tool-tips

  One of the good ways to use the illustration in UI are diverse tutorial screens and any kinds of tool-tips. In this case they fully reveal their potential in explanation and clarification. The options can be totally diverse from simple icon-like to artistic and sophisticated ones. Illustrations of this kinds become a good way to boost usability minimizing the necessity of using the copy on the screens. They are particularly efficient in apps for kids and youngsters as they usually feel this sort of explanations more user-friendly.   

UI as Art. Illustration in Interfaces.

UI as Art. Illustration in Interfaces.
   

UI as Art. Illustration in Interfaces.

UI as Art. Illustration in Interfaces.
    Illustrated tool-tips for Saily App      

UI as Art. Illustration in Interfaces.

UI as Art. Illustration in Interfaces.
    Singify Tutorial    

UI as Art. Illustration in Interfaces.

UI as Art. Illustration in Interfaces.
     Tour Guide App     

UI as Art. Illustration in Interfaces.

UI as Art. Illustration in Interfaces.
     Travel App Tutorial    Rewards

  One more good case when a designer could consider the option of using illustration in the interface is the case of various awards and rewards, with which the user marks any kind of progress in the app or website, sort of stickers, medals, signs, coins and the like. Again, the options can be extremely diverse, from simple symbolic shapes to elaborately drawn detailed images, but anyway, used wisely and accomplished in accordance with general stylistic decision of the whole app or website, they become one more step towards user-friendly interactions and positive user experience.   

UI as Art. Illustration in Interfaces.

UI as Art. Illustration in Interfaces.
    Good Sign App Concept     

UI as Art. Illustration in Interfaces.

UI as Art. Illustration in Interfaces.
    Simple Blog App      

UI as Art. Illustration in Interfaces.

UI as Art. Illustration in Interfaces.
    Snake Battle App     Theme and style illustrations

   Illustrations of this kind are usually applied in a user interface basically to provide visual support of the general stylistic concept and perhaps the topic of the app or a website as well as events, seasonal features and so on. Their main purpose is to support all the functional elements of the layout with general harmonic and attractive appearance of the screen or page. It should also be mentioned that in some cases illustration of this type can add the element of gamification or more artistic feel to the whole product. In one of our previous articles, considering the points of creating potentiallyviral UI/UX design, we mentioned that one of the ways is to add some unique, custom and stylish visual elements so that people wanted to share them with the others as well as satisfy their aesthetic needs. Illustration have a great potential in this perspective.   

UI as Art. Illustration in Interfaces.

UI as Art. Illustration in Interfaces.
    Underwater Explorer    

UI as Art. Illustration in Interfaces.

UI as Art. Illustration in Interfaces.
    Weather App    

UI as Art. Illustration in Interfaces.

UI as Art. Illustration in Interfaces.
    Page 404    

UI as Art. Illustration in Interfaces.

UI as Art. Illustration in Interfaces.
     Rio 2016 Olympics     

UI as Art. Illustration in Interfaces.

UI as Art. Illustration in Interfaces.
     Moneywise App    Obviously, this article is only the start for the discussion of multiple and diverse functions of illustration in UI design and we are going to continue it in further articles sharing our studio experience. However, even the general basics mentioned today are still the strong support of the most important position about UI design process: any elements of the interface should be purposeful and functional, supporting the user, enhancing usability and providing the solid basis of positive user experience and problem solving. Illustrations are not the exception and their application in the interface should be thoroughly thought-out and accomplished with the target user in mind at every stage of the process.    Originally written for Tubik Blog     Welcome to see the designs by Tubik Studio on Dribbble and Behance



上一篇:Design with real content for a better UX
下一篇:地图产品应用场景分析
杨幂 发表于 2016-10-4 15:09:17
前排,坐等,支持林深处,直播无敌,千秋万世
回复 支持 反对

使用道具 举报

胸大无脑是种心态 发表于 2016-10-4 15:28:44
报,报,报,报,报告楼主,我来了!
回复 支持 反对

使用道具 举报

sys234 发表于 2016-10-15 13:50:33
到2016-10-15 走过了年少,脚起了水泡  
回复 支持 反对

使用道具 举报

laoo123 发表于 2016-10-15 15:04:31
鄙视楼下的顶帖没我快,哈哈
回复 支持 反对

使用道具 举报

[S.I.N]随风 发表于 2016-11-8 17:15:47
为虾米总也抢不到沙发?!!
回复 支持 反对

使用道具 举报

无尽之剑 发表于 2016-11-8 23:11:26
看起来好像不错的样子
回复 支持 反对

使用道具 举报

Lamlam_01 发表于 2016-11-10 02:36:00
每天只签到不留言的,升级永远没有见贴就留言的快。说明:”复制粘贴很重要!
回复 支持 反对

使用道具 举报

moaas 发表于 2016-11-10 06:45:49
楼主,么么哒!
回复 支持 反对

使用道具 举报

19956028 发表于 2016-11-10 18:37:45
very good!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

© 2001-2017 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表