Brief 11 - Initial Designs

From the research done I have decided on a few ideas which I definitely wanted to move forward with. Firstly, I want to have a fixed navigation bar at the top with the brand name and a menu icon. This would also be where a 'back' arrow will be put when needed.

I want the menus to use both image and icons, with each section having its own image and icon to define it by. With these images I want there to be a clear change when selected. I want the images on the main menu to be in a brown tint - as to go with the branding, and then when selected to turn coloured or lighter, with the icon changing to the gold colour, as with the branding.

I want it to be as user friendly as possible, with clear direction and options available. The use of colour should be guided by the brand colours, and only the imagery should be in other colours. The use of font will obviously be the same as across all printed collateral for the brand, Berthold Akzidenz Grotesk, Bold & Light.

The first thing I decided to start with was the design of the icons and navigation icons that would be needed. I didn't want them to overcomplicated as they still need to follow the design ethos of the brand, which is very simple, however they can't be so simple as they have to be obvious what they mean.

I started with the 'bakery' icon as I had a clear idea of what I wanted to do. As I wanted the icons to be simple, but also clear to the user, I decided on a baguette as the basis to this icon.

I created three possible variations of one shape.

My initial idea had been to have outlined icons, however with being placed over an image, I wasn't too sure that these would work well enough, so I decided on the block colour icon. This would also be the most practical style when it comes to creating the other icons as I'm not trying to get outlines to fit together more complicated icons.

I then put the text with the icon and tried out various outlines so it shows that it is clearly something to select. It also adds a bit of emphasis to the icons, which might look a bit out of place without something to encase them.

I tried six different variations using three shapes.

I decided on using the top left. It fits in with the brand logo and is quite subtle. I also much prefer the use of rounded edges to the straight lines used in the square variations.

With this decision made I moved onto creating each of the icons for the different options.

Icons:

Icons with text:

Following the completion of the main icons, I created two navigation buttons - one for going backwards and forwards - an arrow, encased in a circle to follow the icon design above. The second is the 'menu' button which will be in the navigation bar. I decided on three simple lines as this is quite a universal sign for a menu.

At this point I am happy with the icon designs and think that they work well as a set. The next thing to do is start the designs for the App pages and work out how the navigation will work.