TASZ

Toby

TASZ - Award winning creative promotion website

My Role

Front End Developer

Company

feat.

Website

444.tasz.hu

Date

April 2023

About

TASZ, the Hungarian Civil Liberties Union is a human rights NGO.

They were looking for a creative way to promote their business, which based on protecting the fundamental human rights.

Working with feat., a creative agency, we came up with the idea of creating a website that use cookies policy box element to express the user's acceptance without hesitation, which forshadowing people are accept the government's policy, eventhough it's against their human rights, and TASZ is here to protect them.

Developing

The website is developed with Vue.js, alongs with motion, a Javascript animation library.

The design is planned to mimic the normal article that being shared on Facebook, so user wouldn't notice the difference and click accept on the cookie banner instinctively. Partnering with 444.hu, a Hungarian news website, I copied their article UI design responsively.

Derived from the creative idea that each time the user click accept on the cookies box, the contents of the website will be changed, represent the truth is being morphed by the government the more people accept the policy. Therefore, I came up with a words changing animation that transform from one to another, alongs with fade over effect on each article images.

After clicking accept 3 times, a striking reveal animation is triggered to grab user attention and deliver the message TASZ would want to convey. We settled down on a glitch effect on the whole website, which is proven to be challenged to implement. I had to ask creative team for a glitch sprite image created from After Effect and combine with "mask-image" CSS property to achieve the effect.

Achivements

Although the website is developed under a tight deadline, a bit over 2 days in total, but it has successfully launch and won 2 awards at the Hipnózis 2023, a Hungarian advertising festival. We received a Silver for Innovative Platform Usage and a Bronze for Innovative Platform Usage.

Tech Stacks:

Front End:

> Vue.js

> Scss

> Bootstraps

> motion