Front Page Development

With the logo finished, and a rough concept of the layout we want, we began developing the pages to be used in our app. 

The areas of focus within the app were decided upon, and I developed a front page for the app, which doubles as a topside contents page. 

Using the logo developed in the last post, I expanded upon the page. Using the font 'Quicksand' (which was also used for the tagline) I created a menu system underneath the logo. 

The final front page can be seen below. 

Each option on the front page can be tapped to open a smaller sub menu, offering more specific areas within each topic of the fitness app. The other options open up from within the green rectangle which encases the first option. The drop down will push the other rectangles off the page, or under a fade around the logo. An example of the expansion can be seen below. 

Apologies for the odd colour of this image.

This is the front page that will be used for our app.

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. 

Branding, Fonts and Naming

As we move closer to the submission for this fitness app design project, it's time to start constructing the UI. After we chose the colour palette to work with, it was clear that the style we were intending to go for was to appeal to a unisex audience. 

Font design was something we considered while continuing to develop the brand identity of this application, and noticed that in tandem with the light-hearted and muted colours that a fun and cursive font would work for the logo. We also decided that we wanted a logo that contained no 'pop art' or representative artwork, and opted instead to have a text based logo, with the words being the focus. 

Since our name will be the focus of the logo, our app name is even more important than it would be normally. After some online research we discovered a number of fonts we liked in the cursive style, including fonts called 'The Hand' and 'Amatic', which became the front runners. Due to a funding issue, 'The Hand' was unavailable to us, and so the decision was made to use Amatic and Amatic SC. You can see those below. 

Amatic SC, Amatic

As you can see from the image, a name has been decided for the application. 

'Perfect Fit' was chosen from a shortlist of names, including 'Fitness Fun' and 'Fit for All'. The name was chosen due to its broad coverage of the topic, as well as being a play on words. 

With the colour scheme chosen in the previous post, and now the font decided, the page design can begin. 

App Design Progression

As mentioned in the previous post, the target audience for this app is broad. Whilst aware of the possible downfalls of broadening the target audience, as a group we feel it is the best way to develop the best possible fitness app. 

To achieve this we considered the different approaches that were available to us. Muted colours and flat design was something we quickly decided was in fashion, and therefore something we wanted to use for our design style. 

An example of good flat design is the iOS 7 interface (image below), which moved from an embossed and reflective style to flat colour style with no lens flare. iOS7 also moved away from aspects of skueomorphism, to a consistent flat design across all native apps. 

Learning from Apple's design style, we've decided to employ this in-vogue format within our design. 

Colour is an important aspect of design, and something we want to consider before committing to a theme and moving forward with the design. Below are some of the colour combinations that we considered, before choosing which we liked the most and moving towards early UI design. 

These colour samples all include muted, almost pastel like colours, with a range of connotations. The first sample is more focused towards a masculine audience, with richer colours more generally associated with men. The second seemed a little feminine, and therefore the third sample is the one we will be using for our app.

For the next post we'll be generating more of the branding and identity.