> ## Documentation Index > Fetch the complete documentation index at: https://docs.base44.com/llms.txt > Use this file to discover all available pages before exploring further. # Fondations du design et mise en page > Gardez votre application Base44 cohérente et bien structurée : systèmes de design, images et ressources visuelles, mise en page responsive, types de pages, personnalisation avancée et accessibilité. Une fois que vous savez [personnaliser le design de votre application](/Building-your-app/Design), ces fondations vous aident à la garder cohérente, bien structurée et accessible à mesure qu'elle grandit. Cette page couvre la construction d'un design cohérent, le travail avec les images et les ressources visuelles, la mise en page responsive et les types de pages, la personnalisation avancée et l'accessibilité. *** ## Garder un design cohérent Ces sections expliquent comment établir des modèles de design cohérents à l'échelle de l'application avec le chat IA, afin que vos couleurs, votre typographie, vos espacements et vos composants restent harmonieux dans toute votre application. ### Système de couleurs La couleur est l'un de vos outils les plus puissants pour créer une ambiance et guider l'attention. Commencez par définir des rôles plutôt que des codes hexadécimaux au hasard. Visez : * 1 couleur de marque principale * 1 couleur secondaire * 1 couleur d'accent pour les mises en avant * 3 à 5 gris neutres pour les arrière-plans, les surfaces et les bordures * Des couleurs claires pour les états de succès, d'avertissement et d'erreur Vous pouvez demander à l'IA de proposer et d'appliquer un système complet à partir de zéro : ```text theme={null} Crée un système de couleurs pour cette application : - 1 couleur de marque principale - 1 couleur secondaire - 1 couleur d'accent pour les mises en avant - 4 gris neutres pour les arrière-plans, les surfaces et les bordures Associe les couleurs à des rôles comme primary, surface, border, success, warning, error. Assure-toi que le texte sur les arrière-plans respecte les niveaux de contraste d'accessibilité. Applique ce système dans toute l'application et remplace les couleurs isolées. ``` Gardez la signification des couleurs cohérente. Par exemple, utilisez votre couleur de succès uniquement pour les états positifs et votre couleur d'erreur pour les problèmes, pas pour la décoration. Si vous avez déjà des codes hexadécimaux issus d'une charte graphique ou d'un outil externe, collez-les et laissez l'IA les associer à des rôles : ```text theme={null} Utilise cette palette et attribue un rôle à chaque code hexadécimal : - #1D4ED8 - #6366F1 - #10B981 - #F3F4F6 - #111827 Définis lesquels sont les rôles primary, secondary, accent et neutres. Remplace les couleurs codées en dur par des tokens ou des classes Tailwind qui suivent ces rôles. ``` Vous pouvez téléverser une capture d'écran ou une image de votre palette de couleurs directement dans le chat IA et lui demander d'appliquer les couleurs à votre application : ```text theme={null} Applique les couleurs de cette image à mon application. Associe chaque couleur à un rôle comme primary, background, foreground et accent. Remplace les couleurs existantes dans toute l'application pour correspondre. ``` Changement de la palette de couleurs d'une application Base44 *** ### Système typographique La typographie détermine la lisibilité de votre application et la facilité avec laquelle on la parcourt. Mieux vaut quelques styles de texte clairs que beaucoup de styles similaires. Définissez des rôles comme : * Titre de page * Titre de section * Texte courant * Petites métadonnées comme les libellés et les horodatages Vous pouvez demander à l'IA de configurer cela et de l'appliquer partout : ```text theme={null} Configure un système typographique : - Titres de page : plus grande taille, gras, sans serif moderne - Titres de section : taille moyenne, semi-gras - Texte courant : taille standard, graisse normale - Métadonnées : petites majuscules avec un espacement de lettres accru Applique ces rôles de manière cohérente sur toutes les pages et supprime les tailles de police improvisées. ``` Vous pouvez aussi cibler les tailles plus directement : ```text theme={null} Rends la typographie plus lisible : - Augmente légèrement la taille du texte courant - Augmente la hauteur de ligne des paragraphes - Assure-toi que les titres font au moins 1,4 fois la taille du texte courant Garde les mêmes familles de polices. ``` Vous pouvez utiliser des polices personnalisées et les appliquer via votre mise en page. 1. Récupérez le snippet d'intégration (par exemple depuis Google Fonts sur [https://fonts.google.com](https://fonts.google.com)). 2. Demandez à l'IA de l'ajouter à `Layout.js` et de l'intégrer dans votre système typographique. Exemple de prompt : ```text theme={null} Importe la police "Raleway" depuis Google Fonts. Utilise-la pour les titres de page et les titres de section. Garde la police actuelle du texte courant pour les paragraphes. Mets à jour les styles dans toute l'application pour suivre cette règle. ``` Utilisation d'une police personnalisée dans le fichier de mise en page Base44 Essayez de vous limiter à une ou deux familles de polices. Trop de polices donnent une interface désordonnée et plus difficile à maintenir. *** ### Espacement et densité L'espacement et la densité déterminent le confort d'utilisation de votre application. Une échelle d'espacement simple évite les écarts aléatoires et les sections tassées. Vous pouvez définir une échelle comme 4, 8, 12, 16, 24 et demander à l'IA de l'appliquer : ```text theme={null} Normalise l'espacement avec cette échelle : 4, 8, 12, 16, 24. - Utilise les grandes valeurs entre les sections principales - Utilise les valeurs moyennes à l'intérieur des cartes et des panneaux - Utilise les petites valeurs entre les libellés et les champs Aère les zones qui semblent tassées et évite les valeurs d'espacement aléatoires. ``` Si une page semble surchargée ou trop vide, vous pouvez laisser le chat IA diagnostiquer et corriger : ```text theme={null} Regarde cette page et ajuste l'espacement : - Ajoute plus de padding en haut et en bas de chaque section - Augmente l'écart entre les rangées de cartes - Assure-toi que les longs paragraphes ont une longueur de ligne confortable Garde les couleurs et le contenu existants. ``` *** ### Éléments de base et états Une fois la couleur, la typographie et l'espacement en place, standardisez les blocs de construction que vous utilisez partout. Concentrez-vous sur : * Les boutons (principal, secondaire et texte seul) * Les cartes et panneaux * Les barres de navigation et barres latérales * Les champs de formulaire (défaut, focus, erreur, désactivé) * Les puces, tags et badges si vous en utilisez Vous pouvez demander à l'IA de détecter et d'unifier les modèles : ```text theme={null} Standardise les éléments de base : - Boutons : définis les styles principal, secondaire et texte seul - Cartes : définis le rayon des coins, le padding, l'ombre et la structure en-tête/corps - Navigation : définis les états actif, survol et désactivé - Champs de formulaire : définis les états défaut, focus, erreur et désactivé Applique ces modèles dans toute l'application et remplace les styles incohérents. ``` Vous obtenez ainsi un langage réutilisable, et les nouvelles pages semblent appartenir au même produit. *** ## Images et ressources visuelles Les ressources visuelles comme les images, les icônes et les vidéos façonnent le ressenti de votre application. L'IA peut vous aider à les créer, les placer, les styliser et les connecter à vos données et à votre code. Téléversez des images ou des vidéos dans le chat IA pour lui donner un contexte visuel sur le style, la mise en page ou le contenu de votre application. Vous pouvez demander au chat IA d'ajouter des images hero directement à vos pages : ```text theme={null} Ajoute une image hero pleine largeur à la page d'accueil qui correspond à la palette de couleurs actuelle. Utilise une image de remplacement qui évoque un tableau de bord analytique moderne. ``` Exemple d'image hero dans une application Base44 Pour remplacer une image de remplacement : 1. Ouvrez le fichier de page concerné, comme `Store.js`, en vue code. 2. Trouvez la balise ``. 3. Mettez à jour l'attribut `src` avec l'URL de votre propre image. Vous pouvez aussi téléverser des images pour les entités dans la section **Data** et les lier à des composants, afin que les cartes et les listes affichent automatiquement les bonnes images. Gestion des images d'entités dans la section Data de Base44 Demandez au chat IA de générer de courtes vidéos pour les sections visuelles comme les heros, les aperçus de produit, les tutoriels ou les écrans d'onboarding. Exemple de prompt : ```text theme={null} Crée une courte vidéo d'onboarding pour mon application de fitness montrant une routine d'entraînement matinale simple. Ajoute-la à l'écran de bienvenue au-dessus du bouton Get Started. ``` Générer des vidéos depuis le chat IA nécessite un [forfait Starter](/Account-and-billing/Billing-and-plans) ou supérieur. Chaque vidéo générée utilise les crédits de message du prompt plus 1 crédit de message supplémentaire. Vous pouvez aussi permettre aux utilisateurs de générer des vidéos dans votre application en ligne. En savoir plus sur la [génération de vidéos](/Integrations/built-in-integrations#generating-videos). Les images de référence vous aident à orienter le design visuellement en montrant au chat IA un style, une mise en page, une palette de couleurs ou une direction visuelle que vous voulez utiliser. Téléversement d'une image de référence pour inspirer le design de l'application 1. Cliquez sur l'icône **Upload (+)** dans le chat IA. 2. Téléversez une image d'inspiration ou une capture d'écran. 3. Dites précisément à l'IA ce que vous voulez reprendre et ce qu'il faut ignorer. Idées de prompts : ```text theme={null} Utilise cette référence comme inspiration. Garde ma mise en page et mon contenu, mais : - Reprends les formes et les ombres des boutons - Reprends le rayon des coins et le style de bordure des cartes - Applique un dégradé doux similaire uniquement à l'en-tête supérieur Ne copie pas les couleurs exactes, seulement la structure et le ressenti. ``` ```text theme={null} À partir de cette capture d'écran, extrais des règles de design pour : - Les rôles de couleurs - Les tailles et graisses de police - Le rayon des coins et les ombres - L'espacement entre les sections et les cartes Explique les règles, puis applique un style similaire avec mes couleurs de marque actuelles. ``` Vous pouvez copier des styles visuels directement depuis un outil de design comme Figma et demander à Base44 de les appliquer, au lieu d'essayer de décrire chaque détail avec des mots. **Pour copier depuis Figma :** 1. Dans Figma, sélectionnez l'élément dont vous voulez copier le style. 2. Passez en **Dev mode** et affichez le panneau **Code**. 3. Copiez la ligne CSS concernée, par exemple un arrière-plan en dégradé : `background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);` 4. Dans Base44, cliquez sur l'élément correspondant dans votre aperçu pour ouvrir le mode **Edit**. 5. Collez le style dans un prompt IA et dites précisément à Base44 quoi changer, par exemple : ```text theme={null} Change le style d'arrière-plan de cet élément en : background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%); Garde tous les autres styles identiques. ``` Cela vous permet de reproduire très précisément les dégradés, les ombres, les bordures et d'autres styles de votre fichier de design. Les icônes doivent soutenir le sens, pas seulement décorer. La cohérence est essentielle. Tâches courantes : * Remplacer les icônes génériques par des icônes plus parlantes. * Aligner les tailles d'icônes et les épaisseurs de trait. * Associer les icônes à des libellés texte quand la clarté compte. Vous pouvez utiliser des bibliothèques d'icônes comme Lucide et demander au chat IA de les intégrer : ```text theme={null} Remplace les icônes génériques par des icônes plus parlantes : - Utilise des icônes qui correspondent clairement à chaque élément de navigation et action principale - Garde la taille des icônes et l'épaisseur des traits cohérentes - Aligne proprement les icônes avec les libellés dans la navigation, les listes et les boutons ``` ```text theme={null} Mets à jour tous les boutons d'appel à l'action principaux : - Utilise l'icône "sparkles" à gauche du libellé - Garde une petite taille d'icône et un padding régulier - N'ajoute pas d'icônes aux boutons secondaires ou destructifs ``` *** ## Mise en page et responsivité La mise en page détermine comment l'information est regroupée et parcourue. La responsivité garantit que cette mise en page fonctionne sur chaque appareil. Pensez en types de pages plutôt qu'en écrans isolés : * Pages d'atterrissage et marketing * Tableaux de bord * Listes et tables * Pages de détail * Formulaires et assistants * Pages de paramètres et de profil Vous pouvez demander au chat IA de détecter et de standardiser les modèles : ```text theme={null} Identifie les principaux types de pages de cette application (atterrissage, tableau de bord, liste, détail, formulaire, paramètres). Pour chaque type : - Propose une structure de mise en page cohérente - Suggère quels composants existants réutiliser Applique ces mises en page à toutes les pages du même type, sans changer le contenu. ``` La hiérarchie et l'espace blanc aident à voir en un coup d'œil ce qui compte. Idées que vous pouvez demander à l'IA d'appliquer : ```text theme={null} Améliore la hiérarchie visuelle et l'espace blanc sur cette page : - Fais clairement ressortir le titre de page au-dessus des autres textes - Utilise des titres de section cohérents pour regrouper le contenu - Ajoute plus de padding en haut et en bas de chaque section - Augmente l'écart entre les rangées de cartes Évite d'ajouter de nouvelles couleurs ou polices. ``` L'espace blanc est particulièrement important pour les contenus denses comme les tableaux de bord et les tables : donnez aux éléments clés de la place pour respirer. Votre application doit paraître naturelle sur téléphone, tablette et ordinateur. Vous pouvez encoder les règles responsives dans un seul prompt : ```text theme={null} Rends cette mise en page responsive : - Sur téléphone, utilise une seule colonne verticale et empile les sections - Sur tablette, utilise deux colonnes pour les cartes quand l'espace le permet - Sur ordinateur, utilise trois ou quatre colonnes pour les cartes Garde les images au ratio 4:3. Replie la barre latérale en menu supérieur sur les petits écrans. Évite le défilement horizontal à tous les points de rupture. ``` Utilisez l'aperçu par appareil dans l'éditeur Base44 pour vérifier comment ces règles se comportent selon les tailles d'écran, puis affinez-les avec des prompts de suivi. ### Personnaliser votre application pour mobile Votre application Base44 ajuste automatiquement sa mise en page pour chaque appareil, mais vous pouvez utiliser l'aperçu mobile de l'éditeur et ses outils de personnalisation pour affiner l'apparence et le fonctionnement de votre application sur mobile. Vous créez ainsi une expérience confortable et fluide pour les utilisateurs mobiles. Affichage de la version mobile de votre application dans l'éditeur Base44 **Pour personnaliser votre application pour mobile :** 1. Ouvrez l'éditeur de votre application. 2. Cliquez sur l'icône **Screen** en haut et sélectionnez **Mobile**. 3. Vérifiez votre mise en page, votre navigation et votre contenu. 4. Faites les changements nécessaires soit en : * Demandant au chat IA d'apporter des modifications au mobile. * Utilisant le mode **Edit** dans le chat IA pour changer le design ou la mise en page d'éléments précis. **Conseils pour une belle application sur mobile :** * Assurez-vous que le texte est lisible * Redimensionnez les éléments pour s'adapter à l'écran mobile * Masquez ou affichez des éléments selon les besoins * Vérifiez que les boutons et boutons d'icône sont faciles à toucher * Vérifiez que les images s'affichent bien *** ## Types de pages Chaque type de page demande des choix de design différents. Utilisez ces modèles comme points de départ et adaptez-les avec l'IA. Misez sur une promesse claire, un appel à l'action principal et une hiérarchie visuelle forte. Conseils de design : * Utilisez un en-tête simple avec une navigation minimale. * Rendez la section hero claire et ciblée, avec un titre court et un bouton principal. * Utilisez des sections de soutien pour les bénéfices, les fonctionnalités et la preuve sociale. * Gardez les formulaires courts et visibles sans défilement si possible. Exemple de prompt : ```text theme={null} Conçois la page d'accueil comme une page d'atterrissage ciblée : - Section hero épurée avec un titre court, une phrase de soutien et un appel à l'action principal - Enchaîne avec trois bénéfices clés dans des cartes - Ajoute une section de preuve sociale simple avec des logos - Garde une navigation minimale Utilise mon système de couleurs et de typographie existant. ``` Les tableaux de bord doivent répondre à « Où en suis-je ? » en un coup d'œil. Conseils de design : * Placez la métrique ou le statut le plus important en haut à gauche. * Regroupez les métriques liées dans des cartes avec des titres clairs et de courtes descriptions. * Évitez de multiplier les types de graphiques sur un même écran, réutilisez quelques standards. * Gardez les filtres et les plages de dates bien visibles et cohérents. Exemple de prompt : ```text theme={null} Restructure ce tableau de bord : - Place le KPI principal en haut à gauche dans une carte bien visible - Regroupe les métriques liées dans une grille de cartes 2x2 - Déplace les filtres et les contrôles de plage de dates dans une barre supérieure épurée - Réduis le bruit visuel des graphiques avec des couleurs et des styles cohérents ``` Les listes et les tables permettent de parcourir et de traiter de nombreux éléments. Conseils de design : * Utilisez des en-têtes de colonne clairs avec assez d'espacement. * Gardez une hauteur de ligne confortable, pas trop serrée. * Utilisez des rayures alternées ou des séparateurs de ligne discrets pour les grandes tables. * Placez les actions soit en fin de ligne, soit dans un menu cohérent. * Ajoutez des états vide, de chargement et d'erreur. Exemple de prompt : ```text theme={null} Nettoie cette vue de table : - Augmente légèrement la hauteur des lignes - Utilise des séparateurs de ligne discrets ou des rayures alternées - Aligne les actions dans une colonne cohérente en fin de ligne - Ajoute un état vide clair avec un court message et une action principale ``` Les pages de détail doivent rendre évidents l'objet principal et ses actions clés. Conseils de design : * Placez le titre de l'objet et les actions principales vers le haut. * Utilisez une mise en page claire avec une colonne de contenu principale et un panneau latéral facultatif. * Regroupez les informations liées avec des titres ou des onglets. * Gardez les actions destructives visuellement distinctes et placées avec soin. Exemple de prompt : ```text theme={null} Améliore cette page de détail : - Déplace le titre principal et les actions principales en haut de la page - Utilise une mise en page à deux colonnes avec le contenu principal à gauche et les infos secondaires à droite - Regroupe les champs liés sous de petits titres - Rends les actions destructives clairement libellées et visuellement distinctes ``` Les formulaires portent de nombreux parcours clés. Ils doivent sembler simples et tolérants. Conseils de design : * Regroupez les champs liés sous des titres. * Utilisez une mise en page à une colonne pour la plupart des formulaires. * Montrez la progression pour les parcours longs en plusieurs étapes. * Placez les messages d'erreur près des champs et rendez-les clairs. * Utilisez des libellés clairs et du texte d'aide. Exemple de prompt : ```text theme={null} Repense ce formulaire pour plus de clarté : - Utilise une mise en page à une colonne - Regroupe les champs liés sous de courts titres - Ajoute des libellés clairs et du texte d'aide si besoin - Affiche des messages d'erreur en ligne sous chaque champ quand la validation échoue Utilise mon système de typographie et d'espacement existant. ``` *** ## Personnalisation avancée Quand vous voulez aller au-delà de ce que l'IA et le mode **Edit** offrent par défaut, vous pouvez apporter votre propre code et des packages npm. L'IA peut toujours vous aider à tout connecter et aligner. Vous pouvez utiliser des [packages npm](/Building-your-app/NPM-packages) pour apporter à votre application Base44 des animations plus riches, des effets visuels et des composants interactifs sans tout construire à partir de zéro. Les packages proviennent du registre npm public et s'installent via le chat IA dans l'éditeur de votre application, donc vous restez dans le même flux de travail. **Exemples orientés design :** * Bibliothèques d'animation (par exemple anime.js) pour ajouter des transitions, des effets de survol et des micro-interactions. * Bibliothèques de composants UI ou de mouvement pour gérer les modales, infobulles, carrousels ou parcours par étapes avec des modèles d'interaction intégrés. * Utilitaires de graphiques pour visualiser les données avec des couleurs, une typographie et des espacements personnalisés qui correspondent à votre application. * Bibliothèques de glisser-déposer ou de gestes pour rendre les mises en page plus tactiles et interactives. * Assistants de date et d'heure pour formater les horodatages et les plannings de façon adaptée à votre UI. **Une fois un package installé, vous pouvez utiliser le chat IA pour :** * Importer les bonnes fonctions ou les bons composants du package. * Les connecter à votre mise en page et à vos tokens de design existants (couleurs, typographie, espacement, rayon). * Ajuster les props, les variantes et le mouvement pour rester cohérent avec le reste de l'application. * Vérifier les détails d'accessibilité comme les états de focus, la navigation au clavier et les préférences de mouvement réduit. **Exemple de prompt** ```text theme={null} J'ai ajouté le package npm framer-motion. Refactore la grille de cartes existante pour que chaque carte s'anime au survol avec framer-motion : - Garde la mise en page et les textes actuels - Utilise les tokens de couleur, le rayon de bordure et la typographie existants - Respecte prefers-reduced-motion et garde des contours de focus clavier bien visibles ``` Tous les packages npm sont du code tiers. Base44 ne peut pas garantir leur qualité ou leur sécurité. Vérifiez donc le README du package, testez-le dans votre application et confirmez qu'il répond aux exigences de design et de performance de votre projet. Les applications Base44 utilisent souvent les utilitaires Tailwind CSS. L'IA peut vous aider à refactoriser des styles désordonnés en quelque chose de plus systématique. Tâches que vous pouvez confier à l'IA : * Remplacer les styles en ligne par des utilitaires Tailwind. * Extraire les motifs répétés en composants réutilisables. * Associer les valeurs de couleur aux tokens de design et à la configuration Tailwind. Exemple : ```text theme={null} Refactore ces composants pour utiliser des classes Tailwind cohérentes : - Remplace les attributs de style en ligne par des utilitaires Tailwind - Utilise les tokens de design pour les couleurs, l'espacement et la typographie - Documente les principales combinaisons de classes pour la navigation, les cartes et les boutons ``` Vous voulez parfois un contrôle précis sur la mise en page, l'animation ou la structure des composants. Vous pouvez [ouvrir les fichiers de code](/documentation/building-your-app/editing-code) directement et les modifier vous-même ou demander à l'IA de le faire. Modifications de design courantes : * Mettre à jour `Layout.js` pour changer les conteneurs globaux, les en-têtes ou les pieds de page. * Ajuster les fournisseurs de thème ou le contexte. * Changer la composition des composants et les props qu'ils acceptent. Pour modifier le code : 1. Ouvrez le fichier concerné. 2. Collez un extrait de code dans le chat IA. 3. Demandez un changement, puis vérifiez le diff ou l'aperçu. Exemple : ```text theme={null} Voici mon composant Layout.js. Ajuste-le pour que : - L'en-tête reste collé au défilement - Le contenu principal ait une largeur maximale et soit centré sur les grands écrans - La couleur d'arrière-plan utilise le token surface de mon système de design Explique ce que tu as changé dans des commentaires. ``` Les choix de design influencent la [performance](/Performance-and-SEO/App-performance), surtout quand vous introduisez des packages et des visuels lourds. Gardez en tête : * Utilisez des tailles d'image optimisées plutôt que d'énormes ressources d'arrière-plan. * Évitez de charger beaucoup d'animations lourdes ou de grandes bibliothèques au chargement initial. * Chargez en différé les sections rarement utilisées, comme les rapports détaillés ou les filtres avancés. * Réutilisez des composants partagés au lieu de nombreuses copies quasi identiques. Vous pouvez demander à l'IA un examen axé sur la performance : ```text theme={null} Examine le design de cette application sous l'angle de la performance : - Identifie les éléments visuels ou de code lourds qui pourraient ralentir le chargement - Suggère des alternatives plus légères qui gardent le même rendu global - Propose des endroits précis où le chargement différé ou le découpage de code aiderait ``` *** ## Accessibilité L'accessibilité fait partie d'un bon design. Elle aide plus de personnes à utiliser votre application confortablement et peut améliorer la clarté pour tout le monde. Les choix de couleurs ont un impact direct sur la lisibilité. Bonnes pratiques : * Utilisez un contraste fort entre le texte et l'arrière-plan. * Évitez d'utiliser la couleur seule pour transmettre un sens. * Gardez les éléments interactifs comme les boutons et les liens bien visibles dans tous les états. * Vérifiez les modes clair et sombre si vous prenez en charge des thèmes. Exemple de prompt : ```text theme={null} Audite cette application pour le contraste des couleurs : - Identifie les textes ou icônes avec un faible contraste par rapport à leur arrière-plan - Renforce le contraste en gardant globalement la même palette - Assure-toi que les boutons principaux et les liens sont clairement identifiables Décris les principales corrections appliquées. ``` Un texte lisible ne se résume pas au choix de la police. Bonnes pratiques : * Utilisez des tailles de police confortables sur tous les appareils. * Utilisez une hauteur de ligne suffisante pour les paragraphes. * Évitez les polices très fines sur des arrière-plans clairs. * Gardez une longueur de ligne raisonnable, surtout sur les écrans larges. Exemple de prompt : ```text theme={null} Améliore la lisibilité du texte : - Augmente légèrement la taille de base du texte courant - Augmente la hauteur de ligne des paragraphes - Assure-toi que les titres sont nettement plus grands que le texte courant - Réduis les lignes très longues sur les écrans larges ``` Les utilisateurs doivent pouvoir naviguer dans votre application au clavier et voir où ils se trouvent. Bonnes pratiques : * Vérifiez que Tab parcourt les éléments interactifs dans un ordre logique. * Assurez-vous que les styles de focus sont visibles et distincts. * Évitez les pièges de clavier où le focus ne peut plus bouger. Exemple de prompt : ```text theme={null} Améliore l'accessibilité au clavier et le focus : - Assure-toi que tous les éléments interactifs sont accessibles avec Tab - Ajoute des styles de focus visibles aux boutons, liens et champs de formulaire - Corrige les problèmes d'ordre de focus sur cette page Décris les changements majeurs effectués. ``` Le mouvement peut aider ou nuire. Certaines personnes en préfèrent moins. Bonnes pratiques : * Respectez les préférences de mouvement réduit. * Évitez les clignotements rapides ou les scintillements forts. * Utilisez des animations subtiles et utiles plutôt qu'un mouvement constant. Exemple de prompt : ```text theme={null} Ajuste les animations pour l'accessibilité : - Respecte la préférence de mouvement réduit de l'utilisateur - Supprime ou simplifie les grandes animations continues - Garde seulement des mouvements courts et subtils qui aident la compréhension ``` Un langage clair et des descriptions aident tout le monde, y compris les personnes utilisant des technologies d'assistance. Bonnes pratiques : * Utilisez des libellés clairs et descriptifs pour les boutons et les liens. * Fournissez un texte alternatif pertinent pour les images importantes. * Utilisez des titres pour structurer le contenu. * Évitez les textes de lien vagues comme « cliquez ici ». Exemple de prompt : ```text theme={null} Améliore l'accessibilité des libellés et du texte alternatif : - Rends les libellés de boutons et de liens plus descriptifs si besoin - Ajoute ou améliore le texte alternatif des images importantes - Assure-toi que les titres suivent une structure claire Garde le même ton et la même voix de marque. ``` *** ## FAQ Cliquez sur une question ci-dessous pour en savoir plus sur les fondations du design et la mise en page. Concevez séparément pour mobile, tablette et ordinateur, puis vérifiez comment vos mises en page s'adaptent. Suivez ces recommandations quand vous concevez dans Base44 : * Mobile : utilisez une seule colonne verticale, gardez une action principale claire par écran et prévoyez des zones de toucher grandes et bien espacées. Gardez les textes courts pour éviter le zoom. * Tablette : traitez la tablette comme un hybride. Vous pouvez utiliser des menus latéraux ou des mises en page divisées, mais gardez des boutons adaptés au tactile et évitez les tables très petites ou les contrôles denses. * Ordinateur : profitez de la largeur supplémentaire pour des mises en page multi-colonnes et des barres latérales. Vous pouvez ajouter des effets de survol, mais toute action importante doit aussi fonctionner au clic ou au toucher. * Tous les appareils : utilisez des tailles de police lisibles, évitez le défilement horizontal et laissez les éléments s'empiler au lieu de se chevaucher quand l'espace manque. Évitez les hauteurs fixes qui coupent le contenu. Vous pouvez aussi demander à l'IA d'appliquer des règles responsives, par exemple : ```text theme={null} Rends cette mise en page responsive pour mobile, tablette et ordinateur. Évite le défilement horizontal et garde les actions principales visibles sans défilement excessif. ``` Les choix de design influencent directement la vitesse de chargement et le ressenti de votre application. Quand vous concevez dans Base44, gardez ces recommandations en tête : * Utilisez des tailles d'image optimisées pour que les grandes ressources ne ralentissent pas le chargement initial. Préférez les formats compressés et évitez de téléverser des images beaucoup plus grandes que leur taille d'affichage. * Limitez les animations lourdes et les effets complexes, surtout dans les applications très mobiles. Les transitions courtes et simples conviennent, mais évitez le mouvement constant ou les grands arrière-plans animés. * Gardez des mises en page propres et ciblées. Moins de couches, de superpositions et de composants imbriqués signifie souvent un rendu plus rapide, surtout sur les appareils modestes. * Réutilisez des composants au lieu de créer beaucoup de versions légèrement différentes. Les composants partagés sont plus faciles à mettre en cache et à maintenir. * Évitez de tout charger d'un coup. Quand c'est possible, chargez plus tard le contenu non essentiel, par exemple les sections secondaires, les longues listes ou les panneaux rarement utilisés. * Faites attention aux intégrations tierces comme les cartes, les lecteurs vidéo et les widgets. N'en incluez que là où elles apportent une vraie valeur, et évitez d'empiler de nombreuses intégrations sur un même écran. Cette page a été traduite par IA. Pour les informations les plus précises et à jour, consultez la [version anglaise](/).