插圖 引用 同一行兩個插圖_為什么插圖是產品的重要組成部分

插圖 引用 同一行兩個插圖

“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.pswp.cn/news/274682.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/274682.shtml
英文地址,請注明出處:http://en.pswp.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…

ECSHOP批量添加商品到購物車

Ecshop是一款開源的網上商店系統,在我心目中可以算得上網上商城界的Wordpress了。 本文介紹如何實現在ecshop中批量添加商品到購物車。 大家都知道,默認的ecshop只能單件點擊“添加到購物車”(Add to Cart)實現一件一件的添加商品…

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…

TP-Link路由器下的多種接入模式

無線AP:把LAN轉成WLAN 客戶端:把WLAN轉成LAN 中繼:簡單放大上一個無線路由器的WLAN信號,SSID與上一個無線路由器一樣 橋接:與上一個無線路由器的WLAN信號連接,SSID與上一個無線路由器不同,又叫W…

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 …

POJ 1325 Machine Schedule(二分圖最小點集覆蓋)

題目鏈接:http://poj.org/problem?id1325 題意:A機器有n個模式,B機器有m個模式,有k個任務,第i個任務可以用A機器的ai模式或者B機器的bi模式,換模式需要重啟,開始兩個機器都在模式0,…

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余篇源碼文章。歷史面試系列。另外…

制作Ubuntu U 盤啟動盤在ubuntu12.04中

制作U盤啟動盤,這樣就可以通過U盤來裝系統了,簡單便攜。 在Ubuntu下,從dash home中找到Startup disk creator,當然之前把U盤插好,然后很簡單的兩個選擇就好了。 轉載于:https://www.cnblogs.com/allenzhaox/archive/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余篇源碼文章。歷史面試系列。另外…

【原創】ABAP動態編程之功能實現

根據名字獲取結構 DATA: STRUCTTYPE TYPE REF TO CL_ABAP_STRUCTDESCR. STRUCTTYPE ? CL_ABAP_TYPEDESCR>DESCRIBE_BY_NAME( SPFLI ). 根據變量獲取結構 DATA: DATATYPE TYPE REF TO CL_ABAP_ELEMDESCR,W_CHAR TYPE CHAR5. DATATYPE ? CL_ABAP_TYPEDESCR>DESCRIBE_BY_D…

【逃離一線】被裁后的面經與感慨

大家好,我是若川。持續組織了8個月源碼共讀活動,感興趣的可以 點此加我微信ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外…

document.body.scrollTop以及一些備忘

網頁可見區域寬:document.body.clientWidth; 網頁可見區域高: document.body.clientHeight; 網頁可見區域寬: document.body.offsetWidth (包括邊線的寬); 網頁可見區域高: document.body.offsetHeight (包括邊線的寬); 網頁正文全…