Final Mockup

Final Mockup of the Malmo House iPad Publication

Further iPad Layout

After getting the previous two slides to a place where I was happy with them, I continued to develop the Portfolio page, meet the team page and contact us page.

Firstly, I decided to create the Portfolio or What We Do page, here I selected the companies most successful videos to date to make sure I was showcasing the companies best work. I continued the circular theme by adding circular text boxes and circular scrollable frames that allow the viewer to read a short description of the video that they are related to. I spent some time resizing and reshaping the circles - I found it tricky to get an appropriate amount of padding between the elements. I'd say this page took the most experimentation until I had a full content rich page. Upon discussion with my tutor, I created a tab-style banner button that re-directs the viewer to Malmo House's online portfolio where they can see even more examples of the companies work. Using the hyperlink folio overlay, I chose to enable this, and the banners to follow to open on the device's browser rather than in folio. I chose this option because the connection time was a lot quicker using the browser and folio didn't process the companies website as successfully as the browser did. I am aware, however that navigating away from the magazine isn't always desirable and can result in loss of audience so I made sure that the publication asked permission before leaving to open the device browser.


The next page I created was the Meet the Team page. This was an important addition as it offers context to the audience about the two people behind the company. I wrote a brief biography about the pairs interest in media, their education and experience, and how they came to found Malmo House. I appreciated that there was quite a lot of text on screen so I formatted it into two neat columns, and centered the text because I felt this created better balance within the page's overall design.  To break up the text and add a little bit of professionalism I created two picture galleries, again within the familiar circular shape. The content of the slideshows consist of images of the two founders as well as screen shots and photography projects the company has produced. After creating the galleries I noticed that it wasn't immediately obvious that the viewer can slide between the images. To remedy this I designed two iOS7 inspired arrows that hopefully inform the viewer that they can access more content by interacting with the galleries. This page is also the first display of the social icons i had created to match the publication's theme. I chose to include personal networking hyperlinks as the publication will serve as a CV as well as a portfolio so it was important that the viewer can connect with and access more information from the team.

The final page that I designed was the Contact Us page. As I mentioned before it is important to give the viewer the option to connect with the company as much as possible, for this I created the social icons within the companies circular style. I did this by finding vector graphics of the social icons in the form of the font Socialico, and placed them within a circle in the same dark grey as the companies logo. I also added the same tab I previously added to the portfolio and hyperlinked it to the websites contact us page. On this page I have created a html form where the viewer can email the company all contained within the website. I thought including this to the digital publication was a good idea as it also gave the viewer the chance to contact the company through email, if that was there preferred contact method. Finally I created another tab which hyperlinks to the URL of this blog, so that they can learn how it was created.

Initial iPad Layout

I had a rough idea of how I wanted the iPad magazine to be structures. I wanted to mirror the website I have designed previously for Malmo House. 

I knew that I wanted the first thing the viewer saw was the new logo, so I decided to use the image sequence overlay to add interactivity to the animated version of the logo, beneath this I was going to add buttons that direct the viewer to the desired pages. Here is the final design, I had to spend a lot time resizing the image sequence as when clicked it often skewed and distorted. However, it still decides to turn a darker shade of grey when selected, i couldn't seem to be able to remedy this in any way, which is a shame. I'm happy with the overall design, the colour scheme is consistent to the branding of the company and the fonts are the institutional fonts, Enriqueta and Open Sans, that the company uses in it's publications.

The next page I created was the Who We Are page. This is where I decided to house the channel trailer I had previously designed. I felt that this was an appropriate way of introducing the video as it should be the first thing the viewer sees past the cover. 

I spent a little time working out how to select a poster frame rather than leaving the video blank until play was hit. I was much happier with the poster as it made a neater, cleaner page layout possible. Beneath the video I chose to add some scrolling text. The text is lifted from the About page on Malmo House's website, I feel that adding this text not only demonstrated my skills to create scrollable frames but also was a valid addition to the page, creating information for the reader that they can interact with and welcomes them to the publication. I decided to add a few still images to contrast the video. The first image is a still frame from the character's mic animation, i felt this helped to ground the video within the text by creating a recurring theme that ran through both the video as well as the digital publication. The other images are from Malmo House's Instagram and Facebook pages. Connectivity is important so I felt it was important to converge the website content and magazine. I placed the images within a circular frame, so to continue the circle motif that is currently running through the website and logo layout.

