Design Process and Planning

Back

Visulisation Diagram

Pitch

Mood Board

I started my production on the app design by starting to design the switch used on the settings page to toggle between light and dark mode as I was inspired by a video I saw on online. for this projects I primarily used a software called Figma that I taught myself.

To continue on with the design of the switch i added a dark mode that keeps with the theme of the sun/moon .

I added the switch to the frame in which i was using for the base of my settings page.

i decided to use the purple theme after doing research into colour theory.

I then decided to scrap this ideas as as much as I felt it looked good on its own I felt it id not fit in with the theme of the rest of the app and what I am trying to portray as it felt too childish. Because of this i changed it to a more simple sleek look.

I added my logo to the op of the page as from my research in to other apps like my own this is what I found.

I felt like I needed more to be added on the settings page as I planned so I added a slider for volume.

Next I designed the other pages and buttons to press to go between them. I wanted to do this as it gives the app a sense of customisation to the users as I felt this was important for the type of app I was making.

After this I spent some time designing the navigation to make the app be able to go between each of the pages i have designed. I also spent some more time making the app functional using Figma as before.

after this I wanted to move onto the home page of the app so I started off by making the base background on photoshop.

I then created the backgrounds using the same technique for the other variations.

I decided to keep to my planning and add different boxes for audios the user would be able to listen to and buttons to click to go to sub-pages.

I did the same for the other pages and changed the background and colour to keep a cohesive design across all the pages.

I wanted to make more pages so I decided to make a loading page for when you first boot up the ap as this is something you would typically expect to see.

I felt like the sun did not look as well as i wanted it to so I removed it and also made a light version of the app to fit in with the rest of what I have designed.

lastly i decided to make the login page and the app icons on on photoshop as this is again something you would expect to see for an app.