OUGD503 - Work For Creative Advertising Student - Development of App

I started by setting up a 4x6 inch document, which was what my research in the 3rd Brief from OUGD504 suggested was the right size and ratio to use when designing for phones.

I used a grid based on the golden ratio because of it's links to nature, which makes sense from a conceptual viewpoint. I used the smallest square that this grid created as a way to make margins that fitted in with the grid.

When I put in the search bar where Beth wanted it it overshadowed the logo, which drew attention away from it, something that isn't good from a design point of view. I tried positioning it below the logo, but it still drew attention away from the logo. When I moved it to the left and increased the size of the logo this problem was no-where near as problematic.

For the "my WWF", I used the font from the logo, and found that it the WW:F fit the golden ratio perfectly, and having it at that size made it balance with the actual logo really well. I aligned the "my" with the "Hear, Change, Heal", which also helped the left and right balance out.

I made the Twitter bar half of the size of the bottom row, which was considerably thick, with the intention of using the other half of putting the donation part in the other half. I looked on Twitter to use a format that was familiar to twitter, so I used bold for the account name, light for the @ bit, and a smaller font size in regular for the actual tweet. I added little white triangles above and below the text to let the user look through the tweets.

When I added the Donation bar I experimented with ways to separate them, including different weights and colours of lines that stretched various percentages of the width of the app. I found that the best looking way to do it was a full width 10pt white line, which was probably the simplest way to do it as well. I found that using a full width grey rectangle was wasting a lot of space and looked a bit odd given that a lot of the area was empty, so I cut it down to a rounded off rectangle which went as far as the search bar, which was a lot better. I added a little icon that the user could click to enlarge the donate section to show a form that they could fill out to donate.

I changed "menu" to "home" because I felt it was more appropriate for a web/technology based design project. I underlined it to show a noticeable difference in the hierarchy on the page without it drawing attention to itself immediately. I aligned the left of the options with the right of home, spacing them out vertically so they filled the space. I found a vector of a paw print that didn't have claws because of the softer look it has, and shrunk them to a size slightly bigger than the black box in the search bar so that the circular elements go slightly out of alignment, like how the circular elements of a typeface sit slightly below the baseline. At this size the paws lead the eye down the page quite nicely.

I added the panda in at a size that fitted the grid, rather than the larger size that it was in Beths drawing, I did this to make it less overpowering that it was in Beths drawing. I also placed it lower down because of how it looks natural when placed there because of how the eye has been drawn to it by the paws.

Using this layout gives me options going forward to create other pages for the app. I showed it Beth and she was happy with it, so I'll be taking this design forward.

OUGD503 - Work For Creative Advertising Student - App Functionality Research

I looked at some of the information-based apps on my phone to look for design features and problems in multi-page apps that I can take inspiration from or need to avoid or get around.

The home screen of the British Gas app is one big menu, but after clicking on some of the options you realise that the way they open is inconsistent, something which could potentially be confusing to the user. The pop-out effect is detrimental to the consistency of the colour scheme due to having a shadow. Having a mechanism that allows you to return to the home screen easily like the sliding "Home" tab at the bottom of the other pages gives the user an easy way to navigate around the app, and it's important that this is placed consistently for ease of use.

The Sky Sports Score Centre app has it's homepage set to display the most important information at any given time, which increases the functionality of the app. This is contradicted however by how unclear it is as to how to access any other information. When you do open the menu it takes up the vast majority of the screen in a way which makes it look awkward and unconsidered because of the numerous visually unappealing shadow effects. There is also an inconsistency in the size of the text that titles the page, as can be seen in the "Pub Finder" text compared to the "Fixtures & Results" and "Home" text, this is a basic error that should be avoided for consistency.

Overall the British Rail resolves the menu problem by having a fairly elegant menu at the bottom of the page that doesn't draw much attention to itself. This only becomes a problem when you choose to see more options, as it then covers a large amount of the screen, but this would only cause problems to more niche users of the app because the main functions of the app because the vast majority of the functions of the app are fulfilled within the 3 options on the regular menu. For the most part the grid and styling of the app is extremely consistent, making the app easily to use and navigable because the user already has an idea of where certain things will be found. The only inconsistency comes when adverts are involved, but this isn't going to be something I need to consider. 

OUGD503 - Work For Creative Advertising Student - App Briefing

I briefly went over to Beths this afternoon to give her the files for the billboards and posters. She told me that she was going to be using the black and white ones as her final pieces. 

