joyeking/redesigned-portfolio

Compétence de Redesign

Comment cela fonctionne

Lorsqu'elle est appliquée à un projet existant, suivez cette séquence :

1. Analyser — Lisez le codebase. Identifiez le framework, la méthode de stylisme (Tailwind, CSS vanilla, styled-components, etc.) et les motifs de design actuels.
2. Diagnostiquer — Parcourez l'audit ci-dessous. Listez chaque motif générique, point faible et état manquant que vous trouvez.
3. Corriger — Appliquez des améliorations ciblées en travaillant avec la stack existante. Ne réécrivez pas à partir de zéro. Améliorez ce qui est là.

Audit de Conception

Typographie

Vérifiez ces problèmes et corrigez-les :

• Polices par défaut du navigateur ou Inter partout. Remplacez par une police avec du caractère. Bonnes options : Geist, Outfit, Cabinet Grotesk, Satoshi. Pour les projets éditoriaux/créatifs, associez un en-tête serif avec un corps sans-serif.
• Les titres manquent de présence. Augmentez la taille du texte d'affichage, resserrez l'espacement des lettres, réduisez la hauteur de ligne. Les titres doivent sembler lourds et intentionnels.
• Texte du corps trop large. Limitez la largeur des paragraphes à environ 65 caractères. Augmentez la hauteur de ligne pour la lisibilité.
• Seuls les poids Regular (400) et Bold (700) sont utilisés. Introduisez Medium (500) et SemiBold (600) pour une hiérarchie plus subtile.
• Chiffres en police proportionnelle. Utilisez une police à chasse fixe ou activez les chiffres tabulaires (font-variant-numeric: tabular-nums) pour les interfaces riches en données.
• Ajustements d'espacement des lettres manquants. Utilisez un tracking négatif pour les grands titres, un tracking positif pour les petites capitales ou les étiquettes.
• Sous-titres en majuscules partout. Essayez plutôt l'italique minuscule, la casse de phrase ou les petites capitales.
• Mots orphelins. Mots uniques seuls sur la dernière ligne. Corrigez avec text-wrap: balance ou text-wrap: pretty.

Couleur et Surfaces

• Fond #000000 pur. Remplacez par du noir dégradé, du charbon foncé ou du foncé teinté (#0a0a0a, #121212, ou un bleu marine foncé).
• Couleurs d'accent trop saturées. Gardez la saturation en dessous de 80%. Désaturez les accents pour qu'ils se fondent avec les neutres au lieu de crier.
• Plus d'une couleur d'accent. Choisissez-en une. Supprimez les autres. La cohérence vaut mieux que la variété.
• Mélange de gris chauds et froids. Tenez-vous-en à une famille de gris. Teintez tous les gris avec une teinte cohérente (chaude ou froide, pas les deux).
• Dégradé "IA" violet/bleu. C'est l'empreinte digitale de design IA la plus courante. Remplacez par des bases neutres et un seul accent réfléchi.
• box-shadow générique. Teintez les ombres pour correspondre à la teinte du fond. Utilisez des ombres colorées (par exemple, ombre bleu foncé sur un fond bleu) au lieu du noir pur à faible opacité.
• Design plat sans texture. Ajoutez un bruit subtil, du grain ou des micro-motifs sur les fonds. Les vecteurs plats purs semblent stériles.
• Dégradés parfaitement uniformes. Brisez l'uniformité avec des dégradés radiaux, des superpositions de bruit ou des dégradés maillés au lieu des fondus linéaires standard à 45 degrés.
• Direction d'éclairage incohérente. Auditez toutes les ombres pour vous assurer qu'elles suggèrent une source de lumière unique et cohérente.
• Sections sombres aléatoires dans une page en mode clair (ou vice versa). Une section unique à fond sombre coupant une page autrement claire ressemble à une erreur de copier-coller. Soit optez pour un mode sombre complet, soit gardez un ton de fond cohérent sur tout le site. Si un contraste est nécessaire, utilisez une nuance légèrement plus foncée de la même palette — pas un saut soudain vers #111 au milieu d'une page crème.
• Sections plates et vides sans profondeur visuelle. Les sections qui ne sont que du texte sur un fond uni semblent inachevées. Ajoutez des images de fond de haute qualité (floutées, superposées ou masquées), des motifs subtils ou des dégradés ambiants. Utilisez des sources de placeholders fiables comme https://picsum.photos/seed/{nom}/1920/1080 lorsque les ressources réelles ne sont pas disponibles. Expérimentez avec des images de fond derrière les sections héros, les blocs de fonctionnalités ou les CTA — même une photo pleine largeur subtile à faible opacité ajoute de la présence.

