Screen - design development

After defining the style for my app I spent some time further refining the wireframes for my app. Whereas before I had an initial concept of what i wanted my app to feature and appear like - refining these wireframes helped to develop on my plans and will help me apply my theme to the rest of the app.

I have applied my theme to more screens - using this time the dictionary section as well as the quiz. The screens do not seem to be that consistent so I have asked for some feedback to help me improve.

My biggest developments so far have been typefaces as well as adjustments to the layout of some pages and adding depth to some features of the app.

Type

Feedback

Too many fonts and font variations going on - as the app is very text centric, make it more consistent in terms of type. 

I initially struggled to find a good typeface for my app. I knew I need a sans serif font, as the app is targeted towards younger audiences, and I needed a typeface for a bold title as well as a legible body text typeface. To begin with I used 'Circular' for the main titles and body text and 'Gobold' in different variations for buttons and subheadings. However because of the mix of fonts including the variations, the app didn't look consistent and was too overwhelming to look at. 

I have adjusted this by just using Circular as my typeface - varying the thickness as well as either using upper or lowercase provides enough variation between sections without getting confusing. The typeface is clean and works well on a UI basis due to its ease of legibility and boldness.

Buttons

Another adjustment I made to the design of the app after the wireframes was to change the structure of the home page. At first I wanted to create flat illustrations, but as the rest of my app seemed to focus mainly on type, I wanted to keep this running. Instead of 6 icons/illustrations, I made the menu typographic, and running down the page instead of in a grid. Making these buttons with my initial grey colour scheme kept the clean aesthetic I was hoping for however just seemed too flat. Adding a drop shadow to each button using gaussian blur and dropping the opacity gave a more 3 dimensional appearance to the screen. 

After looking at other apps on my phone, particularly Facebook and Twitter, I could see that on the screen there was no border left around the content. Making the buttons run the full width of the screen echoes this and makes the design seem more like it was meant for UI. This will be applied to all buttons throughout the app.

Political party screen variations

This page was one I had a few wireframe variations for. As I had logos as well as text to consider I thought I would either display them in a list, a picture grid or even mimic the premise behind Tinder, where the parties are displayed where one is at the forefront and you swipe either left or right to view the next party. The swipe version could be fun for users, but I prefer the list view as I think it looks cleaner and at first glance can see more information.

Profile page adjustments 

As stated in previous posts, I struggled with the top section of the profile page. I have decided to scrap the design of that section as I couldn't make it work. Instead I have decided to keep the entire page typographical - eliminating the need for a photograph to be uploaded by the user. The design works better in this way, making the page seem more put together.