Briefing
Every year, I update my portfolio reel and website with a new visual identity that reflects the techniques I've been exploring and what visually appeals to me at the time—essentially representing where I am as an artist. Last year, I delved into procedural node-based design using TouchDesigner, and my visuals showcased that journey. This year, I've taken a web-focused approach with lightweight animations (Lotties) and a flat, minimalist design featuring a three-color palette. As a multidisciplinary artist and designer, I wanted to highlight the range of my work by creating categories or tags for the types of content I'm involved in: vector, 3D, product, social, and web. To represent these categories, I designed animated icons that not only symbolize each area but also adhere to LottieFiles' limitations. This self-imposed constraint served as both a challenge and an exercise in applying the new techniques I've been learning.
Breakdown
In the breakdown that follows, I'll dive deeper into the meaning behind each element and explain my approach to animating them. I've kept the design simple and flat to ensure the animated icons take center stage, keeping the site clean and not overwhelming. Orange serves as an accent color and focal point, blacks are used for content text, and blue provides a calming backdrop for the oranges. The sharp-edged little squares scattered throughout the identity reinforce the 2D aesthetic. By working within Lottie's limitations, I've created ultra-lightweight animations optimized for web and mobile platforms. This project not only showcases my experience but also represents an identity aimed to be used on my portfolio website.
For the animation representing "3D", I wanted to emulate key aspects of 3D production software in this 2D vector piece. I used a cube as the central element because it's the iconic default geometry in programs like Blender. I also included the object axis indicator to help land the reference. Lastly, I added particles colliding with the cube to hint at my experience with 3D physics simulations in software like Houdini and Cinema 4D.
Keyframes Linear Cube
Keyframes Cube Time Remap + other elements
Easing Graphs Cube Time Remap + other elements
As for "Product" the main theme here is the whole pipeline of creating realistic product renders. It is illustrated by the transformation of a blocky pixelated bottle shape element into a more refine and curved, with reflection, shading hints and a label. This transformation happens gradually, piece by piece, simulating the Bucket Rendering stage that's typical in realistic rendering processes.
Keyframes Linear Bottle
Keyframes Bottle Time Remap + other elements
Easing Graphs Bottle Time Remap + other elements
The "Web" animation is pretty straightforward—it represents a banner on a browser. It highlights my experience in creating content optimized for websites and mobile apps, using Lottie animations or HTML ad banners. I chose a diamond because it symbolizes value, much like how animations add value to a website. Plus, it's a fun, symmetrical shape that lets me fake three-dimensionality using just lines.
Keyframes Diamond Linear
Keyframes Diamond Time Remap + other elements
Easing Graphs Diamond Time Remap + other elements
The social animation shows the continuous scroll of an app timeline, hinting at my experience in creating animated content for social media. The constant liking with the heart symbol illustrates how animated content boosts engagement over static posts. Lastly, for the vector work—similar to the "3D" or "Product" piece—it's a nod to the software used to create such art; I recreated the manipulation of iconic Bézier handles.
