Environments

Volcano

After my flight was delayed because of a volcano eruption a number of years back, my appreciation of volcanoes has significantly developed. The fact that they are naturally occuring structures of which can be so unpredictable, destructive and unsafe really intrigues me and reels my interest in towards them. It is the level of which they intrigue me that has drawn me to include them in my project for Environments.

This is a sketch of the first of the environments that I developed - a volcano. As there were more varying factors in this piece, I decided to annotate and explore different possibilities in the possible styling of the different elements.

Using this sketch, I attempted developing a vectorised version of it in Adobe Illustrator, keeping to flat/material-design colour schemes.

This array of images was produced whilst experimenting with the layout and practical implementation of the volcano. Whilst developing the vector version of the volcano, I realised that the algorithms used within the image tracking won't be looking for the image itself, but instead for key points that can be mapped and tracked, hence the reason why towards the right of the images, I have implemented more going on in the background in hope that when it comes to implementaiton it will be more trackable.

The first two images of each row are of the initial volcano with and without the underearth, but most importantly the colour of the smoke is static and fully opaque, whereas the subsequent two versions are the same as the previous but with translucent smoke to allow for the colour of the background to seep through it slightly.

First of all, I decided to go with a dark blue background as I thought that it minorly contrasted with the orange of the lava, whilst keeping it dark enough to complement the shades of black used to create the volcano itself. I then experimented with a darker shade of blue; however, I decided that this was too dark and hence progressed on to some lighter colours. The red experiment was due to the inclusion of lava with consideration to the fact that I used an orange colour for the lava. All of the others were experiments with different colours and shades, finally landing on the decision to use the medium grey. This was because it allowed for the burst of colour in the lava to stand out against the shades of grey used in the rest of the image.

This was the final production for the volcano image:

I then used this 2D design to layout a 3D model in Google Sketchup. As this was a test, I decided to avoid the complexity of the bottom-sided earth. The first model of which I created utilised the simplicity of the shape of the volcano.

Version 1

However, I decided that this was too simplistic to look effective in 3D, therefore I decided to pursue with the 3D alternative of flat-design - low poly. This is a step up from standard shapes, as it experiments with sharp, robust curves made up of flat shapes.

Version 2

In the second iteration of the volcano model, I decided to transform the overall design towards more of a low-poly feel. This added a great amount of detail to the model, whilst keeping it simplistic.

Version 3

In the third development version of the model, I decided to tackle the underearth. My initial idea with this was to have every vertex of the base of the volcano to point towards a single point. This, however, as seen above, is not very appealing and looks rather rushed.

Version 4

As I was unhappy with the result of the underearth in the previous version, in this version, I decided to improve upon it. I did this by making multiple vertical lines from various points of the underside of the model, then linking the nearby base vertices to said points. Finally, after I had completed all of this, I linked all of the cone shapes to one master, furtherly elongated line, which allowed for a jagged look on the underearth.

Renders

Using the 3D model of the volcano, I exported it as a DAE (COLLADA [COLLAborative Design Activity]) in sketchup so that it could be imported into Blender.

This was the first of the renders I made, making use of the standard Blender render engine.

With this render, I decided to experiment with the included "Cycles Engine" including in Blender, which produced more realistic results. I liked the way that the realistic rendering worked with the low poly models, as the two are almost polar opposites; however, in this case they seemed to work rather pleasantly.

In this render, I added a source of light above the volcano.

With this render, I offset the volcano to the left and included a soft red light, then using the blender engine again.

This is the same scene as before but done using cycles.

Here I created some low poly terrain around the volcano and rendered it using the standard engine.

This is the same scene but done using cycles.

I rotated the volcano around so that the edge that caught the light no longer caught the light, resulting in smooth colouring around the tip of the volcano.

I added some duplicates of the volcano and added some mist.

Here I altered the lighting a little and reduced the amount of mist.

This render is the same scene but done using cycles.

In this scene I rotated some of the volcanoes around and included the soft red light again.

I added a light source above the volcano again and used the cycles engine to render this scene.

Here I rotated the volcanoes more to match the gradient of their nearby terrain.

In this scene I re-renabled the light above the closest volcano and used the cycles engine.

Pyramids

The Great Pyramid of Giza is the only original existing wonder of the world from the ancient list. The mystery surrounding the construction of the pyramids relative to the era they were bult in brings a lot of interest and theories as to their how they were built. It is the significance that a pyramid is the only ancient world wonder that still exists and the fact that they are shrouded with mystery that drew my attention to pyramids and fueled my incentive to include them within my project. Furthermore, they are not directly accessible to most people, hence I wanted to bring them closer through augmented reality.

