插图 引用 同一行两个插图_为什么插图是产品的重要组成部分

插图 引用 同一行两个插图

“Hi, my name is Ludmila and I’m a UX/UI designer”

“嗨,我叫Ludmila,我是UX / UI设计师”

“Hi, Ludmila”

“嗨,路德米拉”

“Welcome”

“欢迎”

Not anonymously at all, I’ve been doing UX/UI design for more than 6 years. At the same time, I had a passion for drawing and painting for… all my life.

完全不是匿名的,我从事UX / UI设计已经超过6年了。 同时,我一生都对绘画充满热情

The composition of fruits and a cup on the table.
My first steps in flat illustration—a picture I drew when I was 7 [maybe] years old. I still love it :)
我的第一步是平面插图,这是我7岁(也许)时画的照片。 我仍然喜欢它:)

In the digital sphere, no surprise, I was interested in the graphics right from the beginning of my work. The first thing I’ve noticed is that almost every screen or page has the tiny graphic element—the icon.

在数字领域,毫不奇怪,我从一开始就对图形感兴趣。 我注意到的第一件事是,几乎每个屏幕或页面都具有微小的图形元素- 图标

The next thing you meet in every product, app, or service is the logo—a simple yet memorable piece of branding.

您在每个产品,应用程序或服务中遇到的下一件事情就是徽标,这是一个简单而又令人难忘的品牌。

But when it comes to illustrations… that the whole new universe to discover and find out its specifics in design!

但是,当涉及到插图时……整个新的宇宙将发现并发现其设计细节!

插图如何在数字世界中使用 (How illustrations are used in the digital world)

Here are some ways of incorporating graphics into the DNA of your product.

以下是将图形整合到产品DNA中的一些方法。

App design

应用程式设计

A screen of the app with the search fields. The suggested route is next to it.
Concept of the app where you can find the railway tickets概念
  • Onboarding screens

    入职屏幕
  • Empty states

    空状态
  • Placeholders

    占位符
  • Cover images

    封面图片
  • The element of animated transition

    动画过渡的元素
  • AppStore, Google Play screenshots

    AppStore,Google Play屏幕截图

Web design

网页设计

Web page with a search of the location, dates and numbers of adults filters.
Concept of the travel service概念
  • Main visual element to represent the product or service idea

    代表产品或服务理念的主要视觉元素
  • Secondary elements to showcase the features

    展示功能的次要元素
  • Cover images of articles, chapters, etc.

    文章,章节等的封面图像

两种插图 (Two types of illustrations)

What makes an illustration stand out? You might say the answer is easy to guess, it’s the style! Or the colors.

是什么使插图脱颖而出? 您可能会说答案很容易猜到,这就是样式 ! 还是颜色

I will add it’s the meaning, an idea behind it.

我将添加其含义, 即其背后的想法

But here I would divide illustrations into two types. The first is a decorative element where you see a familiar subject—a capture of life or a certain thing as it is, sort of—a digital art form.

但是在这里,我将插图分为两种类型。 第一个是装饰性元素,您可以在其中看到一个熟悉的主题(一种对生活或某种事物的捕捉, 一种数字艺术形式)

Image for post
Image for post
1. You might not regularly see a toucan on a daily basis but here the whole picture depicts the real-life moment—a toucan is in his usual habitat. 2. The second pic is showing a landscape with boats—a kind of traditional maritime subject.
1.您可能不会每天定期看到巨嘴鸟,但是这里的整个图景描绘了现实生活中的时刻-一只巨嘴鸟生活在他平常的栖息地。 第二张照片显示的是一艘船的风景,这是传统的海上主题。

The second one is a metaphor—a story where elements can be shown in the unusual surroundings or their combination should bring us a certain idea.

第二个是隐喻 -一个故事,其中的元素可以在不寻常的环境中显示出来,或者它们的组合应该带给我们某种想法。

Image for post
Image for post
1. An open gate in a shape book with the dark sky and the shining galaxy is a bait for the main hero who’s on his way to reach it. 2. The contrast between the schemes of the real constructions and paper-made plane.
1.形状书中开着的门,黑暗的天空和闪闪发光的星系,是正在前进的主要英雄的诱饵。 2.实际结构方案与纸飞机方案之间的对比。

Both types of illustrations require a groundwork—first, a search on how to present the idea. Next, a search for the composition of the elements.

两种类型的插图都需要基础,首先是寻找如何表达该想法的方法 。 接下来,搜索元素的组成。

When it comes to the metaphor illustration, a search of the concept might take a longer time. At the same time, choosing the metaphor an illustrator can reach an outstanding result—not only illustration is one of a kind but also, there is a unique way the idea is presented.

