Ce guide aborde les conseils de conception pour les bannières principales et les bannières d’espace en design Web adaptatif, en mettant l’accent sur les zones visibles clés et les espaces sécurisés pour le texte et les graphiques. Il recommande de centrer les sujets, de limiter le texte au minimum et d’exclure les photos de personnes. Les conseils de conception de l’écran de connexion incluent d’éviter le texte sur les bords et de prendre en compte la surface occupée par la boîte de connexion. Les types de fichiers pris en charge sont PNG, JPG, JPEG, JFIF ou GIF de moins de 3 Mo. Les vues mobiles affichent la partie centrale des designs.
Ce guide s'applique à la fois au design de la bannière principale et à celui de la bannière spatiale. La conception de sites Web réactifs peut être difficile. Les dimensions incluses devraient donc constituer un guide pratique pour t'aider à utiliser du texte ou tout autre élément graphique clé que tu souhaites voir à tout moment sur le design de ta bannière.
Tu peux utiliser les dimensions incluses pour créer ton design, ou pour le rendre encore plus facile, nous avons inclus trois exemples qui devraient être utiles dans cet article.
Bannière principale (vue sur ordinateur)
Design des bannières: nous recommandons de minimiser la quantité de texte incluse et d'éviter autant que possible de prendre des photos de personnes.
Type de fichier de bannière: PNG, JPG, JPEG, JFIF ou GIF < 3 Mo
Dimensions : 2 241 x 474 px
Espace sécurisé pour le texte/les images clés : 895 px x 474 px centré
Consulte cet article pour savoir comment modifier la bannière principale !
Design de bannière spatiale — Ce qu'il ne faut pas faire avec &
Comme l'image de la bannière spatiale est visible à la fois sur mobile et sur ordinateur, il est important de s'assurer que le design fonctionne correctement sur les deux appareils.
Sur ordinateur, une plus grande partie de l'image de la bannière est visible. Cependant, il y a un espace sécurisé, comme illustré ci-dessous, dont la visibilité est garantie sur l'application mobile.
Les exemples suivants montrent comment utiliser efficacement cet espace sécurisé, en veillant à toujours placer le point central de l'image de la bannière au centre.
Exemple 1 : Illustration vectorielle et éléments
Garde le point focal du design au centre de la bannière, et non à gauche ou à droite, afin de garantir que l’espace sécurisé soit occupé par la partie la plus importante du design.
Exemple 2 - Photographie
Il est important de sélectionner des photographies appropriées pour une image de type bannière d’espace. Choisis toujours des photos centrées sur le sujet principal et sans trop de grossissement, sinon, sur mobile, l’image risque d’être difficile à distinguer.
Exemple 3 - Motif
Un motif est une valeur sûre pour la conception d’une bannière d’espace, à condition que les éléments qui composent le motif soient petits et denses.
Si les éléments sont trop grands, le motif ne s'affichera pas.
Comme illustré ci-dessous, la première image est l'image que nous recommandons.
Bannière spatiale (vue sur bureau)
Bannière d'espace (vue mobile)
Guide de conception de l'écran de connexion
Remarque : la page de connexion n’est visible que pour les utilisateurs qui accèdent à Workvivo via une authentification par mot de passe. Tout utilisateur accédant via SSO verra la page de connexion SSO de son organisation au lieu de l’écran de connexion Workvivo.
Conseils pour envisager une nouvelle image de connexion :
-
Zone visible sur ordinateur de bureau : cette zone peut changer légèrement en fonction de la taille de l'écran
-
Zone visible sur mobile : la section centrale de l’image fournie sera visible sur mobile
-
Types de fichiers pris en charge : PNG, JPG
Création réactive de la page de connexion
La conception de sites Web réactifs peut être difficile. Les dimensions présentées ici devraient donc te servir de guide pour t'aider à utiliser du texte ou tout autre élément graphique clé que tu souhaites voir à tout moment sur le design de ta bannière.
Nous recommandons également d’éviter de mettre du texte ou des éléments graphiques essentiels sur les côtés de la création.
Astuce :
- Une partie de l'image sera recouverte par le champ de connexion, alors garde cela à l'esprit
- Pour des résultats optimaux, évite d'utiliser du texte dans ton design
- Zone visible sur l'écran 24 " : 1500 x 750 pixels
- Zone cachée : 1 500 x 125 pixels
Design de réponse de la page de connexion (affichage mobile)
En tant que site web réactif, fais attention lorsque tu utilises du texte ou tout autre élément graphique clé que tu souhaites voir apparaître à tout moment sur le design de ta bannière. L'écran du portable utilise les mêmes illustrations que l'écran du bureau et affiche la partie centrale de la création.
Encore une fois, nous recommandons des arrière-plans génériques et sans texte.
Astuce :
- Une partie de l'image sera recouverte par le champ de connexion, alors garde cela à l'esprit
- Pour des résultats optimaux, évite d'utiliser du texte dans ton design
- Zone visible : 545 x 971 pixels au centre