Creating the Promotional Video

I was very glad to receive the task of creating a short promotional film for the iPad magazine project. I had been meaning to make a similar thing to use as a Youtube trailer and I was glad to be able to finally create my idea.
I decided to demonstrate my 2D compositing skills by re-animating the short animated gifs I have on the website. The gifs consist of two simple characters that resemble the flat logo design, these characters are meant to symbolise the two members of Malmo House.

I had to re-animate the characters because the GIFs were too low in resolution. I also took this opportunity to redesign the characters. There isn't much of a physical difference, but I used groups and smart layers to make the characters much easier to animate. I also created a blink preset, so that all the blinking was identical, this helped to create a motif throughout the two characters.

The first sequence I planned and animated was the business card sequence. I masked off the top card and added it to a new layer, this was so I could place the characters behind them and make it appear that they are peering out from in between the cards. I chose not to use the arms in this sequence so i could emphasise the eyes and hopefully add some emotion to the characters through their eye movement, much like the Gromit character in Nick Park's Wallace & Gromit. 

The second sequence I animated was the waving on the laptop. This turned out to be my trickiest edit. I shot the footage of the laptop with the intention of reversing the footage in the edit. I chose to do this as the tilt I was using in the film seemed more natural the opposite way to how I had planned the animation. In retrospect, it would have been far easier to reverse the footage before tracking and animating, but I went into the edit expecting to reverse afterwards. This made it more difficult to track, and it took many attempts to get right, sometimes the null wouldnt respond the way i wanted it to so some additional keyframing was needed. After I tracked the footage and the null was behaving how I wanted it to, I simply parented the animation composition to the null and it sat nicely within the final composition. 

After, this I animated the camera sequence, this in itself lead to a few problems, the camera was not as shaky as I wanted it to be, I was trying to present a handheld feel whilst using a stabiliser, this footage wasn't shaky enough so I ran it through a destabiliser plug in for after effects and added some motion keyframes. When I was happy with the outcome I motion tracked which was a lot easier this time around. When animating the figures I chose to use easy ease for the actor's arm as he holds up the skull and for the cameraman's arm as he followed the movement. This created a more fluid and natural movement and allowed me to add a little bit of expression in the characters.

Finally I animated the microphone sequence. This added a new challenge as I wanted the characters to sit upon the interface box, this required me to track on a different plane, after a few goes I managed to select the correct plane and tracked successfully. So after i added the animation composition to the tracked plane, exported all the sequences, assembled them in Premiere, reversed the laptop shot and added the animated logo. This completed my animation, 2D composition and motion tracking demonstration in the channel trailer for Malmo House.

Creating an Animated Logo

After designing the improved flat design logo, I decided it would be a good addition and demonstration of my 2D compositing skills to animate the new logo.

Firstly i had the idea of summarising what the company does in the animation. We chose to suffix our name with "house" to resemble the name of a production house or design house so I chose to manipulate this. I located the three areas or media that the company is trying to specialise in; 

• Picture - This will be every image work that the company produces whether that be stills, photos or video. I chose to use this first for two reasons - the company currently has mainly short films on their online portfolio - the second reason was to allow the audience to make the connection to the picture house motif
• Sound - Although i'm not sure that a "Sound House" is in existence, I thought it was an appropriate element as the company focuses on music video and often do their own recordings and live lounges - it is an important discipline for Malmo House
• Design - Finally design was chosen as the company understand the importance of good design. I chose to put design last as - because it is such a vague discipline and can be applied to both sound design and picture design. The company does do some design work - but their sound design and picture design take priority.

