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.
Rejoindre la communauté
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.
Aperçu de la conception de site web de CV
1 / 4
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.
| Domaine | Ce qu'il contient | Comment l'adapter |
|---|---|---|
| Profil et expérience | Une 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ées | Caté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 candidat | Compteurs 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 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.

| Cellule | Ce que la description nomme | Ce qu'un vrai exemple de travail ajouterait |
|---|---|---|
| Prototype | Interfaces web responsives, de bureau et mobiles. | La tâche spécifique, l'écran et la contribution personnelle. |
| Artefact en direct | Tableaux de bord, murs de KPI et salles de décision. | Quelle décision l'interface soutient et un lien pour l'inspecter. |
| Présentation | Livraison en HTML, PDF et PPTX modifiable. | Le sujet de la présentation et le format réellement disponible. |
| Motion | HyperFrames 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
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éeCré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.
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é.
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.
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.