Mise en page

• Tout est centré et symétrique. Brisez la symétrie avec des marges décalées, des rapports d'aspect mixtes ou des en-têtes alignés à gauche sur du contenu centré.
• Trois colonnes de cartes égales comme rangée de fonctionnalités. C'est la mise en page IA la plus générique. Remplacez par un zigzag à 2 colonnes, une grille asymétrique, un défilement horizontal ou une disposition en maçonnerie.
• Utilisation de height: 100vh pour les sections plein écran. Remplacez par min-height: 100dvh pour éviter les sauts de mise en page sur les navigateurs mobiles (bug de l'iPhone Safari).
• Calculs de pourcentage flexbox complexes. Remplacez par CSS Grid pour des structures multi-colonnes fiables.
• Pas de conteneur max-width. Ajoutez une contrainte de conteneur (environ 1200-1440px) avec des marges automatiques pour que le contenu ne s'étire pas d'un bord à l'autre sur les écrans larges.
• Cartes de hauteur égale forcées par flexbox. Autorisez des hauteurs variables ou utilisez la maçonnerie lorsque le contenu varie en longueur.
• Border-radius uniforme sur tout. Variez le rayon : plus serré sur les éléments internes, plus doux sur les conteneurs.
• Pas de chevauchement ni de profondeur. Les éléments reposent à plat les uns à côté des autres. Utilisez des marges négatives pour créer des couches et de la profondeur visuelle.
• Rembourrage vertical symétrique. Le rembourrage haut et bas est toujours identique. Ajustez optiquement — le rembourrage bas doit souvent être légèrement plus grand.
• Le tableau de bord a toujours une barre latérale gauche. Essayez plutôt une navigation en haut, un menu de commande flottant ou un panneau pliable.
• Espace blanc manquant. Doublez l'espacement. Laissez le design respirer. Les mises en page denses fonctionnent pour les tableaux de bord de données, pas pour les pages marketing.
• Boutons non alignés en bas dans les groupes de cartes. Lorsque les cartes ont des longueurs de contenu différentes, les CTA se retrouvent à des hauteurs aléatoires. Épinglez les boutons en bas de chaque carte afin qu'ils forment une ligne horizontale propre, quel que soit le contenu au-dessus.
• Listes de fonctionnalités commençant à des positions verticales différentes. Dans les tableaux de prix ou les cartes de comparaison, la liste des fonctionnalités doit commencer à la même position Y dans toutes les colonnes. Utilisez un espacement cohérent au-dessus de la liste ou des blocs de titre/prix de hauteur fixe.
• Rythme vertical incohérent dans les éléments côte à côte. Lorsque vous placez des cartes, colonnes ou panneaux les uns à côté des autres, alignez les éléments partagés (titres, descriptions, prix, boutons) sur tous les éléments. Des lignes de base mal alignées donnent l'impression que la mise en page est cassée.
• Alignement mathématique qui semble optiquement faux. Centrer par les maths ne semble pas toujours centré à l'œil. Les icônes à côté du texte, les boutons de lecture dans des cercles ou le texte dans les boutons nécessitent souvent des ajustements optiques de 1 à 2 pixels pour sembler corrects.

Interactivité et États

• Pas d'état de survol sur les boutons. Ajoutez un décalage de fond, une légère échelle ou une translation au survol.
• Pas de retour actif/enfoncé. Ajoutez un scale(0.98) ou translateY(1px) subtil lors de l'appui pour simuler un clic physique.
• Transitions instantanées avec durée nulle. Ajoutez des transitions fluides (200-300ms) à tous les éléments interactifs.
• Anneau de focus manquant. Assurez des indicateurs de focus visibles pour la navigation au clavier. C'est une exigence d'accessibilité, pas une option.
• Pas d'états de chargement. Remplacez les spinners circulaires génériques par des squelettes de chargement qui correspondent à la forme de la mise en page.
• Pas d'états vides. Un tableau de bord vide ne montrant rien est une occasion manquée. Concevez une vue "bien démarrer" composée.
• Pas d'états d'erreur. Ajoutez des messages d'erreur clairs et en ligne pour les formulaires. N'utilisez pas window.alert().
• Liens morts. Boutons qui pointent vers #. Liez vers des destinations réelles ou désactivez-les visuellement.
• Aucune indication de la page actuelle dans la navigation. Stylisez le lien de navigation actif différemment pour que les utilisateurs sachent où ils se trouvent.
• Sauts de défilement. Les clics sur les ancres sautent instantanément. Ajoutez scroll-behavior: smooth.
• Animations utilisant top, left, width, height. Passez à transform et opacity pour une animation fluide accélérée par GPU.

Contenu

• Noms génériques comme "John Doe" ou "Jane Smith". Utilisez des noms diversifiés et réalistes.
• Nombre ronds factices comme 99.99%, 50%, 100,00 $. Utilisez des données organiques et désordonnées : 47.2%, 99,00 $, +1 (312) 847-1928.
• Noms d'entreprise factices comme "Acme Corp", "Nexus", "SmartFlow". Inventez des noms de marque contextuels et crédibles.
• Clichés de rédaction IA. N'utilisez jamais "Élevez", "Fluide", "Libérez", "Next-Gen", "Révolutionnaire", "Explorez", "Tissu" ou "Dans le monde de...". Écrivez un langage simple et spécifique.
• Points d'exclamation dans les messages de succès. Supprimez-les. Soyez confiant, pas bruyant.
• Messages d'erreur "Oups !". Soyez direct : "La connexion a échoué. Veuillez réessayer."
• Voix passive. Utilisez la voix active : "Nous n'avons pas pu enregistrer vos modifications" au lieu de "Des erreurs ont été commises."
• Dates de tous les articles de blog identiques. Randomisez les dates pour paraître réelles.
• Même image d'avatar pour plusieurs utilisateurs. Utilisez des ressources uniques pour chaque personne distincte.
• Lorem Ipsum. N'utilisez jamais de texte latin de placeholder. Écrivez un vrai brouillon de contenu.
• Casse de titre sur chaque en-tête. Utilisez plutôt la casse de phrase.

Motifs de Composants

• Aspect de carte générique (bordure + ombre + fond blanc). Supprimez la bordure, ou utilisez uniquement la couleur de fond, ou uniquement l'espacement. Les cartes ne devraient exister que lorsque l'élévation communique une hiérarchie.
• Toujours un bouton rempli + un bouton fantôme. Ajoutez des liens texte ou des styles tertiaires pour réduire le bruit visuel.
• Badges "Nouveau" et "Bêta" en forme de pilule. Essayez des badges carrés, des drapeaux ou des étiquettes texte simples.
• Sections FAQ en accordéon. Utilisez une liste côte à côte, une aide consultable ou une divulgation progressive en ligne.
• Carrousels de témoignages à 3 cartes avec points. Remplacez par un mur de maçonnerie, des publications sociales intégrées ou une citation rotative unique.
• Tableau de prix à 3 tours. Mettez en évidence le niveau recommandé avec de la couleur et de l'emphase, pas seulement plus de hauteur.
• Modales pour tout. Utilisez l'édition en ligne, des panneaux coulissants ou des sections extensibles au lieu de popups pour les actions simples.
• Cercles d'avatar exclusivement. Essayez des squircles ou des carrés arrondis pour un aspect moins générique.
• Bascule clair/sombre toujours un interrupteur soleil/lune. Utilisez un menu déroulant, la détection des préférences système ou intégrez-le dans les paramètres.
• Ferme de liens de pied de page à 4 colonnes. Simplifiez. Concentrez-vous sur les chemins de navigation principaux et les liens juridiquement requis.

Iconographie

• Icônes Lucide ou Feather exclusivement. Ce sont les choix d'icônes "par défaut" pour l'IA. Utilisez Phosphor, Heroicons ou un ensemble personnalisé pour la différenciation.
• Fusée pour "Lancer", bouclier pour "Sécurité". Remplacez les métaphores clichées par des icônes moins évidentes (éclair, empreinte digitale, étincelle, coffre).
• Épaisseurs de trait incohérentes entre les icônes. Auditez toutes les icônes et standardisez à un poids de trait.
• Favicon manquant. Incluez toujours un favicon de marque.
• Photos "d'équipe diversifiée" génériques. Utilisez de vraies photos d'équipe, des clichés francs ou un style d'illustration cohérent au lieu d'images génériques.

Qualité du Code

• Soupe de div. Utilisez du HTML sémantique : <nav>, <main>, <article>, <aside>, <section>.
• Styles en ligne mélangés avec des classes CSS. Déplacez tout le stylisme vers le système de stylisme du projet.
• Largeurs en pixels codées en dur. Utilisez des unités relatives (%, rem, em, max-width) pour des mises en page flexibles.
• Texte alt manquant sur les images. Décrivez le contenu de l'image pour les lecteurs d'écran. Ne laissez jamais alt="" ou alt="image" sur des images significatives.
• Valeurs z-index arbitraires comme 9999. Établissez une échelle z-index propre dans le thème/les variables.
• Code mort commenté. Supprimez tous les artefacts de débogage avant la livraison.
• Hallucinations d'import. Vérifiez que chaque import existe réellement dans package.json ou les dépendances du projet.
• Balises meta manquantes. Ajoutez les balises meta <title>, description, og:image et de partage social appropriées.

Omissions Stratégiques (Ce que l'IA Oublie Généralement)

• Pas de liens juridiques. Ajoutez des liens vers la politique de confidentialité et les conditions d'utilisation dans le pied de page.
• Pas de navigation "retour". Des impasses dans les flux utilisateur. Chaque page a besoin d'un moyen de revenir en arrière.
• Pas de page 404 personnalisée. Concevez une expérience "page non trouvée" utile et de marque.
• Pas de validation de formulaire. Ajoutez une validation côté client pour les e-mails, les champs obligatoires et les vérifications de format.
• Pas de lien "passer au contenu". Essentiel pour les utilisateurs de clavier. Ajoutez un lien de saut caché.
• Pas de consentement aux cookies. Si requis par la juridiction, ajoutez une bannière de consentement conforme.

Techniques de Mise à Niveau

Lors de la mise à niveau d'un projet, puisez dans ces techniques à fort impact pour remplacer les motifs génériques :

Mises à Niveau de Typographie

• Animation de police variable. Interpolez le poids ou la largeur au défilement ou au survol pour un texte qui semble vivant.
• Transitions contour-remplissage. Le texte commence comme un contour de trait et se remplit de couleur à l'entrée du défilement ou à l'interaction.
• Révélations par masque de texte. Typographie de grande taille agissant comme une fenêtre sur une vidéo ou une image animée derrière.

Mises à Niveau de Mise en Page

• Grille brisée / asymétrie. Éléments qui ignorent délibérément la structure de colonne — chevauchement, débordement de l'écran ou décalage avec un caractère aléatoire calculé.
• Maximisation de l'espace blanc. Utilisation agressive de l'espace négatif pour forcer le focus sur un seul élément.
• Piles de cartes en parallaxe. Sections qui collent et s'empilent physiquement les unes sur les autres pendant le défilement.
• Défilement en écran partagé. Deux moitiés de l'écran glissant dans des directions opposées.

Mises à Niveau de Mouvement

• Défilement fluide avec inertie. Découplez le défilement des valeurs par défaut du navigateur pour une sensation plus lourde et cinématographique.
• Entrée échelonnée. Les éléments s'enchaînent avec de légers retards, combinant une translation sur l'axe Y avec un fondu d'opacité. Ne montez jamais tout à la fois.
• Physique de ressort. Remplacez l'assouplissement linéaire par un mouvement basé sur un ressort pour une sensation naturelle et pesante sur tous les éléments interactifs.
• Révélations liées au défilement. Contenu entrant via des masques extensibles, des essuyages ou des tracés SVG dessinés liés à la progression du défilement.

Mises à Niveau de Surface

• Véritable glassmorphisme. Allez au-delà de backdrop-filter: blur. Ajoutez une bordure intérieure de 1px et une ombre intérieure subtile pour simuler la réfraction des bords.
• Bordures projecteur. Bordures de carte qui s'illuminent dynamiquement sous le curseur.
• Superpositions de grain et de bruit. Une superposition fixe, sans pointer-événements, avec un bruit subtil pour briser la planéité numérique.
• Ombres colorées et teintées. Ombres qui portent la teinte du fond plutôt que d'utiliser du noir générique.

Priorité de Correction

Appliquez les modifications dans cet ordre pour un impact visuel maximal avec un risque minimal :

1. Changement de police — la plus grande amélioration instantanée, le risque le plus faible
2. Nettoyage de la palette de couleurs — supprimez les couleurs conflictuelles ou trop saturées
3. États de survol et actifs — améliorez l'interactivité de base
4. Ajustements de mise en page — corrigez les motifs de mise en page génériques
5. Améliorations de surface — ajoutez de la texture, des ombres teintées