Design de Site de Carreiras

Uma Página de Carreiras Contada em Oito Cenas

Esta reconstrução de carreiras da Kimi não é uma página longa cujas seções simplesmente passam pelo viewport. Ela sobrepõe oito cenas em um único palco visual e usa o progresso da rolagem para alterar a opacidade, posição, escala e desfoque de cada uma. O efeito é mais próximo de mover entre quadros de uma apresentação do que ler uma página convencional de listagem de vagas.

Essa distinção explica tanto o apelo visual quanto as limitações do design como site de carreiras. A sequência pode estabelecer uma atmosfera marcante, mas informações práticas devem permanecer disponíveis fora das transições. Um visitante que deseja o processo de candidatura tem uma tarefa diferente de alguém que explora a história da marca.

Como a Posição de Rolagem Se Torna uma Transição de Cena

A fonte mapeia o deslocamento de rolagem da página em posições de 0 a 7, uma para cada uma das oito cenas. Uma cena torna-se a atual quando está mais próxima dessa posição. Cenas adjacentes podem permanecer parcialmente visíveis durante a transição; é por isso que uma captura de tela tirada entre paradas pode parecer suave ou duplicada.

Quatro Paradas Numeradas em um Caminho de Candidatura Orbital

A cena de candidatura traduz uma sequência em uma rota lunar. A parada 1, marcada com um computador e Enviar, aparece próxima ao centro inferior; a parada 2 fica à sua esquerda, e as paradas 3 e 4 continuam pela parte superior da órbita. Os números indicam a ordem de leitura porque a geometria não é uma linha do tempo familiar da esquerda para a direita.

01

O Caminho Conecta, mas os Números Ordenam

Uma linha orbital explica que as quatro paradas pertencem ao mesmo conjunto. Por si só, ela não indica onde começar nem qual direção seguir. Os emblemas de números supergrandes fornecem essa ordem ausente. A mesma distinção é importante em um fluxo de integração sinuoso ou em um diagrama de processo ilustrado.

02

A Ilustração Não É a Instrução Completa

A cena nomeia um processo de candidatura, mas a reconstrução fornecida o renderiza como uma imagem. Uma página funcional ainda precisaria dos nomes reais das etapas, requisitos e destinos como texto. Esses detalhes devem permanecer legíveis quando o diagrama se empilhar verticalmente em um celular.

Onde uma Reconstrução Visual Precisa de HTML Real

A OpenDesign criou isso como um exemplo oficial de hackathon e estudo visual, não como um projeto Moonshot encomendado. A distinção é visível na implementação: as cenas 2 a 8 são imagens de referência fornecidas, e essas imagens são marcadas como aria-hidden. Alterar qual cena é a atual não torna os rótulos dentro de uma imagem acessíveis como texto.

1. Mantenha os Títulos Fora da Imagem de Fundo

   Em uma versão funcional, o título e a explicação de uma cena devem permanecer como texto selecionável. Um fundo pode conter a cabine, as estrelas ou a lua; ele não deve ser o único local de uma instrução de candidatura.

2. Separe o Movimento do Acesso à Informação

   Forneça um layout estabilizado e legível quando o movimento for reduzido, e uma rota direta ao processo. Esta é uma melhoria proposta, não uma funcionalidade verificada na reconstrução fornecida. Um visitante não deve precisar dominar a animação de rolagem para encontrar o próximo passo.

O Que Este Design de Site de Carreiras Demonstra

Este caso demonstra composição de cenas e movimento vinculado à rolagem, não vagas atuais ou um backend de candidatura funcional. Sua arte de referência deliberadamente pixelada não é arte vetorial, e a exportação em resolução nativa não remove essa limitação estilística. Use-o para estudar a narrativa e a mecânica de transição; use os canais oficiais do empregador para informações reais de contratação.