Blog Link

For some reason when posted into the Research File this link broke, but here it is as promised.

https://docs.google.com/document/d/1O9hHU-i-Nff42aYFt5wplMTPt44LbiHoDKH995zhivY/edit?usp=sharing

Enjoy browsing!

Scene 1 Even Closer to Completion!

Scene 1 has now been completed, minus a couple of minor tweaks to areas that need tightening. One or two of the motion tracked wall hangings wobble occasionally, and therefore just need some small readjustments in the after effects project. Unfortunately this means another render is needed, however this is necessary to ensure that the finished product is as high a quality finish as possible.

View the render as it stands at the moment below, subject to changes.

Scene 1 Almost Done!

Things have been a little slow in production cycle recently, due to the pressing dissertation deadline, however scene 1 is almost complete, with only a few extra effects to added, and then final polishing.


As you can see, there are a few areas where tighter tracking and masking needs to be applied to certain elements in the video. For instance, the blue frame on the right of the apartment has some inaccurate masking in a couple of shots, but this is easily rectified.

The next update will see this scene finished, within the next of couple of days.

Elsewhere, I've been working closely with the production team to create suggestions for where we are able to collaborate in a creative manner. The outdoor scene has potential for a wide range of effects and tracking objects to be placed into the environment, and now I have the files for this, the work can begin in earnest.

Post-Easter Update

Been a while since the last update, but I've been working away.

Spent some time with the production time looking at ways to make some of the effects that we need for the show.

One example is the fingers crossed symbol that needed rotating, but giving some depth so it's not obviously a 2d image. Since there's no simple way to add depth in After Effects, I instead opted to curve the 2d object with the ray-traced 3d settings in the program.

After some time fiddling with the segments and curvature percentages, I made this really rough draft.

The white in the background didn't cover the whole background, which didn't become apparent until the render was finished, as well as the text positioning in the foreground. The production team and myself agreed that the rotations were too fast and the curvature settings weren't quite good enough to give the impression of some depth.

A little more tweaking and some polishing left us with this:

Since Ray-Traced 3D needs nvidia graphics cards, the rendering and processing was done on CPU, meaning this 10 second render would have taken hours. Instead, I rendered one rotation of the hand and looped the resulting .mov file instead, rendering the video you see above in a matter of seconds.

The next step now is to apply this piece, and all the other final images into the apartment scenes, as well as inserting adverts into the outdoor scene I have received. I've also been working on display screens that the characters will interact with, and you'll see those soon too! 

Mirrors!

Since the visit to the studio I've been working on how the mirror will interact with its users in the scene. At the moment, the adverts slide into view when a character approaches the mirror, which can then de rescaled and navigated with gesture controls.

To achieve this effect I've created a separate composition with all the content lined up, then masked it all into a circular shape that will fit the mirror. The adverts have a small animation upon entry, just to add some visual dynamics.

Here you can see before and after the mask 'add' effect was used. 

Once that was done, I took the composition into the apartment scene, tracked the camera movement to a null object, parented the adverts to the null, adjusted the position so that the adverts fitted the mirror and then rendered a short preview.

Later in the scene the character interacts with the mirror, and this is something that will take some fine tuning to ensure that the interaction matches the animation that I will be providing.

These shots show the animation entering the mirror.

Watch a short example of the mirror in action below:

The next step is to apply this effect, and the frames I currently have to all appropriate scenes. 

21/03 Update - Studio Visit and Collaboration

Yesterday I visited the studio whilst the production team were filming some scenes, to have a look around at their production styles and techniques, and to also talk through some of the work that we're completing together.

The images you can see below are from one of the scenes being shot for 2021. The green placeholder frames are where images will be placed into the environment, given the show the possibility of having animated and alive settings.

After touring the studio, we sat down to discuss some of the scenes I've been working on, as well as the rest of scenes to come. 

