À propos de l'utilisation
En choisissant des couleurs, des images et des boutons d'arrière-plan, vous conférez à des pages web particulières l'esthétique particulière de RPTU et, plus important encore, vous aidez le visiteur à s'orienter sur la page.
Les couleurs d'arrière-plan font ressortir les contenus individuels. Les images d'arrière-plan créent en outre une sorte d'ambiance d'arrière-plan.
Mais toutes les pages et toutes les zones de la page n'ont pas besoin d'un arrière-plan supplémentaire. Les textes sont bien lisibles et ne dérangent pas sur le fond gris très clair de l'ensemble du site.
Le bouton unique ( !) sur une page ou dans une grande zone de la page sert à inviter le visiteur de la page à cliquer ici et à suivre nos recommandations. Il peut s'agir de la visite d'une page web spéciale (par ex. aperçu de toutes/vos filières d'études) ou d'un lien vers un formulaire d'inscription pour un événement particulier. (Recommandation : image avec perturbateur)
À propos des couleurs d'arrière-plan
Vous pouvez donner une couleur de fond à la plupart des éléments de contenu. Vous trouverez le choix de la couleur dans l'onglet "Apparence" de l'élément de contenu.
Une couleur d'arrière-plan sert à mettre en évidence un contenu sur une page pour un thème particulier.
Si les contenus environnants sont sans couleur d'arrière-plan, cette mise en évidence a un effet particulier. Au contraire, l'effet de mise en valeur est perdu si les couleurs d'arrière-plan sont utilisées partout sur une page. De plus, cela donne l'impression d'une page "en damier". Cela ne correspond pas à l'esthétique souhaitée pour le design RPTU actuel.
La mise en évidence par une couleur d'arrière-plan est d'autant plus forte si vous sélectionnez l'option"pleine largeur de fenêtre avec contenu centré" dans le paramètre "Cadre". Cela permet également de diviser verticalement une page en blocs thématiques . Cela est idéal pour les pages d'accueil ou d'aperçu.
Grâce à la couleur d'arrière-plan standard très claire, il n'est plus nécessaire de donner un arrière-plan blanc aux éléments de contenu ! Le fond blanc est un vestige techniquement nécessaire des anciens templates.
À propos des fonds d'écran
Vous pouvez également donner une image de fond à la plupart des éléments de contenu et les masquer avec une couleur de fond. Vous trouverez cette possibilité dans l'onglet "Apparence" de l'élément de contenu.
Une image d'arrière-plan met en valeur le contenu et peut/doit véhiculer une ambiance. L'image d'arrière-plan ne sert pas à transporter des contenus.
Utilisation de l'image :
- Mise en valeur du contenu avec une ambiance
- Le contenu d'une image d'arrière-plan ne doit pas être important.
- La page est comprise même sans image de fond.
- L'image et la couleur de fond doivent être choisies de telle sorte qu'il y ait un grand contraste entre l'écriture et l'image pour toutes les tailles d'écran !(Accessibilité)
- Pas :
pour éviter le fond gris clair
Réglage particulier Effet Parralax :
Si vous utilisez le réglage "Activer l'effet parallaxe", l'image de fond est fixe et le contenu défile sur l'image.
Cet effet capte fortement l'attention du visiteur de la page. Malgré cela, l'image en mouvement ne peut pas être saisie complètement et les textes sont difficiles à saisir.
Utilisez cet effet avec parcimonie et uniquement pour les informations qui peuvent être ignorées.
Dans ce cas, il est encore plus important que le contraste entre le texte et l'image soit suffisamment important sur toute la surface de l'image, quelle que soit la taille de l'écran.
À propos de Buttons
Un bouton libre incite le visiteur à cliquer, ce qui ne fonctionne en général que s'il n'y a pas d'autres mises en évidence fortes dans le champ visuel du visiteur. Habilement placé, il permet de guider le visiteur sur plusieurs pages.
Le design RPTU met à disposition deux variantes de boutons
- Bouton primaire rempli en
- noir pour un fond clair
- blanc en cas de fond sombre
- Bouton secondaire avec
- bordure noire, surface incolore et écriture noire sur fond clair
- contour blanc, surface incolore et écriture blanche sur fond clair
Utilisation
- un maximum de deux boutons dans le champ visuel du visiteur de la page
- si deux boutons sont utilisés, le bouton primaire et le bouton secondaire sont utilisés - il faut partir du principe que le bouton primaire est cliqué de préférence
- Les boutons ne remplacent pas une navigation visible. Utilisez plutôt l'élément de contenu Menu (la présentation sera adaptée).
Mise en évidence par la couleur de fond en haut
Dans ce guide, cette page est elle-même l'aperçu en direct.
Dans la partie supérieure, le visiteur de la page est attiré vers son contenu par le fond gris. Il est important pour nous de mettre le lecteur dans l'ambiance et de réfléchir à l'utilisation des couleurs. Nous considérons que ces informations sont plus importantes que les instructions en bas.
La couleur de la mise en évidence est neutre, grise. L'effet recherché ici ne nécessite pas de couleurs vives.
Mise en valeur par la couleur de fond avec l'image ci-dessous
Nous souhaitons utiliser cette représentation sur toutes les pages Typo3 lorsqu'il s'agit de l'auto-apprentissage. La zone vert foncé se distingue clairement et sert ici d'interface utilisateur pour l'auto-apprentissage. Le bouton primaire mène à l'étape suivante. Le bouton secondaire mène à l'aperçu.
Étape 1 : Choisir la couleur de fond
Pour définir une couleur d'arrière-plan pour l'élément de contenu, allez d'abord dans l'onglet "Apparence". Là, dans la zone "Couleur d'arrière-plan", sélectionnez la couleur de cadre souhaitée.
Si vous choisissez une couleur d'arrière-plan claire, le texte de l'élément de contenu devient noir. Si vous choisissez une couleur d'arrière-plan foncée, le texte sera blanc.
Si vous sélectionnez "Toute la largeur avec contenu centré" sous "Cadre" dans l'onglet Apparence, le cadre s'étend sur toute la largeur de la fenêtre.
Important : veuillez n'utiliser cette option que pour mettre en évidence des éléments particulièrement importants. Les couleurs vives attirent le regard des utilisateurs* de manière ciblée. Trop de mises en évidence peuvent avoir l'effet inverse.
Étape 2 : Sélectionner l'image d'arrière-plan
Pour définir une image d'arrière-plan pour l'élément de contenu, allez d'abord dans l'onglet "Apparence". Cliquez ensuite sur "Ajouter une image" dans la zone "Image d'arrière-plan". Vous serez ensuite redirigé vers la liste de fichiers où vous pourrez sélectionner l'image souhaitée. Vous pouvez également intégrer directement un fichier local en cliquant sur "Sélectionner un fichier et le télécharger".
Ensuite, vous pouvez encore régler différents effets et filtres pour l'image d'arrière-plan dans la zone "Options pour les images d'arrière-plan". Par exemple, vous pouvez vous assurer que le texte de l'élément reste bien lisible grâce à l'"effet de décoloration". En outre, l'effet de décoloration permet de combiner la couleur de fond et l'image de fond.
Si vous sélectionnez "Pleine largeur avec contenu centré" dans l'onglet "Apparence", l'image d'arrière-plan s'étend sur toute la largeur de la fenêtre.
Il est recommandé d'avoir une largeur de pixels de 1900px pour la pleine largeur de la fenêtre, de 1400px pour une largeur de page de 100 % en vue de bureau. Et au moins 750 px pour une largeur de page de 50 % dans l'affichage du bureau. Ainsi, les images sont suffisamment grandes pour toutes les vues possibles.
Veuillez noter que si vous choisissez l'option "Sélectionner et télécharger le fichier", le fichier multimédia sera enregistré dans le dossier "user_upload" de la liste des fichiers. Cela peut rendre plus difficile pour vous et pour les autres rédacteurs* de trouver ce fichier dans la liste des fichiers.
Important : veuillez n'utiliser cette option que pour mettre en évidence des éléments particulièrement importants. Les images d'arrière-plan attirent le regard des utilisateurs de manière ciblée. Un trop grand nombre de mises en évidence peut avoir l'effet inverse.
Étape 3 Ajouter des boutons
Les boutons sont créés directement dans le RTE :
- créez un lien normal sur une ligne séparée,
- cliquez dans le RTE dans le texte lié et
- choisissez en haut à gauche sous "Style" le bouton souhaité.
A ce stade, vous êtes vous-même responsable du choix de la couleur du bouton, noir ou blanc, qui offre un rapport de contraste suffisant avec l'arrière-plan (obligation légale d'accessibilité).
Les boutons entièrement remplis doivent être considérés comme des boutons primaires. Un seul d'entre eux doit se trouver dans le champ visuel d'un visiteur de la page. Ils servent d'invitation à l'action. Les boutons entourés d'un cadre sont à considérer comme des boutons secondaires. Ils n'attirent pas autant l'attention, mais doivent être utilisés avec parcimonie.
Auto-apprentissage TYPO3
Exercice
- Créez un élément de contenu Texte/Média.
- Remplissez l'élément de contenu avec un titre et du texte.
- Jouez avec les possibilités d'attribution de couleurs et d'images d'arrière-plan.
- Liez ces instructions à l'aide d'un bouton.
Observez-vous maintenant en tant que visiteur* du site et réfléchissez pour vous-même :
- Choisissez quelques pages du site web central de la RPTU.
- Où votre attention a-t-elle été attirée ?
- Si elle a été attirée, qu'est-ce qui a attiré votre attention ?
- Y a-t-il des couleurs de fond et/ou des images sur la page ? Si oui, aident-elles à trouver l'endroit le plus important de la page ? Permettent-elles de s'orienter sur la page ? Reconnaissez-vous une structure de contenu ?
- Savez-vous ce qui va suivre ? Où faut-il cliquer ?