Design for Screen - App design developments

The design process started by taking the wire framing that had been created on Adobe XD and adding orange boxes (fig. 1) to start to see if highlighting each of the articles would work. Without further development, I decided to leave this idea and move onto something new as it did not look aesthetic or suit the trends that the target audience appreciate. This style of app when researching it seemed to have a more minimalistic and non invasion visual design, with all elements discretely pointing out certain things and engaging the user. 

fig. 1

The next approach to the apps layout and function was to develop bars/tabs that are present on the menu to show what each of the colours represent and then this colour is only present in the appropriate section. Figure 2 shows how the orange could be used in the articles section of the app, starting at the top and then moving down to each article title as that one is chosen to be read or not. The app is designed so that the text expands in length each time the image is clicked on  and the orange bar also follows appropriately. 
To improve on the consistency of this concept, the coloured bars in the menu have been shortened in length (fig. 3) and then this length has been applied next to the title of each of the articles rather than just the one being read (fig. 4). The concept is that when the user does read that article and it expands, the bar also gets longer with it and fills the width of the screen. 

fig. 2

fig. 3

fig. 4

The discover section then needed to be developed with the same visual to see if this would work as an overall concept and to help look for other ways it could be changed and improved. The process began with the development of the image placement through the use of wireframes, as shown in figure 5. The research into other apps discovery pages showed that grids of images is a way to engage the user as it allows for quick scrolling and the ease for them to be able to quickly notice which images catch their attention. Figure 6 shows the placement of images within the frames that were created to see if visually it works and also if it looks too crowded for one page. The mixture of small and large images works well visually, but it may be confusing to the user or seem to be hinting at which articles the should be wanting to read when actually it is personal preference. 

fig. 5

fig. 6