Pular para o conteúdo

JHONATAN OLIVEIRA®

PORTFOLIO / 2026

FRONTEND / PRODUTO / DESIGN

Engenharia, direção e ofício digital em um único sistema contínuo.

ISSUE / 01

Arquivo de projetos

02 / Case study

Landing Page / 2026

RA Play - site

Site da RA Play: plataforma de streaming.

RA Play - site
J / O — Landing Page

Índice do case

01 — 04

Disciplina
Landing Page
Ano
2026
Status
Concluído
Registros visuais
04

Tecnologias

Next.jsTypeScriptTailwindCSSshadcn/ui

RA Play — Plataforma de streaming com identidade visual própria

O site da RA Play foi desenvolvido como a materialização de um projeto que já vinha sendo construído desde a base: a identidade visual e o UI Design da plataforma, criados anteriormente no Figma.

Mais do que “codar uma interface”, o desafio foi transformar um conceito visual sólido em um produto funcional, mantendo consistência estética, fluidez de navegação e sensação de plataforma real de streaming.

Contexto do projeto

Antes do desenvolvimento do site, a RA Play já contava com:

  • Identidade visual definida

  • Sistema de cores, tipografia e componentes

  • UI Design completo pensado para uma experiência de streaming

O projeto de desenvolvimento partiu desse material, com o objetivo de respeitar fielmente o design e, ao mesmo tempo, adaptá-lo às necessidades reais da web.

O desafio

Plataformas de streaming exigem mais do que uma interface bonita. Elas precisam:

  • Organizar grande volume de conteúdo visual

  • Criar hierarquia clara entre destaques, categorias e títulos

  • Oferecer uma navegação fluida, intuitiva e familiar ao usuário

  • Transmitir sensação de produto robusto e profissional

O desafio foi equilibrar impacto visual, usabilidade e desempenho, sem descaracterizar o design original.

A abordagem

O desenvolvimento do site focou em:

  • Fidelidade ao UI Design criado no Figma

  • Componentização clara das seções e layouts

  • Hierarquia visual bem definida para conteúdos em destaque

  • Experiência inspirada em plataformas de streaming consolidadas, sem perder identidade própria

Cada decisão técnica foi guiada pela pergunta: isso mantém a experiência pensada no design?

Decisões de UX e UI

  • Destaque visual forte para capas e conteúdos principais

  • Uso consistente da identidade visual criada anteriormente

  • Layouts pensados para escaneabilidade e descoberta de conteúdo

  • Navegação simples, reduzindo fricção e ruído visual

O foco foi criar uma experiência que parecesse familiar ao usuário, mas ao mesmo tempo única dentro da proposta da RA Play.

Resultado

O projeto entrega:

  • Uma plataforma visualmente consistente do conceito ao código

  • Experiência fluida e alinhada ao universo de streaming

  • Um site que demonstra domínio de design e desenvolvimento em conjunto

  • Uma base sólida para evolução futura da plataforma

Este projeto evidencia a importância de pensar produto de ponta a ponta, onde identidade visual, UI Design e desenvolvimento não são etapas isoladas, mas partes de um mesmo processo.

04 / Evidências visuais

04 ITEMS

O trabalho, em contexto.

Telas, motion e artefatos de apoio que mostram como o sistema se comporta para além de uma capa estática.

Projetos selecionados / arquivo

END / CASE

Um case é só um capítulo.

Volte ao arquivo para conhecer outras interfaces, produtos e experimentos construídos com a mesma atenção a produto, direção visual e engenharia frontend.

Ver todos os projetos