Travel App Design – Illustrations

Illustration Research

Deciding What Illustration Style I Want


When I was thinking about my travel application and what screens I had initial thought of creating I thought it would be a good idea to have 2 different styles of illustrations throughout the application. As I want to include some for of onboarding screen for my application I thought it would be a good idea to have some illustrations for those pages that help depict some of the application features, I also want to have an explore page that allows users to explore different locations which will be illustrated to give the app a more playful aesthetic which is ideally what I want to aim for with this application as I see illustration as being a more playful way of presenting imagery of information.

I like the line art style illustration that we had previously looked at in some of our master apprentice tasks but considering the playful aesthetic I want my application to have I don’t think style of illustration would be a good fit for the project, this is also the same for the block colour landscape illustrations we had previously looked at in our master apprentice tasks, this gave me an idea on using curved shapes as opposed to straight lines to give me a more abstract and playful appearance. I personally love the more modern form of digital painting within illustration and graphic design, as much as I would love to create something like this I don’t think I would have the time or the skills to create something worthwhile. Maybe if I can get my illustration skills up I could attempt this in the future for other projects or portfolio work.

I have included some of these illustration styles below to give you an example of the style of deign I am on about.

 

Illustration Example

 

Line Art Example

 

Illustration Example

 

Illustration Design Inspiration


Onboarding Illustration Inspiration

For my onboarding screen illustrations I want something that is simple, colourful but also recognisable and has some relation to the application feature that is being mentioned on that specific page, when researching into this illustration style I found quite a few that were dotting around Dribbble and Behance that I really liked the style of. When researching into this type of illustration further I found a illustration library called UnDraw which features simplistic, colourful illustrations of people and other real-life elements, this is something that I would like to try and replicate but with my own style.

I have included some of these illustrations below to give you an idea on what style of illustration I am aiming for.

 

Undraw Illustration Style

 

Undraw Illustration Style

 

Undraw Illustration Style

 

Landscape Illustration Inspiration

For my landscape illustrations I want to try and achieve something that is colourful, playful and abstract but still recognisable as the location the image is meant to represent, when researching into different landscape illustrations I noticed that a lot of them featured line art which was something I didn’t want to include within my illustrations so I needed to try and find something that worked with my idea of being playful. When I started researching into illustrations I had an idea of looking into paintings and how they used colour to represent objects, scenes and landscapes, I found this quite interesting as the basic used of colour and tones really helped create depth and definition within the image – this is something I would like to tray and incorporate into my own illustrations for this project. I have always be fascinated with realistic illustrations that replicate the real-world, this is a commonly used style of illustration throughout my favourite record label Mr Suicide Sheep who use these illustrations for backgrounds on their YouTube videos, this style of design would be interesting to try and incorporate into my project but this is definitely an illustrative style for someone with years of illustrative experience, which I do not have. Continuing with my research into different landscape and city illustrations I found an illustrative style that have some influence from pop art and pop culture which I really liked, this style of design really hit the playful aesthetic I was after for this project and I think this is definitely something I want to aim towards for the illustrations within my travel application project. Another form of illustration I looked at was low-poly illustration which utilises basic shapes, primarily triangle and polygons to a geometric aesthetic, this style of illustration would be interesting to explore alongside the use of more modern curves to see what the outcome would be.

 

I have included some examples of these different illustrative styles below to give you an example of what direction I am planning on taking my designs.

 

Painting Style Illustration

 

Realism Illustration

 

Pop Art Style Illustration

 

Low Poly Style Illustration

 

 

Initial Idea Generation

Sketching Some Initial Ideas

