104:Week04- Illustrating Interfaces

Illustrating Interfaces

Illustrations can be a really good way to engage users and enhance their experience with your design.

Illustrations help explain content or information in avery simple or symbolic way it conveys a message which means they can be very important elements to involve in an app/webpage design.

After listening to the lecture and reading this article, I learned an illustration should be;

  • meaningful- this means the illustration does not take away from the functionality and information of the content itself.


  • recognisable- a recognisable illustration means the user doesn’t have to waste precious processing time trying to understand the illustration, but that the illustration seamlessly integrates with the content.


  • preferably straightforward and unambiguous- this falls under the same point as being recognisable in the way that the illustration should be quickly understood to make a seamless experience.


  • clarifying- an illustration is used best when it explains and clarifies what the text content is saying, allowing the information to be processed quicker as ‘pictures are worth a thousand words”


  • attractive-  having an attractive illustrations gives the users a positive reaction to both the image but also the app/webpage itself. Lots of beautiful illustrations that also meet the other requirements will really enhance the user experience.


  • harmonic and corresponding with general stylistic concept of the interface- It makes sense for the illustrations being used for a particular type of content should match the tonality of the content. It helps engage the user and helps them understand the content even more


  • improving usability and user experience in general- this goes hand in hand with the above points but it is important that illustrations should improve and enhance the users experience but should also be informative and not subtractive from the content.


  • not overloading the screen or page- Illustrations can be really beautiful and aid the processing of information but a lot of illustrations or very complex illustrations with lots of different colours can be distracting to the user.


In this week’s lecture we discussed sketching how to practice sketching in a practical way to improve this skill.

By using a thicker pen it sort of forces you to be more clear with your design as it is harder to complete complex and delicate sketches with a thick pen. This exercises your brain and makes you think of what elements of the design are actually important. another tip was to use straight lines, this also makes your sketches clearer and easier to work from.

It was recommended to also practice drawing straight lines to help develop this technique. We were told to use colour thoughtfully, sketches should be the basics of a design to show how it would work and details will be developed later so its not practical to fully colour and develop sketches- colour should be used to highlight certain important elements of the design or interactions.

It’s important to also make sure your sketches are comprehensible because this will be the bare-bones of a design to be worked on and in team environments other members should be able to understand your sketches. By timing yourself while sketching you can better control how much time you are spending on each sketch and this will force you to be more mindful of the details you definitely need to include.

Mascots and type of illustrations

‘Mascotsas a graphic design object needs great attention as they have to represent the nature of the brand or product. Mascot becomes the element of identity and inter-connector between the user and the product.’

Mascots can be a basic way to explain something to the user about the content or the brand itself. Mascots or characters can help catch users attention and engage the user in the app or webpage.


Illustrations can be:

Thematic- this means the illustrations used within an app or webpage follow the same theme. These types of illustrations are usually more for aesthetic purposes and are more complex however this can be very engaging for the user and create a positive experience. However, too many of these illustrations or too complex illustrations can become too busy and less functional.

Iconic- these type of illustrations are more stylised and are used mostly to simplify content and help with the understanding of the content on the page. These are used less as beautiful pictures for the user to look at but can be just as engaging because of their functionality and style.

Diagrammatic-  these are purely to help explain a process or heavy amount of information in a visual and engaging way. These won’t be useful for every type of content but for more information heavy topics, these can be very engaging for users.

Data Visualisation

“Data visualization is an interdisciplinary field that deals with the graphic representation of data. ” Basically data visualisation breaks down chunks of heavy information into understandable graphics that aid the processing of that information and emphasise the information being presented.

Hyper Realistic- these type of graphics can be used to bring real life properties to the design making them more understandable as the draw from real things we see in real life. These can also be quite a contrast between the digital text and other graphics.

Simple Vectors- these focus on making the graphic as simple and clear as possible which aids in the understanding of the content overall.

Hand Drawn- these type of graphics can bring both a playful or whimsical style to visualising data or can be gritty and relatable, this is up to the artist but overall they bring a more vulnerable and engaging element to a graphic.

App Development

This week I started working on my illustrations for the app. I want to do an illustration for each destination, the illustration will show a place of interest at that destination.


This is the image I will be using for reference for my Romania illustration. This image shows their traditional wooden churches which I think really represent the rural, traditional setting of maramures.





This is how the first sketch of the churches came out, I’ll then add colour;











This is the colours I chose for the wooden church. I didn’t choose the actual colours from the image instead I went for a colour I felt would be more striking for the illustration.









This is what the finished illustration looks like of Maramures.










Then next destination that I’ll illustrate is Aosta Valley in Italy, this is the image I’ll take reference from








This is the the development of this illustration:









To give the illusion of stonework on the castle I added extra detailing of disorganised shapes in different colours to add depth and dimension.



The last destination is Brest in Belarus

This is the image that I will be taking inspiration from:


The image is of a monument that overlooks a fortress in Brest.







This is the development of my illustration. I made the contrast between the shadows and the brighter parts quite stark to make the features of the monument stand out.


Leave a Reply

Your email address will not be published.