Sunday, 19 November 2017

Design for Screen - App Design Development

Loading Screen:






The first opening page of the app needed to make an impact and tell the audience what the app was about. This was the perfect opportunity to also begin exploring how the colours I had chosen appear on screen, thus allowing me to narrow down my selection process. Due to the nature of the screen design, I could design in RGB format giving me more freedom to use almost neon shades. This is something I wanted to be evident in the app, to represent modernity and creativity.

Sign up/in screen: 





My first three explorations use a variation of three colours, this is something that is seen throughout flat colour design. The first design proved to be too sharp against the bleak white background and too bright to look at on screen to the point where it became uncomfortable, to combat this I added the strip of deep blue behind the content. This has been put on an angle to represent a moving away from the normal and creating new and modern works, which the app with enable people to do. To be able to further make the content more visually involving I added a light grey background, this softens the look of the app as a whole, and is something that can be used throughout the design of the app as a consistent backing. Although these tones that have been used above coincide with the blues I had chosen to experiment with, they give the corporate look that I was trying to stray away from; to neutralise this I needed to add another colour; in which I looked back on my colour theory research. 







The colour red has been added because of its link to creativity, the way in which it is placed on the page shows a gradient of colour, but in a flat colour manner. Through doing this it is both keeping to a current trend of gradients but also having a more modern contemporary twist on it. The symbols below the logo are used to sign up for an account using a connecting account, I have used behance, linkedin, facebook, google plus and dribbble as they are the main networks that creatives would be using as a current platform. The logos have been vectorised and recoloured to match the scheme of the rest of the app.

Home Page: 










The home page is where the swiping of profiles begins, the largest thing on the page is always the image, when clicking on the right and left-hand side of the image it will run through a short preview of that persons portfolio, although you won’t be able to access their full profile until they have also clicked yes on your portfolio. As I progressed with my designs and played with the positions of layers and use of colour I have decided that the red that was evident in the sign up page should be used as the accent colour throughout the app rather than a full background filler. Due to how bright the colour appears when on screen it is too distracting against the art work which should be the focus. Rather than thumbs I will be using a small x and tick to be able to identify yes and no this is something that is easily identifiable and will not need explaining to new users. It is also a symbol that can be made as small as possible without becoming confusing.

Messages:


















The messages page needed to be something that was familiar with the user but also different enough to be creatively stimulating as this is the place where most of the initial collaborative conversation would be taking place. I wanted to also keep the work itself a big remaining factor within the layout as the profiles have no personal information or images rather just images of the work this is what people will visually link with the conversations they are having.
The way I originally thought of doing this was through using a none opaque white box with the dialog in it over the work, although depending on what the work is behind the dialog this may become a confusing way for the artists to begin to talk. With the addition of the needed basic information such as their name and location, as well as a link to their profile and the keyboard, further confirmed the difficulty on reading the needed content of the messages.
In order to incorporate the artists work more into this section the grey way replaced with the artists work, this has a more natural flow than the addition of another square underneath. The text became clear by making the box opaque, as the box did not go to the sides of the screen enough of the work is still evident to make the visual links.


Menu:











To develop a menu that was functional and clear I needed to use the current pallet in the way that provided the highest contrast, thus I have used the red that has been used in the accents of the app throughout. To be able to soften this at first, I began to add a clear gradient towards to lower part of the menu this allowed for the work to still be seen under the menu, but it contrasted against the block colour flat design style I was aiming for. This was also an issue faced when exploring creating differentiation between the menu and the app background, after multiple explorations I decided that the hue of the red alone creates such a contrast against the other sections of the app it would not need to be placed on top of another softening layer.

Archives: 








The archives section mainly needed to be clear and functional in a way that was easily navigable as it would be storing information that would need to be accessed long after it had been processed. To do this I began with a simple page that simply clicks through to a list of profiles in which the one needed could be found and contacted. Although the design style used was too garish and uncomfortable for the eye, something which this page must be. To simplify the design, I used the more neutral colour with the folder icon, showing the fact that it is a storage unit of all of the saved artists. Yet this just seemed to have the corporate rigged-ness that I wanted to move away from in order to correctly entice my target audience. To do so I took inspiration from the previous elements of my design and created a file like animation which opens when the specialism is selected to present a list of the profiles in a similar way that they are in the messages page, giving the app a strong consistent visual identity. Under each of the profiles there is also a small day count allowing the user to easily find the artists they are looking for in chronological order.

Profile:

















My development of the profile page began as an extension of my wireframes, in order to fit more on the page itself and show case the work in the best light possible. Although due to the placement of the cells it had too much awkwardly placed space to fill this out I experimented with resizing some of the elements although this then left white space that could be utilized for work to be displayed. In order to correctly fill out the space I reorganized all of the interactive features into one area allowing the user to get all the information they need from the one section. It enables the user to interact with the artists connect social media, as well as message, archive or block that particular user.

No comments:

Post a Comment

OUGD603 - Statement of Intent

I am a graphic designer with a great interest into branding and visual identity, using a mix of modern and traditional styles in a sophisti...