Saturday 3 December 2016

First mock up of the app-Card






As there are multiple ways in which to use the scan aspect of an app,multiple approaches were explored. Both a captured and corner approach were looked at in detail, as they are both effective mechanisms. Both will be explored visually before an outcome is derived.  


To begin the second page of the apps design, I fistly looked at the previous design in which apple used to complete the same procedure. The layout was clear and effective, and works successfully.Although the app could just maintain the same spread, it was decided to explore with the design, as I wanted it to appear stronger and directed at a younger audience. 



As I was unsure upon how to represent the scan, the original was firstly added to the design. Due to the image quality this did not appear professional and thus this idea was scrapped. 



The way in which the card may be scanned was then explored, with an corner approach being taken. This appeared somewhat harsh and didn't comply to the soft edges expressed within previous designs. Due to this it was decided to alter the shape.




After altering the shape, further design components were added such as opacity change. This is to express the idea that the central design would be opaque, and show the cameras view. Colour was then highlighted, with both black and white being explored for the background. Although the 1st pay expresses a black background the 2nd appeared immature in this style. With the white opening the page further to the audience. As a result of this the white background was selected. 







Hierarchy of information is often important when expressing the conformation of a product and thus it is essential that this aspect is highlighted. Icons may be used in order to complete this, alongside exaggerated type size. 




Key details were then included within the frame, such as a 'go back' arrow, text and a card approved section. Composition was explored, especially within the designs in which altered the size and shaping of the tick. This was highly important as although the app wants to express verification, it doesn't want to appear immature, a factor in which a thick cartoon style tick may express.




Further information was then expressed in an attempt to inform the consumer. Key text was enlarged, and in some cases capitalized. Buttons were also included in order to make the process easier. Again curvature was present within all shape forms. 




Composition was again explored, with text, icons and images being moved. This was completed in order to gather a layout in which is directly easy to use. A button was also added in which allows the consumer to add the approved card to the control centre, a factor in which is clearly expressed. Key icons from the previous app have been used in order to express this, and thus keeping consistency. 





When deciding upon the format of a declined card multiple options were explored. It was decided to rule out any designs in which express a large cross as this may appear negative. The same being that of red text. This will be explored further digitally. 




A different spread in which tackles the negative side of the app was then produced. This expressing the failure of conformation. A range of ideas were expressed when completing this, language was also extensively explored. The usage of red felt intimidating, and annoying and thus this idea was rejected.



As the design appeared very naive, a new design was explored. One in which mimics that of all apple products when an error occurs. Using this display system not only allows for continuity but expresses a design in which can be relevant due to other errors that are not based just on the card. 


The background was darkened in this instance in order to focus the consumer upon the problem. This is highly important as consumers may attempt to select other areas of the page in order to get rid of the bar.

No comments:

Post a Comment