cg_site-web_visuels-site-mariage_couv

Site web pour mariage

#graphisme, #webdesign, #développement, #gestion de projet

Mai 2017

 

Voici un article sur le site web de mariage que j’ai réalisé pour mon propre usage et celui de mon entourage.

Pratique de plus en plus courante, le site web de mariage est idéal pour donner une touche de modernité à la communication de l’événement.

En effet, il offre  aux invités la possibilité d’accéder aux informations concernant le jour J par l’intermédiaire d’une interface digitale consultable de [quasiment] n’importe où, en complément du faire-part papier.

J’ai donc mis à contribution mes connaissances pour mettre en place notre site web.

 

Aperçu de la page d'accueil sur différents écrans - Site web de mariage
Aperçu de la page d’accueil sur différents écrans – Site web de mariage

 

2. Fonctionnalités

L’interface devait apporter des informations sur 4 points qui nous paraissaient essentiels, à savoir : pouvoir confirmer sa présence, avoir accès aux informations pratiques des temps forts (lieux et horaires de la cérémonie et du vin d’honneur notamment), trouver où dormir et consulter la liste de mariage.

2.1 Confirmer sa présence

La page web est composée de deux parties : la réponse par courrier (avec les adresses postales des futurs mariés et de leurs parents respectifs) d’une part, et la réponse par formulaire de contact d’autre part.

Éléments de la page Confirmer sa présence : pictogrammes, aperçu sur écran d'ordinateur et maquette - Site web de mariage
Éléments de la page “Confirmer sa présence” : pictogrammes, aperçu sur écran d’ordinateur et maquette – Site web de mariage

 

2.2 Se rendre à l’événement

Sur cette page web, on peut retrouver les informations relatives à la cérémonie d’une part, et celles concernant le vin d’honneur, d’autre part (notamment les horaires, les adresses des lieux et les plans Google Maps pour se repérer).

Éléments de la page Se rendre à l'événement : pictogrammes, aperçu sur écran d'ordinateur et maquette - site web de mariage
Éléments de la page “Se rendre à l’événement” : pictogrammes, aperçu sur écran d’ordinateur et maquette – site web de mariage

 

2.3 Se loger dans les environs

Cette page web est conçue pour répertorier des suggestions d’hôtels et de gîtes situés dans les environs du lieu de la réception, afin que les invités puissent trouver où dormir après la soirée.

Éléments de la page Se loger dans les environs : pictogramme, aperçu sur écran d'ordinateur et maquette - site web de mariage
Éléments de la page “Se loger dans les environs” : pictogramme, aperçu sur écran d’ordinateur et maquette – site web de mariage

 

2.4 Liste de mariage

Enfin, la page web consacrée au cadeau de mariage. Dans le cas présent, nous avons deux possibilités de participation, à savoir : la participation au voyage de noces d’une part, et la participation à la liste établie dans un magasin de vaisselle & de décoration intérieure d’autre part. La liste est consultable via un lien externe qui renvoie vers la plateforme de la boutique.

Éléments de la page Liste de mariage : pictogrammes, aperçu sur écran d'ordinateur et maquette - site web de mariage
Éléments de la page “Liste de mariage” : pictogrammes, aperçu sur écran d’ordinateur et maquette – site web de mariage

 

 

3. Les petits plus techniques

3.1 Décompte avant le jour J

J’ai intégré un décompte avant le jour J dans le haut de la page, qui indique le nombre de jours restants avant le grand événement.

Aperçu du décompte - Site web de mariage
Aperçu du décompte – Site web de mariage

 

3.2 Accès restreint

Pour des raisons de confidentialité, le site web n’est pas accessible publiquement. Pour pouvoir voir le contenu, il faut renseigner un identifiant et un mot de passe qui ont été transmis aux invités avec le faire-part papier.

Aperçu de la fenêtre d'accès restreint - Site web de mariage
Aperçu de la fenêtre d’accès restreint – Site web de mariage

 

3.3 Menu dit “Sticky”

Le menu reste “collé” en haut de la fenêtre du navigateur lorsque l’utilisateur fait défiler le contenu. Il peut ainsi accéder aux rubriques très facilement, quel que soit l’endroit où il se trouve sur la page web.

Aperçu du menu sticky sur grands écrans - Site web de mariage
Aperçu du menu sticky sur grands écrans – Site web de mariage
Aperçu du menu déplié avec les rubriques sur petits et grands écrans - Site web de mariage
Aperçu du menu déplié avec les rubriques sur petits et grands écrans – Site web de mariage

 

4. L’après mariage

Lorsque le jour J est passé, j’ai ajouté une rubrique supplémentaire “Photos du jour J” qui, comme son nom l’indique, permet de centraliser les photos prises pendant l’événement.

Cette nouvelle rubrique est composée de deux parties : un bloc d’accès à la galerie de la photographe professionnelle d’une part,et un bloc avec les photos classées sous forme d’albums, selon les personnes auteures des clichés, d’autre part.

On peut très bien envisager de faire la même chose pour des vidéos.

Éléments de la page Photos du jour J : pictogrammes, aperçu sur écran d'ordinateur et maquette - site web de mariage
Éléments de la page “Photos du jour J” : pictogrammes, aperçu sur écran d’ordinateur et maquette – site web de mariage
Éléments de la page Photos du jour J - exemple d'album photos : pictogramme, aperçu sur écran d'ordinateur et maquette - site web de mariage
Éléments de la page “Photos du jour J – exemple d’album photos” : pictogramme, aperçu sur écran d’ordinateur et maquette – site web de mariage

Note : pour des raisons de confidentialité, la majorité des photos initiales ont été remplacées par des photos provenant de la plateforme Pixabay. Les noms et informations non floutés sont fictives.

 

Partager sur :