Site web
Design de site carrières
Huit scènes lunaires pour le site carrières Kimi : transitions au défilement et candidature illustrée.
Idées de conception pour
- Pages d'accueil carrièresPrésenter un employeur avant d'expliquer comment postuler.
- Sites de campagnes de recrutementAssocier un thème visuel aux informations d'adhésion et de candidature.
- Récits de marque défilantsOrganiser un long récit en scènes visuelles distinctes.
Points forts de la page carrières
- Huit scènes défilantesPasser d'une introduction en cockpit à une séquence de candidature.
- Un thème visuel lunaire uniqueLunes, trajectoires orbitales et graphismes pixelisés relient les scènes entre elles.
- Un diagramme de candidature numérotéQuatre étapes numérotées transforment le processus en un itinéraire visuel.
Aperçu de la conception de site carrières
1 / 8
Une page carrières racontée en huit scènes
Cette reconstitution de la page carrières de Kimi n'est pas une longue page dont les sections traversent simplement la fenêtre d'affichage. Elle superpose huit scènes sur une même scène visuelle et utilise la progression du défilement pour modifier leur opacité, leur position, leur échelle et leur flou. L'effet se rapproche davantage du passage entre les diapositives d'une présentation que de la lecture d'une page d'offres d'emploi classique.
Cette distinction explique à la fois son attrait visuel et ses limites en tant que conception de site carrières. La séquence peut créer une atmosphère forte, mais les informations pratiques doivent rester accessibles en dehors des transitions. Un visiteur qui recherche le processus de candidature a une tâche différente de celui qui explore l'histoire de la marque.
| Partie de la séquence | Ce qui apparaît | Informations à conserver |
|---|---|---|
| Introduction et scènes lunaires | L'identité de l'organisation et un cadre d'exploration lunaire. | Permettre d'identifier la page comme une page de recrutement, même avant de faire défiler. |
| Adhésion et construction | Invitations à rejoindre et à Créer son propre poste. | Expliquer la prochaine étape disponible en mots, et pas seulement par une métaphore visuelle. |
| Candidature et clôture | Un diagramme de processus en quatre étapes et une invitation finale. | Maintenir les instructions de candidature et une destination réelle accessibles lorsque le récit se termine. |
Comment la position de défilement devient une transition de scène
La source fait correspondre le défilement de la page à des positions allant de 0 à 7, une pour chacune des huit scènes. Une scène devient la scène courante lorsqu'elle est la plus proche de cette position. Les scènes voisines peuvent rester partiellement visibles lors du passage ; c'est pourquoi une capture d'écran prise entre deux étapes peut paraître floue ou dédoublée.
| Position de défilement | Ce que fait la source | Ce que voit le lecteur |
|---|---|---|
| Exactement sur une scène | Son opacité atteint 1 et le flou basé sur la distance atteint 0. | Une image stable, adaptée à la lecture ou à la capture. |
| À mi-chemin vers la scène suivante | Les deux scènes voisines ont une opacité de 0,5 et un flou d'environ 1,3px. | Une transition fondue, et non une capture nette de l'une ou l'autre section. |
| Au-delà de la scène | Son opacité tombe à 0 ; une scène plus proche devient courante. | La composition précédente s'efface au lieu de continuer vers le bas d'un document normal. |
Quatre étapes numérotées sur un parcours de candidature orbital
La scène de candidature traduit une séquence en itinéraire lunaire. L'étape 1, marquée d'un ordinateur et de Soumettre, apparaît vers le bas au centre ; l'étape 2 se trouve à sa gauche, et les étapes 3 et 4 se poursuivent dans la partie supérieure de l'orbite. Les numéros portent l'ordre de lecture car la géométrie n'est pas un axe temporel classique de gauche à droite.
Le chemin relie, mais les numéros séquencent
Une ligne orbitale indique que les quatre étapes font partie d'un même ensemble. Elle ne précise pas en soi par où commencer ni dans quel sens avancer. Les badges de numéros surdimensionnés fournissent cet ordre manquant. La même distinction importe dans un flux d'intégration sinueux ou un diagramme de processus illustré.
L'illustration ne constitue pas l'instruction complète
La scène nomme un processus de candidature, mais la reconstitution fournie le restitue sous forme d'image. Une page fonctionnelle aurait tout de même besoin des noms d'étapes réels, des exigences et des destinations sous forme de texte. Ces détails doivent rester lisibles lorsque le diagramme s'empile verticalement sur un téléphone.
Là où une reconstitution visuelle nécessite du HTML réel
OpenDesign a réalisé ceci en tant qu'exemple officiel de hackathon et étude visuelle, et non en tant que projet Moonshot commandé. Cette distinction est visible dans l'implémentation : les scènes 2 à 8 sont des images de référence fournies, et ces images sont marquées aria-hidden. Changer la scène courante ne rend pas les intitulés contenus dans une image accessibles en tant que texte.
Conserver les titres en dehors de l'image d'arrière-plan
Dans une version fonctionnelle, le titre et l'explication d'une scène doivent rester du texte sélectionnable. Un arrière-plan peut représenter le cockpit, les étoiles ou la lune ; il ne doit pas être le seul emplacement d'une instruction de candidature.
Séparer le mouvement de l'accès à l'information
Fournir une mise en page stable et lisible lorsque le mouvement est réduit, ainsi qu'un accès direct au processus. Il s'agit d'une amélioration proposée, et non d'une fonctionnalité vérifiée dans la reconstitution fournie. Un visiteur ne devrait pas avoir à maîtriser l'animation de défilement pour trouver la prochaine étape.
Ce que démontre cette conception de site carrières
Ce cas illustre la composition de scènes et le mouvement lié au défilement, et non des postes vacants actuels ou un backend de candidature fonctionnel. Son illustration de référence délibérément pixelisée n'est pas une illustration vectorielle, et l'export en résolution native ne supprime pas cette limite stylistique. Utilisez-la pour étudier la mécanique narrative et les transitions ; utilisez les canaux officiels de l'employeur pour les informations de recrutement réelles.
Comment créer une conception de site carrières dans OpenDesign
Définir le récit et les informations pratiques
Commencez par l'introduction de votre propre organisation, les options d'adhésion et les étapes de candidature. Précisez quelles informations sont confirmées et lesquelles restent des espaces réservés avant de demander un thème visuel.
Invite suggéréeCréer une conception de site carrières pour un studio de recherche fictif. Utiliser un thème d'exploration lunaire pour une introduction, des options d'adhésion, l'histoire de l'équipe, un processus de candidature et une invitation de clôture. Conserver la navigation de recrutement au sens littéral et lisible. Construire les titres et le processus numéroté sous forme de texte sémantique plutôt que d'une image unique. Utiliser des rôles espaces réservés étiquetés et des actions de candidature espaces réservés désactivées ; ne pas laisser supposer l'existence d'un backend de recrutement en direct. Inclure une mise en page lisible avec mouvement réduit.
Affiner d'abord une seule transition de scène
Demander à OpenDesign de relier l'introduction et la scène suivante tout en conservant un état statique lisible. Vérifier que la transition ne masque pas l'objet de recrutement ni ne retarde l'accès aux informations d'adhésion avant d'étendre l'effet à l'ensemble de la page.
Tester le processus sans la métaphore visuelle
Lire les étapes de candidature en texte brut et vérifier leur ordre sur mobile. Confirmer que les liens réels ont des destinations réelles et que les espaces réservés sont clairement identifiés. Ce n'est qu'ensuite qu'il faut ajouter la trajectoire orbitale ou tout autre traitement décoratif autour de l'information.
Exporter et obtenir un lien de partage
Exportez votre design finalisé, puis utilisez Partager dans OpenDesign pour obtenir un lien de partage. Ouvrez le lien dans une fenêtre de navigateur distincte et vérifiez que la version souhaitée ainsi que ses ressources sont disponibles avant de l'envoyer.
Design de site portfolio créatif
Le portfolio fictif de Maya Rowan articule cartes de projets, pratique et notes.
Site web
Conception de site web de CV
Le CV fictif de Tom Goodman associe expérience, graphiques de compétences et réalisations : deux colonnes, fiches compactes et mise en page d’impression distincte.
Site web
Conception de tableau de bord personnel
Life System réunit un score hebdomadaire, une carte du corps avec ses indicateurs, les rythmes quotidiens et cinq expériences dans un tableau de bord.
Application de bureau
Design de présentation produit
Un outil pour agents en 3 slides.
Diapositives