I developed a concept for a fintech service that provides a unified view of all your bank accounts. The smart dashboard allows users to see all balances, transactions, and insights in one place with a single, secure login.

💡 Project Scope: Framer Development & Web Design ⚙️ Tools: Figma, Framer, LottieFiles 🕘 Timeline: 1 week 🌐 Live Website: bancio.framer.website

Wireframing: Establishing the basic structure and user flow.

Web Design (Figma): Creating the design system, color scheme, and typography.

Animations (LottieFiles): Generating custom animations.

Development (Framer): Building components, optimizing for SEO, and ensuring full responsiveness.

The color palette is based on the 60-30-10 rule, featuring yellow (#FFC300) as the primary color, blue (#0040FF) as the secondary, and light gray (#F7F7F7) as the neutral. For typography, the project relies on just two fonts: Manrope for headings and Sora for all body text.

I designed the responsive layout in Figma before building the site in Framer. For the Features section, I used LottieFiles to create the animated icons.

This is a fully responsive website, designed for desktop, tablet, and mobile. The mobile experience is fully optimized, retaining all media and components from the larger screens without compromise.

Challenge #1: Create short animated icons for the Feature Section. Solution: I created a series of animated icons in LottieFiles and imported them directly into Framer.

Challenge #2: To ensure full mobile responsiveness and SEO optimization. Solution: I followed SEO best practices for improved search rankings and created three versions (desktop, tablet, and mobile) to ensure the website looks and functions perfectly on any device.

The hero section is arguably the most important part of any website. The goal here was to convey a clear message and showcase a dashboard that reveals what analytics are available and how they can benefit the user.

This section clearly demonstrates how a user can connect various services and control them all from a single mobile application.

This is a list of all available features so that a user can understand that basic idea behind it and main advantages.

To create the animated icons for this section, I followed a three-step process. First, I designed the initial vector shapes in Figma. Then, I used the LottieFiles Creator app to animate them. Finally, I imported the completed animations into Framer via its native Lottie component.

This section provides the option to order a physical card, which works seamlessly as a regular bank card for everyday transactions.

A breakdown of all available plans, showing the price and included features.

A list of common questions and answers about the product. This section helps users quickly find information and determine if the product fits their requirements.

🤔 Looking for a Framer developer with Web Design skills? 🚀 Let's connect!