
Guide de style du site Web
mis à jour le 25/10/12
Table des matières

01. Logo
Logo principal

Logo principal
Blanc sur fond uni

Logo principal
Noir

02. Typographie
Police de caractères de navigation
Montserrat Régulier #273d3b
Polices utilisées pour l'image principale et le titre
H1 – Écran Bely #f26b39
H2 – Écran Bely #3e9976
H1/Héros/Titre
H2/Sous-titre/Titres de bloc
H3 Titre
H4 Titre
Titre H5
H6 Titre
Sous-titres du blog
Montserrat Bold #273d3b
Sous-titre paragraphe onsectetur adipiscing elit.
Titres de la section Blog
Affichage Bely #3e9976
Titres des sections
Caractère typographique
Montserrat Régulier #273d3b
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis diam enim, a blandit ex vestibulum vel. Pellentesque nec dui id nisi feugiat pharetra ut et justo. Nam pretium magna ac rhoncus placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec lobortis diam massa, ut egestas nisi iaculis nec.
03. Couleurs
couleurs primaires

Mandarine #F26B39

Emerald Shores #3E9976

Marée de minuit #273D3B

Coquillage #F9F6F0
COULEURS SECONDAIRES

Lever de soleil doré #FBC731

Sables coralliens #FABDB6

Sérénade écume de mer #85C9AF

Gris acier #707070
04. Mise en page – Page d'accueil
La page d'accueil est organisée de la manière suivante :
- Barre de navigation
- Image ou vidéo principale, pouvant comporter ou non un texte superposé
- Titre
- Sous-titre
- Texte d'introduction
- Découvrez nos villes
- Lien vers le module carte
- Saveurs du moment – Contenu sélectionné
- Les expériences de Palm Beaches
- Signature Events
- Module Offres
- Tendances actuelles – derniers contenus
- Module de carte interactive
- Module « Conseils des habitants »
- Contenu sponsorisé
- Module réseaux sociaux
- Bloc de conversion – Moteur de réservation d'hébergement, inscription à la newsletter et au guide du visiteur
- Pied de page

05. Mise en page – Pages de premier niveau

06. Mise en page – Pages de listes

07. Blog et pages générales

08. Tailles des images – Images principales
Tailles des images de bureau
Image complète : 1900 x 1000
Zone de vie : 1400 x 850
Toutes les images des héros doivent être 1900 × 1000, Cependant, en raison de la barre de navigation et des paumes, la zone visible (sujet de la photo) est limitée à 1400 × 850 avec 150 px de l'espace au-dessus de la zone active. Si vous avez une photo dont le sujet doit être visible (voir la page d'accueil de la collection), assurez-vous que celui-ci s'inscrit dans la zone active de 1400 × 850. Voir le schéma à droite.
IMAGES DES AFFICHES : 1600 x 900
Les images d'affiche sont utilisées comme espaces réservés pendant le chargement des vidéos. En général, elles ne sont visibles que pendant une seconde ou moins. Il est fortement recommandé d'utiliser la première image de la vidéo afin d'assurer une transition fluide après le chargement et le démarrage de la vidéo.
IMAGES DU BLOG HERO : 1900 x 1000
(Les images principales ne sont pas obligatoires pour chaque article de blog, mais elles sont recommandées. Si aucune image principale n'est fournie, une image de remplacement représentant une aquarelle sera utilisée.)


Tailles des images mobiles
Image complète : 900 x 1600
Zone de vie : 700 x 1300
Toutes les images des héros doivent être 900 × 1600, avec une zone sécurisée (sujet de la photo) limitée à 700 × 1300 avec 135 px de l'espace au-dessus et 165 px de l'espace sous la zone active. Si vous avez une photo contenant un sujet ou du texte (voir la page d'accueil Love), assurez-vous que le sujet s'inscrit dans la zone active de 700 × 1300. Voir le schéma à droite.
IMAGES DES AFFICHES : 900 x 1600
Les images d'affiche sont utilisées comme espaces réservés pendant le chargement des vidéos. En général, elles ne sont visibles que pendant une seconde ou moins. Il est fortement recommandé d'utiliser la première image de la vidéo afin d'assurer une transition fluide après le chargement et le démarrage de la vidéo.
IMAGES DU BLOG HERO : 900 x 1600
(Les images principales ne sont pas obligatoires pour chaque article de blog, mais elles sont recommandées. Si aucune image principale n'est fournie, une image de remplacement représentant une aquarelle sera utilisée.)


09. Tailles des images – Pages de premier niveau
IMAGES DE HÉROS: 1900 x 1000
CONTENU PHARE DE HAUT NIVEAU
HORIZONTAL : 950 x 500
VERTICAL : 500 x 850
PAGE D'ACCUEIL ÉVÉNEMENT ET À LA UNE
LISTE DES ARCHES : 450 x 800
GRILLES DE MAÇONNERIE DE NIVEAU SUPÉRIEUR
Les images en orientation paysage sont fortement recommandées. Veuillez consulter l'exemple à droite.
1 × 1,5 : 700 x 900
2 x 0,5 : 1400 x 450
1x.5 : 700 x 450
1×1 : 700 x 700
ACTUALITÉS LES PLUS POPULAIRES DU MOMENT :
500 x 650
PUBLICITÉS SPONSORISÉES: 600 cm x 350 cm

10. Tailles des images – Corps, listes et relations publiques
IMAGES DU CONTENU EN VEDETTE
Image horizontale : 950 x 500
Image verticale : 500 x 850
Veuillez tenir compte de l'orientation de l'image lorsque vous sélectionnez une image. Veuillez consulter l'exemple ci-dessous.

BLOG CORPS/IMAGES EN LIGNE : 1000 x 700
Les images en orientation paysage sont fortement recommandées. Veuillez consulter l'exemple ci-dessous.

GRILLE ET DÉTAILS DES ANNONCES, ET IMAGES DE LA PAGE RELATIONS PUBLIQUES :
1 150 w x 700 h
Les images en orientation paysage sont fortement recommandées. Veuillez consulter l'exemple ci-dessous.


11. Tailles des images – Publicités
IMAGES SPONSORISÉES/PUBLICITAIRES : 600 x 350
Les images en orientation paysage sont fortement recommandées. Veuillez consulter l'exemple ci-dessous. Veuillez consulter l'exemple ci-dessus.
