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.

OpenDesign HackathonConception & production
Exemple
Conception de site web de CV4 sections
CV de Tom Goodman : CV complet avec profil, expérience, réalisations sélectionnées, fondation, communauté et aperçu du candidat
CV complet et aperçu du candidat

Idées de conception pour

  • Sites web de CV pour designersRegroupez l'expérience et les travaux sélectionnés sur une page lisible.
  • Pages de profil professionnelAppuyez une courte introduction avec des preuves concrètes.
  • CV web et imprimésTenez compte à la fois de la lecture en navigateur et de l'impression papier.

Points forts du CV

  • Deux chemins de lecture parallèlesL'expérience est présentée à côté d'un aperçu compact du candidat.
  • Cinq sections numérotéesLe profil, l'expérience, les réalisations, la fondation et la communauté forment la colonne principale.
  • Un point d'entrée impressionLa page originale inclut un contrôle Imprimer / PDF.

Deux chemins de lecture dans un seul site web de CV

Le site web de CV de Tom Goodman traite un profil professionnel comme deux documents liés : un compte rendu conventionnel du travail à gauche et un tableau de bord du candidat à droite. Cinq sections numérotées organisent la colonne principale. La barre latérale sombre utilise des barres, des compteurs et un graphique d'allocation du travail plutôt que davantage de texte sur l'emploi.

Le contraste change la façon dont le CV peut être parcouru. Les noms de postes et les dates fournissent la chronologie ; la barre latérale fournit un aperçu rapide à caractère quantitatif. La question utile n'est pas de savoir si un tableau de bord paraît plus impressionnant qu'un CV. C'est de savoir si chaque affichage communique quelque chose que le texte adjacent ne dit pas.

Comment le CV divise son contenu
DomaineCe qu'il contientComment l'adapter
Profil et expérienceUne introduction suivie de postes avec des dates et des lieux.Gardez le poste, l'organisation et la période faciles à comparer avant de développer la description.
Réalisations sélectionnéesCatégories Prototype, Artefact en direct, Présentation et Motion.Liez une catégorie de réalisation à un véritable exemple de travail plutôt que de vous fier à la catégorie seule.
Aperçu du candidatCompteurs d'impact, barres de compétences et graphique de profil opérationnel.Utilisez cette zone pour des preuves pouvant être expliquées brièvement et retracées jusqu'à une source.

Ce que communiquent réellement cinq barres de compétences

Le panneau de compétences contient cinq barres étiquetées, avec des scores allant de 88 à 96. Les étiquettes se trouvent à gauche, les valeurs à droite, et les barres remplies s'étendent en dessous. Le vert vif relie chaque valeur à son remplissage, tandis que la grille sombre fournit un arrière-plan commun.

Les cinq barres de compétences à une échelle lisible, isolées de la barre latérale du candidat d'origine. Ouvrez l'image pour la pleine résolution.
Les cinq barres de compétences à une échelle lisible, isolées de la barre latérale du candidat d'origine. Ouvrez l'image pour la pleine résolution.

Les valeurs se regroupent sur huit points

La Conception de produit est à 96, les Systèmes de design à 94, le Prototypage rapide à 93, le Mouvement et narration à 88 et l'Orchestration d'agents à 91. Sur une barre de 100 points, même la plus courte est presque pleine. Le résultat visuel met l'accent sur l'étendue et des évaluations constamment élevées ; il ne montre guère de différence significative entre les compétences.

L'ordre et la longueur racontent des histoires différentes

Les barres ne sont pas triées par score : l'Orchestration d'agents à 91 suit le Mouvement et narration à 88. L'ordre est donc une liste de compétences, pas un classement. Si un lecteur a besoin de comparer les points forts, choisissez un ordre explicite et expliquez ce que les valeurs mesurent.

Une grille de réalisations à quatre cellules sous l'expérience

Les réalisations sélectionnées condensent quatre catégories d'artefacts dans une grille deux par deux avec bordure. Chaque cellule utilise une courte catégorie en gras suivie d'une description plus petite. Il s'agit d'un index compact de livrables, et non d'une galerie de projets individuels : aucune des quatre étiquettes n'identifie un cas commandé particulier.

