TNG FinTech Website

Corporate website with 3D WebGL elements.

  • Responsibilities: Creative lead, frontend & backend development
  • Technologies: WebGL, Canvas, SVG, Laravel
  • Timeframe: July 2017 – August 2017

Highlights

  • Multi-language, responsive, IE7-compatible website
  • Animated 3D globe using SVG, Canvas, and WebGL
  • Custom CMS for effective SEO in all languages

For this project I was responsible for project management, creative direction, backend development, and all frontend development. The website was awarded the following:


The TNG FinTech Website is the corporate website for the TNG FinTech Group company, which contains company details, news, press releases, media resources, and contact information. The website is fully responsive, supports five languages, and is compatible with IE7 and Android 4.2.

Screenshot of the website front-page hero section.

The website features a darker colour palette than its sister website – bright and deep purples and blues are used in the background, juxtaposed by the vibrant cyans and whites in the foreground, adding a bold yet colourful contrast to the overall design. This contrast not only compliments the large and heavily-weighted typefaces, but also the simple shapes used for links and buttons – helping ensure the copywriting is legible and easy to read, and that navigation is clear throughout the website, respectively. The use of thin lines and sans-serif fonts adds a professional and corporate tone to overall design.

The front-page features a hero section comprised of an animated 3D globe, created using SVG, Canvas, and WebGL (with three.js)

The globe is introduced with a dramatic explosion of small dots that move into place and form a 3D dot-model of the Earth's basic geography, creating an eye-catching effect for first-time visitors. The introduction animation is randomized each time the page is loaded, making every visit unique.

The globe represents the countries that the company currently has business in. Lines are drawn in-between these countries and dots are randomly generated and animated across the lines, illustrating the movement of money between countries. The globe rotates and transitions between the countries, hiding and showing the respective lines at the same time.

Smooth transitions are achieved by using translateZ to invoke hardware-accelerated transitions and will-change for ahead-of-time browser optimizations.

The use of simple CSS-based shapes to decorate the background and foreground keeps the website lightweight and fast-loading, with most pages being delivered in under a few hundred kilobytes. The use of simple elements also enables the website to be highly accessible and cross-browser compatible, with fall-backs provided where necessary (such as the 3D globe on the front-page).

Screenshot of a press release detail page.

The website also features a custom-built CMS, providing the ability to publish customised new stories and press releases in multiple languages, which in turn enables them to be highly optimised for search-engines for each respective language. MailChimp integration was also included for both the subscription mailing list and Contact Us page form.