Loading something special...

Diona Nicole Design Studio

Web Design, Webflow Development, CMS Architecture, GSAP Animation

The Goal:

A fully custom Webflow portfolio site for Philadelphia-based designer and creative director Diona Nicole — built to showcase her multidisciplinary practice and give her complete autonomy over her content.

2024
Web Design, Webflow Development, CMS Architecture, GSAP Animation

The Outcome

A fully custom, CMS-driven portfolio that reflects Diona's design practice at the highest level — with a hand-coded GSAP motion system, a flexible content architecture, and an interactive tag structure that scales as her work grows.

Challenge & Goal

Diona needed a portfolio site that matched the caliber of her work — something that showcased her multidisciplinary design practice across brand identity, UX, product design, and experiential work, while giving her full autonomy to update projects, services, and content without needing a developer. The site had to feel premium, modern, and distinctly hers.

No items found.

Design Direction

A pink and green color palette became the foundation — feminine but sophisticated, avoiding cliché. The bento grid layout gives the work breathing room and creates visual rhythm across the page. Typography and spacing do the heavy lifting, keeping the focus on her work.

No items found.

GSAP Animation

One of the first major explorations into GSAP on a MAVE project. Custom scroll-triggered animations were hand-coded using Slater, connected directly to the Webflow site via custom code in the backend. This approach was built before Webflow's native interactions fully supported this level of complexity, making every animation a deliberate, hand-crafted element — not a template. The animations extend throughout the entire site and are integrated with the CMS and layout system.

No items found.

CMS & Content Architecture

Built a deep CMS system that lets Diona manage her entire project portfolio independently. She can add case studies, update project details, and control how her work is presented without touching code. A tag-based taxonomy system powers both the services and blog sections, with each type using its own template style — making filtering intuitive and the browsing experience seamless.

No items found.
A storyboard depicting the user journey with a dental health app. It starts with a person waking up, followed by motivation to brush teeth, using an app that tracks and encourages good dental hygiene. The storyboard illustrates various app features such as progress tracking, rewards, and a smart mirror that analyzes brushing technique.

1

2

3

4

Get in Touch

If you're impressed with my work, then let's make something special together

“The Website looks official and it’s Always evolving. I love it.”

-Vince Wimberly Jr.
Owner of Life Advance Fitness

Send me an emailFill out intake form