One suggestion I made was to add markers to the green placeholders in the sets, enabling me to track the motion of the camera with much more ease. This should reduce the time it will take to establish suitable and realistic tracks within the shots. 

For the apartment scene, the mirror in the room will have interactive adverts on the peripheral. I suggested perhaps fitting the adverts to the circular shape of the mirror, and giving them an intro animation, rather than being on the mirror for the duration of the scene. For example, when a character approaches the mirror the adverts will drop into the mirror, perhaps with a welcome message. This reduces the need to animate the mirror for the entire scene, but also gives an extra level of flourish and visual dynamics. 

There is also a reverse shot of the mirror, which I suggested could do with having a frame around the shot, to infer more clearly to the audience that we are looking back through the mirror. This combined with inverted and limited opacity adverts from the mirror will make it explicitly clear that we are looking through the mirror directly at the character.

The adverts for the mirror are currently being edited and shot, and should be ready to introduced to the scene in the next few days. 

Another area we discussed was the picture frames in the scene, which the writer desired to have a circulating slideshow where pictures moved from one frame to the next. I suggested making 4 compositions of equal length with the pictures changing at regular intervals, the only difference being that the pictures were in a different sequential order in each composition. This means that all 4 frames will have different images at all times, and the images will cycle around the room. This saves playing around with composition timings by simply having 4 separate compositions that achieve the same effect with much less fiddly work. 

In the mean time, some of the final material for the picture frames and eyes has started coming in, meaning the placeholder tracks can be replaced, and the graphic edits can start looking closer to the finished product.

Here's a sneak peek at the number of tracks that the scenes are starting to accrue. 

I anticipate that each scene will have a huge number of tracking nulls, each with their own challenge and problems to overcome, whether it's being obscured or out of focus. 

Back to After Effects...

Apartment Scenes - Motion Tracking

For the apartment scenes of 2021, the picture frames need to be animated and alive, containing adverts and other information within the environment.

Whilst the basis of those are being made by the production team, I have taken the time to create the tracking paths for where the footage will go.

The original shoot used green paper in the frames to mark where the footage will be placed in post-production. By tracking the points on the green paper I've been able to create some good initial placeholder tracking paths, and have used a placeholder video to demonstrate where the footage will go, as well as how masks will interact if and when the footage becomes obscured from view.

You can see in the image above where the placeholder green has been used, and this gives you an idea for how active the scene will be once the frames are animated. Some of the tracking is slightly inaccurate, however it makes sense to rectify this when the final images come through from the production team, given the possible difference in source material display ratios.

I've uploaded the test footage with my placeholder footage in the place of the adverts that will be coming very soon! For this placeholder I've simply used the 'Making Of' video from the establishing shot, as it was the nearest .mov I could find. 

Up next is the rest of the scene, as well as the additional visual effects that need to be added to characters and so on.

I've organised a meeting with the production team to look through the footage to ensure that both parties are happy with the creative direction. Once that meeting's taken place and more footage comes through the first edit stages, then more animating can take place.

Collaboration

This project is one that requires a lot of collaboration between myself and the production team, and as a consequence I've created a document for both parties to access and amend. The document is a place to post and discuss the expectations and outcomes of the collaborative work. 

By using Google Docs to host this open document, we can converse freely about the work and how things are going when compared to expectation.

The document also works as a to do list for the rest of the work I need to complete as part of the project. This works, subsequently, as an efficient one stop shop for all the information I need to complete the work.

With this up and running, the next stages of development should be completed with more speed and efficiency.

Sky Replacement - Finished

The establishing shot required the sky to be replaced, and this is now complete.

By masking the backdrop and replacing it with a more suitable image, re-colouring the building and applying and more suitably angled lighting scenario, the final piece is much more suited to the style of the show, foreshadowing a dark and ominous story ahead. 

The following video shows the layers of development as the piece moved from its original state, to the finished shot. 

In more detail, the image of the building was masked in photoshop, then re-animated at the end of the process, since there is no movement required within the image. This saved time on masking the movement of the building, and allowed me to recolour the building with more accuracy and consistency. 