She showed me the below page in her sketchbook showing what she wanted the app to look like.

So I had something a little clearer to work from when I was working without Beth being there I did a very quick and bad mock-up so I knew where everything was going to go.

The writing in Beths sketchbook summarised the function that each section of the app was going to fulfil.

My Changes

The page records what positive changes the user has made to their lifestyle. Includes things such as:

• Visiting wildlife sanctuaries
• Donating to wildlife related schemes
• Recycling paper, plastic bottles, cardboard etc
• Turning off lights
• Turning down thermostats
• Walking

Free Prize Draw

Regular users who update their profile can enter a monthly prize draw with wildlife related prizes won.

Games

Two games, one where the use save animals by 'hunting the hunter' and stopping him before it's too late, and the other where the user plants plants where other plants start to disappear in a race against time to save the planet.

How To Help

Information about WWF's local and national companions, as well as tips on how to make changes to your lifestyle.

About Us

The goals of WWF and what WWF are trying to achieve.

OUGD503 - Work For Creative Advertising Student - Continuity Development

I decided that the best was to start off addressing the problem with the lack of continuity was to add the border to the bottom of the billboards. This will change the ratio of the billboard though, I spoke to Beth though, and she said that this didn't matter particularly as the project is more about the image of the billboards not the final polished thing.

Adding the border to the billboards means that the changes I made to the colour of the jumper weren't necessary, so I changed that back as it looks more natural without the changes. The results are below.

Whilst this was a start, I still think that the lack of consistency in colour and composition of the photos does still leave a lot to be desired in terms of consistency. Obviously I can't change the composition of the photos, so the colour seems the way to go.

Looking back at when I first worked on the first billboard, I showed Beth what it would look like in black and white where the lipstick message was left in colour. I thought that this could be a good way to go forward because it makes the consistency of the colours a lot stronger, as shown below.

I think these look a lot better in terms of how they work as a set. I've shown Beth both sets and suggested that I think that in terms of a campaign, the black and white ones are the ones to go with. I'm happy with them.

OUGD503 - Work For Creative Advertising Student - Continuity in WWF Campaigns

Looking at the 4 images I've produced, they all work individually, but when you look at them together they have very little continuity within the style of the images.

I looked into previous WWF campaigns, which is something that I didn't feel the need to do before, as regardless of what the previous campaigns have looked like, this project is about what Beth wants. Hopefully I can change the images to be more continuous while Beth still likes them.

The below four work as a set because of how the backgrounds have a consistent background style despite having different coloured content. Because of the nature of what I've been doing, the closest thing I've been able to get to a consistent background is the grey bar at the bottom of the posters.

 

 

It's obvious that these two are part of the same campaign due to the consistency between them both. I think it's particularly important to note how the logo and text are in the same place on both, something which I tried to do but couldn't manage it because of the nature of the photographs I was using.

These three have the same sort of grungy editing on the images. When you look at the images themselves that I've used I didn't consider this, I edited them all separately to get what I considered to be the "best" result for that photo, and didn't consider how the way you edit things can help the continuity.

 



These are my favourite WWF campaign posters. Again the text is all placed in the exact place, with content of the posters being altered slightly for each variation. The lighting is also the same in each of them, which allows for a slight variation in the background itself.

OUGD503 - Work For Creative Advertising Student - Second Poster

I took these photo's to use rather than the one Beth provided me as there wasn't much room for text on hers. By setting up the photo in this was there is room for text in the bottom right corner after some editing. I also feel like there's a lot more emotional intensity in these photos.

The colour is a bit off but that's something I can work on in Photoshop, but I think the fact that they are quite dark photographs is relevant given the seriousness of the message.

I started by cropping them down to A Sizes and altering the colours using the brightness and contrast sliders. I found that the left one was much better colour wise but it was a bit tight after it was cropped, whereas the one on the right wasn't quite as spot on with the colour but looked a lot better when it was cropped as it wasn't as tight.

Given that the message displayed on the TV is "Shoot To Kill?", I decided that it'd be more relevant to show people playing a shooting game rather than a sports one, so I imposed the below screenshot which I found on the internet into the image.

These were the results.

Beth wanted a video game style font, so I chose Kemco Pixel Bold, which is a font that links visually to classic video games such as PacMan and Space Invaders. I decided to fade out the screen a bit to make the text more legible. Having the image like this makes it look as if the game is paused.

