In todays class we learnt about how illustration can be used in UI, and how to effectively convey information to the user in a more casual and friendly way. Illustration in UI can be used to convey information, but also to be provocative tell the user a story and bring out different emotions. Illustration is definitely something that should be considered when creating UI’s, as they can bring them to the next level.
Informative illustration serves the purpose of reinforcing what the text is saying to the user. These are commonly used in UI’s to help the user understand what the text is saying, and often means that the user doesn’t even need to read anything and can navigate the UI quicker. Illustrations should serve a purpose, and the best way is to convey information in a creative and fun way. As you can see below, the app sign in page shows an image of a person walking their dog, reinforcing what the text says about taking your pet wherever you go. Another example below is the illustration of the massive broccoli, and this fits well with the text which talks about having a healthy lifestyle. The illustration should make the interface easier to understand and not more confusing for the user.
Animation can take illustrations within the UI to the next level. Having illustrations move can make the UI more attractive and also feel more alive. Some ways that animation illustration can be used is by having elements slide onto the screen, respond back when you interact with it, and even when elements move or spin very slowly they can have a great effect on the overall quality on the interface and make them more dynamic. An example of animation illustration is Apple’s memoji feature, where users get to customise their own character for themselves, and they can interact with other peoples too. The memoji will move around, make different faces, and the coolest feature is where when sending voice messages, the memoji will move it’s mouth and head as if they were talking, which I think is quite cool and creative.
Illustration is also used in UI to create icons. Using illustrative icons are becoming more and more popular, as they give designers more freedom to be creative when creating icons, not bounding them to just use black and white. It is important though when creating illustrative icons, that they use the same style throughout, keeping it consistent and cohesive as one big design system. As you can see below the icon sets are illustrative, and while they look good and add life the overall design, they are still informative in what they are trying to display and consistent with other icons in the set. It is important to keep this in mind when designing icons for UI.
Another way that illustration is used in UI is to display data, and this can be done in different ways such as graphs, charts, diagrams, infographics and so on. Using illustration to do this allows a lot of information to be kept in one place, and it can also be displayed in an attractive way. Down below is some examples of illustrative infographics, and they serve two main purposes. First of all is to show information clearly, highlighting areas that are important, and not wasting the users time with information that isn’t needed. Secondly it must look good, and doesn’t give the user a sore head to look at. This is how illustrative data and infographics are used effectively.
Todays class was super insightful for further developing my understanding of illustration, and how it can effectively be implemented into my user interfaces. It was interesting to see the different styles of illustration and how they use serve different purposes. Todays class was helpful for my music app project as I now am considering using some illustration in it to further enhance the user experience and reinforce what some of the text says.