By placing the new background and the building layers into a 3D state, I could then relight the shot adding more depth and grunge to the look. Without the lighting the image looks fake, and therefore needs the lighting to enhance the feel and authenticity of the overall outcome. 

Without light:

With light:

Here are the settings for the light used in After Effects:

Finally, the images were animated to add some movement and dynamics to the shot. Rather than having a short static shot, the movement just finishes off the appearance, creating a visually interesting final product.

Here you can see the finished shot:

Up next is the first of the scenes, which I have received from the production team. 

Establishing Shot - Sky Replacement

Since the last post, I've added some more finishing touches to the shot.

This includes neatening the matte path throughout the shot to ensure nothing is missed that needs to be in the shot. I have also attempted to alter the direction of light from the sun, given that the sky replacement image uses a different source angle for its lighting.

This is something that I haven't done before, and is therefore a new task for me to try.

Here's the outcome of my first attempt, it will probably need some more touching up and re-colouring, but I'm quite pleased with this as my first attempt.

The shot needs some minor animation, and that will be completed when the colouring has been finalised.

Project Update 21/2/2015

Been a little while since the last post, given the limit in available footage, so in that time I've been looking at the best ways to achieve the effects that I want to create for the project.

Given a range of the shots require masking and set extension, I've been looking at the best ways to alter the images that I'll be provided.

Using some very early footage from the shows production, I've practiced how to change the background of a fairly static shot.

Here you can see the original shot, and then the first test shots of the sky in the background being replaced. The actual masking follows the movement throughout the shot, but needs a little bit of tidying here and there.

This screenshot shows the mask path edit points, which will need to be increased to ensure the masking throughout the shot is neat and error free, but shows the initial work being undertaken to test effects for the show. 

My next step for this particular piece is to send it back to the group and see how they react. During this time I'll start working on some more shots that have come through in the last few days. Stay tuned! 

Semester 2 Begins - 2021 - TV Show Animation Project

With this semester being my final semester at University, I wanted to get involved with a big creative project to complete my time at Lincoln.

A few possibilities for a final project floated around in my head, including a music video for a song based on this piece of album cover art seen below. This is still an idea that I'd like to explore, and perhaps something that I'll look into in my spare time.  

The final project that I have settled upon is a fantastic and exciting opportunity opened up by fellow Level 3 students, creating their final piece for the Multicamera module at the University of Lincoln. The group approached me with the proposal that I could create some work for their show, that I could use on my own portfolio when looking for work after graduating. The scope of work being requested is no small task, and I subsequently proposed that the work I create for the show is used as my creative output for my final project at University. This means that I can create a level of content that suits the program, but is also substantial enough for me to focus on as my own project work. If it was a mere side project, my focus would be split, and the final outcome would not be as good as it could be. This setup is the best for all parties, and will also work well to show the collaborative nature of media at University; something that will feature well on any creative CV. 

As for the actual content that will need to be created, following meetings with the producer Lucy Whitehead and writer Bobby Beardwell, I have started to look for inspirations in the media for how to achieve the desired outcomes. The show, set in the near future, follows Rowen on her journey in a world where the new government, 'The Promise', control almost every aspect of life. Only thoughts are safe from the government's prying eyes. This setting requires a range of sci-fi and semi-futuristic animations to help create the rich depth that the story demands. Characters will be seen with circuitry in their eyes and glowing red LED's attached to their necks, as well as a variety of other artifacts placed into the cinematography. One example of this is the advertising that I will be creating and placing into the scene, similar to the adverts seen in Alfonso Cuaron's Children of Men. 

Whilst the adverts above look like regular bus adverts, they are moving images in the film. Follow this link to see a YouTube video full of more examples of the dystopic adverts from this film. Children of Men is a clear inspiration for the work I will complete for this project in relation to the adverts being placed into the environment. 