As a form of rough plan for the image to be used for the pyramids, I drew up this quick sketch so that I could begin the digital development process as quick as possible.

From this sketch, I was able to neaten up the idea and produce the following vector designs in Adobe Illustrator:

The entirity of these images have a constant factor of the pyramids; however, the positioning, size and colour of the sun, in conjunction with the background have been experimented with throughout. The initial idea was of a blue background, transitioning through to gradient colours to represent the sunset. The final background of which I decided to use was a cream-related colour which contributed towards the consistent colour scheme as well as allowing for the pyramids to stand out from the background.

The final production of the pyramids image was with the large red sun combined with the cream-related backgruond.

Using a similar process to the above example with the volcano, I used this 2D design to produce a 3D model in Google Sketchup. I kept the image next to the model of which I was creating as a reference point. This helped me to produce a similar layout in the 3D model as what was seen in the 2D model.

Version 1

The first development version of this model solely contained the layout of the pyramids. I wanted to perfect this relative to the 2D design, hence I decided that it would be suited as a seperate development version so that I could confirm the layout before developing the underearth.

Version 2

After confirming the layout from the first version, I decided to progress with the underearth in a similar fashion to that of the volcano. This time, I decided not to jump straight to the more advanced layout of the underearth due to the lack of symmetry in the ground that I drew around the pyramids - I wanted to see how this would look with every vertex being linked to a single point.

Version 3

As I wasn't pleased with the outcome of the third version, I decided to re-work the underearth. I used the same technique of which I used with the volcano to make the underearth appear more randomised and, what only could be described as natural for something as unnatural as a floating island.

Version 4

The main changes in this development of the pyramids island was the modification of the ground. In the previous version, I kept the ground flat so that the pyramids would be more noticeable; however, I decided that this would not be natural for the intended environment and hence I deicded to implement a more natural feel via the randomised level of points in the ground. To do this, I cut the ground up randomly into different segments and began raising points. I then corrected some of the divisions to give a more natural flow of the land, resulting in small, low-poly sand dunes.

Renders

These are the renders that I produced for the pyramids model.

This was the first render produced with the pyramids model, using the standard blender engine.

All of the following renders were created at intervals of 30 degree rotations, allowing for a ful 360 degree rotation across 11 images (including the loop). After the individual renders, I have included a GIF created from these renders.

This is the experimental GIF created from the rotational renders.

With this render, I wanted to capture the upper side section of the model, including the pyramids and terrain.

Desert

One of the iconic biomes I have wanted to visit is a desert. What interests me about the idea of deserts is that it is typically seen as majorly far from the life we have evolved into - urban jungles, accessibility to water, comfortable temperature, etc. The shear heat and dryness of a desert almost feels fictional when being compared against the comforts of everyday life; however it is a completely non-fictional environment of which exists all around the world. Because of this, I decided that deserts were one of the environments of which I wanted to cover.

Before I could begin creating the 3D model, I needed a reference point, hence I began devloping the 2D image to be used in conjunction with the model via an initial rough sketched plan.

After developing this sketch, I was able to use the extremely rough idea of the layout and content to produce the vector image as seen in the subsequent series of images:

The development process of the desert scene was rather simplistic. I was able to reuse components from the pyramids scene to be able to keep consistency throughout my work. The first seven versions of the desert scene were experimenting with the background as well as the position and location of the sun, as seen in the previous work; however, when it came to the final experimentation, I decided that the scene looked particularly bare with only once cactus, hence I decided to include more at different depths. Furthermore, I thought that having the large sun in the background was not getting enough usage, therefore I decided to include a small flock of birds flying across the scene in front of the sun.

Using a similar process to the above example with the volcano, I used this 2D design to produce a 3D model in Google Sketchup. I kept the image next to the model of which I was creating as a reference point. This helped me to produce a similar layout in the 3D model as what was seen in the 2D model.

Version 1

The first of my versions of the desert model was relatively complete. The majority of the time taken to develop this model was dedicated to perfecting the shape of the cactus. To do this, I originally made a simple outline version of the cactus using the 2D image I created of the scene earlier. From the line which resembled the vertical center of the cactus, I created an octagonal-prism. To round this off at the top, I copied the octagon face and scaled it down twice to form 2 steps between the vertical and horizontal lines. Using this shape, I then copied it over the other lines and extended the edges of the shapes so that they intersected, essentially outlining the shape of the cactus with octagonal prisms.

