This document was created to help local users learn Framer by addressing the difficulties arising from a lack of Korean resources. It translates content from the official blog into Korean and adds valuable practical information. We hope it will be of some assistance to those using Framer.

Why is storytelling important for websites?

A good website goes beyond just 'looking pretty.' The power that draws visitors into the story within the website and keeps them engaged lies in storytelling. In web design, storytelling is the crucial element that transforms an ordinary experience into an immersive journey.

Framer is optimized for creating these storytelling websites. In this article, we’ll explore seven real-world examples made with Framer, illustrating how design and storytelling can work synergistically to transform a simple scroll into a narrative journey.

1. Height

The Height website captures attention right from the start with a unique approach. It unfolds the product building process as a 'time-traveling perspective to the future,' invoking empathy and interest from users through this metaphor.

The design is clean and simple, and a single line smoothly guides users through each section. Subtle animations enhance immersion, while clear and thoughtful text keeps users engaged from start to finish.

2. NOLO

NOLO’s website presents the process of easily saving money in a small town as a 'fun, game-like experience.' Visitors feel they are being invited into a story, rather than being given a simple explanation.

The bright and lively design reflects the app's energy, and as you scroll, each section flows like turning slides. The app’s goals, problems being addressed, and creative solutions unfold in sequence, completing a natural story. Clear writing and seamlessly connected animations make you want to read to the end.

Visit the site

3. Unifiers of Japan

The Unifiers of Japan website captivates visitors with compelling visuals and engaging animations from the first screen. This site is not just a space to honor Oda Nobunaga but a space that tells the 'historic journey into the life of a legendary figure who initiated Japan’s unification.'

Bold graphics and smooth transitions combine to vividly convey the story. Each visual and interactive element is designed not just as decoration but to allow deep immersion in the story, elevating user engagement with history through naturally unfolding storytelling.

Visit the site

4. Melnūdens Coffee

The Melnūdens Coffee website tells a story, not simply introducing a specialty coffee brand but detailing the 'journey of a bean to a cup of coffee.' It covers everything from the brand's start, sourcing high-quality beans, and through roasting and blending to create the perfect taste.

Slim design and delicate animations vivify the narrative, guiding users through the coffee-making stages as they browse the page. This process helps the brand connect emotionally with users beyond just a product introduction, thanks to immersive storytelling.

Visit the site

5. Cancel Culture

The Cancel Culture website explores what might happen if we were to 'cancel parts of Abraham Lincoln’s life’ from a modern perspective. It highlights the controversial aspects during Lincoln’s presidency, prompting thoughts on how historical figures are judged by today’s standards.

Visually striking colors and substantial animations effectively deliver the story. Particularly, an interactive map of the U.S. containing locations named 'Lincoln' offers an overwhelming experience. When users press the “Cancel Lincoln” button, city names gradually disappear, providing an indirect experience of erasing his legacy. Such interactions are more than visual effects, serving as devices that lead to profound reflection within the story.

Visit the site

6. Mars Rejects

Mars Rejects is a site centered around 10,000 unique NFT characters, unfolding like a graphic novel. It sets a world where Earth is destroyed, and only a few influential figures escape to Mars, creating the narrative of those left behind known as ‘Mars Rejects.’

Graphics and animations crafted in a comic style vividly portray the story. Each section of the site reveals different facets of the story, with visuals and narrative seamlessly integrated to enhance immersion.

Visit the site

7. Punkt

The Punkt website greets visitors with a design that feels like sketching on paper. This evokes the concept of a ‘UX writer at work,’ creating a sense of familiarity within the space.

The graphic of text being blended in a mixer intuitively shows constant revision and chaos. As users hover, letters mix, creatively visualizing daily problems in design. The phrase 'chaos everywhere' and wobbling lines clearly depict the challenges faced by UX writers. This site goes beyond functional explanations, forming emotional connections with users.

Visit the site

How to Create Effective Storytelling Websites

Creating a storytelling website requires a harmonious fusion of design, content, and functionality. Here’s a step-by-step approach to crafting effective storytelling websites with Framer.

Step 1: Visualizing the Story

Utilize Framer’s freeform canvas to unfold your story in the desired way. With unrestricted layouts, you can visually express your unique narrative.

Step 2: Choosing the Right Fonts

Typography is a vital tool for conveying mood and emotion. Choose fonts that match the tone of your story using Framer’s built-in and custom fonts.

Step 3: Connecting Pages and Sections

It's important to design for a seamless flow as visitors navigate the site. Use Framer's navigation tools to organically connect each section and page.

Step 4: Adding Interaction Elements

Interactions can make a story even more engaging. Use Framer’s start animations and scroll effects to highlight key elements, adding vibrancy across the site.

Step 5: Refining Text with AI

Storytelling is as important as visual elements. Utilizing Framer’s AI rewrite feature can make your text clearer and smoother, helping to harmonize design and content.

Turn Your Website into a Journey

Storytelling is not just a trend but a powerful tool that deeply connects with people. Integrating storytelling within web design transforms a website from a simple information space into an immersive journey for visitors.

What story would you like to tell through your website?

This article is a translated and adapted content from Framer's official blog post, ‘7 professional storytelling websites: UX Narrative case studies.’