Sitio web
Diseño de sitio web de empleo
Un estudio de empleo de Kimi construido a partir de ocho escenas lunares, con transiciones vinculadas al desplazamiento y un proceso de solicitud ilustrado.
Ideas de diseño para
- Páginas de aterrizaje de empleoPresentar a un empleador antes de explicar cómo postularse.
- Sitios web de campañas de reclutamientoConectar una temática visual con la información de incorporación y solicitud.
- Historias de marca con desplazamientoOrganizar una narrativa extensa en escenas visuales diferenciadas.
Aspectos destacados de la página de empleo
- Ocho escenas con desplazamientoTransición desde una introducción en cabina hasta una secuencia de solicitud.
- Una sola temática visual lunarLunas, trayectorias orbitales y gráficos en píxeles conectan las escenas.
- Un diagrama de solicitud numeradoCuatro paradas numeradas convierten el proceso en una ruta visual.
Vista previa del diseño de sitio web de empleo
1 / 8
Una página de empleo narrada a través de ocho escenas
Esta reconstrucción del sitio de empleo de Kimi no es una página larga cuyos apartados simplemente atraviesan el área visible. Superpone ocho escenas en un mismo escenario visual y utiliza el progreso del desplazamiento para modificar la opacidad, la posición, la escala y el desenfoque de cada una. El efecto se asemeja más a moverse entre fotogramas de una presentación que a leer una página de ofertas de empleo convencional.
Esa distinción explica tanto su atractivo visual como sus limitaciones como diseño de sitio web de empleo. La secuencia puede establecer una atmósfera sólida, pero la información práctica debe permanecer accesible fuera de las transiciones. Un visitante que busca el proceso de solicitud tiene una tarea distinta a la de alguien que explora la historia de la marca.
| Parte de la secuencia | Lo que aparece | Información que debe preservarse |
|---|---|---|
| Introducción y escenas lunares | La identidad de la organización y un escenario de exploración lunar. | Permitir identificar la página como reclutamiento incluso antes de desplazarse. |
| Incorporación y construcción | Invitaciones a unirse y a Crea tu propio puesto. | Explicar el siguiente paso disponible con palabras, no solo mediante una metáfora visual. |
| Solicitud y cierre | Un diagrama de proceso con cuatro paradas y una invitación final. | Mantener accesibles las instrucciones de solicitud y un destino real cuando la historia termina. |
Cómo la posición de desplazamiento se convierte en transición de escena
La fuente mapea el recorrido desplazable de la página en posiciones de 0 a 7, una por cada una de las ocho escenas. Una escena se convierte en la actual cuando es la más cercana a esa posición. Las escenas vecinas pueden permanecer parcialmente visibles durante el traspaso; por eso una captura de pantalla tomada entre paradas puede verse difuminada o doble.
| Posición de desplazamiento | Lo que hace la fuente | Lo que ve el lector |
|---|---|---|
| Exactamente en una escena | Su opacidad alcanza 1 y el desenfoque basado en distancia llega a 0. | Un fotograma estable, apto para lectura o captura. |
| A mitad de camino hacia la siguiente escena | Ambas escenas vecinas tienen opacidad 0,5 y aproximadamente 1,3 px de desenfoque. | Una transición mezclada, no una captura nítida de ninguna de las dos secciones. |
| Más allá de la escena | Su opacidad cae a 0; la escena más cercana pasa a ser la actual. | La composición anterior retrocede en lugar de continuar por un documento normal. |
Cuatro paradas numeradas en una trayectoria orbital de solicitud
La escena de solicitud traduce una secuencia en una ruta lunar. La parada 1, marcada con un ordenador y Enviar, aparece cerca del centro inferior; la parada 2 está a su izquierda, y las paradas 3 y 4 continúan por la parte superior de la órbita. Los números definen el orden de lectura porque la geometría no es una línea de tiempo familiar de izquierda a derecha.
La trayectoria conecta, pero los números secuencian
Una línea orbital explica que las cuatro paradas forman un conjunto. Por sí sola no indica por dónde empezar ni en qué dirección avanzar. Los distintivos de número de gran tamaño aportan ese orden faltante. La misma distinción importa en un flujo de incorporación sinuoso o en un diagrama de proceso ilustrado.
La ilustración no es la instrucción completa
La escena nombra un proceso de solicitud, pero la reconstrucción suministrada lo representa como imagen. Una página funcional seguiría necesitando los nombres reales de los pasos, los requisitos y los destinos como texto. Esos detalles deben permanecer legibles cuando el diagrama se apila verticalmente en un teléfono.
Dónde una reconstrucción visual necesita HTML real
OpenDesign elaboró esto como ejemplo oficial del hackathon y estudio visual, no como un proyecto encargado por Moonshot. La distinción es visible en la implementación: las escenas 2–8 son imágenes de referencia suministradas, y esas imágenes están marcadas con aria-hidden. Cambiar cuál es la escena actual no hace que las etiquetas dentro de una imagen sean accesibles como texto.
Mantén los encabezados fuera de la imagen de fondo
En una versión funcional, el título y la explicación de una escena deben permanecer como texto seleccionable. Un fondo puede mostrar la cabina, las estrellas o la luna; no debe ser el único lugar donde figure una instrucción de solicitud.
Separa el movimiento del acceso a la información
Proporciona una disposición estable y legible cuando se reduce el movimiento, así como una ruta directa al proceso. Esto es una mejora propuesta, no una función verificada en la reconstrucción suministrada. Un visitante no debería tener que dominar la animación de desplazamiento para encontrar el siguiente paso.
Lo que demuestra este diseño de sitio web de empleo
Este caso demuestra la composición de escenas y el movimiento vinculado al desplazamiento, no vacantes actuales ni un backend de solicitudes funcional. Las ilustraciones de referencia deliberadamente pixeladas no son arte vectorial, y la exportación en resolución nativa no elimina esa limitación estilística. Úsalo para estudiar la narrativa y la mecánica de transición; acude a los canales oficiales del empleador para obtener información real sobre contratación.
Cómo crear un diseño de sitio web de empleo en OpenDesign
Define la historia y la información práctica
Comienza con la introducción de tu propia organización, las opciones de incorporación y los pasos de solicitud. Especifica qué información está confirmada y cuál sigue siendo un marcador de posición antes de solicitar una temática visual.
Prompt sugeridoCrea un diseño de sitio web de empleo para un estudio de investigación ficticio. Usa una temática de exploración lunar a lo largo de una introducción, opciones de incorporación, historia del equipo, proceso de solicitud e invitación de cierre. Mantén la navegación de reclutamiento literal y legible. Construye los encabezados y el proceso numerado como texto semántico en lugar de una sola imagen. Usa roles de marcador de posición etiquetados y acciones de solicitud de marcador de posición deshabilitadas; no impliques un backend de reclutamiento en vivo. Incluye una disposición legible con movimiento reducido.
Refina primero una transición de escena
Pide a OpenDesign que conecte la introducción y la siguiente escena conservando un estado estático legible. Verifica que la transición no oculte el propósito de reclutamiento ni retrase el acceso a la información de incorporación antes de extender el efecto a toda la página.
Prueba el proceso sin la metáfora visual
Lee los pasos de solicitud como texto plano y comprueba su orden en móvil. Confirma que los enlaces reales tienen destinos reales y que los marcadores de posición están claramente identificados. Solo entonces añade la trayectoria orbital u otro tratamiento decorativo alrededor de la información.
Exportar y obtener un enlace para compartir
Exporta tu diseño terminado y luego usa Compartir en OpenDesign para obtener un enlace. Abre el enlace en una ventana del navegador independiente y comprueba que la versión prevista y sus recursos estén disponibles antes de enviarlo.
Diseño de portafolio creativo
El portafolio ficticio de Maya Rowan conecta proyectos, métodos de trabajo y notas.
Sitio web
Diseño de sitio web de currículum
El currículum ficticio de Tom Goodman combina experiencia con gráficos de capacidades y trabajos seleccionados. Explora su orden de lectura en dos columnas, tarjetas de trabajo compactas y una maquetación de impresión independiente.
Sitio web
Diseño de Panel Personal
Life System coloca una puntuación semanal, métricas de mapa corporal, ritmos diarios y cinco experimentos en un panel de escritorio. Explora el diseño en detalle.
Aplicación de escritorio
Diseño de presentación de producto
Un pitch de espacio de trabajo nativo para agentes en 3 diapositivas.
Diapositivas