Vaibhav Khulbe
🥱 TLDR;
❇️ Project Overview
✦ About the client: Fable
✨ The Spark
✦ What were the client's needs and goals?
🚀 The Process
🤔 Challenges Faced
💬 Community Feed
📸 Project Mockups
📊 The Stats
✦ Timeline: ~2.5 months
✦ Budget: $5,000+
✦ Number of components: 50+
✦ Deliverables: Finished Framer project file and a published link.
💬 Client Testimonial
Impressed? Want me to create a Framer website for you? Check my Framer service details here and book instantly ⚡
🥱 TLDR;
Together with Dylan Framer Next.js Tailwind CSS
⤷ Live Preview: https://www.fable.app/
❇️ Project Overview
✦ About the client: Fable
Fable
✨ The Spark
✦ What were the client's needs and goals?
Chris Boardman Moving Rectangles
For this, we were given a Figma file which had all the assets, design specs, content etc. This helped us to go deep into the overall design choice, theme and layout of the website.
🚀 The Process
I completed the project in the following steps:
✧ Inspecting the live website: this is to know the types of pages, sections, anything custom we need to have beyond what Framer has to offer etc.
✧ Knowing the website UI design: this is where I check and duplicated the provided Figma file to get a feel of the visuals and design system used.
✧ Start creating components and sections: we wanted the webpages we build to be super flexible. So from the start, I made changes to existing components and built new ones (like navigation bar) with variants, variables, and some extra tricks.
✧ Working on specific pages: I worked on /create-features /collaboration-features /marketing-teams /product-teams /pricing /security this Terms of Service
✧ Making all pages responsive: this included creating different variants for specific components and changing the layout so everything is 100% responsive across desktop, tablet and mobile devices.
✧ Adding accessibility features, fixing bugs, using custom code and improving SEO performance: after major things were done and dusted, there were these final things left to do to make sure everything works and no stone is left unturned.
✧ Final checks and delivery: after a final review, we were ready to launch v1 of the website and deliver the project above and beyond before the delivery date.
🤔 Challenges Faced
Over time, I faced some big hurdles to create a specific feature or a specific page. Here are two of them:
✱ Creating a dynamic mobile navigation with code overrides: we wanted to have this slide-in-from-left animation on mobile devices when someone would tap on the hamburger menu:
At that time, Framer didn't had effects for components Framer Motion
✱ Creating the /learn page(s): The /learn learn category learn detail CMS
Due to Framer's advanced CMS features limitations, both Dylan and I worked on these pages, brainstormed for the best possible route so that it's easy for the Fable team to simply add content in CMS and everything works out of the box (without tinkering much) as expected.
Some of the technical difficulties we faced and overcame were:
Have a properly structured CMS collection list with enough fields to add content.
Add collection lists with advanced filters.
Create components like Sidenav, CMS Hero Image, CMS Hero Video etc.
Create dynamic components with special variable exposed to the page. These should also work together with the CMS fields.
Make everything responsive, accessible and easy to modify for later.
💬 Community Feed
I regulary shared some of new features we were working on on socials like Twitter/X:
Additionally, I also had an idea to write a 'breakdown' posts on Framer's official Circle community
📸 Project Mockups
Feast your eyes! 😉
📊 The Stats
✦ Timeline: ~2.5 months
✦ Budget: $5,000+
✦ Number of components: 50+
✦ Deliverables: Finished Framer published link
💬 Client Testimonial
Wonderful to work with Vaibhav. They worked overtime to meet a tight deadline and were communicative throughout the project to get it over the line to a high standard. Looking forward to hopefully working together in the future.
— Chris Boardman
Impressed? Want me to create a Framer website for you? Check my Framer service details here