Design: Layout & Colour

Screen Based Design

layout-01layout-02

This is the development of the layout and colour for the home screen. Firstly, I put in the icons i had designed and added the search bar, heading the page with the logo. Looking at the icons with the other page elements, I thought the page might be slightly overwhelming in colour, so i switched the colour to the icons and the text, this created an overall cleaner atmosphere. I also added drop shadow so the boxes didn’t get lost in the background.

In the first designs the the shades went from light to dark, I realised that ‘Settings’ being the darkest shade, drew attention away from the top few icons that are more crucial to the app because of this I tried switching the colours around on both designs.

Finally I looked at both designs critically and saw that the lightest shade was too similar to the light grey and white text/image. I resolved this by cutting the colour scheme in half, getting rid of the lightest and darkest colours and one of the in-between colours. Each level of icons then were one colour. In comparison to the previous designs it produced a more compatible design and drew in the logo as part of the fading effect as it is comprised of the darker shade that is no longer in the icons.

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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