说到隐喻插图 ,对概念的搜索可能需要更长的时间。 同时,通过选择插图画家的隐喻可以获得出色的结果-不仅插图是其中的一种,而且还有一种独特的表达想法的方式。

If the metaphor illustration may take a longer time, does it mean that an “art form” illustration is simpler to achieve and it’ll take less time?

如果隐喻的插图可能花费更长的时间,是否意味着“艺术形式”的插图更容易实现并且花费的时间更少?

I don’t think so. When your task is to capture a certain moment or hero without additional metaphor meaning, you have to be sure the result will capture the attention. And this can be achieved by high-quality work that require years of experience.

我不这么认为。 当您的任务是捕获某个时刻或英雄而又没有其他隐喻含义时,您必须确保结果会引起注意。 而这可以通过需要多年经验的高质量工作来实现。

为什么插图是产品的重要组成部分 (Why Illustration is a Vital Part of Your Product)

You might say the illustration isn’t an essential element of the product. Numerous apps and websites don’t have them and talking about UX/UI design we, designers, put usability and functionality in the first place.

您可能会说插图不是产品的必要元素。 许多应用程序和网站都没有它们,而谈论UX / UI设计时,我们(设计师)首先将可用性和功能放在首位。

Sure, that’s how it happens quite often.

当然,这就是它经常发生的方式。

The illustration for the service is like a premium subscription for a user—enhanced experience with an emotional component.

该服务的插图就像是对用户的高级订阅-带有情感成分的增强体验。

The illustration can make your product flourish. Be unique. Remarkable. One of a kind.

插图可以使您的产品蓬勃发展。 独一无二。 卓越。 其中的一种。

That’s why embed illustrations in a product is a vital thing. It breathes life into it. And gives you wiiings.

因此,在产品中嵌入插图至关重要。 它为它注入生命。 并给你哭泣

Take a look at the simple example most of us see every day—Google search.

看一下我们大多数人每天都会看到的简单示例-Google搜索。

Image for post
Image for post
1. Gabriel Garcia Marquez's 91st birthday 2. Dominican Republic elections 2016
1.加布里埃尔·加西亚·马克斯(Gabriel Garcia Marquez)诞辰91周年2. 2016年多米尼加共和国选举

Instead of seeing Google logo each time, our experience has got a sudden emotional interpretation, so-called Google Doodle. It still reflects “Google” word but also, depicts a relevant to our location story—the anniversary of a famous person, an important day in our current history or a message to pay attention to.

我们的体验不是每次都看到Google徽标,而是突然的情感诠释 ,即所谓的Google Doodle。 它仍然反映了“ Google”一词,但也描述了与我们的位置故事相关的信息-名人的周年纪念日,当前历史上重要的一天或要注意的信息。

In my opinion, Google Doodles is a genius thing. Not only it subtly emphasizes that service provides people information as the end product. It also showcases the creative solution that makes the brand remarkable.

我认为Google Doodles是个天才。 它不仅巧妙地强调了服务将人们的信息作为最终产品。 它还展示了使该品牌脱颖而出的创意解决方案。

Another way to add emotion into the existing design is to bring a mascot.

在现有设计中增加情感的另一种方法是携带吉祥物

Team page with bunnies illustration and CTA button. The home screen with search, info and bunnies.
Hopper website and app screenshots
Hopper网站和应用程序的屏幕截图

Take a look at Hopper. Having a bunny in their logo, they also add cute illustrations of bunnies both on the web and app. They appear in different chapters and, even more, a happy bunny is placed next to the result for the current lowest price on the flight—the core functionality of the service.

看一下料斗。 他们的徽标中有一个兔子,他们还在网络和应用程序上添加了可爱的兔子插图。 它们出现在不同的章节中,甚至更高兴地在结果旁边放置一个兔子,以当前航班的最低价格(服务的核心功能)。

That’s the consistent story of the brand and the emotional connection with the user. Together with UX steps, it brings a sort of gamification into the flow.

那就是品牌的一贯故事,以及与用户的情感联系。 与UX步骤一起,它为流程带来了一种游戏化。

设计师如何提高插图技巧? (How a designer can improve illustration skills?)

Practice-practice-practice is definitely the answer but here’s the hint.

实践练习实践绝对是答案,但这是提示。

Participate in daily challenges, for example, Inktober. Yes, its initial idea is to draw with ink on paper but who said you should always follow the rules? Be creative and choose your way and program, after all. In my case, I used Procreate.

参加日常挑战,例如Inktober。 是的,其最初的想法是在纸上绘画,但是谁说您应该始终遵守这些规则? 毕竟要有创造力,选择自己的方式和程序。 就我而言,我使用了Procreate。

Image for post
Image for post
Image for post
The concept for the Storyteller app I made after using the pictures as the cover images for the themes.概念 。