When it came to sketching some ideas for my illustrations I found it extremely difficult to sketch an idea that was close to what I had in mind but also didn’t take up too much of my time as it is only an idea not the final design. I am not the greatest drawer or artist in the world and I think some of my initial sketches are really bad but this part of the design process really helped me define what I really wanted for my illustrations. As I wanted to try and create a similar style illustration to UnDraw I wanted to get some ideas and inspiration on different standing positions as the majority of their illustrations feature a person, for these I looked on the internet for different images of people to help give me an idea on what sort of standing positions I could use for the  characters within my illustrations, this really helped me get an insight into how certain shapes would be made like the trousers or head of the character for example. I wanted to try and incorporate the blob from the UnDraw illustrations into my landscape illustrations to see how it would look masking the illustration to the blob, initially I liked the idea but the more I thought about it being on screen with other elements on the page the less I liked the idea.

I have included some of my sketching ideas below to give you an example on how I started to create my illustrations.

 

Initial Sketches

 

Initial Sketches

 

Starting Digital Versions

Once I had a good idea on what I wanted to achieve with my illustrations I began developing digital version of my ideas, as I wanted to draw research from the UnDraw illustration library I wanted to do a bit more research into how they’re actually made. Firstly I noticed the colour palettes the use are usually very minimal and have one or two accent colours that are quite vibrant and then two colour being very light like a light blue and white for example, to save me thinking too much into the colour of my illustrations I decided to use a colour palette from one of my favourite Instagram pages, Awsm Color.

I have included an image of this colour palette below.

 

Illustration Colour Palette

 

Another element I noticed was the blob in the background of the illustrations, I thought this was a simplistic way to add some depth to the illustration and I think it allows the foreground elements to stand out a bit more. For this I wanted to use a tool that I have previously used before called blobmaker.app which automatically generates these style of blobs that can be downloaded in an SVG format, this is perfect for my project as it allows we to edit the colour of the object and even tweak the points within the SVG to customise the shape further if needed. As this was pretty close to what I wanted I decided to leave it how it was and not think too much into it as I have other elements to work on for these illustrations.

I have included a screenshot of blobmaker.app below to give you an example of the user interface and what the application does.

 

Blob Maker App

 

Another element I noticed throughout these designs is that there was very minimal linear curves, the majority if not all of the curves within these illustrations are rounded and clean curves which is something I should consider when I start creating my illustrations. As I will be using Affinity Designer for this project I know they have a feature that allows me to create smart curves that replicate this effect, this will allow me to achieve that abstract style of design I had mentioned previously in my illustration research. I wanted to try a few different techniques and methods to create my illustrations, the first is using the Pen Tool to create clean curves and the other is using the Pencil Tool which will allow me to create more organic style curves, i wanted to exeprmeient with this to see which one had the best results in addition to how easy each tool was to use as illustration is quite new to me.

I have included some screenshots below of some of the assets I created for my illustrations and how I went about composing them for my onboarding screens.

 

Plant Illustration

 

Person Illustration

 

Blob Shape

 

Final Designs

Once I had a rough idea on how to go about creating my illustrations I started creating a composition with the design assets I had illustrated from my initial ideas, I really enjoyed this part of the design process as it allowed me to experiment with different layouts and the composition of each element on the page, having these assets separate would also allow for easier animation between each layer of the design.

I found my onboarding illustrations more enjoyable to create as I found it interesting how basic abstract shapes could create a recognisable image that shares a relation with the message I was trying to get across, in this case the mobile application feature is the message. My landscape illustrations I found a lot more difficult as I spent, in my opinion, too much time on them considering what else I have to do for this project, overall I am happy with how my illustration of Amsterdam came out and I feel like I created a playful illustration to incorporates the ideas and illustrative styles from my research, while this illustration is not perfect by any means I really like how messy the design is. I feel like the messiness of the design really helps the design become more abstract and playful which is exactly what I was trying to achieve for this project.

I have included some images of these illustrations below to give you an example of what I created, I will also included the SVG files as a download when I submit the coursework for this module.

 

Onboarding Illustration Design

 

Amsterdam Illustration

 

Leave a Reply

Your email address will not be published. Required fields are marked *