Fable: Framer Website Development

Web Designer

Frontend Engineer

Framer Developer

Figma

Framer

Next.js

Fable

🥱 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, I built Fable's website in Framer. The previous version of the live website was built in Next.js and Tailwind CSS tech stack. We had to rebuild all of its pages in Framer.

Homepage of Fable website.

⤷ Live Preview: https://www.fable.app/

❇️ Project Overview

✦ About the client: Fable

Fable is a web-based motion design platform. With their intuitive UI and pro-grade tools, Fable empowers creators and teams to bring their motion workflows to the cloud. Their mission is to empower all creators with access and opportunity to tell stories with motion.

✨ The Spark

✦ What were the client's needs and goals?

Chris Boardman, Co-Founder and CEO of Fable, approached us (me and Dylan) via our studio Moving Rectangles. He wanted to transition 1:1 from the current Next.js, Tailwind CSS and Sanity CMS stack to Framer in search of a simpler CMS which is easier to maintain. He wanted to transfer the whole website (125+ pages).

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 Figma document of Fable's website showing the typography section.

🚀 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, blog detail pages like this and legal pages like Terms of Service.

✧ Working with Dylan on other pages: I needed extra pair of dev eyes, so Dylan helped a lot to create complex pages like /learn, /blog and learn detail pages like this.

✧ 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:

The hamburger menu slide-in-from-left appear animation.

At that time, Framer didn't had effects for components out so I decided to go on a code override route and wrote a custom Framer Motion override that achieves the same result:

// 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, learn category, and learn detail CMS pages were some of the trickiest to make in Framer.

Fable's Learn page.

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:

View post on X

Additionally, I also had an idea to write a 'breakdown' posts on Framer's official Circle community so others have an idea how we work to break down a specific technical challenge:

📸 Project Mockups

Feast your eyes! 😉

The "Create Features" page that lists Fable's collaborative and distinct features.

The "Marketing Teams" page that shows how Fable can help to create content that inspires, engages, and represents the brand.

The "Learn" page where you can learn everything about Fable from its interface to its motion design features.

The "Blog" page that shows a dynamic grid of cards of individual articles.

The "Learn" detail page on a iPhone device.

The "Features" dropdown menu on the homepage on a iPad device.