Santander – Corporate Banking – Java Animations
Santander – Corporate Banking – Java Animations
Santander – Corporate Banking – Java Animations
Santander – Corporate Banking – Java Animations
Conceptualised, designed and animated 23 Java animations for Santander’s Corporate & Commercial banking Connect native app and Connect web system
About This Project
Although this was not a project itself, without these animations the Santander Corporate Connect Payment Authorisation project was monotonous, with just the simple heading, text, figures and CTAs. That project was in dire need of some vibrancy and self-explanatory static graphics or animations.
I chose Animations. Why?
Animated graphics have the ability to bring life into any digital product!
Following are the 2 examples of the same scenario, for you to decide the most logical and clear-to-understand method.
Scenario: Just imagine a secure (web or app) page, which is going to expire due to its idle inactivity.
Option 1: This approach would display a line of advisory text with an ambiguous and hidden countdown timer.
Option 2: In this method, a micro-interactive animation would draw the customer’s full attention, with the knowledge of the remaining time to act.
I hope you have agreed with me by choosing option 2; this is due to the fact that animations are easily noticeable and pleasing to the eye.
PS. These screens are just the examples and not the actual ones from the Corporate Connect Payment Authorisation app
Option 1
Option 2
I chose Animations. Why?
Animated graphics have the ability to bring life into any digital product!
Following are the 2 examples of the same scenario, for you to decide the most logical and clear-to-understand method.
Scenario: Just imagine a secure (web or app) page, which is going to expire due to its idle inactivity.
Option 1: This approach would display a line of advisory text with an ambiguous and hidden countdown timer.
Option 2: In this method, a micro-interactive animation would draw the customer’s full attention, with the knowledge of the remaining time to act.
I hope you have agreed with me by choosing option 2; this is due to the fact that animations are easily noticeable and pleasing to the eye.
PS. These screens are just the examples and not the actual ones from the Corporate Connect Payment Authorisation app
TABLET Option 1
TABLET Option 2
I chose Animations. Why?
Animated graphics have the ability to bring life into any digital product!
Following are the 2 examples of the same scenario, for you to decide the most logical and clear-to-understand method.
Scenario: Just imagine a secure (web or app) page, which is going to expire due to its idle inactivity.
Option 1: This approach would display a line of advisory text with an ambiguous and hidden countdown timer.
Option 2: In this method, a micro-interactive animation would draw the customer’s full attention, with the knowledge of the remaining time to act.
I hope you have agreed with me by choosing option 2; this is due to the fact that animations are easily noticeable and pleasing to the eye.
PS. These screens are just the examples and not the actual ones from the Corporate Connect Payment Authorisation app
Option 1
Option 2
What is Java Animation and why do I use it?
This is a vector-based animation type, which uses the JavaScript Object Notation (JSON) programming language. JSON is the lightweight format for storing and transporting data from the server to a web page or can be compiled into a native app.
In the past, I used to create and deliver the commonly used animation format “GIF”. The average file size of an animated GIF file could vary between 400kb to 5MB depending on the number of colours, length and dimensions. Previously, the devices and their screen resolutions were limited, and you could get away just by creating one dimension of the animation file. But as we have entered into the technological era, the devices have modernised their capabilities. These days a designer has to design products that are compatible with all the modern devices resolutions i.e., Retina, 4K, 8K etc. Due to the bitmap nature of a GIF file, and the modernisation of the devices; the GIF file format has been rendered useless. As soon as you start to stretch a GIF file, it starts to look like an embarrassment and a failure to the project. Hence, I needed a future proof solution.
Vector-based Java animation files are minuscule in comparison to a GIF file, as unlimited colours can be used (16.7 million to be precise) without affecting the file size.
It’s a multi-platform file, which can be used on iOS, Android, web and React Native without modification. Due to the fact that its vector, Java animation file are resolution independent and scalable, as well as the transformations, can be applied on run-time.
Tools Used