Version 2

The second and last version of the desert model was similar to the transition between version 3 and version 4 of my pyramid model. I focused on making the ground appear more natural using the same technique that I used in version 4 of the pyramids model to replicate the natural behaviour of sand in a poly-like fashion.

Renders

The following images are those of which were produced after rendering the model in Blender.

This was the initial render of the desert model using the standard blender render engine.

This was the same scene but using the cycles engine for the rendering.

For this render, I fecided to focus more on the scene of the cacti and pyramids themselves as opposed to the model as a whole.

This is the same scene but rendered using the cycles engine.

Finally, this is a top-down view of the model rendered using the cycles engine.

Valley

One of the environments I wished to create was one of a valley in which water was pouring out of from. Although this is more of a fictional landscape when compared to the others I have used, I decided that it would be worth experimenting with. I came to this idea after being out on a walk and seeing an almost vertical stream going between two hills. I then abstracted the idea of the hills and the stream and exaggerated them into mountains and waterfalls.

To begin the development process for this environment, I needed to establish a plan for the image so that I could then develop the 3D model. Following a similar process as with the previous models, I developed a rough sketch to establish the grounds for the image:

After creating the basis for this image via the sketch, I then progressed to developing the image as an illustration. Throughout the development process, I decided to experiment with different shades of the blue for the background, as well as the positioning of the sun as seen in the pyramids illustration.

Primarily, I started with a light blue background; however, I soon realised that this clashed with the blue colour used for the water, meaning that it was hard to differentiate between the water and the background. To solve this, I decided to use a darker shade of blue for the background, which allowed for the border between the water and the background to be distinguishable.

Regarding colour, I decided to stick with a blue background throughout as I thought that the greens, browns, greys and reds/yellows in the images worked well when being the colour of lesser significance within the piece.

This was the final production of the valley image for use within the application.

I then used this 2D image to begin planning and developing a 3D model to replicate it in Google Sketchup. As with the other models, I kept the 2D image next to the model throughout development so that I could reference colours and shapes, ultimately resulting in a 3D model resembling the 2D image.

Version 1

The first version of the valley model solely consisted of a tree and the basic structure of the mountains and water. To stick to the low poly style, I decided to make the mountains out of rigid 5-sided cones as opposed to smooth, circular cones. This also allowed for me to position them in such a way as to form an area for the water to sit within them. After creating the mountains, my focused turned to the tree. Again, I could not use a spherical object for the tree as it would go against the idea of low-poly models. Instead, I decided to create a pentagonal prism with both end faces raised from the center to form a very rough spherical shape. To make it feel more tree-like, I then divided each of the side faces with a line from the top right corner to the bottom left, allowing for me to move the corners of the faces to roughen them up. This resulted in the basic structure needed for the leaves of the tree.

Version 2

In the second version of the model, I focused more on the ground, creating a low-poly terrain by hand using similar techniques to those used in the pyramids and desert model. On top of this, I also had to ammend the stream of water, as it was running to an abrupt stop. To fix this, I decided to form a puddle within the terrain at the foot of the mountains.

Version 3

The third and final version of the model introduced the inclusion of branches in the tree as seen in the 2D image. I decided that these would strengthen the relevancy between the 2D image and the 3D model.

Renders

The following images are those of which were produced after rendering the model in Blender.

This render is of the basic model using the cycles engine.

In this render, I decided to set the ground colour to match that of the terrain in the model.

I then developed said ground to form low-poly terrain around the model, matching its environment.

After producing the previous render, my attention was brought to the tree, so I decided to isolate it in its section of the scene in a seperate render.

This is a standard blender render of the tree in full isolation.

I then changed the render engine to use cycles to see how the tree looked against a directly grey backdrop.

As an experiment, I then decided to change the colour of the light to resemble a yellow colour, overall giving the render a more earthy feel.

For further experiments, I then changed the colour of the light towards green to complement the colour of the leaves; however, I don't believe this was as effective as the previous colour change due to the fact that the previous one highlighted the colours more due to the use of a different colour.

Boathouse

I wanted to use the boathouse at Newmillerdam as an environment within my project as it is a feature at a local country park to me. Not only this, but for a long time I have been visiting the park without knowledge of what the building is. The fact that the building is isolated from a man-made environment drew my interest towards it. The boathouse itself is a grade 2 listed building, meaning that it is a building of special interest. Another factor that drew me towards wanting to develop this as an environment was because of the castle-like structure in which it has been built. Personally, I have always found this interesting and hence I decided that I wanted to use this within my project.

