Brief Re-Evaluation

As I have now finished the OUGD601 module, I thought this was the correct time to re-evaluate the briefs I wrote for this module and am yet to start and complete.

So far I have completed six briefs:

1. Brief 3 - 30 Days of Type
2. Brief 4 - Wheatless & More Client Brief
3. Brief 6 - Typography Principles Publication
4. Brief 8 - Dr Me
5. Brief 9 - Intern Magazine
6. Brief 10 - DSM

Briefs I am yet to complete:

1. Brief 1 - Fonte De Vita Bakery/Cafe
2. Brief 2 - Chocolate Collaborative with Charlie
3. Brief 5 - The Woodshop Client Brief
4. Brief 7 - D&AD Monotype Brief
5. Brief 11 - Fonte De Vita App/Web

Briefs I am yet to start:

1. EuroStar Rebrand
2. Typeface
3. New York Travel Pack
4. European Destinations
5. Top 10 TV Shows
6. Hand Drawn Typography Book

At this point I can say that I don't think Brief 5 - The Woodshop brief will be happening any time soon or at all. The client has not got back to me about continuing this brief as of yet, so I do think its dead in the water.

In terms of brief 1 - Fonte De Vita - I recently started Brief 11 which is an extension of this brief, to create an App design. For this brief I just need to complete printing for the collateral and branding side, which includes foiling the front covers and thinking about binding methods for the menu's & brand guidelines, and complete the packaging side of this brief. I also need to create a series of promotional mock ups/designs to complete this brief overall.

With two weeks off from taught sessions now, I think that this is clearly the obvious time to start working on another individual brief - Brief 7, the competition brief - however I think that as it has been two months since I chose what brief to do, I need to go through the D&AD and YCN briefs again and decide which to do. While I was happy with the brief at the time, I am a bit unsure as to whether I do really want to do it over the other possible briefs. It is a typography brief which I have chosen, and I do think something different might be more exciting for me to engage with.

For Brief 2 - the collaborative - Charlie and I have decided that we will start this immediately after we return from this two week assessment week. We have already begun talking about the possibilities of direction for this brief again and intend to tweak what we had initially decided upon.

At this point I need to evaluate the briefs which I am yet to start and figure out exactly what it is that I want to do with each brief, and if I do want to do that brief at all.

I am quite unsure about the last three briefs listed right now, and the Eurostar rebrand, so I will see what I decide later on with those. I have done a lot with hand drawn typography recently with my COP, so I don't think I want to do this brief right now. I might change my mind later on though, so I won't discard it completely.

As I have created a custom typeface for my self branding (Link), I do think that this would be a good starting point to start the typeface brief. The typeface created is a slab serif one, and is only in one weight and case at the minute. I think that it will be good to use this as a base for his brief because I have already spent a large amount of time creating the uppercase letters and editing the letters so they were exactly what I wanted, and I am happy with their appearance. I want to explore the creation of lowercase, punctuation and symbols, as well as weights and possible styles of it. I think something like that will be a long project but will be worth it if I create a full type family by the end of it.

Brief 11 - Developing Initial Designs

Following the design of the icons I started with the design for the pages of the App.

I decided that the design of the Pull & Bear App is what I wanted to use as influence for the main pages of this App.

Pull & Bear:

As the main pages are image based, the layout needs to be simple and consistent. There is no need for a navigation bar at the bottom. I wanted the top navigation bar to be simple and fit in with the brand. It will be a fixed feature on every page of the app.

I decided on the brand name in the middle, with space either side for the navigation buttons. The 'menu' button will be fixed and will be on every page. The 'back' button will be on all pages apart from the main menu. Pressing this button will take whatever page back to the main menu page for whichever section the user is currently on.

Top navigation bar:

Following this I started with the first layout of the App - the main menu pages. I wanted this format to be consistent over the main menu, cafe menu & bakery menu. Following the style of design shown above in the Pull & Bear App, I created the wireframes for these three pages.

Main menu:

Bakery/Cafe menus:

The brown boxes indicate it will be image content. I decided that when a section is selected, this image/icon will move to the top of the page, and the icon will turn gold to show the difference between this and the other buttons on the page. This indicates the page which the user is on. To further indicate this, I added a thin gold strip under the selected section, showing the divide.

Happy with the design, I moved onto the next sections that needed designing. I started with the 'menu' as this appears in both of the main sections.

