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.