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!

Thank you for dropping by!

SHAKED GOZLAN © 2026

ALL RIGHTS RESERVED