Having a list of random words, some of which sound rather bizarre I would say, you have a task. It gives you an opportunity to concentrate purely on illustration not on inventing the assignment.

有了一个随机单词的列表, 其中有些听起来很奇怪,我要说的是 ,您有一项任务。 它使您有机会完全专注于插图而不是发明任务。

Also, as it’s a daily challenge that lasts for a month, it means that you probably have to dedicate time to drawing each day. That’s why you’re learning to concentrate and get the result as fast as possible.

另外,由于这是一个持续一个月的日常挑战,因此,您可能不得不花时间在每一天进行绘画。 这就是为什么您要学习集中精力并尽快获得结果。

And now, it’s time to take a pencil and start to draw.

现在,该是一支铅笔并开始绘画的时候了。

Thank you for reading!

感谢您的阅读!

翻译自: https://uxdesign.cc/why-illustration-is-a-vital-part-of-your-product-d17839025199

插图 引用 同一行两个插图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274682.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如果是你你会如何重新设计和定义维基百科(wikipedia)?

日期:2012-8-11 来源:GBin1.com 最近一家设计公司发布了一个关于如何重新定义和设计维基百科的网站,在这里网站里详细的刨析了如何重新设计维基百科的话,如何做品牌设计和网站设计,整个设计过程都使用非常详细的文档说…

祖父元素_帮助祖父母建立Skype帐户的UX经验教训

祖父元素“Empathy is a key part of a UX designers arsenal”, they say. It’s drilled into our heads that we need to be thinking about our user, about their journey, about what works best for them. And it does feel empowering to boast of empathy, inside vis…

2022年CSS的发展如何?

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

分布式实物实现方式_这是您完成实物产品设计任务的方式

分布式实物实现方式You’ve come to the last stages of an interview. There’s only one thing left to do: the dreaded take home design assignment.您已经到达面试的最后阶段。 只剩下一件事要做: 可怕的带回家的设计任务。 This is the hard part of any in…

type 和 interface 傻傻分不清楚?

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

上帝公式_感谢上帝的空白

上帝公式Do you ever walk into a room cluttered with discarded papers and leftover takeout and feel comfortable?您是否曾经走进过乱七八糟的房间? Yes, you might if you’re a sophomore at college. That’s just dorm life. Back in the late 90’s to …

figma下载_在Figma上进行原型制作的各种触发选项

figma下载Prototypes are model versions of digital products. They’re used to measure usability by testing with potential users of a product. When making prototypes with Figma, it is necessary that the actions that trigger reactions aren’t strangers and th…

通过动画让你深入理解 ES modules

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

海量数据处理之倒排索引

前言:本文是对博文http://blog.csdn.net/v_july_v/article/details/7085669的总结和引用 一,什么是倒排索引 问题描述:文档检索系统,查询那些文件包含了某单词,比如常见的学术论文的关键字搜索。 基本原理及要点&#…

ux和ui_如何为您的UX / UI设计选择正确的原型制作工具

ux和uiAll UX/UI designers might encounter the situation of creating prototypes for wireframes or visual designs. In some cases, you may also receive the need to craft motion designs, for instance, animating icons or illustrations.所有UX / UI设计人员都可能遇…

Vue 性能指标逐渐开始反超 React 了!

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

figma下载_我如何使用Figma,CSS Grid和CSS Flexbox构建登录页面

figma下载I enjoy looking at website designs that are on platforms like Behance, Dribble, etc. as they are visually very pleasing to the eye. While scrolling through these designs, I always wonder about one thing, that is, how difficult would it be to expre…

2022年Web平台的新动态

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

【逃离一线】被裁后的面经与感慨

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

使命召唤ios_使命召唤的精巧UI:战地

使命召唤iosWith over 50 million players worldwide it’s safe to say Warzone has become a global sensation. Featuring cross-platform play, multiple game modes, customisation and wealth of features too long to mention here — it’s captured its audience and …

深入浅出 package.json,目测大多数人不了解它

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

鲸鱼网络连接_登陆鲸鱼:在网络上读书,第1部分

鲸鱼网络连接I don’t know when it was I started using the text of Moby Dick in my workshops and talks. Likely it dates back to some of my earliest explorations of web typography. Since it’s out of copyright, it’s one those texts you can find online in va…

2022年值得使用的 Node.js 框架

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

更改apk安装包对android系统等级要求

此篇文章解决的为问题: █问题1.系统等级与apk等级不匹配. █问题2.更改api等级后的签名问题. 1.工具准备: 解压缩tool.zip文件夹: 2.开始反编译apk安装包 3.切换目录到tool目录下: 4.反编译: apktool.bat d 待编译apk目录名 存放编译后的文件目录 apktool.bat d Onenote_v14.…

推荐一个前端技术选型神器!真好用~

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…