Design for Screen - App design developments 2

The development then continued to the login screen (figure 1) as this is something that very quickly gives the impression of what how visual design of the app will follow throughout. With no use of any visuals other than the small rectangular boxes for the user to type in their details, the first development is not very visually pleasing. This was developed by adding two of the colours from the colour scheme and then the top bar was added around the title of 'login'. The colours did not work but the title box did so this was carried on to the next development. As it wouldn't make sense to make use one of the 4 colours on the login page when they are needed for the categories, I changed it to black to see if this worked better. Visually it works well to keep the first and last pages neutral as the user has yet to enter any of the sections of content where the colours would be appropriate to use. To try and incorporate a bit of colour I tried to have the text and the password vary in colour as the user typed. This was hard to read and visually did not suit the sophisticated aesthetic the app was intending to have. As the developments continued, it became clear that it was the simple approach that worked best for the log in screen. 

fig. 1

In terms of establishing a visual element that can stay consistent throughout the whole app and has relevance, it was found within the accent on the letter 'o'. The horizontal line above the letter 'o' can be used as the structure for the app and help to form the visuals surrounding the ways in which the app is organised to work to its optimum. Figure 2 shows the experimentation with this idea applied to the different parts of the app to see if it works. The layout throughout that app is based on the placement of the lines and the text on the menu screen, ensuring that the app flows consistently on every page. The line on the articles section lines up next to the title that is being expanded and read by the user. This very simply and discretely allows the user to distinguish exactly what they are reading but in a non-intrusive way. This is the strongest visual for the app and with a bit more development and refining, it could lead to a well organised, visually minimal and sophisticated interface design. 

fig. 2

To further explore the concept of sunrise within the design visuals of the app, I experimented with the way in which a gradient could be used to show the rising of the sunrise in the mornings. For each of the splash screens (fig. 2), I used a single colour, set the gradient to 90 degrees and lowered the opacity so that the title could be seen. Visually it looks good, but when applied to other aspects of the app design (fig. 3 + fig. 4) it doesn't add any aesthetic value. Having the gradient over the titles in the menus complicates the design and looks very harsh across the screen. The single line to emphasise the colour as a section divider works in the best way, allowing for ease of use and ensuring that the user is not distracted by the content that they want to read.

fig. 2

fig. 3

fig. 4

In order to try and develop the way in which each of the categories is represented through colour, I changed the colour of all of the backgrounds (figure 5s) to appropriately fit in with each of the sections. When designing on the computer it looked as though it would work well, but then live previewing it on the screen of an iPhone confirmed that aesthetically it wasn't very strong. The coloured background went against the research into the fact that news apps work best when they are organised and fairly minimal in terms of layout and colour scheme as the main focus is on ensuring that it is easy an not complicated for the user to read the articles. 

fig. 5

fig. 5

fig. 5

fig. 5

fig. 6

Before I began the process of looking at how I want to present the app and showcase how the user would be able to use it, I thought that printing it out (fig. 6) would allow me to see it in a new light and I could annotate the areas in which improvements are needed to be made. 

- a log in screen without the boxes filled out needs to be made
- look at whether the lines across the page work in the best way 
- show how the internet icon takes the user to the article in its original source on the internet
- a personal account icon needs to be added to the top right to allow the user to log in and out of the app 

This video animation showing how the app can be used by the user has helped me to see exactly which parts of the wire framing need to be changed and also some design elements that could be improved. 

Another design approach that I took to try and represent the sunrise more within the app other than just through the colour scheme was to change all of the square images into circles (fig. 7) and then staggering them to give a slight rising effect or to represent movement in some way as the user scrolls. I also tried out the menu with icons to represent each of the categories. As the categories are not common in terms of other apps using them, it was hard to find relevant images that the user would be able to relate to and instantly associate with the particular section that it would lead to. The addition of the face in the corner does work well as there needs to be somewhere that the user can click to be able to log out of the app. 

fig. 7

As the circle aspect of the design development worked, I applied it to the finalised layout and design that previously was decided to be the most successful (fig. 8). This improved the overall visual of the app and represented the sunrise aspect much stronger than the squares did.

fig. 8