Réalisations sélectionnées : quatre cellules séparent la catégorie d'artefact de son explication. Il s'agit d'une capture directe de détail HTML.
Réalisations sélectionnées : quatre cellules séparent la catégorie d'artefact de son explication. Il s'agit d'une capture directe de détail HTML.
Différents types d'informations dans les quatre cellules
CelluleCe que la description nommeCe qu'un vrai exemple de travail ajouterait
PrototypeInterfaces web responsives, de bureau et mobiles.La tâche spécifique, l'écran et la contribution personnelle.
Artefact en directTableaux de bord, murs de KPI et salles de décision.Quelle décision l'interface soutient et un lien pour l'inspecter.
PrésentationLivraison en HTML, PDF et PPTX modifiable.Le sujet de la présentation et le format réellement disponible.
MotionHyperFrames et sortie MP4 déterministe.Un exemple lisible et la partie de la production que vous avez gérée.

Lire le CV à l'écran et sur papier

Cet exemple officiel de hackathon OpenDesign inclut un traitement d'impression distinct plutôt qu'un simple bouton Imprimer. La source convertit plusieurs dimensions en millimètres, réduit le portrait à 27 × 32 mm, masque les contrôles d'action et supprime les poignées de sélection. Ces changements montrent que la vue d'impression est destinée à être une composition séparée.

Le mobile change l'ordre de lecture

En dessous de 880 px, le CV devient une colonne principale unique et le panneau du candidat intègre le flux du document. À des largeurs plus petites, la barre latérale se réduit également à une seule colonne. Le récit professionnel précède donc l'aperçu quantitatif, au lieu de comprimer les deux dans des bandes parallèles étroites.

Un bouton Imprimer n'est que le début

Le contrôle d'origine appelle l'impression du navigateur. Un espacement spécifique à l'impression peut aider, mais une longue description de poste peut tout de même déplacer un titre ou une grille au-delà d'une limite de page. Testez avec votre vrai texte et le format de papier choisi ; ne supposez pas que l'exemple fictif prouve que le CV terminé tient sur une page.

Ce qu'il faut vérifier avant d'utiliser cette mise en page de CV

Tom Goodman est un profil fictif, et les détails d'emploi, les compteurs communautaires et les évaluations de compétences sont des contenus exemples. La page démontre une mise en page de CV et un point d'entrée impression, non des réalisations personnelles vérifiées. Son schéma utile consiste à séparer la chronologie, les livrables et les preuves à l'appui ; la crédibilité d'une version réelle dépend du remplacement des trois par des informations précises.

Comment créer une conception de site web de CV dans OpenDesign

  1. Télécharger et installer OpenDesign

    Téléchargez l'application de bureau, installez-la et finalisez la configuration. Créez un projet pour votre design.

    Télécharger OpenDesign
  2. Fournissez une vraie expérience avant de styliser

    Donnez à OpenDesign vos postes, dates, contributions et liens de travail. Si vous explorez la mise en page avant de fournir ces informations, demandez des espaces réservés explicites plutôt qu'une carrière inventée.

    Invite suggérée

    Créez une conception de site web de CV avec une colonne principale pour le profil, l'expérience, les travaux sélectionnés, les compétences et les contributions communautaires. Ajoutez une barre latérale sombre et compacte pour les coordonnées et les points saillants sourcés. Utilisez un titre de nom fort et des accents verts sobres. Gardez le poste, l'organisation et les dates ensemble. Utilisez des espaces réservés clairement marqués pour les faits manquants ; n'inventez pas d'employeurs, de métriques ou de pourcentages de compétences. Incluez une action d'impression dans le navigateur et des styles adaptés à l'impression.

  3. Liez les postes à des exemples de travail

    Demandez une entrée de travail sélectionné qui explique votre contribution et pointe vers un artefact réel. Lisez la page une fois sans la barre latérale : la colonne principale doit toujours expliquer ce que vous faites et ce que vous avez réalisé.

  4. Vérifiez les écrans étroits et l'aperçu avant impression

    Confirmez que la barre latérale suit l'introduction dans un ordre de lecture logique sur mobile. Ouvrez l'aperçu avant impression et inspectez les sauts de page, le contraste de l'arrière-plan et tous les liens qui deviennent peu clairs sur papier. Ajustez la mise en page avant de considérer la version imprimée comme prête à envoyer.

  5. 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.

OpenDesign Desktop

Un seul design system. Votre marque, cohérente partout

Dans le Vibe Design Workspace complet, appliquez les mêmes règles de marque aux sites, slides, prototypes interactifs, dashboards, images et vidéos HTML. Connectez Codex, Claude Code, Cursor et vos autres agents de code locaux, puis créez gratuitement.

  • Sites, slides, prototypes, dashboards, images et vidéos
  • Plus de 140 design systems et la bibliothèque complète de modèles et skills
  • Codex local et plus de 21 agents de code · Gratuit
Télécharger gratuitement

Disponible sur macOS et Windows