Riley Skipper

Case study

Dreamvision

An interactive Figma prototype for visual storytelling and user flow testing.

The challenge

Static presentations did not show how an interactive experience would feel to users.

What I delivered

An interactive Figma prototype that demonstrates layout, flow, and interaction before development begins.

Project Overview

Dreamvision is a design project that explores visual storytelling and interactive design. It is a personal project created after FigmaCon 2024 to practice new design tools and interaction patterns.

Click to view the full Figma design file with all screens, components, and interactions.

Interactive Prototype

Experience Dreamvision

Explore the interactive Figma prototype to see the creative design experience in action:

View Figma Prototype

Design Philosophy

Dreamvision was based on the idea that digital experiences should be clear and engaging. The project explores how design can support user understanding through:

  • Visual Storytelling: Narrative-driven design that guides users through each screen
  • Interactive Elements: Engaging micro-interactions that enhance user engagement
  • Emotional Design: Creating experiences that resonate on an emotional level
  • Innovative Layouts: Breaking traditional design patterns with personalized mid century iconography

Technical Implementation

The Dreamvision platform was designed using UX/UI methodologies:

  • Figma Free Version: Design systema with interactive prototyping
  • Information Architecture: Intuitive content organization and navigation
  • Interactive Prototyping: Prototyping with conditional logic
  • Design System: A design system was created to ensure consistency across the prototype
  • AI Integration: Utilizing AI plugins to enhance the design process for faster layout creation, from information gathered from FigmaCon 2024.

Logo design featuring gradient effects and clean, modern typography for the Dreamvision brand.

Custom-designed icon set with consistent styling and visual language for the Dreamvision interface.

Abstract illustrations and visual elements that bring personality and energy to the Dreamvision experience.

Complete typography system with font pairings, sizing scale, and text hierarchy for consistent design.

Future Possibilities

This project serves as a foundation for exploring new frontiers in Figma.

  • AI Integration: Utizing curerent Figma features and plugins top enhance the product on the development side.
  • Figma Dev Mode: Experiencing the power of Figma Dev Mode to enhance the prototyping power and create stronger libraries and components.