Adidas - Design Development

Once the wireframes were completed, I could begin to develop the actual app itself. This is to be done in Illustrator, I chose this format as it would allow me to later drop it into XP and create a prototype. Also for this submission we need a promotional video and therefore if done in Illustrator individual layers are easier to separate to be able to create an animation later on within after effects.

Within the developments below, began to create a visual style, that would be seen throughout the rest of the app development. Once the visual literacy had been created, each element of the app began to come together through the use of the wireframes as a base. As can be seen below each page was experimented with, while still in fitting with the wireframe (below experiments of the start-up page can be seen).  each these experiments very to the pages allow me to see a visual representation of the best way the app can fit in with its purpose, and manage the best standard of usability for its users.

Part of the app development was creating icons, the icons needed to be consistent with something that Adidas would use, whilst also being a clear and concise visual representation of the section that,  that particular icon takes the user to. In order to create icons created single line drawings of  neutral obvious imagery. The colour white was used to make it as clear as possible against the dark background, as this was the colour which had the most contrast against the black from the available colours that could be used.

 Whilst developing the app I also need to take into consideration the later animation, meaning I need to consider head which elements of the app would be moving at what stages. This may be considered the sizes and coloration of each element of the app. Such is the transition of the keyboard arising in the map section, which would trigger a colour mat behind to blend the map into the background whilst typing the location. Another example would be the consideration of the logo positioning from the sign in page to the home page, the logo would need to be shrunk and moved to the top of the screen of the phone.

 One of the major considerations when designing the app was the way in which we could signify pollution within the map. This is done using a semi opaque red circle, Circle is been used as it is adjustable in size to cover a particular area, allowing a simple and easy change to each time the pollution levels change. This is also due to the simplicity of the shape of the clarity between the circle and the map itself allowing for the most contrast between the two, creating emphasis around the areas of pollution and the need to avoid it.

 Some of the wire framing changed within the production process, this is because when it came to actually designing, to be able to easily access and present all of the features needed wanted by the users some adjustments had to be made. An example of this would be in the activity page. Rather than separate blocks showing the way in which the activity is changing, graphs and charts are used giving a more familiar way for the audience to be able to compare and contrast the way in which their changing/improving. This familiarity can be found in other health apps and therefore wouldn't suit the demographics understanding of the app, allowing them to instantly know how to use it without much learning.

Once the applicant assigned I had to make sure that each of the elements was on a separate layer, this was to when it came to animation the app would be ready for production instantly.