Skip to content →

IXD103 & 104 – Illustration in UI and Tying it All Together

Illustrations play an important role in user interfaces as they serve as a tool for quickly communicating information and indication of a functional element. Over recent years illustrations for user interfaces have became popular amongst design trends wand even being integrated into print based media such as books, newspapers, flyers posters magazines and educational materials. More recently, the introduction of new technologies and new tools, allow designers to bring about a new era for digital illustration.

With increasing numbers of websites and mobile apps, designers turn to the use of illustrations as a way to enhance usability as well as the emotional and visual appeal of the interface. Illustrations also serve as a functional element, conveying the right message and particular interactions more clearly, as well as adding a more stylish feel. Custom illustrations also establish a foundation of originality and creativity to an interface in a world of tight competitions where it is important to stand out.  Digital illustrations allow for the option of creating short animated videos and interactive elements, such as logos, that enhance the appeal of your website or app.

Compared to text, images are more likely to stick better in long-term memory and this impact grows when the images are informative, designed with the target audience in mind as well as maintaining the consistency with the stylistic concept of the layout.

User Interface illustrations can be found in:

  • hero images
  • thematic images
  • mascots and characters
  • blog article images
  • tutorials and tooltips
  • rewards and other gamification graphics
  • notifications and system messages
  • stickers (popular among messenger apps)
  • story telling
  • infographics
  • marketing and advertising banners
  • visual markers of content categories

Animation

Using animated illustrations engages the viewer as well making the interaction more dynamic and can be used to highlight more important information or details. A downside to this is that motion can increase the time and traffic needed in order to load.

Below I found an example of applying motion to illustration from Tubik on Dribbble. Here they have created a bright, dynamic and lively graphic for a mobile application called WaykeApp where the designer has not only intended to provide information to the user but to add positive vibes from the very first seconds of the initial interaction.

Characters and Mascots

The element of personification being applied to a product can boost positive user experience, enhance brand awareness and the brand image. It is for this reason that marketers as well as designers use mascots as a part of the general design concept or content strategy. Mascots are images, usually personified and normally represent the brand, product or service identity and the inter-connector between the user and the product and is the basic element of communication and interaction between the two. Additionally, mascots give life to the general process, catching the users attentions and become the memorable element.

Efficient mascots should be based on user research, analysing the needs, wishes and expectations of the target audience as well as well conducted research into the market environment and your competitors. Mascots also allow for a number of areas to be visually connected as the mascot can work as a logo, transform into illustrations or even for printed stickers, with each use strengthening the visual connection of a brand.

Users appreciate the element of direct communication and attention personally directed towards them and mascots can provide this communication effectively with the use of things like speech bubbles or visual cues like facial expressions or gestures.

Vector

Vector illustrations are composed of curved points and lines based of formulas rather than square pixels which allows for a cleaner, crisper appearance. Vector graphics are designed to retain their quality when enlarged. Unlike regular pixels which are blended together to create a colour, vector makes editing colours easier as they tend to generally consist of solid colours. Some of the first types of graphics where vectors as creating raster images was too expensive to do with early computers. This practice lasted from the 1960’s to the 1980’s with most displays changing to raster graphics. An example of vector graphics from the 1970’s was the video game Asteroids which was simple in design but effective.

While researching for both of my projects, I have found that I really enjoy vector artwork, which is something I hadn’t delved into before and was prevalent more than ever with beginning to use Adobe Illustrator. Vector designs and graphics are important because as designers we must think about the overall composition when creating an app, advertisement or website and the careful organisation of text and graphics. In these compositions, designers use vector artwork designed by illustrators or create their own designs. This is beneficial due to the infinite scalability of vector based graphics. Just like ‘Asteroids’ many Vector illustrations are simple yet effective in the conveying of a message or a display of something beautiful.

Orlando Arocena created commissioned artwork for Walt Disney Studios for the 2019 theatrical release poster of Dumbo using vector graphics on Adobe Illustrator. He initially sent two quick vector sketches to Disney that were inspired by the carnival era with a hint of what he describes as his ‘pop-deco gradio style.’

Once Disney had decided on a sketch, Arocena conveyed this same uplifting message from the trailer in his final dynamic vector illustration.

Illustration is a picture to read or words to look at” – Quentin Blake

When considering illustrating interfaces, user-experience design is also about the icons and buttons we create in order to navigate a programme, app or website. To do so successfully, there are some principles for UX design that must be followed.

Basic UX Laws

Jacobs Law – Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

Fitt’s Law – The time to acquire a target is a function of the distance to and size of the target. Such as hierarchy of important information or buttons will appear bigger than others.

Law Of Pragnanz – People will perceive and interpret ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort of us.

Hick’s Law – The time it takes to make a decision increases with the number and complexity of choices available. This goes hand in hand with the next law:

von Restorff Effect – When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.

Touch Points

The sizing of elements within a digital product is extremely important from a user experience point of view. Just like the law of UX design, there are a few general rules that must be applied when considering target sizes for touch screen. Tech giants such as Apple and Microsoft have come up with their human interface and material design guidelines, each conforming to their own style they have each developed over the years. Apples minimum touch size is 44px while Microsoft’s minimum touch size is 34px.

However, we as humans come in all different shapes and sizes so this set of guidelines may not work for everyone but this is the standard. Not only that some people use their finger to interact with their digital devices some use their thumbs and both are differently sized.

Not only is sizing important, put placement of elements is just as important. For screens such as mobiles there are different zones or finger targets which are easier to press while holding your phone with one hand and using your thumb to navigate. We as users are less likely to want to have to stretch to the top of the screen as we are lazy in nature, so the best placement option its have things sit comfortably at the bottom of the screen. An example of this can be found on Instagram where their nav bar is bottom centre of the screen.

Colour is another important consideration when it comes to designing interfaces. Colours can be used to differentiate or highlight information such as action targets, such as buttons or controls.

Contrast is extremely important for readability of type but also in the case for those who have visual impairments and this is an aspect to consider when ensuring your application is as assessable s possible.

There are multiple resources to check the contrast of colours, such as contrast-ratio.com or material.oi Adobe also released an article that discusses contrast consideration for UX designers which highlights important points and reinforces considerations that every designer should take when designing an interface.

 


References

https://material.io/design/color/the-color-system.html#tools-for-picking-colors

https://type-scale.com/

https://www.interaction-design.org/literature/topics/ui-design

https://www.secretstache.com/blog/ui-illustrations/

How Catchy Interface Illustration Can Enhance UI Design

Published in Uncategorized

Comments

Leave a Reply

Your email address will not be published.

Skip to toolbar