I chose to use After Effects to animate the logo. I kept the animation simple as to not overcomplicate the flat design of the newly renovated logo. I found it was more aesthetically pleasing to have the animation slide right to left. Even though this is the opposite way that English is read, it helped to balance the logo better and perhaps even was more of a surprise to the audience. By using easy ease keyframes I was able to add an "overkill" effect almost making the words look like they skid into place. I felt this was a more organic movement and again added aesthetically to the design.

Finally, when I was happy with the movement of the exits and entrances of the words I repeated the "*MALMO" layer to round the animation off. I thought this would be useful if the logo was ever used in a loop situation or for gifs etc.

My last stage was to export the animation not only as the finished ident movie file but also as a sequence of JPEGs. I did this so that, in Indesign, I was able to created a sequential image interaction with the logo - the user can now run their finger across the logo and control the animation - I thought this interactivity would help raise the production standards of the iPad publication.

Logo and Element Design

This is the existing Malmo House logo. It is in low resolution but depicts a house in a chalk like texture. 
I designed this logo because I am influenced by Swedish design, hence the name Malmo House. I designed this logo after being inspired by the designs of Simogo for the Swedish iOS game Year Walk. 
The game is a rich, aesthetic-led designed game that uses sketchy techniques to create a dark and wintery tone. I adopted this when developing the Malmo House original logo, but after my design was created and used in thumbnails on Youtube, Facebook and Twitter I noticed that it was a complicated logo to read and often degraded in resolution. I felt it was important to retain the name of Malmo House in the logo as we are a new-build company and the most important thing for us at the moment is getting our name out into the competitive marketplace. 

House design within Year Walk, the blacks, whites and grey colours
that I adopted were directly influenced by Year Walk's colour scheme.

Character design within Year Walk. I adopted the textures and
gradients used in this image for the Malmo House original logo.

It was after this discovery that I again turned to Year Walk. Simogo create iOS and mobile platform interactive media, so they must come across thumbnails in their product development. The logo design for Year Walk is a lot more minimalist, clear and flat than the design of the game - this was an important step to make sure it looked professional on the small thumbnail of an iOS icon. I also looked at the very minimalist approach of Simogo's own logo - this time incorporating text into a loosely based circle element. I feel circles are very fashionable at the moment, being a simple shape and effective device in contemporary flat design. 

The logos for Simogo and Year Walk.

So after researching existing logos I created this first draft of a flat design Malmo House logo.

I liked the circle and right aligned text, I chose the font Open Sans as it is a clear and sans serif text so will look better when scaled down. I also adopted Simogo's black and white colour scheme, however I chose a dark grey instead of a black as it went well with the sand colour that Malmo House use. In this development, the two layers of text are the same pixel size, I think it makes the logo look disjointed and lopsided so, with the next alteration I decided to exploit more of the empty space within the circle.

By making the "House" layer larger I feel the logo looks more balanced and the right amount of space is created and used within the circle. I chose to include the asterisk to add a small amount of aesthetic within the logo, hopefully this can also develop into a motif, allowing us to simplify the logo even further.

Initial Interface Development.

Malmo House already has a few set colour variations that can be called a colour scheme. The below board shows the three colours, as well as pure white, that we use in our publications and idents. 

The colours were chosen to add warmth to the companies productions.

I have created these font boards to show the two fonts that the company uses within it's brand identity. Enrequita and Open Sans are both web-friendly fonts, allowing easy convergence amongst browsers and devices. 

Convergence Task

For my convergence task I will be creating an interactive portfolio for the production company I set up. Malmo House. We already have a small web presence, Youtube channel and Facebook/ Twitter accounts. We have started a brand identity but I shall develop this further, creating logos, character animations, colour schemes and corporate font boards.

It is important that our logo is simple, clear and easy to transfer from computer screens to mobile and tablet screens. I shall design all of these elements with convergence in mind. I shall wrap all my design boards together and create a digital portfolio in the iPad format. 

I shall use 2D compositing techniques to create a channel trailer for our Youtube page that illustrates both the character animations that will be associated with Malmo House as well as the development of my skills in tracking and set extension as well as keyframe animations.