Sites Web de Vitrine Design

Que fait Sites Web de Vitrine Design ?

Transformez des briefs vagues et des sources disparates en un site qui semble spécifique à son sujet, son public, sa langue et son objectif. Prend en charge les pages de destination ciblées, les sites Web multipages et les produits web interactifs. Utilisez ce skill comme colonne vertébrale du flux de travail ; combinez-le avec tout skill de design, navigateur, image, interface produit ou framework que l'utilisateur nomme explicitement.

Règles fondamentales

• Concevez une expérience de conversion, pas une collection de sections attrayantes.
• Dérivez l'identité de l'entreprise, du public, du lieu, du produit et de l'imagerie réelle. Ne réutilisez pas le style visuel d'un projet antérieur, sauf si l'utilisateur le demande.
• Séparez les faits vérifiés de l'interprétation créative. N'inventez jamais d'adresses, de prix, d'horaires d'ouverture, d'avis, de clients, de distinctions, de fonctionnalités ou d'allégations de performance.
• Préservez les actifs originaux de l'utilisateur. Optimisez les copies dans le projet et documentez les images générées ou temporaires.
• Choisissez la langue en fonction du public et du brief. Ne supposez jamais un contenu coréen, chinois, anglais, japonais ou bilingue sans preuve.
• Traitez la typographie localisée, les sauts de ligne, la ponctuation, l'ordre de lecture, la densité du contenu et les actions culturellement familières comme faisant partie du design.
• Préférez une direction artistique forte à un collage d'effets à la mode.
• Lorsque l'utilisateur accorde une liberté créative, déduisez et engagez-vous dans une direction justifiée au lieu de lui demander de concevoir le site pour vous.
• Rendez le prototype véritablement cliquable et démontrable lorsque l'implémentation est demandée. Ne vous arrêtez pas à un concept écrit, sauf si l'utilisateur ne demande qu'une stratégie.
• Gardez toutes les informations essentielles visibles sans animation et respectez les préférences de mouvement réduit.

Choisir le mode d'engagement

1. Concept uniquement : Produire le positionnement, le flux de pages, la direction visuelle et les descriptions des écrans clés. Ne modifiez pas les fichiers sauf demande.
2. Prototype : Construire un site réactif et exécutable, mono-page ou multipage, avec des interactions primaires fonctionnelles et un contenu de qualité présentation.
3. Refonte : Auditer d'abord la page existante et le dépôt, préserver les exigences fonctionnelles et la pile actuelle, puis améliorer l'interface.
4. Polissage : Inspecter la page en ligne ou locale, identifier les lacunes à fort impact, mettre en œuvre des modifications ciblées et revérifier.
5. Produit web : Concevoir les flux de tâches, les états, la navigation et la présentation des données ; associer ce skill à un skill d'interface produit lorsque le travail est axé sur l'application.

Lorsqu'aucun dépôt n'existe, choisissez la pile maintenable la plus simple qui correspond aux besoins d'interaction. Lorsqu'un dépôt existe, inspectez ses conventions et réutilisez-les.

Flux de travail

1. Cadrer le résultat

Ne résolvez que les décisions qui modifient matériellement le résultat :

• public et langue ;
• type de site, échelle de contenu et nature de l'expérience (mono-page, multipage ou applicative) ;
• actions de conversion primaires et secondaires ;
• format de livraison et interactions requises ;
• matériel source et droits d'utilisation ;
• première impression souhaitée et directions inacceptables ;
• contraintes de lancement telles que la pile, la route, la fenêtre d'affichage ou le port.

Posez au plus trois questions concises à la fois. Si l'utilisateur accorde une liberté créative et que les preuves sont suffisantes, énoncez des hypothèses raisonnables et procédez.

Pour les briefs vagues, les liens épars ou les actifs locaux mixtes, lisez discovery-and-research.md avant de rassembler le contenu.

Lisez site-types-and-localization.md lors du choix de l'architecture de l'information, du travail en chinois, anglais, japonais, coréen ou de la construction d'une expérience multilingue.

2. Construire un registre source de vérité

Inspectez les liens fournis, les fiches d'établissement, les sites existants, les fichiers, les images et les vidéos. Enregistrez :

• la valeur vérifiée ;
• sa source et sa date de vérification ;
• si elle peut être publiée directement ;
• tout ce qui nécessite une confirmation du propriétaire.

Centralisez les données opérationnelles dans des fichiers de données ou de contenu plutôt que de les disperser dans les composants. Étiquetez explicitement les espaces réservés. Si des informations publiques sont en conflit, préférez la source appartenant à l'entreprise ou la plus récemment mise à jour et signalez le conflit.

3. Définir l'histoire de conversion

Rédigez ceci avant de choisir les effets visuels :

• la phrase unique que les visiteurs devraient retenir après dix secondes ;
• l'appel à l'action principal et un appel à l'action secondaire facultatif ;
• une échelle de croyance allant de la première impression à l'action ;
• trois à cinq preuves déjà étayées par des faits ;
• les informations minimales nécessaires pour lever les hésitations.

Créez ou mettez à jour PRODUCT.md dans les projets d'implémentation avec le public, l'objectif, le positionnement, la conversion, les preuves, la voix, les anti-références et les attentes en matière d'accessibilité.

4. Établir une direction artistique spécifique

Nommez un concept qui combine la vérité de la catégorie avec une promesse émotionnelle et un contraste délibéré. Des exemples de contrastes utiles incluent énergique mais discipliné, local mais éditorial, technique mais humain, ou premium mais accueillant.

Réglez les curseurs de design avant l'implémentation :

• variance de design, 1–10 ;
• intensité du mouvement, 1–10 ;
• densité de l'information, 1–10 ;
• stratégie de couleur ;
• stratégie photographique ;
• stratégie typographique.