For the boathouse, I decided to follow a different procedure. As this was based on a physical local landmark, I decided to visit it at Newmillerdam and photograph it from all of the angles possible. Since this is positioned next to the water, some of the photographs had to be taken from the opposite side of the dam, hence the poor quality of some of the photos due to the use of digital zoom.

I then used these photographs to develop a 3D model resembling the building.

Version 1

Instantly after finishing the model, I knew I was displeased with it; however, I decided to go onto the production of the image target for the model so that it could be implemented as an environment.

After finishing the model, I knew that I preferred this design over the attempt of recreating the building in the first version of the model. As a result of this, I decided to start the 3D model again from scratch, focusing instead on the design from the flat image instead of the actual structure of the building. I kept the general structure and layout of the boathouse; however, it does not resemble it exactly, and in my opinion, the result of this was much better than that of the first version.

Version 2

After following the design scheme developed from the image, I was much happier with the outcome of this model when compared against that of the first version. I liked the simplicity of the shape of this model over the first version, as well as the increase in detail via the bricks that are stuck out from the walls. Also, having a defined colour scheme helped greatly to determine the colour of the walls and other components of the building instead of attempting to recreate the brick texture via a solid colour.

Renders

The following images are those of which were produced after rendering the model in Blender.

The first render of the boathouse was done in blender using the standard render engine, which produced sharper shadows and overall better quality lighting than that of Sketchup.

I then decided to change the render engine to the cycles engine to see how the boathouse would look after being rendered in this engine. To my surprise, the outcome was not what I was expecting based on the previous cycle renders. In this case, there seemed to be more reflection of the colour of the model on the floor, as well as better positioned shadows. After this render, I thought that it almost looked like a paper or wooden model that had been photographed within a studio.

This render was of the back of the boat house, showcasing the stairs and ridged door found on the back. Although the source of light in this scene was not highlighting this area, I was still amazed by the quality of this render, as the idea of it being similar to a photographed physical model had carried through.

With this render, I decided to change the direction of the light so that the rear of the boat house was illuminated.

For this render, I decided to get a close up of the staircase and the door as I appreciated the number of opposing edges and the lighting that these caused.

This is a widescreen render of the rear of the boat house, capturing, from a straight angle, the majority of the back of the boat house.

I used the same style again to capture a wide render of the front of the boat house, including the dark area cast by the archway.

Finally, I produced a top-down render of the model, as I found the symmetry and repeated pattern of the lining of the roof to be satisfying. This also granted a good opportunity to showcase the detail in the roof via the repeated ledges and the shadows cast.

Iceberg

The reasoning behind creating an evironment with an iceberg in it was to do with the looming scare of global warming. It is predicted that by 2100 the earth will have warmed by 4 degrees celcius, which one the grand scheme of things may not seem like a problematic rise; however, this will "guarantee the melting of the Greenland ice sheet and some of the Antarctic ice sheet" - quoted by Professor Steven Sherwood, (University of New South Wales, Australia), in an interview with The Guardian. Due to this, the result of global warming will not just lead to the loss of the natural beauty formed in ice, but also the loss of the entirity of an environment. Because of this impending threat, I decided to include this as an environment within my project.

I began the development of this environment the same way I had done the others - via a sketch. This allowed me to quickly and roughly plan the shape and features of the scene. The relevance of the tunnel through the iceberg in this case is its representation of the melting of the iceberg.

After developing this sketch, to begin the development of this environment, I first needed to create the 2D image for it, which has been documented below:

The first of the developments of this piece contained the basics of the landscape, including the iceberg itself, the water and the sun. I also decided to include some long shadows being cast from the underside of the iceberg as it reduced the emptiness under the sea.

To add more natual features to the landscape, I then included rays of light from the surface of the sea, fading out as the depth increased. In the sky I decided to add some clouds, as clouds are another factor of which will be impacted by global warming.

I then decided to add wildlife in the sky and in the ocean to represent the entire natural ecosystem that will be damaged, including the animals of which icey environments are home to. In this development I also included a boat to resemble the fact that it is possible that one day the oceans will not be home to icebergs such as these, but instead man-made constructions, such as boats.

I then brought some of the fish closer to the centre of the piece so that Vuforia would be able to track this piece more clearly. I also applied a darker tint to the shaded edges of the iceberg.

The darker tint mentioned before was then added to the sides of the boat to give more definitive shadows. This was also done in the hope that Vuforia would have more points to track.

