POSIVITUS
Webflow Landing Page Development
Overview :
To practice and enhance my Webflow development skills, I selected a UX/UI design from the Figma Community and transformed it into a live website.
The project required precise attention to the original design's intent, including recreating low-resolution illustrations into scalable vectors and developing custom Lottie animations.
My Role :
As the Webflow Developer and Vector Illustrator, I was responsible for building the website in Webflow, recreating illustrations in Adobe Illustrator, developing Lottie animations in Jitter, and implementing custom CSS for enhanced styling and functionality. I ensured the final product was responsive and faithfully adhered to the original design.
Design Process & Tools
Tools and Methodologies for Efficient Development
For the Posivitus landing page, I started by using my skills in Figma to analyse the selected design, identifying patterns of sizing, spacing, and alignment. This detailed analysis ensured that the final implementation in Webflow would closely match the original design. I then transformed low-resolution illustrations into crisp, scalable vector graphics using Adobe Illustrator. In Webflow, I rebuilt the design, incorporating custom CSS to style the native slider and ensure responsiveness. Additionally, I developed Lottie animations in Jitter to enhance interactivity, such as a responsive animation for the hamburger menu. This approach ensured a cohesive and engaging user experience.
challenges faced
The primary challenges included creating and integrating custom Lottie animations and applying custom CSS to style the native Webflow slider for a smooth and interactive user experience.
Reflection
Outcomes & Results :
The result was a fully functional webpage that closely adhered to the original Figma design, providing valuable practice in translating design files into launchable web development.
Key Learnings :
Working from someone else’s Figma file sharpened my skills in accurately replicating design intentions and reinforced best practices in responsive web development.