Screens are another aspect of the show that I will create, which is something that features heavily in most modern sci-fi films and tv shows. Minority Report and the Avengers Assemble (both seen below) are just two examples from a wide range of cinema that uses holographic displays to aid with the establishment of a sci-fi setting. 

By concurring with genre convention, not only will the outcome be recognisable as a sci-fi inflected show, but I shall have something to base the creation of these animations and effects over the coming weeks. 

My next post will provide more detail on the exact content I will be creating, as well as establishing some timelines for the creation of all the content over the semester. 

Further Designs

This post will be fairly short, simply showing the sketches and subsequent designs I've made over the past few days.
 
<Sketches will be added here once scanned>

You can see the development from sketches to final product, as well as slight amendments made to suit the screen. As with before, the best way to view these images is in fullscreen on a mobile device.

The next step will be to create a wide range of screenshots for the various functions of the application, and then construct the animation and promotional material to accompany the final concept presentation.

Homepage Designs

After a long period of designing and sketching, the homepage has been created. Whilst this is a work in progress and likely to change, it gives you an idea of the visual style and layout that the application aims to achieve.

The best way to view this image is to save it to your smartphone, and viewing it in fullscreen.

The top of the application is strongly inspired by Twitter, whilst the tiled scrolling feed more by Google and Facebook.

Further posts will come showing the design development, as well as more and more pages from the app. Stay tuned!  

Information Architecture - Steve Krug

1. “Don’t make me think.”
2. “It doesn't matter how many times I have to click, as long as each click is a mindless, unambiguous choice.”
3. “Get rid of half the words on each page, then get rid of half of what is left.”

Steve Krug's concepts on usability are wise words for anyone designing any interactive interface, and whilst his writings were originally in reference to web based usability, the themes and ideas can easily be appropriated for a mobile platform.

Simplicity is frequently referred to as one of the key factors to good interface design, minimalising the potential for the end user to be confused or uninterested. Shortening the journey to information is not considered as important as making sure the journey itself is painless and intuitive. Everything from the wording of available options to the colour of the border on clickable boxes can influence the time it takes for a user to decide whether they want to click through or not.

In terms of the architecture of the application, it is my intention to maintain a visual sense of 'real estate', where imagery and structure is maintained across all of the application. In a practical sense, this allows users to become familiar with navigational aspects of the application as well as developing an understanding of location in relation to other forms of content. If the app was to have the home button in different places when moving from page to page then the end user will experience a very disjointed journey to any content that they desire.

Structurally, I intend to construct a narrow and deep architecture, with real estate similar to that of Twitter for example, with a home button always present, and a small selection of shortcuts at the bottom of the screen. This allows the rest of the screen space to be dedicated to the content of each page, as well as making sure the focus is on the appropriate material. Functionality is something that needs to be at an optimal point for this application to maintain its audience, and therefore each user function should be effortless, much like Krug's views on navigation. For general sub-headings within the application, I have written a short list, and these are current navigational signposts to content, or external sites.

Within each section there will be more content, however these are the headings that summarise their subsequent content in the most succinct manner.

-Home
-News
-Sports/Societies
-Deals
-Events
-Email
-Blackboard

Krug raises the idea that some users prefer to browse first, whereas some prefer to use search functions. I'll need to make sure that both types of user can satisfy their usage trends as quickly as possible from the point of opening the app.

As well as structural hierarchy, there is also the concept of visual hierarchy to consider. Do some menu options command more attention that others? Is the space used efficiently to inform the user about which information is the most important and/or relevant? Ensuring that font thickness, spacing, and even bordering is consistent with the intended portrayal. All these things will come with the design portion of the product, which is already underway.

In summary, getting visual design correct can be a tricky task, however the benefits are massive. If users experience good architecture and design then confidence in the application, brand, or product is instilled, moving towards improving the overall customer satisfaction. 

Further LSU Design Analysis

