Illustrating Interfaces

Illustration is becoming increasingly popular by the day in modern websites and applications, this can either be seen in minimalistic icon illustrations in our social media applications of even in some gaming applications we may have on our phone. There are a number of reasons why using illustrations in user-interfaces and graphic design can be beneficial, a major reason is that illustrations are a clear and concise form of communicating information and data like infographics and data visualisation for example. Another reason illustrations can be beneficial is that they’re copyright free if you drew them yourself, images can be difficult to copyright on projects and obtaining your own images could be difficult depending on the project.

 

“Illustration is pictures to read or words to look at.”

– Quentin Blake

 

One of my favourite quotes from our lecture was “Illustration is pictures to read and words to look at.” by Quentin Blake, I found this quote really inspiring as it shows that illustrations, like typography, are a form of communication and ultimately should tell a story. Designing good illustrations can be difficult and this is something I definitely struggle with in design but ultimately illustration should be clear, meaningful, recognisable, straightforward and unambiguous, checking all these criteria will ensure that your illustration has meaning and communicates a clear message or story.

 

Sketching Tips

During our lecture we went over some sketching tips and techniques to help brainstorm ideas for user-interfaces and illustrations, I found the Rule of 8’s interesting as it is a timed session of brainstorming 8 different ideas all with different features and/or elements/components. Quick methods of brainstorming like this can really help get a project lifted off the ground and start getting some foundations laid in the design.

I have included a small list of items that you need to sketch your ideas below.

• Pens & Pencils
• Paper/Notebook
• A Brain

 

The quote “Sketching is not about being a good artist, but about being a good thinker.” from Jason Santa Maria is truly inspiring as it demonstrates that you don’t need to draw your ideas perfectly but only get the idea onto the page and out of your head. Over the years of working with design and music I have found this to be crucial as ideas will come in waves and its important to ensure none of these ideas slip through the net, even in music I would demo out ideas to ensure I had the idea saved as a file and not just an idea in my head.

 

“Sketching is not about being a good artist, but about being a good thinker.”

– Jason Santa Maria

 

I have included the 6 tips from the lecture below as a reference and reminder when it comes to sketching and idea generation.

• Use a thicker pen
• Draw straight lines
• Be thoughtful with colour
• Make your sketches comprehensible
• Use the right tools
• Time yourself

 

Types of Illustration

During our lecture we took a look at some different type of illustrations that are used for user-interfaces, these can range from mobile applications and websites to games such as Fire Watch. Each illustration style has its own personality and would suit one project but maybe not another, this would depend on the application or website, game, and/or brand.

 

Character/Mascot Illustration

Character or mascot illustrations are often referred to as illustrations where the subject is a person, animal, character and mascot figure, this can be in a variety of different illustration styles but ultimately the image must contain some form of character or mascot to fit in this category. This type of illustration can be seen in logo design from brands like Mail Chimp in addition to being a good fit for mobile applications and motion graphics.

I have included some examples of character and mascot illustrations below.

 

 

 

Thematic/Landscape

Thematic or landscape illustrations usually consist of a landscape scene or setting, this can either be fictional or non-fictional. The illustration can either be hyper-realistic or simplistic but to fit in this category the image must contain a landscape or scene. A good example of this type of illustration is in the game Fire Watch where the artist uses shades of colour to create atmosphere and ambience within the scene being illustrated.

I have included some examples of thematic and landscape illustrations below.

 

 

 

Iconic

Iconic or icon illustrations are typically illustrations that communicate some form of action or message where words cannot be used or to assist in conveying the message in what the words say, this illustration style is usually seen in the form of line-art and can either be detailed and minimalistic in their appearance. A good example of minimalistic icon illustrations is the Material Icon Library by Google which is a set of user-interface icons with a number of different categories.

I have included some examples of icon illustration below.

 

 

 

Diagrammatic

Diagrammatic illustrations are a form of infographic design and are often a creative way in which designers can display information or directions for a task, an example of this would be the NHS poster on hot to wash your hands properly where they use a series of illustrations to create a step by step guide on how to wash your hands.

I have included some examples of diagrammatic illustrations below.

 

 

 

Data Visualisation

Data visualisation illustrations are another form of infographic design but they contain more statistical information and factual data in comparison to diagrammatic illustrations. This for of illustration is perfect for displaying facts, figures and statistics in a creative way to keep the viewer engaged with the product. A good example of this is the majority of infographic designs on the web today where the feature illustrations relating to the topic and display information and data in a creative manner.

I have included some examples of data visualisation illustrations below.

 

 

 

Hyper Realistic Illustrations

Hyper-realistic illustrations are illustrations that appear realistic in nature, the designer and artist has considered how the lights hitting the object and cast shadows and generating highlights on the object, this consideration of lighting, shadows and highlights adds up to create a realistic render of an object.. This is an extremely detailed style of illustration and is perfect for creating a sense of realism.

I have included some examples of hyper-realistic illustrations below.

 

 

 

Simple Vectors Illustrations

Simple vector illustrations are a more simplistic form of illustration than hyper-realistic illustrations, they often use basic geometric shape to create simple renders of objects that make up the overall image. These illustrations appear basic but they are a great way to communicate a message or action directly to the viewer as it would be easy to understand.

I have included some examples of simple vector illustrations below.

 

 

 

Hand Drawn Illustrations

Hand drawn illustrations are a form of illustration that replicate a hand drawn aesthetic, this could be in a number of different styles including sketching, line art, character design and caricature drawings. This type of illustration is perfect for creating a sense of realism within a design in addition to adding some form of texture to the image which is something I personally love in design.

I have included some examples of hand drawn illustrations below.

 

 

 

 

Illustrations for UI

We went through a couple of different ways in which illustrations can be used throughout user-interface design to help improve the overall user-experience and help tell a story or convey a message, illustrations can be seen in a vast amount of interface designs in various UI elements like icons and animations, they’re also extremely helpful for replacing images, creating avatars, designing rewards and badges, and creating instructions for onboarding screens in mobile and web applications.

• Onboarding Screens
• Rewards & Badges
• Icons
• Avatars
• Digital Objects

Onboarding screens is something I will be considering when it comes to designing my travel application as I think it would be a good idea to have a brief walkthrough of the application and the user flow before the user begins to use the application and its features. There are a number of reasons why this is beneficial, the first being that it allows everyone to be able to use the application as it will tell you everything you need to know so those people that aren’t so good with technology should be okay. The second reason being that its a fun and interactive user-flow for the application and allows for a good method of communication to the user.