Finally, I moved the sun further away from the iceberg so that it would be easier to distinguish the edge of it when tracking the image, this was the final production of this image:

As done before, I could then use this 2D image as reference to create the 3D model in Google Sketchup to keep the design similar.

Version 1

The first model for the iceberg was complete in terms of the iceberg itself; however it was still lacking other details such as the water and the inclusion of a boat. To create the basic structure for the icebergs, I used 6-sided cones of differing sizes and then drew lines across their joins in order to create a smooth transition between them. This gave the jagged look and feel that is present within the 2D image.

Boat

I decided that it would be easier to develop the model for the boat seperately to that of the iceberg, therefore I created a new document and started. I used a rectangle to determine the initial shape of the boat, then having symmetrical angular lines to define the shape of the boat. I then divided the deck of the boat into 11 sub-division, which I then alternately lowered. When creating the sail for the boat, I decided to stay true to the 2D image and kept the gap between the mast and the sails as I thought that it strengthened the relationship between the model and the image.

Version 2

In the second version of the iceberg, I imported the boat into the model so that I could see the two sections of the model together.

Version 3

With the 3rd version of the iceberg, I began working on the terrain to resemble the water. To do this, I decided to create a new model and import the boat and the iceberg seperately so that they could not be directly edited accidentally. As I wanted to see how this would look on water, I decided to leave this version here.

Version 4

The final version of the iceberg model involved elevating random points of the water so that it had a low-poly look and feel. As the iceberg and boat were imported and not directly editable, I was able to do this with ease without having edges overlapping and forming new anchor points.

Renders

The following images are those of which were produced after rendering the model in Blender.

The first two images were done in the same position and rotation, but making use of the two different render engines.

I then decided to produce some face-on renders of the iceberg from higher angles to capture the entirity of the iceberg and then a lower angled one to capture the light at the end of the tunnel through the iceberg.

The first five renders I made of the boat, I decided to experiment with the positioning of the boat and its background. This allowed me to view the model from different angles and hence different lighting conditions. By changing the colour of the background in the last of these five renders, it gave me the idea to develop a small scene using the boat.

To begin these scenes, I create low poly terrain with a reflective material to resemble the water, although, the reflection was only visible through the standard render engine. In the last scene, I noticed a small spot in the upper left corner of the image that appeared flat, therefore I decided to experiment with it more to include the build-up of a small wave.

In this group of three renders, I decided to build the scene more by including copies of the boat. Towards the final render, I rotated said boats to match the gradient of the water beneath them, giving a more realistic look.

I then produced some close up renders to highlight the low-poly detail in the deck of the boat under both of the render engines.

These final two renders of just the boat took a step back to capture the three boats used in the scene.

These renders show the my thought process for the animation of which I envision the 3D model doing whilst being augmented. My idea with this was to have the boat perform a circular sailing motion around the left side of the iceberg. The final render of this group however, corrected a small hitch that I noticed - there was a slight gap between the water and the iceberg and boat. To correct this, I moved the models down slightly. I also decided not to include the low poly terrain here so that the path of the boat could be visualised clearly without any obstruction.

With these renders, I then began to develop on the idea of demonstrating the motion of the boat by periodically placing a copy of the boat to replicate the path it would take.

The final four renders of the iceberg were of the final model of which was going to be used within the application. Originally, I had just the iceberg with the low-poly water that was developed in Sketchup; however, I realised that I would need to see the scale of the boat against it now that the size of the water had been determined.

User Interface

One of the first things I had to design and develop was the user interface for the application. Before I established the final design, I developed different designs for the main menu of the application, which is shown throughout the development process below.

Version 1

When first developing the UI for the application, I decided to replicate the design used for this website. I had initially set the application to be in the landscape orientation, allowing for me to replicate the desktop version of this website.

I felt as though this wasn't appropriate for a mobile application as the buttons were too small to accurately press, meaning that it would ultimately be much harder to control and navigate the application. Also, there was too much space on the right hand side as I could not think of what could fill the entirity of the space.

Version 2

I redesigned the menu for the application so that it would be easier to navigate on a mobile device, whilst sticking to the landscape orientation.

Having the screen divided into two sections meant that the buttons were easily identifiable as well as pressable. Despite this, I still felt as though the interface didn't suffice for the overall theme of the project.

I also created an animation for a loading screen for the applicaiton; however, due to limitation with the MovieTexture in Unity, I was unable to implement it in the way that I originally thought. To showcase this, I have created a GIF from said animation.

