After the feedback, these are the new adjustments to the original concept for the title page. These additions play on the design elements of the cover design. The main difference being the addition of the drop simulating the “spilling” of the white graphic along the side of the main photo. The black background also centralises the users eye onto the magazine, unlike the red background which did not create a definite outline for the magazine. Overall the focus of the animation is more centred towards the cover and not the whole of the phones screen.
In the first animation created, the animation did not reflect the Gosha Rubchinskiy’s brand. He is known for using a soviet aesthetic throughout his fashion collection and as such the animation should reflect that look. It is hard to accurately describe what one thinks of the soviet era, but there is some association with the era being disconnected from the ‘outside world’. Therefore these animations are 'ugly' and to an extent dated. The 3d type is not only a way to represent this aim but also demonstrate what kinds of animation magazine publishers can do with their articles. The only setback with this idea was the execution of the 3d. As the type spins around, it is clear the typeface is only superficially 3d. Technical problems such as my laptop being unable to render 3d effectively in AfterEffects meant a spinning 2d ‘Gosha Rubchinskiy’ was the maximum.
In an ideal world, both flags would have an authentic 3d ripple making it seem as if it were to wave in the wind. However due to inexperience using Aftereffects, this concept was hard to execute successfully. Therefore a compromise had to be made and a ripple effect had to be substituted in to try and replicate the flag waving. Despite this setback, the flags do connote a waving effect to a certain degree.
This typographic preview cover is aimed to create an online editorial brand for 032c, which seperates how the user views the online content and printed content. This is so that there is an incentive for users to view the preview as they are getting a different experience to the printed copy. The typographic cover’s limitation is that it does not give the reader an accurate representation or an idea of what the magazine looks like, which is what the purpose of the preview is. If this alternate is used, the preview then becomes a platform for 032c’s online editorial content rather than a preview of the magazine, which is one of the main problems identified in the brief.
This factor however may or may not be favoured by the user. Some users may like the addition of 032c’s online cover whilst others may favour a play on the existing printed magazine’s cover. Furthermore by using this animation, it fully utilises the screens real estate, where it is limited with using the actual size of the magazine.
However because the entirety of the preview is based on the printed content of the magazine, the cover should be based on the printed version to maintain consistency.
In this variation of the online preview, the magazine’s cover is not featured. Instead elements of the cover are taken and expanded to take advantage of the larger screen space on desktop and laptops. This creates a more immersive experience for the user that fully grabs their attention. Using Village bookstore as an example, their default navigation bar collapses upwards, giving the preview more screen space as well as not distracting the reader from the content. Users are still able to access the bar by clicking on the small arrow tab in the middle that stays persistent. If users want to exit the preview, there is a ‘x’ button in the top left that disappears after 3seconds following the same reason. The ‘x’ can still be activated by hovering the cursor over whenever during the preview. The aim of this cover was to direct the users attention towards the animated photo slideshow on the right hand side. Therefore the animation style used for the copy had to be simple and natural.
Throughout the preview features on both desktop and mobile, most animations are kept simple. This allows for the more complex sequences to stand out more for the user. If the entire preview was made of complex animations, the preview would become visually chaotic and nothing would stand out. The more complex animations would then feel tacked on to the preview feature rather than displaying the editorial content in the most suitable visual way that is appropriate to the context of the magazine.
The underlined titles under ’NO FEAR’ are meant to be live links for the user. This will allow quicker access of those who have already viewed the preview and for those who are particularly interested in one featured article. Along the bottom of the page, users are notified of their progress throughout the preview which will be helpful to know.
The pictures of the animated slideshow are purposely laid atop one another ‘haphazardly’ to reflect the experimental nature of 032c’s look as well as give context to the reader. It makes the magazine look ‘edgy’. The photographs are also split down the middle following the visual style on the front cover.
In this article, Sterling Ruby’s artwork should be displayed fully to give the reader an idea of who he is as an artist. Hence the background of his past work which then gets overlaid with the pages from the magazine as well as the artists name. Rather than use the typography directly from the spread, Sterling Ruby is enlarged and made a bolder font to improve legibility and impact on the reader. The pages and Sterling Ruby’s name are unaligned in reference to the photo alignment seen on the front cover of the magazine. This retains a certain visual style across the online preview.
The highlight of this article is the ability for the user to create their own outfits from the work of Ruby. Users simply click on the arrows on the left and right to swap shirts and trousers. This is aimed to create a level of interaction between the user and the preview feature, which is something that takes advantage of the digital platform. This may not align with original intentions of the artist but it is more meant to demonstrate the feature. The amount of outfits given to the user is also limited. Only 3 of Sterling Ruby’s work are shown, this is meant to make the reader want to read more from the article and hopefully purchase the magazine. The article is kept short and concise, with large captions, in relation to the reading habits and attention spans of users on screen.
This article is features the most ambitious animations. Firstly is the concept of having users “walk” to Barney’s New York to the shop window featuring HBA’s display. Ideally, the concept would allow the users to actually use Google Maps to make their own way to Barney’s, however a simulated ‘walking’ was done. The reason behind this concept is based on the article subject. Shayne Oliver and Daniel Freedman talk about their fashion show and the controversy over their questionable shop window display on a store with a reputation such as Barney’s New York. Therefore why not have the user ‘walk’ on the street to view the shop window and share the same experience those did in New York. Furthermore, Using Google Maps as part of the preview demonstrates what can be done to creatively display the magazines editorial content. In some ways it can be seen as a form of augmented reality, with the superimposed article titles on the screen agains the real life images from Google Maps.
In effort to create a more ‘realistic’ visual for the article’s introduction, the copy is made to look as though it was painted on the surface of the road and side of the building. This combines the typography and Google Street view in a more seamless manner.
Taking the initial concept further, users then read the article inside Barney’s shop window. This is to create an immersive experience for the reader that maintains their attention as well as demonstrate a more creative and contextually appropriate way to read editorial content on screen as opposed to a simple scrolling white page. Inspired by the article style of The Gourmand, as the user scrolls down the page, the images on the right panel change to keep the article visually dynamic.
In the actual magazine, this article documents a movie made by 032c for the reader, where the entirety of the article tells a visual story. Therefore the article is then turned into a movie, using a promotional video 032c used to inform readers of their newest long sleeve their selling in line with the magazines release. Pages of the magazines editorial content are then flashed in the movie giving the reader an idea of the content inside through a format that was originally intended for the article.
No comments:
Post a Comment