Following on from the previous post, which took a brief look into the current design choices of the Lincoln Students Union, I thought it would be beneficial to the development of our product to look further into these choices and learn what changes need to be made. Optimising the visual aesthetic of the application is a fundamental portion of what ensures users return to an app, thus prolonging the life and function of the product.

As was mentioned in the previous post, the design of the current LSU website is cluttered and unclear, with a few different styles being employed all in one place. It seems that the presentation of information on the site needs some form of cohesion, to bring together the information in one place with a suitable and functional framework.

Above you can see the current homepage of lincolnsu.com, which in my opinion is all over the place. There's banners, overlays, columns, lists and menus spread out in a poorly organised fashion.

Firstly, the dropdown options for the site run over more than one line, and the website looks poorly made as a consequence. For the application to maintain an active audience, the design needs to be optimal, with no wasted space or untidy finishing.

As you can see above, the menu has a portion of negative space that could be utilised much more efficiently. There is also a selection of menu options that have further options available through menu dropdowns, however there are also some menu options that do not. Uniformity is not something that is utilised enough in the design of this website, and it something that I will be very keen to implement for the conceptual development of the application.

Further into the website, there are pages for information regarding the societies, sports teams and liberation groups available in the SU. The design for these pages is different from the front page of the website, furthering the need for a site wide design style, rather than a range of designs on various pages. Branding is a key issue that a well designed application can help to solve, providing a stable and recognisable product for the students that will use it.

Becomes...

Which becomes... 

It feels like the front page, group selection page, and group list page were all designed at separate times,  with the final product ending up with a disjointed feeling. This also means the user takes more time on each page to establish what they are looking for, slowing down their navigation, increasing the possibility of losing the interest of the user. 

To ensure that these issues are not present in my own work, I will develop a design style across the application, preventing any clashes from article to article or page to page. 

LSU Visual Design

As you can see, the Lincoln Students Union website is a little muddled. The layout and formatting is inconsistent in places, and even unfinished on one of the pages.

For a mobile application, the design will need to be much smoother and more refined, with ease of control in a touch interface also being a key touchstone. The colour scheme and logo design are already strong, however it is the formatting that needs revitalising. With this in mind, I have put together some very rough early stills for what the app might look like.

Given that most applications start with a basic splash screen that animates into the main menu, I have put together what different splash screens may look like.

All the designs have taken the swan as the main image, but in different forms. The first splash simply uses the swan alone, whereas the second takes the whole logo including the text and a further enter command. The third and final splash is my current favourite at this moment in time, with the inverted swan on a simple rectangle. Upon loading, the app would then animate through the red rectangle and reveal the menu. 

The next step is to begin creating the visual animations that the app would feature. 

Conceptual Representation

With the knowledge that the project is now conceptual, I need to ensure that the portrayal of my design and concept is achieving its potential. For this to become a reality, I have researched how successful mobile products are marketed and presented.

The recent launch of the new iPhone 6 and 6+ came with a new wave of promotional material for the iconic mobile brand. Given the international scope of Apple, their advertising campaigns are curated for specific locations. The following advert I have chosen to pick apart for the project is from the US campaign, entitled 'Duo'. 

The advert stars Jimmy Fallon and Justin Timberlake, with their unique spin on the famous 'Thus Spoke Zarathustra'. The audio for the ad is quirky and silly, utilising the fame of its stars to validate the product. Whilst celebrity endorsement isn't something I have access to, the concept of having a fun and lighthearted audio for the conceptual promotion is certainly in vogue when promoting online material. I will address mobile advertising audio in more detail later. 

As you can see from the advert, the visual theme is incredibly minimal, with a pure white finish, almost sterile in appearance. This complete lack of any background, not even gradient, ensures the focus of the viewer is entirely framed on the important imagery of the phone and the screen. When the device is not being directly interacted with, the fingers and hands of those holding the phone do not obscure the view in any way, making sure there is no way to miss anything the screen may be showing. 