I created this in Adobe After Effects, creating the graphical elements in Adobe Illustrator. Using keyframes and tweening, I was able to produce the smooth motion of the rotation of the phone, followed by the entrance of the "3D model" onto the "image target". In an attempt to replicate the same augmented reality experience seen on the phone, I applied a mask around the "3D model" which followed the screen of the phone. When the phone rotated, I kept having to update the mask so that it would always follow the edges of the screen.

Version 3

I decided that a major factor in the displeasingness with the interfaces so far was the constraint to a landscape orientation. As a result of this, I decided to pursue the rest of the interface design in a portrait manner. On top of this, I decided to go astray from the previous layouts that resembled more game-style interfaces and decided to head more towards standard material application interfaces. This was much harder to implement in the Unity Editor since it is designed for games, meaning that I couldn't make use of the native layouts and elements of which would be available in an alternative IDE such as Android Studio.

With this layout, I had the control buttons to open the augmented reality and model preview sections at the bottom. At the top I decided to include a header stating the application name, as well as thinking of content of which can fill the gap in between - previews and names of the images so that the users know what the application will work with. I was much happier with the outcome of this interface that I decided to pursue the rest of the design of the interfaces within the application in this style. Below is a screen recording of the menu that has been produced as a GIF.

As can be seen in this recording, the menu is scrollable, with all of the images being shown alongside their names. The downfall with using the Unity Engine for interfaces was that all of the images had to have their widths and heights predefined, meaning that scaling them to fit across different aspect ratios and resolutions may have been troublesome. To avoid this, I decided to have a set rectangle of which the image was contained within, scaling said images so that they cover the entirity of the rectangle. This cuts some of the edges of the images off; however, it makes them look more appealing having them as the same size without any background showing.

Continuing with the design scheme established from this version of the interface, I needed to develop an interface for the model previews of which I intended to implement. To do this, I followed generic material design standards, keeping the header bar at the top as well as having a back arrow so that the user can return to the menu.

I also included the same styling for the bottom bar that was seen in the main menu. In this scenario, I decided to replace the two buttons with previous and next buttons of which would control the preview of the model seen on the screen. The user can use these buttons to navigate through the model previews so that all of the models can be seen if the required images for the augmented reality experience were unavailable to the user. To show the functionality of this, I also decided to create a GIF from a screen recording of it.

Finally, I needed an interface for the part of the application were the user uses the devices camera to view the models via augmented reality. To do this, I used a copy of the interface that I produced for the previews and removed the bottom bar so that it wasn't covering the watermark put into place by Vuforia. Also, this bar was not needed as no further interaction with the screen was required to trigger the AR experience, as this was done via the camera.

This was simple enough for the interface needed for this section of the application as it needed minimal obstruction to the viewpoint, as well as consistency of design. An alternative would have been to seperate the back button from the top header and place a small background around it, meaning that almost the entire screen would be visible; however, this would not follow the same design scheme as the other interfaces had and hence I decided to keep it as is. Again, the basic functionality of the camera interface can be seen in the following GIF, including the launching from the menu.

Icon

The application required an icon. Since my interpretation of 'Environments' consisted of being able to visit different environments (presumably from across the world), I decided that a good starting point would be the inclusion of earth. On top of this, since I am aiming to deliver an augmented reality experience, I decided to include an eye into the icon as it represents vision, meaning that the users are able to see these different environments from around the world.

In the bottom left, I have experimented with different shapes and styles of the eye icon, finally resulting in the second to lst as it had a good balance of shape and distance between the pupil and the edge of the eye. Since the colour scheme I was going with consisted of mainly purple and white, I decided to experiment with these colours in different relevancies; however, it came to my attention that I have been primarily using purple for background elements and hence I decided to go with that colour scheme in the end. The initial idea for the shape of the logo was similar to a badge as I thought it looked different from the norm, whilst still remaining relevant and aesthetically pleasing. This, however, was proven to be innefective after I used it as the icon for the application. The two subsequent images show the icon on the home screen and the application drawer of my phone respectively.

Although this particular kind of icon styling is only relevant to the Samsung Galaxy S8, it made me realise that any other phones using a similar system would also encounter this, making the icon too small to visually interpret well. On the other hand, when the traditional rounded rectangle version of the icon was used, this was the result:

This looked much more effective than the likes of the other style of icon and hence I decided to keep this icon as the final icon for the application.

Development Process

To outline the development process for each of the environments, I decided to create this infographic, showing how the different components were used in conjunction with one another.