coingamers
DESIGN SYSTEM & STYLE GUIDE
As my first webflow project in the agency for a client, I had to familiarize myself with the project’s style guide and structure in Webflow. The ciient was in need of a website refresh and wanted to add a more modern and sleek look and feel. Based off of a colleague’s design, I recreated the changes in Webflow and added custom animations to make the user experience feel smooth, natural and satisfying.
WEBSITE STRUCTURE
In order to keep everything consistent and avoid unexpected UX behavior, the webflow document has to be neatly structured and elements named appropriately using tags, classes and combo classes. This also ensures a smoother process when adding custom animations to whole sections or individual elements.
CUSTOM ANIMATIONS
I was very excited to play around with the “3D” elements in the design and see how I could make them come to life in the live site.. Considering the nature of the business, I was given the creative freedom to experiment. Using only Webflow’s native functionalities and animation options, I was able to create delighter effects throughout the page that added emphasis to the information and made the user experience more immersive and engaging.
