Voltar ao portfólio
Projeto autoral

Education Platform — plataforma de cursos em vídeo

A tela de uma aula em vídeo, com o conteúdo em destaque, o chat da turma ao lado e uma paleta que parte do pêssego.

Papel
Product Designer
Escopo
Interface de plataforma
Foco
Aula em vídeo com chat
Tipografia
Inter
Tela de aula da Education Platform, com o vídeo em destaque, o chat da turma e dois cards coloridos, sobre fundo pêssego

Conceito

Uma sala de aula em vídeo, com a conversa ao lado

A Education Platform é um projeto autoral de interface para uma plataforma de cursos em vídeo. A proposta foi desenhar a tela de uma aula: o vídeo em destaque, a conversa dos alunos sempre à vista e, abaixo, o contexto da aula e outros conteúdos. Os textos, nomes e conversas exibidos nas telas são fictícios, criados apenas para o design.

Solução

Três decisões que organizam a tela da aula

Vídeo em destaque

O player ocupa a maior parte da tela, com controles de pausa, próxima aula, volume, tempo, configurações e transmissão. Logo abaixo, uma faixa de miniaturas mostra os momentos da aula.

Chat da turma

Um painel ao lado do vídeo reúne os comentários dos alunos, cada um com foto e nome, e um campo para escrever uma mensagem, sem sair da aula.

Contexto da aula

Abaixo do vídeo ficam o título, a descrição, os botões de compartilhar e favoritar e um curso relacionado, com um chamado para assistir.

Elementos da interface

Menu lateral com ícones Player com miniaturas Chat da turma Compartilhar e favoritar Curso relacionado Cards de chamada

A interface

A tela completa da aula

À esquerda, o menu lateral com quatro ícones. No topo, o botão de voltar, o título da aula e o atalho para a próxima; no canto, ajuda, notificações e o perfil. Ao centro, o vídeo e, à direita, o chat.

Tela completa da Education Platform, com menu lateral, vídeo da aula, chat da turma, descrição, curso relacionado e dois cards coloridos

A tela de aula, sem moldura

Detalhes

De perto

O player com sua faixa de miniaturas e a parte inferior da tela, com a descrição, o curso relacionado e os dois cards de chamada.

Detalhe do player de vídeo da Education Platform, com os controles e a faixa de miniaturas
Player com controles e faixa de miniaturas
Detalhe da descrição da aula, do curso relacionado e dos dois cards de chamada da Education Platform
Descrição da aula, curso relacionado e cards de chamada

Sistema de Design

Tipografia e paleta

A base visual da plataforma: a fonte Inter e uma paleta de oito cores. Magenta, rosa, pêssego e laranja dão o tom quente, e verde-água, azul-petróleo, azul-marinho e azul claro equilibram e destacam os cards.

Lâmina com a fonte Inter e a paleta de oito cores da Education Platform, acima da tela da aula

Tipografia e paleta de cores