FMP Development pt 2

Through out the development of my app I kept referencing back to existing apps looking at different aspects such as type size, layout spacing, button states, navigation etc.

Screen Shot 2017-05-19 at 16.28.51

The process was a little tedious going back and forth experimenting with different placements of elements to see what would work better. For my placement images I used different images of family members as this was an important part of making the app begging to look more authentic.

Doing research into other apps I was able to get ideas of how to set up a user profile page for example. Thinking of the elements that I wanted to include such as having the ability to have an image scroll, having a full ‘about’ section, user reviews, services as well as the ability to contact the person.

Screen Shot 2017-05-22 at 13.15.02

Once I started having a general layout for my pages it was important for me to keep things consistent. This is important because having consistency through out the pages like having a backtrack navigation icon on the top left of each page creates a uniformity among the layouts of the pages. This consistency allows users to familiarise themselves with the design. This also means making sure that everything is spaced out exactly the same through out the different pages.


Other elements created had to also be consistent with the rest of the design, below is the calendar I created to go on the service booking section.

This slideshow requires JavaScript.

Screen Shot 2017-06-04 at 18.17.12

Other examples included the page headings

and the section headings (below) within a frame, I contemplated having the page headings at a bigger pt size but that would have created too much variation within the type hierarchy and would have begun to make the layouts look messy. So I opted for having the headings at 45 pts. bold, subheadings 35 pt regular.

And in some cases I used a subheading at 45 pt but in regular where I still needed to differentiate the type hierarchy.

Screen Shot 2017-06-04 at 18.43.17

Buttons and states

For the notifications and messaging pages I chose to emphasise “new” messages or notifications by adding a slight drop shadow and contrasting it against the slight grey back ground with a white frame to help it pop out

Screen Shot 2017-05-30 at 00.30.46

Below is an example of how these buttons would look once they have been selected.

Even though I wanted to keep the design as minimalistic as possible, I thought it was important to make sure that the buttons are recognisable as something you can press to help separate from the rest of the design considering the colour scheme is very limited.

For my navigation bar at the bottom the simple fill of the icons would let the user know what page they are on.

Screen Shot 2017-06-04 at 18.54.51



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s