Community Experience For Automotive Enthusiasts
Design and motion of interactive experiences of the automotive industry. A project born from my interest and my dad’s mastery.
Formula 1 – Vehicle Details
This is a driver profile on the second tab to explore the vehicle in details. On CTA tap, the layout content moves out of the way and the vehicle is scaled up to take over the full screen. Feature highlights are indicated by circles all around the vehicle.
3D Vehicle browsing
Pretty simple yet interesting 3D motion exploration of browsing through vehicles. A construction of 3 compositions, one for each of the vehicles, and its content animating in shortly after each transition. Enabled as 3D layers in After Effects and then animated in their Y-axis along with position movement to achieve the result of a cube rotating.
User Profile Transition – Layering and Process
A motion walkthrough and composition structure demonstrated in 3D layers. I shared my process on organizing, easing techniques, and on layering techniques.
User Profile Transition
A transition of going into a user profile view as an owner of the vehicle. I have always loved how elements transform into its next form and this one is really making its justice. On tap of the owner card, the avatar grows and fills up the entire screen with imagery and information transitioned in.
Vehicle Profile – iPhone X Top Bar Transformation
A detail page of a vehicle and demonstration of how to create a contained top bar by transforming already existing elements. This transition is made out of two yellow shapes, one for the CTA moving up and scaling and one that takes over at the moment it locks into place at the top. To maintain the CTA’s purpose, the favorite label makes a subtle fade movement to the right and fades into a favorite icon from the same left direction…
Challenging navigational elements in new ways
A collection of screen compositions including user profiles, destination detail pages, browsing pages, conversation lists and more. All challenging our current standard of top bar interactions for going backward. Instead, navigational elements are introduced in the very bottom floating above the content…
Content Sections Scrolling
This flow is from a user scrolling through vehicles in one of the content sections. After the flip, it continues with transitions between each of the sections. Presented in a 3D animated composition.
Section Browsing Transitions – Tablet/Desktop
Motion flow of browsing sections of content. All the content to explore is scrollable starting to the left. Tab switching is slightly tilting the current content to the next, all with a smooth but efficient fade. Tapping brings you to a detail view…
Fullscreen Section Browsing
Motion demonstration a flow of browsing through content sections with directional swiping as navigation. Vertical swiping for items in the current category. Horizontal swiping for navigating through different categories…
An iteration of browsing destinations, now translated to the desktop experience. Simply swipe up and down through featured destinations which is paginated vertically. Each title is flipped and switched out and the background is subtly transitioning between each other…
Featured Destinations Collection
A collection of featured destination compositions presented with another exploration. Easing and dimensionality are two really good ingredients for delightful animations…
Destination Detail browsing
Here’s a motion iteration of browsing destinations on mobile. Added subtle drop shadow on the cards to improve its z-position representation. Here you see how you tap into a detail page of a destination and start scrolling for more information…
Featured Vehicles Browsing
Featured vehicles being browsed followed by a list view. Revealing it all with the red Audi RS4 Coupe peeking from the edge. Another different presentation playing with dimensionality and different elements to make it stand out from ordinary…