SafeSpaceEra Therapy Website Design

Overview: SafeSpaceEra is a self-initiated Framer website concept for mental-health professionals.

Many therapy website templates rely on polished but clinical layouts. I wanted to explore a warmer alternative, one that could help a visitor feel understood before they even begin reading. The result is an animated, editorial-style website that uses illustration and motion to make difficult first steps feel more approachable.

My role: Framer design, web design, interaction design Tools: Framer, Claude Project type: Template concept for therapy practices The creative direction

The experience is built around one idea: therapy can feel intimidating before a person ever books a session.

I used hand-drawn illustrations, soft editorial typography, and purposeful interactions to give the website a more personal tone. Each section moves the visitor through a small emotional journey, from uncertainty and overwhelm to clarity and action.

The first hero concept was a familiar headline-and-illustration layout. It communicated the message, but it lacked personality.

I explored more than 10 illustration styles before landing on a hand-sketched direction. It felt imperfect, human, and closer to the emotional tone I wanted for the site.

The final interaction reveals the characters’ hidden thoughts and feelings on hover. Rather than treating animation as decoration, the movement introduces vulnerability and gives the opening section a reason to pause.

A standard Framer component would have limited the interaction to a single character. I needed individual controls for multiple characters, so I used Claude to help create a custom-coded approach.

The first version captured most of the animation logic, but the image placement needed refinement. I created separate assets with consistent dimensions, then added individual scale and position controls to place each state accurately.

The next section uses a tangled-web animation that gradually untangles as the visitor scrolls.

It’s a simple visual metaphor for the role therapy can play: making a complicated feeling easier to understand, one step at a time. I used Claude during this stage to explore and refine the interaction, then shaped it into the final Framer experience.

The “How It Works” section uses a scroll-triggered timeline that reveals each step progressively.

The goal was to make the process of starting therapy feel clear and manageable. Instead of presenting a dense block of information, the timeline gives visitors a calm, guided path from the first step through to booking.

Typography Playfair Display brings warmth and editorial character to headlines, while DM Sans keeps the supporting content clear and easy to read.

Colour A parchment-toned hero creates a soft opening, with white sections providing breathing room. Rose is reserved for calls to action, interactive elements, and visual highlights.

Illustration The hand-drawn visual style was chosen to feel human, imperfect, and expressive. It supports the emotional subject matter without making the experience feel overly clinical.

Every animation supports the content:

Hover states reveal emotion.

Scroll interactions turn confusion into clarity.

The timeline breaks a complex process into manageable steps.

I also designed the interactions to work across desktop and mobile. For this kind of website, motion needs to remain useful and accessible on every screen size.