Fable: Framer Website Development

🥱 TLDR;

Together with

Dylan

⤷ 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

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

✧ Working with Dylan on other pages: I needed extra pair of dev eyes, so Dylan helped a lot to create complex pages like

/learn

✧ 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

// DrawerSlideIn.tsx

import type { ComponentType } from "react"

export function slideIn(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                animate={{ x: [-500, 0, 0] }}
                transition={{ ease: "easeInOut", duration: 1 }}
            />
        )
    }
}

✱ Creating the /learn page(s): The

/learn

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

project file and a

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

and book instantly ⚡