Hello MacWell

After Effects & Lottie

Lately I’ve been exploring possibilities of animation within web and mobile environment. Here you can see a few small experiments I’ve done in After Effects and Lottie. I realised that possibilities are endless and exciting. Temporal behaviour of interface, microinteractions, UI guides and hints, animated illustrations, onboarding intros – you name it.

The last example is my remake of Telegram messenger onboarding animation.
It's interactive, try to swipe right and left with a mouse or a finger.

iiot-weeliiot-weel

See SVG version →

transfertransfer

See CSS version →

zoomzoom

See SVG version →

lock_300x300lock_300x300

Interactive version →

Verge

Logo animation for touch screen UI for Verge electric motorcycle.
Animated in After Effects and Lottie.

Voima Gold App

Animations for Voima Gold App . 
Animated in After Effects and Lottie. 

vaakuna-600x600vaakuna-600x600
idcard-600x600idcard-600x600
holvi-600x600holvi-600x600

UI motion
sketching

Some years ago I was designing an Android application for diabetics. An idea came from my friend who is a developer and diabetic himself. It was a fun project to work on. I studied Android UI principles and worked on apps' look and feel. Suddenly this project was never released due to strict and complicated regulations within the medical industry.

But here you can see the UI motion sketch I created from static layouts. It was done literally on the fly – it took only about an hour.

UI motion
sketching

Some years ago I was designing an Android application for diabetics. An idea came from my friend who is a developer and diabetic himself. It was a fun project to work on. I studied Android UI principles and worked on apps' look and feel. Suddenly this project was never released due to strict and complicated regulations within the medical industry.

But here you can see the UI motion sketch I created from static layouts. It was done literally on the fly – it took only about an hour.

Motion Design Reel

See my UI Design works
[unex_ce_button id="content_sznm2yv28" button_text_color="#ffffff" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#000000" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="http://andreifadeev.com/visual-design/" button_link_type="url" button_link_target="_self" has_container="1" in_column=""]See my UI Design works[/ce_button]
See my Portfolio
[unex_ce_button id="content_ug5vac3xb" button_text_color="#ffffff" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#000000" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="http://andreifadeev.com/works/" button_link_type="url" button_link_target="_self" has_container="1" in_column=""]See my Portfolio[/ce_button]