Medilife is a multipage Webflow website with a custom CMS page for mediation classes, Webflow forms, popups, and e-commerce functionality for selling a handbook. It also has a modern design and animations.

The design process began in Figma by following the Relume style guide. I ensured the visual elements, layout, and user experience aligned perfectly with the brand identity and goals. Key aspects of the design included a modern, calm design with smooth animations, intuitive navigation, and responsive design to ensure optimal performance across all devices. I designed a total 5 individual pages including the Home page, Classes Page, Instructor Page, Handbook Page, individual post page, and popup

Once the designs were finalized in Figma, the next step was to bring them to life in Webflow. Webflow's robust capabilities allowed us to implement dynamic and interactive elements seamlessly. The transition from static designs to a fully functional website was executed precisely, ensuring that every detail from the Figma designs was accurately translated into the final product. I followed the Relume style guide and customized it to fit my design. I also implement smooth and calm animations that fit the website's personality.

This is a concept website, but my design was focused on the website's calm personality for choosing the color, fonts, and shadows. The site features a clean and calm interface, enhanced user experience, and dynamic content presentation. It effectively communicates Medilife's brand values and services, positioning them as an expert in their industry.

Hero Section of the website.

Website's Feature Section

Cta section

Testimonial Section

Location and Footer Section

Classes Page Hero

Classes Page Post Archive Section

Instructor Section in Classes Page

Instructor Page Hero

Our Instructor section

Handbook Page

Product Overview