Site web
Design de site portfolio créatif
Le portfolio fictif de Maya Rowan articule cartes de projets, pratique et notes.
Idées de design pour
- Portfolios créatifsPrésenter un ensemble de travaux à travers des projets et une pratique.
- Sites de designers indépendantsRelier ce que vous produisez à la façon dont vous abordez un brief.
- Pages de présentation de studioDonner aux collaborateurs potentiels un point de départ concret.
Points forts du portfolio
- Cinq idées de projetsChaque carte associe un nom de projet à une courte description de son objectif.
- Une pratique en trois étapesRecherche, prototypage et systèmes réutilisables expliquent l'approche.
- Notes en regard des travaux finisDes notes de terrain et des questions ouvertes offrent un autre regard sur la pratique.
Aperçu du design de site portfolio créatif
1 / 5
Un portfolio qui explique plus que ses projets
Le portfolio de Maya Rowan fait un choix délibéré : il donne aux noms de projets le poids visuel que beaucoup de portfolios accordent aux captures d'écran. La phrase d'accroche, « I make ideas visible », introduit une grille de cartes de projets typographiques, et non un mur de maquettes d'appareils. La page repose donc sur ses descriptions pour expliquer en quoi consiste réellement le travail.
La même structure éditoriale se répète à trois échelles : des sections numérotées organisent la page, des noms en grand corps distinguent les projets, et de petits libellés identifient les notes de travail. Cela fait du site une référence utile en matière de design de portfolio créatif, même avant de remplacer le persona fictif. L'essentiel réside dans la façon dont ces niveaux fonctionnent ensemble, et non dans le rouge ou le bleu particulier choisi.
| Section | Contenu visible | Question à laquelle elle répond |
|---|---|---|
| Work | Cinq projets nommés avec de courtes descriptions. | Quel type de choses ce designer crée-t-il ? |
| Practice | Find the Signal, Build to Learn et Leave a System. | Comment le designer aborde-t-il un brief incertain ? |
| Notes | Une note de terrain, un journal de prototype et une question ouverte. | À quoi pense le designer entre deux projets ? |
| Contact | Une invitation finale à engager la conversation. | Comment un collaborateur potentiel passerait-il à l'étape suivante ? |
Pourquoi les cartes de projets se lisent comme des affiches
La grille de projets en version bureau est délibérément asymétrique : ses colonnes utilisent un ratio de 1,2:0,8, de sorte que la carte de gauche occupe environ 60 % de la largeur disponible. Chaque carte mesure au moins 420 px de hauteur. Cela laisse la place à un titre à habillage serré en haut et à une phrase explicative séparée en bas.
Une largeur de titre à 8 caractères change le rythme
La source limite les titres de projets à 8ch et utilise une hauteur de ligne de 0,92. « Field Notes for Better Cities » devient un bloc vertical plutôt qu'une seule ligne. La mesure étroite donne au titre son rythme d'affiche ; il ne s'agit pas d'un retour à la ligne accidentel dû à une petite capture d'écran.
La description porte le sens concret
La première carte nomme une carte participative et explique que de petites observations deviennent des signaux civiques. C'est sensiblement plus informatif qu'« une expérience cartographique innovante ». La description se situe 24 px au-dessus du bord inférieur, offrant au lecteur un endroit constant pour trouver l'explication d'une carte à l'autre, quelle que soit leur couleur.
Des travaux sélectionnés à une pratique reproductible
La section Practice inverse l'emphase de la grille de projets. Une grande citation occupe la colonne plus étroite ; trois explications numérotées occupent la plus large. Chaque explication possède son propre filet supérieur et une colonne de numérotation fixe. L'effet est un passage de la navigation parmi des idées individuelles à la lecture d'une séquence d'actions.
Find the Signal nomme les données d'entrée
La première ligne liste explicitement les personnes, les contraintes, le langage et les comportements. À comparer avec Field Notes, dont le sujet est les observations sur les villes : la description du projet nomme le matériau, tandis que la ligne de pratique explique ce que le designer y chercherait. La page suggère cette relation ; elle ne documente pas une étude de recherche achevée.
Build to Learn nomme la raison d'être d'un prototype
La deuxième ligne présente un prototype fonctionnel comme un moyen de répondre à des questions. C'est une affirmation différente de celle qui consiste à produire une interface finale soignée. Elle s'inscrit dans le mélange de projets du portfolio — IA ambiante, systèmes éditoriaux et outils de décision collective — où explorer les comportements fait partie de la question de design.
Leave a System nomme la passation
La dernière ligne nomme des composants, des tokens et de la documentation plutôt que de conclure par « lancement ». Cela rend le livrable proposé plus précis : une autre personne devrait pouvoir poursuivre à partir des décisions prises. Dans un vrai cas d'étude, c'est ici qu'un exemple de composant ou une courte règle d'utilisation viendrait étayer l'affirmation.
Une référence de portfolio pour les projets de hackathon
OpenDesign a créé ce portfolio fictif comme exemple officiel de hackathon. Pour la propre participation d'un concurrent, l'idée la plus réutilisable est la séparation entre l'objectif d'un projet, les décisions qui le sous-tendent et ce qui reste ouvert. Une carte de projet peut introduire une participation tandis qu'un compte lié fournit les preuves réelles.
Là où le concept de portfolio s'arrête
La source bascule la grille de projets et la section Practice en une seule colonne en dessous de 760 px, mais elle masque également les liens de navigation. C'est une limitation spécifique à corriger dans un vrai portfolio : conserver un menu de sections compact plutôt que d'obliger les visiteurs à faire défiler tous les projets pour atteindre Contact.
Les projets fictifs ne sont pas des missions clients documentées. Les notes sont des titres plutôt qu'un système de publication alimenté, et Contact pointe vers [email protected]. Remplacez ces espaces réservés et vérifiez les destinations avant de partager un vrai portfolio.
Comment créer un design de site portfolio créatif dans OpenDesign
Décrire les projets avant de choisir leurs couleurs
Préparez plusieurs noms de projets accompagnés chacun d'une phrase expliquant le public cible et l'objectif. Ajoutez votre rôle lorsque vous le connaissez. Cela donne à OpenDesign suffisamment de matière pour construire des cartes qui se distinguent par leur contenu, et pas seulement par leur apparence.
Invite suggéréeCrée un design de site portfolio créatif avec une introduction, cinq cartes de travaux sélectionnés, une pratique en trois étapes, des notes de travail et un contact. Utilise une typographie éditoriale de grand corps, un fond neutre chaud et quelques couleurs de cartes contrastées. Chaque projet doit comporter un nom, un objectif et mon rôle. Utilise des espaces réservés libellés là où des informations manquent. N'invente pas de clients ni de résultats. Garde la navigation Work, Practice, Notes et Contact utilisable sur les petits écrans.
Relier un projet à la section Practice
Demandez à OpenDesign de montrer comment un projet réel a évolué d'une question vers un prototype et un livrable. Remplacez le langage de service généraliste par cet exemple. Gardez la description de pratique restante suffisamment courte pour soutenir le travail sans l'éclipser.
Tester les chemins de contact et de lecture
Lisez les cartes sans regarder leurs couleurs : chacune doit encore décrire une idée distincte. Testez ensuite la navigation par sections et le lien de contact réel. Vérifiez que les titres surdimensionnés renvoient à la ligne sans masquer les descriptions sur mobile.
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 carrières
Huit scènes lunaires pour le site carrières Kimi : transitions au défilement et candidature illustrée.
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