Skip to content →

IXD104 – App Development Ideas and Sketches

After I had researched some pre existing travel apps, I began mind mapping some ideas that I could make my travel app about. I wanted to choose something unique that I didn’t find in my research and also something that Im interested in myself or an app that I would like to see. I decided to focus on Greek Mythology for my app idea.

I started mind mapping different names for my app once I had picked to go with Greek Mythology.

I decided to go with the name Atlas as it is a god in Greek mythology but also means a map so I felt this was the perfect choice for a travel app based on Greek mythology. Below I have begun trying out different font styles for the logo. I want to use a serif typeface as I want it to give an older feel and the Roman and Greek lettering also used serif lettering.

The idea is that you can choose a different place within Greek mythology for example you can choose mount Olympus and that will bring up a screen showing all of the gods that lived on mount Olympus and then once you click on a god then it will bring up a screen with an illustrated image of them, a short description of their story, what grouping they belong to e.g. mortal, god, titan and also have who their mother and father where below the description that will allow you to click on and it will bring up their info screen. I was also thinking that at the very bottom of all the info screen there should be a related section that has gods that are linked by relation, marriage. This idea came from my research on travel apps and how they include related hotels or restaurants to keep the user on the app by feeding them a continuing list of options to explore.

Version 2

Expanding on my menu system, I wanted to incorporate an illustrated home page as navigation that can be used just like a menu. These menu options would be split into three main areas from top to bottom:

  1. The Heavens
  2. Olympus and the Mortal Realm
  3. The Underworld

For the purposes of my mock app I would focus on The Underworld which splits into 3 levels, Tartarus, Asphodel and Elysium as the mythology states. From here, the screens will inform users some information on the area they chose and then offer icons of gods or mortals who reside there which would also bring up screens offering information.

I began sketching out some ideas on what these icons may look like for the Realms and Gods. I wanted to try and use illustrative icons such as the ones found in the Hades game but if I tried simplifying them down so they were easily recognisable. As these icon choices aren’t something that users would be used to I will have to label them for clarity. Because the icons are not all equally sized and shaped I had the idea on containing them within this crescent moon shape to ensure consistence throughout my design and layout. Another consistent  graphic I plan to use throughout is this kind of spiral effect on the icons, this is so they are all visually related somehow and have this stylised feel throughout the icon set.

Next, I began sketching out my focus characters screen, Zagreus, son of Persephone and Hades, Prince of the Underworld. Beneath the initial piece of information, I sketched 2 versions of family trees designs to use and I decided on the second as I prefer the hierarchy of larger mother and father silhouette Icons then the smaller general icons for siblings.

Because my app would have to be interlinked by relation (mother, father, son etc) and marriage then I had to do some research to better understand the myths myself and so that I would correctly organise information.

Below I have begun to figure out the different titles or groupings held by the figures in Greek mythology so that the info screen could include the right tags or you could sort by relevance of what you’re looking for in the search screen. E.g. Zeus was a god but his father Cronus was a Titan. I have also began writing down where each god was said to have resided, this is the most important part of my app but has definitely turned out to be the most difficult as some figures aren’t accounted for but for the most part I have the biggest names and where they would have been found. E.g. Zeus lived on mount Olympus and Hades lived in the underworld.

These are just some illustration of what the characters in my app may look like.

These where some ideas I had for the starting screen of my app. I like the second one the most, it reminds me of Olly Moss’s environments.

I then began experimenting further with the making my Home Screen/loading screen as the main screen on the app and its interactive elements. Looking at adding additional interactive elements where you could press on one of the streams on Earth and it would tell you that they led to the river Styx and the underworld, if you selected one of the collections of planets it would tell you about Uranus or if you pressed on the sun it would tell you about the god of the son. I’m not entirely sure how I would make this work but this again reinforces the idea of an atlas or map but makes it interactive as one page rather than many corridors of screens..

Expanding on my First Sketches 

I sketched some higher level of detail sections to experiment with style and see which forms worked best. I like how the streams seem to fall off the side of the earth down to the underworld to not only connect he two visually by leading the eye but to properly recreate the mythology.

Mount Olympus 1  

Mount Olympus 2 

Tartarus 1

Tartarus 2


Wireframes

Digital Versions

Once I was happy with my sketching I got to work with designing low fidelity wireframes in greyscale to figure out placement and content in its most simplest form.

Version 1

Version 2

The second version sees the introduction of colours and also the vector character which I was really happy with as I’ve never really drawn an illustration in Adobe Illustrator before. I would like to revisit this after a few years and try again. I resized the canvas to match that of my iPhone 12 pro as The Adobe XD app lets you view the app screens and this was where I would check to see sizing and placement in more of a real application setting.

I used some printed phones to do some pencil and paper wireframes of additional ideas I had for possible interactions to add to the screen.

 

Creating My Vector Character

As discussed in my research, I based my character design of of paintings found on ancient Greek vases and walls as well as inspiration from Olly Moss with the limited colour palette. I started in shading colours as this is how I would normally work with pencil and paper and because I have the most practice drawing this way it made it easier to begin creating my first vector illustration. From there it was a case of choosing my colours and used light and darker tones of red to imitate shading and highlights which gives it the appearance of detail without it including too much.

The background for the character was this same idea of shades of red as he is residing in the underworld I felt the stalagmite design conveys the appropriate volcanic, dangerous environment.

I used the same colour scheme for the main illustration on my Tartarus page, with highlighting and shading colours and hard angles to convey the feeling of it being made from stone. I applied gradients to the lava to give the effect of it being a light source and red hot.

I used this white circle to separate  the character from his background as the colours where very similar while also bringing him to the foreground.

