Portfolio
Introduction
In this portfolio I will be showcasing an overview of my emerging technology project that I have based on Augmented Reality. I’m going to talk about the change of ideas to my original proposal and how I’ve come to this decision. In addition, I will demonstrate and elaborate the thinking behind my design and animation decisions as I’m going to explain the use of the software’s I’ve used showcasing my software proficiency. Lastly, I’ll go over the purpose, user experience and ethical considerations.
Changes to my proposal & Purpose
As discussed in my original proposal, I wanted to implement Augmented Reality technology to users through poster visuals based on the topic of football and the Premier League to be specific. I intended to do this through superimposition-based AR that allows filters and overlays to pop up on the users’ screens when the appropriate image anchor is scanned and recognised through the user’s smartphone.
The minor change to my original idea is the purpose of my project, rather than creating in person posters I’ve decided to implement a fact file website page for each twenty premier league clubs that provides football fans in-time stats for each club’s season so far through a simple scan of a QR code. I’m still going to use the poster concept however it will be in a way where a digital poster appears with the appropriate stats and animation revolving each club. This project idea demonstrates the advanced technology of QR codes providing users to gain information more efficiently and quicker which can be seen taken advantage of by other brands and industries worldwide.
Website creation
As discussed before, I decided to take a digital approach for this project, so I’ve created tweaking Premier League’s brand identity slightly. As I want my feature to work from a website, I’ve analaysed Premier League’s current website landing page as I’m essentially rebranding an existing brand to generate this AR project. Using my web design knowledge from ‘Year 2’ I’ve built this simple webpage keeping some brand identity elements the same such as the darker shade purple but changing font to a bold italic type as I feel like it looks cleaner and classier visually than the current existing font used by official Premier League.
Image anchors
Before creating any posters or assets I’ve had to design image anchors for each Premier League club that would feature on the webpage in Adobe XD. As I’m going to be using Adobe Aero to bring my animated posters to life, it requires an ‘Image anchor’ for each poster on my project as it sets the primary image that is required to be recognised by your smartphone device to activate the animation.
As it’s quite self-explanatory I decided to use the club’s logo’s as image anchors for each poster, this is where I focus on user experience side of things as I’m implementing series of team’s logo’s with each having a QR code by it’s side meaning users can pick and choose which team they want to check up on, the QR codes are linked to each club’s logo near it meaning once scanned it will ask the user to locate the logo linked to that specific team as an animated poster with stats appears all linked to that one specific team.
I decided to bring back a retro style to the logo image anchors that I thought would work well with webpages brand identity as the official premier league had major brand identity changes throughout the years. Therefore, I’ve decided to implement a retro style of logo representations in a modernised approach with the webpage brand identity to give lifelong football fans a sense of nostalgia as many passionate fans have stated on social media how they preferred older premier league branding identity to the current one.
Here is an example of an image anchor that I’ve created in photoshop which is a mix between the retro style and the modern premier league brand identity. As the logo is presented in a box with some rotation and closeup bringing back the retro nostalgic mood alongside the dark purple border showcasing current premier league identity with the logo having no effects unlike the retro one having a glowing glass layer effect. Essentially, I’ve only used the retro composition for my logo image anchor designs.
Software Proficiency
Throughout the project I’ve used a variety of software including Photoshop, After Effects, Adobe Aero and Adobe XD. I’ve applied my existing knowledge and skills I already had in these software’s as well as watching a variety of YouTube tutorials to bring my ideas to life in the project.
Poster designs – Photoshop
After my image anchors where all ready, I started designing posters in photoshop for each team that I was going to apply the AR feature to in this project. I decided to only create around six examples of working AR feature as you don’t need to see how the feature works for all 20 clubs. I indicated this by adding template QR codes in low opacity meaning these teams don’t have an animation just yet. However, each team will have their own unique animation to reveal the stats which you will be able to see for the six different premier league clubs I’ve implemented the AR feature for.
I’ve used the same poster template format that I have designed for each different team, with the player being presented on the right and statistic boxes represented by the colour of the team that I would export separately as they will be revealed from the left side in the final AR poster made in Adobe Aero. I decided to use a dark background for all the posters as it makes the team’s colours stand out better with the majority of premier league teams’ primary colours being quite bright. For each poster I added a spin blur effect on the club’s name in the background and the bottom half of the player. This was done to provide a clear user experience making it easier for the users to focus on the stats by blurring the background beneath the stat boxes.
Conceptual Animation – After Effects
A big chunk of this project revolves around animation, I’ve spent a lot of time learning and creating various animated assets in Adobe After Effects that I would implement into Adobe Aero. For each team’s poster I’d come up with a conceptual animation relating to the club’s logo details or nicknames which makes more sense when you see the animation in person. I took this inspiration from a retro premier league intro that presents all club’s team logo’s through conceptual animation. Again, aiming to bring nostalgic and fun to use interactivity to my target audience.
Here is the thinking and the process behind the conceptual animation assets for the six posters that I would use as examples to showcase this project.
Nottingham Forest AR poster animation
For this poster I’ve used After Effects to create falling leaves animation as the team has a forest illustration in their logo as well as being named ‘forest’.
Brentford AR poster animation
In this poster I’ve incorporated an animation of bee’s flying moving across the poster due to Brentford being known as the ‘Bee’s’. I’ve created this animation by separating the two wings from the bee’s body and importing the three parts separately which allowed me to add motion to the wings in After Effects.
Bournemouth AR poster animation
For this poster I would apply effective conceptual animation in the club’s logo which includes a football. The football in the logo instantly gave me an idea of making the football spin once the poster is activated. I’ve achieved this by illustrating the exact same football in illustrator and then importing it into After Effects where I’d apply the spinning effect through rotation, however I wanted to make the ball slow down as it spins in which I’ve had to create three separate layers and apply different rotation speeds for each then export it all as one.
In addition, I added illustrations of cherries that I’ve created and imported into Adobe Aero and applied it through behavior builder in Adobe Aero making them pop out from the side of the football due to the team being known as the cherries.
Manchester City AR poster
For this poster I’ve taken the idea of the ship and the blue in the logo and created the ship sail along the water as the animation is activated. I wanted to include the exact same ship that is used in the logo therefore I’ve used the quick selection tool in photoshop to separate the ship from the logo and imbedded it separately into the water layer that I have created in After Effects.
Manchester United AR poster animation
For this poster I focused on creating an animation revolving flames as the team is known as the red devils, however I’ve had some issues imbedding realistic fire animation used for the info boxes and instead it had to be imported as a still image however I’ve still managed to create a flame animation that rises up however it doesn’t seem as realistic as I wanted it to be.
Wolves
In this poster I wanted to apply a glow effect on the wolves eyes as I think it works great with the yellow colour that represents the team. I’ve kept this animation simple as the wolf in the logo pops out and it’s eyes glow up which I’ve achieved through glow effects in After Effects.
AR interactivity – Adobe Aero
After successfully bringing my ideas to life from photoshop and After Effects into Adobe Aero it was time to add interactivity to all the assets in Adobe Aero through simple features such as behavior builder which always me to set triggers to my assets adding motion. I’ve used this feature to reveal the team’s stats by adding a move trigger to the stats boxes as they reveal from the left side. You can set how far the assets move through X,Y,Z offset.
I also used behavior builder to activate the animation I’ve brought in from After Effects, I’ve exported After Effects animation as an animated GIF. As I bring the animated GIF into Aero, I need to trigger it through ‘Play images’ trigger in which I can set duration time and other features to my After Effects animated GIF. For example, I can choose whether I want my animation to play repeatedly once activated which is done by clicking the infinite box.
I’ve ensured that the image anchor which is the logo’s of the teams is hidden under the poster and it’s assets so that when the poster is activated the image anchor is not visible for the users, as it is only used as an anchor to scan and activate the main digital poster.
Finally, once I’m ready to make my AR poster accessible through the webpage created in Adobe XD I would simply click share as Adobe Aero provides you with a designated QR code to this specific poster which I would simply download and import onto my webpage next to the team logo it belongs to as they are the image anchors.
Ethical considerations
Harmful content
When developing this project, it was important that I ensured to include content that would not offend any users, especially in this project ensuring there is no content that disrespects a certain team therefore it was important that I considered unoffensive animation for each team, so it does not upset any supporters.
References
Nottingham Forest AR poster
Leaves – PurePNG | Free transparent CC0 PNG Image Library. (2018). PurePNG. [online] Available at: https://purepng.com/photo/13380/nature-green-leaves [Accessed 18 Dec. 2024].
Logo – Football Logos. (2022). Nottingham Forest FC Logo – Football Logos. [online] Available at: http://www.logofootball.net/english-premier-league-football-club-logos/nottingham-forest-fc-logo/ [Accessed 18 Dec. 2024].
Player – X (formerly Twitter). (2024). x.com. [online] Available at: https://x.com/NFFC/status/1862855350375858610/photo/1 [Accessed 18 Dec. 2024].
Brentford AR poster
Bees – Vecteezy. (n.d.). Honey bee isolated on transparent background. AI. [online] Available at: https://www.vecteezy.com/png/24516680-honey-bee-isolated-on-transparent-background-ai.
Logo – Harvatt, J. (2021). Download Brentford FC vector logo (.EPS + .SVG + .CDR) – Brandlogos.net. [online] Brandlogos.net. Available at: https://brandlogos.net/brentford-fc-logo-vector-93621.html [Accessed 24 Dec. 2024].
Player – X (formerly Twitter). (2024). Available at: https://x.com/BrentfordFC/status/1850235192616833243/photo/1 [Accessed 24 Dec. 2024].
Man Utd AR poster
Player – X (formerly Twitter). (2024). x.com. [online] Available at: https://x.com/ManUtd/status/1868431090844876946/photo/1 [Accessed 24 Dec. 2024].
Badge – Wikipedia Contributors (2019). Manchester United F.C. [online] Wikipedia. Available at: https://en.wikipedia.org/wiki/Manchester_United_F.C.. [Accessed 4 Jan. 2025].
Wolves AR poster
Player – X (formerly Twitter). (2024). x.com. [online] Available at: https://x.com/Wolves/status/1872387872357277757/photo/1 [Accessed 28 Dec. 2024].
Badge – EN LOGO -. (2019). Wolverhampton FC Logo – PNG and Vector – Logo Download. [online] Available at: https://en.logodownload.org/wolverhampton-fc-logo/ [Accessed 4 Jan. 2025].
Bournemouth AR poster
Player – X.com. (2024). Blocked Page. [online] Available at: https://x.com/afcbournemouth/status/1862877565687304609/photo/1 [Accessed 30 Dec. 2024].
Badge – –. (2019). AFC Bournemouth Logo – PNG e Vetor – Download de Logo. [online] Available at: https://logodownload.org/afc-bournemouth-logo/ [Accessed 4 Jan. 2025].
Man City AR poster
Player – Admin (2023). Erling Braut Håland. [online] FootyRenders. Available at: https://www.footyrenders.com/premier-league/manchester-city/erling-braut-haland-108/ [Accessed 4 Jan. 2025].
Badge – Wikipedia Contributors (2019). Manchester City F.C. [online] Wikipedia. Available at: https://en.wikipedia.org/wiki/Manchester_City_F.C.. [Accessed 4 Jan. 2025].