By this time I'd heard back from Beth via E-mail that she preferred the first posted when it had the solid grey area behind the text. Given that, I could use the the better coloured photo without cropping the sides off, making the image look a lot less tight. 

In the e-mail Beth sent me in response she said she wanted to see how the logo looked on the right is she thought it'd read better. Seeing this in the second poster I agree with her. My reasoning for putting it on the left in the first place was that the text on the right was aligned flush and this helped the balance of the poster. 

With this taken into account, this is what the final posters will look like assuming Beth gives the TV one the OK.

OUGD503 - Work For Creative Advertising Student - Second Billboard and First Poster

Beth sent me the below photos to work on for the other 3 visuals she needed doing.

   

The immediate problem was the photo she'd taken of the people playing the xbox was that there was no space to put any text because of how the important elements of the photo (the people and the TV) are taking up the entire picture..

Another issue was that the photo from inside the car was taken when the car was parked on a drive, meaning all you could see through the windscreen was  a garage door. I told Beth that I'd be able to replace that in Photoshop to the point where it wouldn't be very noticeable at all, as getting another photo from inside a car would take a while given that we only know a couple amount of people that have cars with them at uni.

Second Billboard

I took the below photo on my phone from outside Beth's house to replace the garage door that was in the windscreen. I took it from such an angle that was very similar to the angle the photo of the car was taken from to make the editing look less noticeable.

After cropping it down to a 2:1 ratio, I altered the brightness on contrast of Beth's photo to match up with mine better, as hers was a bit dark. I then used a layer mask to replace the garage door with my photo, positioning the photo to get a realistic viewpoint.

I then worked on the changes/additions she wanted on the dashboard she wanted. I wasn't overly confident with this because I was quite pessimistic as to how realistic it would look. I started by adding the globe to the dial. This was done using a drop bevel, a drop shadow, and the warp and distort tool. We decided to use a simple vector image of the globe as our starting point rather than a more realistic complicate image, as we thought this would make it clearer what it was.

We used an orange background for the dashboard as that was what the background colour of the dial behind the steering wheel was. For this reason we also used text that was dark grey rather than black. Both the screen and the mileage counter were vector shapes that I'd created and rasterized so I could apple bevels and shadows too to make them look less photoshopped. We used a font called FONT NAME HERE which we found on the internet because of how it was clear but still had a pixelated fell to it because of the corners of the letters.

When I was happy with how they were positioned and looked I merged them together so I could use the burn and dodge tools to alter the lighting so it matched the rest of the image

I found that placing the logo where Beth wanted it meant that it didn't show up very well because of the lack of tonal contrast between black and the dark red jumper, so we decided that if I could change the colour of the jumper to a light blue with it still looking realistic, we'd do that. After a while of messing around, this was the best I could do, and Beth was happy with it.

We then couldn't find another area to put the "...meanwhile the Earth is screaming" text, so we had to put it next to the logo. Because of how well the text worked in the previous billboard we wanted to keep it the same size for continuity. This meant we had to make the logo smaller than it was in the first billboard. Because of this I went back and made the logo in the first billboard smaller so it matched the size of the second one.

First Poster

In Beth's initial drawing there was a vertical banner that said "Killing us slowly". However, she found that it was difficult to get a banner in shot when she went to get the photos. This was a  problem in that there wasn't space for us to Photoshop one in either, we decided that the next best thing to to would be to add in a sign on the shelf with the message instead. Because we were doing this I chose to use the photo with the bottles of coke rather than one with crisps because it'd stand out more against the darker colours of the coke than the lighter colours of the crisps. 

The colours and font are based on the colours and font of the kitchen roll thats in the shopping trolley. We positioned it where we did because of how the arm and the way she's looking lead your eye to it, without it covering up her hand.

I cropped it down to a ratio that was A size paper because that gives it gives it the most potential for other uses because of its standard size. I also used the brightness and contrast sliders to brighten it  up a bit 

We were then struggling to find a place for the rest of the text because of how busy the photo is. Beth suggested adding a gradient behind the text, I tried this using the colour of the supermarket floor to make it look as neutral as possible.

Whilst Beth was happy with this, I wasn't so sure and so later had another go at the text using a bit more "artistic licence" or whatever the design equivalent is.

I've e-mailed these to Beth and will talk to her about it next time I see her in the hope that I can convince her that these are better. I used grey because it was very neutral, and think it looks a lot less juvenile and more professional, making good use of negative space.