Early Page Design

Now the branding of the app has been decided, we've begun designing the UI. 

To the right you can see an early logo design, using the Amatic SC and Amatic fonts. We liked the concept of having different thicknesses of font within the logo, highlighting the fitness part of the name. At this stage of development, the name had not yet been decided upon. 

During this stage of development, a tagline was generated for the app, summarising our desire to be the only fitness app on the market, reinforcing our concept of an all in one app. 'The only app you need'. 

To incorporate this tagline, a small ellipse was added to the title bar, adding a dynamic aspect to the logo. The round shape was something we liked, and decided to work with more. 

Continuing to develop the logo, the ellipse was extended to create a smoother shape on the bottom of the logo, which could then be involved with the rest of the app. 

On other pages, the idea is to use the bottom of the ellipse at the very top of the page to be a home button, of sorts. When tapped a drop down will appear offering more options and navigation. 

At this stage the name was added to the design process, also taking advantage of the font thickness switch that occurred in the previous iteration. The thickness switch was done to generate focus on the word fit, highlighting the topic of the app. 

At this stage the ellipse was shortened again, however this is something that was still open for debate.




As a completely left field suggestion, we tried using a circle, only partly visible off the top of the screen. This dynamic shape was an immediate improvement on the previous generations of logo design. The round shape would also work perfectly in retracting to the top to act as a drop down home menu system. 







Once the logo was resized for phone display resolution ratios, we noticed that excluding the edges of the ellipse at the top worked well in the design of the app. 

This is the basis for page design, which will be expanded upon in the next post.