Colour
I've decided to use their brand colour of yellow as the accent colour.
I've then used three different shades of grey for the rest of the colour scheme, allowing the imagery to stand out.
Light grey - #FCFCFC (background colour on their brochures)
Medium grey - #444444 (grey they use on their branding)
Dark grey - #2D2D2D
Development
I began getting colour swatches to use on the app. I screenshotted the Facebook blue so I could use that on the log in with Facebook button on the log in page.
I also took a screenshot of the yellow and grey they use on their website. They do use some really nice colours in their brochures, but the countries are colour coded - so I thought yellow would be the best colour to use since it can apply to all of them.
I started to apply this, along with an off white (fcfcfc) and dark grey (2d2d2d) to compliment the yellow and mid grey.
I think the yellow works well against these colours as an accent colour as well as work well against the photography.
I also tried the Facebook button in the two greys, but I think using the brand blue is best.
I also took one of the brochure colours just to try it on the app.
I do think it works well, but I think its best to use yellow which is used universally on all brochures and branding.
So here are the final log in and sign up pages.
I then went onto the Destinations page. I made the underlined tab yellow as I want to use it as accent mainly, rather than too overpowering. I made the heading dark grey, and decided backgrounds would be the off white. I thought buttons would also work well in the yellow. I feel here the search by country area is too grey.
I tried an image there instead which I wasn't too keen on - but I think that is because it is too similar to the one beneath it.
I also tried another grey but again, felt there wasn't enough contrast this time.
I altered the colour of the text to fit this which I do like.
I then swapped the yellow and off white on the small filter option, as I feel its more appropriate to have the cross in yellow since that is an action.
I then tried a different image and I think it works really well now and doesn't look too broken up.
I altered the Europe image too which works better.
I then moved onto the Explore page, and added colour where I could. Since I have made decisions on colour hierarchy now, it is quite easy to know what should be what colour. Once the icons are done they will be in yellow.
I moved onto the results page, and again just applied the colour where it should go according to the other pages.
I began to add it to the bucket list page, and will add yellow icons once they are done too.
On the overview page, I tried the headings in yellow but feel it is too bright - and that area feels too light to be able to read properly with the light background too.
After changing the headings to dark grey this works a lot better and is easier to read than in yellow.
On the itinerary page I used dark grey headings too.
I took colours from the brochure for the price page. I thought each trip could be colour coded for this and thought I would give it a go.
I tried this, but I do feel it looks out of place having red there instead of yellow.
So I tried it with different shades of yellow instead which I think works better
I made the friends with benefits box darker grey so it stands out more too.
On the itinerary page I had a placeholder map in there at the moment taken from the brochure, but I needed to make my own to match the content. So, I took a screenshot from their brochure for reference on colour and style.
I got a map of the USA
And took the section I needed (Florida) and made it as close to the branding as poss - I was on a very tight deadline so I kept it basic but showed the main parts of it.
I added this to the page which looks more finished now.
After I had done the icons I implemented these onto the Explore page as well, which looks a lot better. These are in the same style as icons in the brochure to show how their branding can work across print and web.
I also added a bucket icon I made for the app so users can save things to their bucket list. I'm not sure it is needed on the actual trips though now I'm looking at it
I added it on the experiences, as this is definitely needed. I don't think it stands out on the image very well though
So I moved it to the side which I think does work a lot better. It can be yellow when something is added, and empty when it isn't.
Now I have added the branding, I can move onto the next job - the website!
I am happy with how the app has come on so far as it is professional looking and looks like something they would have as part of their brand. I still need to animate this to show its functionality and mock it up on iPhone screens.
Leave your comment