While I wanted to reflect the content already created for this brand in the printed material, I needed to adapt this to the digital media and make it as useable as possible.

For the menu, I decided on just having the content in a list, with the sections clear, and prices shown for each product.

Menu:

The design is simple, but I think it works well and is very useable in the fact that the user would just need to scroll down.

I then created the 'opening times' page, as this is also on both menus. I followed the same format of the menu in having the content in a list.

I think the inclusion of the icons works well and strengthens their use instead of just having them for buttons. Using them in as much context as possible will give each section its own identity. Once again the layout is very simple and self explanatory.

Following this, I created the 'about us' page as I also wanted this to follow the same format.

About us:

I decided that it would be quite nice to have some images to flick through at the bottom, showing the store or some of the food. It gives the user something to look at and relate back to the text.

I then moved onto the 'make an order' section for the Bakery.

The first thing I decided was that there needed to be a fixed bar along the bottom, showing the total amount spent, as well as a 'checkout' button. This means that at every point the user can see how much they have spent, and can finish at any point they want.

The main consideration that I need to think about is the usability of this section. It needs to be very clear to the user where they are and what they have ordered.

I decided that there really only needs to be two page designs for this - the initial 'make an order' page, with the sections available to order (bread, cakes etc), and then a more in depth page, with the products available for each of these sections, where the price and quantity must be shown.

Make an order pages:

Following the brand guidelines, I decided on using a 20% opacity of the dark brown for the buttons. I think that this keeps it quite light, and also contrasts against the use of the image.

With the success of this design, I applied it to the 'make a reservation' page, adapting it to what would need to be known for this to work.

Make a reservation page:

I edited the bottom bar so it suited the context, keeping the same overall style. The circles next to the information will fill in when the information is entered. This shows the user that they have completed the section.

As I was happy with the overall design and look of the app, I started working on the image side to it. I had a very clear idea for the images, as previous said. This is that on the menu pages the images will be brown, and when the section is chosen, they will turn to colour. As the icon will also change to gold, the colour must not clash so a darker tone might be needed.

Image colour effects:

Original

Brown Tint

Brown Tint with icon

Dark colour

Dark colour with selected icon

Each section will have its own image, which will stay throughout the App. The colour image must be darker as the gold icon doesn't work well over a full colour image. The brown image with the white icon works really well, I think, and keeps in with the brand guidelines and what has previous been created.

I then went onto Photoshop and mocked up each of the pages, complete with the images.

Main menu:

Bakery/Cafe Menus:

Menu:

Make an order:

Make a reservation:

About us:

Opening times:

Overall I am quite happy with the look of the App. While I know there are definitely some tweaks to be worked out, I do think that the majority of the design is consistent and complete.

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.

Brief 11 - App Design Research

Before starting the design of the App I did a bit of research to decide what kind of aesthetic I wanted to go for.

After looking through a fair few designs, I have chosen a few which had features and aesthetics that I think would work well for what I wanted to do.


Meeting Point
https://www.behance.net/gallery/22259493/Meeting-Point-Mobile-App-Design

I like the use of imagery vs clean flat design. It works really well and is simple and professional. The use of the large button at the bottom is something I like as well, especially with the colour contrast. The overall simplicity of the design is something I want to emulate in my App.

Pull & Bear
https://www.behance.net/gallery/7415681/Pull-Bear-Web-App

I like the way the imagery works in this App. The clear and simple structure also works well. It's very simple and uncomplicated for the user.

Thai Mayom
https://www.behance.net/gallery/22401393/Thai-Mayom-App-Design

I like the use of icons and buttons in this design. The icons give each section its own identity and are very clear for the user. The small colour palette also works well in staying consistent. I don't like the underlying image on the image above, so that's something I will be avoiding.

Scout
https://www.behance.net/gallery/15903903/Scout-Travel-App

While I don't this this layout style is something I will use as influence, I do like the overall simplicity of each page and the way the icons are used for the weather. The pages are simple and uncluttered, showing the information necessary and nothing more.

Origin Plate

https://www.behance.net/gallery/22624861/OriginPlate-Mobile-App-Ideation-and-Design-

I looked at this one due to its context being food. There are certainly elements that I don't like, such as the log in page, however it does have features that work well together. Once again the large button at the bottom of the page works well, as does the way the imagery is used together. The layout of the pages is simple and is clearly created in a considered way to think about the way the user will interact with the App.