Créez ou mettez à jour DESIGN.md avec le concept, les tokens, la typographie, la mise en page, le traitement des images, le mouvement et le comportement réactif. Lisez direction-and-structure.md lors du choix du concept, de l'architecture de la page ou du traitement des médias.

Évitez les valeurs par défaut visuelles automatiques : style générique fitness noir-néon, style générique beige de restaurant, panneaux en verre décoratifs, grilles bento aléatoires, lueur sans signification, pilules excessives, cartes uniformes et sections fade-up répétées.

5. Composer la page autour des décisions

Choisissez l'architecture de l'information en fonction de l'objectif du site. Pour un travail multipage, définissez le plan de site le plus petit et complet, la navigation globale, les objectifs spécifiques à chaque page et le chemin de conversion inter-pages avant de styliser les sections individuelles. Pour les produits web, priorisez l'achèvement des tâches et la couverture des états plutôt que le rythme marketing.

N'utilisez que les sections nécessaires à la décision du visiteur. Un flux de page de conversion courant est :

1. héros avec la promesse et l'action principale ;
2. preuve immédiate ;
3. offre signature ou valeur produit ;
4. expérience, processus ou différenciateurs ;
5. détails pratiques qui éliminent les objections ;
6. emplacement, contact, réservation, achat ou demande ;
7. appel à l'action final décisif.

Variez la composition par l'échelle, le rythme, le recadrage, les espaces blancs et l'alignement éditorial—pas par une variété arbitraire de composants. Sur mobile, gardez l'action la plus précieuse à portée de main lorsque cela est approprié, comme appeler, naviguer, réserver, acheter, s'inscrire, rechercher, sauvegarder ou continuer.

6. Écrire le contenu comme interface

• Écrivez d'abord dans la langue principale du public ; n'ajoutez d'autres langues que si nécessaire.
• Utilisez des titres courts et directs qui s'adaptent au rythme visuel.
• Remplacez les affirmations génériques par des détails concrets étayés.
• Gardez les étiquettes des appels à l'action littérales et culturellement familières.
• Testez les sauts de ligne dans la langue cible aux largeurs réelles ; n'approuvez pas une mise en page en utilisant des espaces réservés en anglais.
• Testez chaque langue prise en charge indépendamment. Ne supposez pas qu'une traduction correspond au composant de la langue source.
• Utilisez du contenu réel plutôt que du lorem ipsum.

7. Construire le prototype

• Utilisez une structure de page sémantique et des tokens réutilisables.
• Faites fonctionner les liens, les appels, la navigation, les formulaires, les menus, les filtres, les galeries et les modales au niveau impliqué par le prototype.
• Optimisez les grandes images aux formats et tailles web appropriés ; conservez les points focaux significatifs du recadrage.
• Utilisez le mouvement pour clarifier la hiérarchie, révéler les relations spatiales ou renforcer le caractère de la marque. Gardez-le rare et interruptible.
• Fournissez le focus clavier, un texte alternatif significatif, un contraste suffisant, des zones tactiles de 44 px et des contrôles mobiles tenant compte des zones de sécurité (safe areas).
• Préservez le contenu essentiel lorsque le mouvement JavaScript ne s'exécute pas.

Lisez prototype-and-qa.md avant l'implémentation ou la révision finale.

8. Vérifier dans un vrai navigateur

Ne déclarez pas la fin du projet sur la base d'un simple build réussi. Vérifiez au minimum :

• grand écran autour de 1440 px ;
• largeur intermédiaire/tablette ;
• mobile autour de 390 px ;
• mobile étroit autour de 375 px ;
• un test avec mouvement réduit ou clavier.

Inspectez la section héros et la page complète. Vérifiez le retour à la ligne dans la langue cible, les recadrages d'images, le débordement horizontal, les zones de sécurité, les contrôles collants, les erreurs de console, les liens, les formulaires, les menus, l'ordre de focus, le comportement de chargement et l'accessibilité de l'appel à l'action final. Corrigez les problèmes découverts et répétez les vérifications concernées.

Livraison attendue

Pour un prototype exécutable, livrez :

• le code source fonctionnel et un build de production réussi ;
• un aperçu local ou une commande d'exécution claire ;
• PRODUCT.md et DESIGN.md lorsque le projet le justifie ;
• une note source/place pour les données opérationnelles et les médias ;
• une liste concise des interactions implémentées et des fenêtres d'affichage validées ;
• une courte liste de confirmation pour le propriétaire concernant les faits qui peuvent changer avant le lancement.

Commencez la réponse finale par l'aperçu ou l'artefact principal. Ne mentionnez que les décisions de conception et les résultats de validation les plus importants.

Contrôle qualité

Ne livrez pas tant que tout ce qui suit n'est pas vrai :

• Spécificité : Le site ne pourrait pas être réétiqueté pour un concurrent aléatoire sans refonte.
• Authenticité : Les affirmations et les médias sont réels, sourcés ou clairement marqués comme provisoires.
• Conversion : L'action suivante est évidente en quelques secondes et reste facile sur mobile.
• Hiérarchie : Une idée domine chaque fenêtre d'affichage ; la typographie et l'imagerie la soutiennent.
• Adaptabilité : Les compositions s'adaptent intentionnellement plutôt que de simplement s'empiler.
• Retenue : Le mouvement et les effets ont un rôle ; le site ne donne pas l'impression d'une démo d'effets.
• Inclusion : Le clavier, le contraste, les zones tactiles, le mouvement réduit et la structure sémantique sont couverts.
• Fiabilité : Le build, la console, les actifs et les interactions critiques sont vérifiés.