This is when I implemented the white circle graphic behind icons rather than the crescent moon as it worked better at tying elements together, framing them while also making them stand out from their background. For the mother and father I chose to do profiles rather than a front facing view to convey them as secondary elements to the main character on the page but this also allowed me to show features without having to use shading as they are smaller in size, which otherwise would’ve been to busy. I’m really pleased with how these turned out.

Stylising and colouring icons

The next stage was to render the icons from outlines to coloured icons. The icons used in the game Hades are colourful and have an almost 3d feel to them with the use of this colouring. My approach to this was to create geometric angles within the shapes that I applied gradients that go from light to dark. This was my favourite part of the project. I tried to do something different and almost go against the rules of creating familiar, simple and easily identifiable icons and ended up with icons that looks like there made from gemstones. I feel that the outcome of this challenge I set my self was positive but reflecting back on my decision, I’m not sure if it worked in my favour by not following the core principles. Maybe there will be a way to reproach this idea and create a successful style of icon sets but in the end I feel these icon designs compliment my app screens.

 

Icons

finding a way to make the heart icon symmetrical.

Experimenting with menu types

As I overshot my expectations with how much work my sketches would take to make a reality, I created a secondary set of navigation menus for the Realms and the Gods and began experimenting where I could put the navigation bar. From my research I found that the top half of the screen isn’t the best placement so decided the bottom half would be the best positioning. I liked the idea of this wheel menu you could turn from left to right to reach your desired page and is reminiscent of the Greek wheel found in Cyprus.

 

I chose to have the menu nav button in the centre of the screen and a forward and backward button like you see on web pages on either side. The centre icon, the Earth, allows you to return to the main navigation page (illustration of the 3 sections as one environment) and if you press it once more it brings up the secondary navigation page for realms (the 3 icons). Essentially switching from illustration page to icon page when on either by pressing this button. Another idea is that when you want to switch from either the main nav page to the icon nav page you could swipe up on the earth icon and it would flip as the screen changed and you could swap back and forward at anytime between these two.

 

 

 

My Art Board

Version 3

the third version features the full colour screens. I had the most difficulty with choosing the colour for the background on the main home screen as I had got used to the grey gradient and liked that the best.

 

As I lost the spiral graphic that tied all the elements together when moving to digital, I introduced an circle interlocking pattern that can be found on Greek mosaics as feedback for the user when they press something. This also worked well with the circle graphic I placed behind elements as it fit in quite well and could appear once that element had been pressed so the user knew that they had successfully interacted with it.

Such as when you select a section of the main nav screen.

Or when you select the home icon on the nav bar.

 

Final App Screens

Screen 1. I last minute added an introduction page to let the user know how to use the home screen. I used Procreate to make the skull illustration because I wanted it to have nice blended shading effect but it was a bad choice as it doesn’t follow the same style as the other illustrations in my app but none the less I think its still a nice touch.

Screen 2. I decided in the end to keep this screen greyscale for purposes of showing that the screen 3 comes from selecting the part of the screen that is coloured, the volcano of Tartarus.

Screen 3. These where the only icons I kept the crescent moon graphic for as the circles didn’t work well when I tried it. The menu can shift from Realms to Gods at the top of the screen and the one you are viewing is indicated by the black line that moves between each heading.

Screen 4. This screen features the Gods on the app with a search bar to quickly pull up the God you want to find information on. Below this search bar there are a scrolling list of tags that you can use to search for those in Greek mythology that belong to this group. This idea was something I took from travel apps such as Trivago to help refine search results. Some icons are still line drawn icons as place holders of what I would like to include if I had more time to complete the project.

Screen 5. After additional research, I decided it would be best to label the icons to give the users more clarity on what the icons represented. For the typeface I chose Montserrat in Regular for main body text and SemiBold for headings and tags. This was because of its easy readability and pairs well with the wordmark logo which is Bell MT in Bold which is a serif font to resemble the Greek alphabet.

Screen 6. This is my favourite screen because the illustration turned out well. If I created more screens I would have the realms consist of a white background with black text and the God screens black with white text. Below the mother and father icons I would continue the page on to feature the siblings or other relatives.

 

Logo Idea

The last aspect I tackled was the logo creation as I tried a few different attempts to recreate my sketch ideas and I found it very difficult to execute it well.

When I revisited it I decided to put my Master Apprentice tasks into practice with finding a cloud icon that I liked and redrawing it using circles and rounded rectangles.

 

I also tried taking the head from my character illustration and trying to see if how it would look as an icon.

I quickly put together this little mock phone screen to see the how app icons may look in application to help make my decision. I like the 3rd option from the first row and the last option from the second row the most.

Final Icon Choices

I like the first cloud icon the most with purple colouring.

In conclusion, I really enjoyed this process. Although I had given myself too much work to start with when generating ideas, I would like to explore this project again given more time to fully flesh out those sketches I had I think this would be a really fun app. Now that I have created my first vector illustrations and they turned out surprisingly well, I feel less intimated by this process and look forward to creating more digital graphics.

 

I tried some ideas of the potential animations within the app, while they’re very crudely done, I got to try my hand at After Effects to bring some of these ideas to life.

Screen Recording 2022-03-10 at 17.06.31

Screen Recording 2022-03-10 at 16.02.08


References 

https://www.quora.com/What-are-the-3-places-where-Greek-Gods-lived

https://www.talesbeyondbelief.com/greek-gods-mythology/greek-gods-family-tree.htm

https://www.greekmythology.com/Olympians/olympians.html

https://www.rockpapershotgun.com/supergiant-artist-goes-behind-the-scenes-on-building-a-god-in-hades

Published in Uncategorized

Comments

Leave a Reply

Your email address will not be published.

Skip to toolbar