University Projects

I decided to create a basic digital wireframe that shows the structure of the final design that I wanted to aim for. I thought about each aspect carefully so that I could incorporate many different skills and languages into my website. I would like my website to be one-page single scrolling with a parallax feel. Therefore, when using my navigation bar I wanted to be able to click on a subject and the page to automatically scroll to that section of the website.  I would like my landing page to have a 3D sculpted model of me or have it in the about section of the website and I thought this might be a cool feature to add. Having my logo and who I am overlaid on this would be good as it would tell people who I am straight away. You are able to view this wireframe at:  https://projects.invisionapp.com/freehand/document/8VA7azTC6

Using ideas from my sketches, I decided to draw some ideas using a Wireframe approach.

Each group received one to one feedback on their motion graphic projects. Our feedback was very positive, the team mentioned that our ad was a nice emotive story and liked the fact our motion graphic was themed around family which revolved around a story - as other groups were missing this aspect.  They added that it was difficult to tell a story in a 10 - 20 second motion graphic and taking all factors into consideration we did well to convey our message across to our audience however a strong emotional connection was missing. Therefore they suggested that the shelf screen could be edited slightly to have more emphasis on the Grandma and her recipe. We explained that due to time constraints it would be difficult to spend more time on this frame and therefore the design team suggested that changing the scene slightly will help to make it more emotional. They suggested that the Grandma could be in the centre of the frame making her the main focus of the scene and change the

Anja and I introduced ourselves to Ocado's design team. During this slide Anja explained our concept and the story about the girl wanting the same meal her Grandma made her. I then explained that our concept is based on the idea of family mixed with tradition as they are having a traditional Italian meal (Grandmas recipe) and a modern touch as they are using technology to order the ingredients from Ocado. We refreshed Ocado on our storyboard as they had already seen it previously. Therefore we didn't go into too much detail however Anja explained that our storyboard illustrates the story and includes the transitions we wanted to use. I explained that we had another storyboard prior to this version that included some subtle differences for example, more text. We showed our motion graphic which we needed to replay as the sound was delayed the first time round. We showed the ad mockups that were created in the creative hub by Facebook. I explained that

We presented our motion graphic to Ocado's design team.  This consisted of:   Daniel (Senior Art Director)  Micheal (Head of Creative & Branding) Chris (Graphic & Motion Designer) Valentina (Freelance Motion Graphic Designer) We were the first group to present. Therefore, Anja and I refreshed the design team on our concept and storyboard and showed our motion graphic. Playing our motion graphic. Once all groups had finished presenting Micheal gave our some general feedback and congratulated us on our projects.

I decided to test out what our ad would look like on social media and therefore used Facebook's Creative Hub to create these Mockups. To view these Mockups visit: Facebook Mockup: https://fb.com/l/bWQAdYVGmAn9SO Instagram Mockup: https://fb.com/l/ajY9hQKoRWXBV9 Facebook Mobile View Facebook Desktop News Feed Instagram News Feed

While I was focusing on the illustrations, Anja researched what Ocado usually write as copy for their posts. I had researched Ocado's social media posts prior to this and therefore was able to incorporate my ideas and knowledge with Anja so that be was able to write our copy. We discussed this in the #general channel on Slack, however perhaps we could have created a separate channel to discuss this.  I edited Anja's idea for our copy with further research on Ocado's instagram posts. I then took this one step further. I realised that Ocado also had a recipes page on their website and searched for recipes that included gnocchi and incorporated this research into our copy. I made this page into a bit.ly link as this looks more appealing than a long URL. I also realised that Ocado usually used three to four hashtags in their social media posts and therefore added three hashtags to our copy. I looked into adding a CTA button on our social media post and

Anja originally designed the CTA button which I refined by removing the shapes outline and aligned the text to the shape so that it was centralised. The shape was based on Ocado's logo. Version 1 Version 2 We realised soon after that we didn't need to design this as this was included in the advertising options when posting to Facebook and/or Instagram. The only call to action button that was appropriate and related to Ocado's services was the 'Shop Now' button which was linked to the Ocado website.

While we were working on our motion graphic in Adobe After Affects some frames from our original storyboard had to change due to design decisions, fitting with time constraints and helping our story flow better. The animation style changed slightly while illustrating this to feel more friendly and to add more expression to the characters. Introductory Frame This frame appears in the same way that we had planned on our storyboard. We decided to use the cabbage colour palette from Ocado's branding colour palette as this is there autumn colour and therefore would fit with the time of year. We decided to use the core purple for the title frame and call to action frames as this colour contrasts well with the logo while the lighter purple colour didn't contrast as well with the core green. As this was Ocado's logo, I felt as though it needed to stand out. We used the lighter purple for the rest of the frames as this was less obvious that the core purple and was nicer tha

Anja put together our motion graphic using Adobe After Effects. Anja and I agreed that using the original illustrator files instead of the files exports (.png etc.) while creating our motion graphic in After Effects was a good idea as we were able to update and edit files easily when needed. We could either replace the file completely with another file or by opening up the illustrator file in Adobe Illustrator, editing the file then saving would automatically update this change in Adobe After Effects. Anja used motion blur on all moving objects to make our transitions smoother and less jittery as well as adding the easy ease effect on each frame (causing our keyframes to look hourglass shaped). Asbury (2012) explained this well in his blog, '5 After Effects Tips for Mastering Keyframes', he states, "The type of keyframe you see is a visual shorthand telling you how the keyframe will behave.  By default, keyframes in the timeline are linear and represented as