From a design perspective, the clocks and times displayed on the phone in every shot is continuous, always displaying 9:41 am. The phones are almost always being held perfectly horizontal or vertical, there is no deviation, giving the ad an air of perfection and clinical excellence. Maintaining an easily visible and stable presentation of your product is key when promoting smaller technical products. 

Moving on from Apple iPhones; Tile. 

Tile is an app created to help its user find lost items. Placing a small tile on your belongings means their location can be tracked from the companion app, ensuring users can locate misplaced items. Utilising cloud technology, other users of the app can help locate items that may have been stolen, or when they are out of the range of the owner. 

Whilst the premise of the product is interesting, it's the presentation of the product and its ancillary devices that I am most interested in.

Again we see a very clinically designed website (thetileapp.com), much akin to the nextr website, in a single column format. The website features a number of sections each with a different focus of information regarding the products, with further information available on subsequent pages. The following screenshot summarises the design ethic that has been applied to the products physical design, but also its promotional media.

Given these prime examples, both strongly utilising minimal design with the popular whitewash theme, it seems like there is a dominant design style when it comes to promoting products within a screen based medium. 

Project Development - An Idea Evolved

Following some investigation into the coding and programming process for mobile applications, it seems like a more viable approach to develop the app from a conceptual perspective. This will involve completely designing the app from a visual perspective, rather than making an actual application, and then generating appropriate imagery to support the promotion of the application. Given this change in project style, the concept will need to push the boundaries of app design much more than before.

http://www.nextr.info/ is a website promoting an app for travel around Germany. The website itself has a smart layout, with interactive elements to enhance the experience the user has whilst visiting the site. Mousing over certain areas of the website brings up additional information or alternate screenshots. Using this method of presenting screenshots allows the user to customise their experience with the product in an online space, rather than presenting a predetermined video, with timed transitions. Having a smart and intuitive website suggests to the user that the product being advertised may also have similarly strong design and dynamic user interface, and subsequently works as part of the advertising itself.

Below you can see a portion of the website, including the additional information icons (+). The website also has an ingenious way of representing the transition from page to page within the app, placing two screens side-by-side and simply placing a directional arrow from one screen to the other. The arrow also shows the part of the app that has been selected to propel the user to the next page. This method of representation smartly sidesteps the limitation of displaying an app in still images.

This minimalist and efficient design is something I will try to utilise in my own presentation of my work, but that's something that will come further down the line. For now, I'm focusing on the conceptual possibilities oft the app which I intend to conceive.

With the app aiming to fill the gap for a students union mobile application, the product will need to meet the needs of both the union and also the students. Keeping this in mind, I will now develop a first draft for the infrastructure of the app.

Level 3 Begins

It's now time for the development of my level 3 projects in Digital Media at the University of Lincoln.

My proposed project for this semester is to create an app to improve the communication between the Lincoln Students Union and the students of the University. Initial oral research suggests that students of the University feel the strength of communication from the Union leaves something to be desired, and an app seemed like the obvious answer in an attempt to rectify this.

Smartphones are now commonplace devices in the hands of most students, and the lack of an SU affiliated app is something I plan to change.

The first step involved looking at apps that have received plaudits for successful and innovative design. Below are screenshots of Yahoo Digest, winner of the Apple Design Award in 2014. The app uses a simple vertical design, with twice daily updates on the latest top news stories. Once read, a story's icon changes colour (much like links on a web browser), with a wheel on the bottom of the front page tracking all read or unread stories.

From this design, I am inspired by the stark contoured design, using strong diagonals to interlace text and images. The user interface is intuitive, with no specific buttons to link from page to page, but rather tapping anywhere on a headline takes the user to the full story. Whilst on a story, swiping left or right will take the user to the next story, akin to turning the page in a physical print book or newspaper.

Another hot style within the design world is tiles, and tiled structures for menus and front pages. Windows Phones, for example, use a very sharp and defined tiled structure for the front page of the phone operating system, which is also represented in Windows 8, the computer OS.