Synora
CLIENT
Studential Project
DESIGN FIELD
UI, UX (Web Design)
YEAR
2026
Proof of Concept
The Brief
An interactive desktop environment inspired by the visionary process of legendary film composer Hans Zimmer. Known for pioneering the fusion of traditional orchestration with electronic synthesis, Zimmer revolutionized modern cinema by composing scores prior to filming - allowing his music to dictate the pacing and narrative rhythm of a scene. This conceptual interface translates that audio-first philosophy into a dynamic digital experience, where sound shapes the visual landscape.


Market Analysis
Deep Research
As part of the AI revolution, there are many AI models and platforms. Most of them look the same - they have the same layout, achromatic with a color accent, and they all just create either videos, images, sounds, but most of them doesn't connect between them naturally.
The idea of Synora is not to just let you generate a video and a sound, they are connected together, the sound ai takes into consideration the video aswell in order to create a matching ambiance.
Information Architecture
Deep Research
Designed to feel instantly familiar, this flow uses standard AI patterns to ensure a seamless and intuitive journey.
Wireframes
Thinking
The whole design system was built on a dynamic and evoloving square grid, designed to bring clarity, and to feel more intuitive as it takes as inspiration the layout of movies and tv streaming sites.

Home page
A dynamic grid cells of user-generated environments that spans the hero section, providing an immediate visual demonstration of the platform's versatility.
Explore page
A randomized gallery of featured works. Each cell opens a deep-dive into the creative workflow, detailing the specific prompts, models, and parameters used.

Create page
A gridcell canvas with AI prompt bar, designed to bring focus while creating a world with each step while the pages evolve according to the step.
Visuals - Sound - Finish
Design System
Logo & Symbol
Typography
Recia
Plus Jakarta Sans
WHAT IS THE REASON BEHIND THE DECISION?
As a starting point, this platform is a fusion between music and film, artificial and handmade.
I chose Recia, a serif font, less technological, and more cinematic.
On the other hand - Plus Jakarta Sans, a geometric font, technological, sans-serif, to give the opposite which is structure, cleanliness and artificial.
World Overlays
Headline I
Recia
Bold
24pt
Nickname
Plus Jakarta Sans
Regular
18pt
Labels
Recia
Regular
13pt
Content
Body
Plus Jakarta Sans
Regular
16pt
Body II
Plus Jakarta Sans
Regular
14pt
Micro Body
Plus Jakarta Sans
Regular
13pt
Iconography
Thinking
Buttons
Light Mode
AI Model
Default
AI Model
Hover
AI Model
CTA
AI Model
Selected
AI Model
Disabled
Gridcell Buttons
Default
Apply
Ghost
Apply
CTA
Apply
Buttons
Dark Mode
AI Model
Default
AI Model
Hover
AI Model
CTA
AI Model
Selected
AI Model
Disabled
Gridcell Icons
Default
Apply
Ghost
Apply
CTA
Apply
Buttons
Colors
WHY THESE COLORS?
While working on the wireframe at early stages, the palette was black and white, it felt technical, heartless, so I decided to add a 3rd color, I thought about color psychology and how colors affect the product. I searched for a warm color (handmade, live orchestra) - Orange, a cold color (artifical, electornic music) - Blue. The result of combining them is the Peach color.
Proof of Concept
Using Claude Code, I created a proof of concept of the platform, designed to give it a feeling of an actual living site.
The process
Asked Gemini to explain the steps of creating a non-local website using Claude Code.
after explaining it, I started with this steps:
Set up an external server
Opened up a Digital Ocean droplet to store the external server
Install node.js, Claude Code and authenticate it
To run Claude Code on the server, I first had to install Node.js
Connect Figma to Claude using MCP
Integrated Claude via MCP to build by the designs.
Start Coding
Opened up a DigitalOcean droplet to store the external server
The Workflow
While working, I found ways to improve my workflow using Gemini, tips and tricks from videos and posts from Reddit, some of the things I created:
Session Memory
Creating a Claude and memory files to follow the work and being able to restore data from previous sessions
Design Style
Create a style guide so Claude will not work on design by itself, but by choices I already took for it beforehand
Code Validation
Using OpenAI 'Codex' model to review the code and make sure there are no bugs/problems with the code
API Connections
To make the prototype feel like a live, functional product, I integrated several real-world APIs.
Claude Haiku 4.5
Handles the search and sorting, and fills in the blanks with realistic data to make the site feel like a real product
Google Lyria 3
Listens to video generation and prompt to intelligently prompt and generate a smart and custom audio soundtrack
Kling AI
In charge of the text-to-video features
*Before you enter
The prototype takes about a minute to initialize its core components. Once loaded, the entire site is fully interactive
*The create process uses real life API's as mentioned above, so if you want
to play with the World Creator and create a website, You are more then welcome!

