Les wireframes sont disponibles dans le dossier wireframes.
- Avoir des dates,
- Présenter le groupe,
- Montrer les dates aux utilisateurs pour qu'ils puissent voir PanKart en concert,
- Montrer les dernières vidéos de PanKart,
- Partager les actualités de PanKart.
- Partager les opinions de PanKart sur des sujets donnés.
- Réserver des dates,
- Voir des futures dates du groupe, les nouvelles sorties musicales découvrir le groupe et voir les actualités,
- Découvirir pankart, ses valeurs et son histoire.
- L'âge est variable, mais plutôt un public entre 20 et 30 ans qui peut être : amateur de musique engagée, concerné par les valeurs défendues par le groupe et les fans du groupe.
- Entreprise ou client qui souhaite réserver une date pour le groupe.
Site immersif, avec une identité marquée et les valeurs du groupe mises en avant.
L'utilisateur en apprend plus sur le groupe il pourra en savoir plus s'il veut. S’il est intéressé, il lui sera proposé de visualiser les prochaines date où PanKart joue et donc de réserver une place pour cet évènement ou bien de réserver directement via le lien Gigstarter. Si i l n'est pas intéressé par l'agenda, il découvrira plus en profondeur le groupe.
Menu de navigation:
- Chaque page y est répertoriée,
- Le logo fait office de lien vers la page d'accueil,
- Animation au survol d'un lien, ligne se dispose en dessous
- Sprite SVG si possible
- Bouton pour couper le son.
Pied-de-page :
- liste de lien du site,
- Lien vers les réseaux sociaux,
- Privacy policy
Objectif:
Présenter le groupe, inciter les utilisateurs à réserver une date ou à acheter des places pour le groupe. Garder aussi l'attention.
Contenu :
Section Présentation :
- Punchline aléatoire :
- Nom de la punchline,
- bouton pour jouer l'extrait si il existe.
- Titre PanKart;
- Description brève;
- Photo représentant le groupe;
- Call to action pour réserver une date et vers l'agenda;
Section dates :
- Titre de la section,
- Date,
- Titre,
- Call to action vers la billetterie.
- Call to action vers "voir d'autres dates" qui redirige vers l'agenda.
Section dernier album/titre :
- Titre de la section;
- Nom de l'album;
- Call to action qui permet de l'écouter;
- Call to action qui permet de l'acheter;
Section actualité "fraîche"
- Dernières actualités du groupe;
- Liens vers la page actualités.
Objectif:
Partager aux utilisateurs des sujets divers montrer comment PanKart se positionne par rapport à ce sujet
Contenu :
- Liste d'articles style Twitter avec un style différent si c'est un coup de gueule ou un coup de cœur avec comme éléments:
- Titre,
- date,
- Image éventuelle,
- Contenu,
- Bouton j'aime.
Objectif: Partager aux utilisateurs du site les articles dans lesquels PanKart est apparu, de signaler la sortie des albums et aussi d'annoncer des choses à sa communauté.
Contenu : Liste d'articles style Twitter :
- Titre de l'article,
- Date
- Lien vers cet article,
- Réaction de PanKart par rapport à cet article,
- Bouton j'aime.
Objectif: Décrire l'histoire du groupe et celle de ses membres.
Contenu : Section biographie:
- Présentation du groupe avec plein de photos;
- Call to action vers Gigstarter;
- Call to action Pour écouter le groupe;
- Photos, vidéos;
Section biographie des membres:
- Liste des membres du groupe, avec son rôle et un lien qui dirige sur la page individuelle du membre
Section Présentation:
- Nom et rôle dans le groupe;
- Petite icone qui représente son/ses instruments;
- Texte continu;
- Images qui ponctuent le texte;
Section Rappel des autres membres:
- Un texte qui dit "voir aussi",
- Liste des autres membres.
Objectif:
Faire découvrir aux utilisateurs les titres de et les albums de pankart.
Contenu:
Section discographie:
- Nom de l'album,
- Date de sortie
- pochette de cet album,
- texte descriptif ou pas (au choix),
- Lien pour visualiser l'album
Section présentation générale:
- Nom de l'album,
- Pochette de l'album,
- Date de sortie,
- liste des chansons que composent l'album,
Section présentation de chansons:
- Le titre des chansons,
- Lien "en savoir plus",
- Bouton vers la page parole de la chanson
Bouton retour à la discographie
Objectif: Montrer les différentes collections d'images du groupe aux utilisateurs.
Contenu : Section photos :
- Triées par album, au clique on voit la collection des photos:
- Vignette principale,
- Nom de l'album.
Section Vidéos :
- Triées par collection, au clique on voit la collection des photos:
- Vignette principale au clique lien YouTube,
- Nom de la collection.
- Fil d'Ariane pour revenir en arrière
- Titre de l'album
- liste des photo
- Fil d'Ariane pour revenir en arrière
- Titre de la collection
- liste des vidéos
Objectif: Inciter à réserver une place pour un évènement et montrer dans lesquels Pankart sera présent. Contenu :
- Listes des concerts prévus triée par date la plus proche:
- Dates,
- Nombre de places restantes (si possible ou étiquette sold out),
- Lieu,
- Lien vers billetterie,
- Lien vers l'événement,
- Description brève.
Objectif: Partager les chansons pour que les utilisateurs puissent comprendre, mais aussi chanter les chansons de PanKart.
Contenu :
- Liste des chansons avec:
- Le titre,
- l'album sur lequel elle est disponible,
- La durée,
Liste d'album avec :
- Liste de chanson comprenant :
- Le titre,
- La durée,
- Le tempo (pourquoi pas faire un mini-métronome),
- L'accordage s’il est différent,
- Lien pour l'écouter.
Objectif: Contacter Pancarte à propos de sujets variés.
Contenu : Formulaire de contact avec comme champs à compléter:
- Nom,
- Adresse mail,
- Sujet
- Message,
(PHASE 2 du projet)### 12. Boutique
Section marque et section album:
- Titre de la section,
- lien pour voir tous les éléments,
- Liste des éléments à vendre :
- Vignette avec photo de l'élément,
- Bandeau nouveauté,
- Son prix,
- Nom du produit,
- Image représentant ce produit,
- Description,
- Formulaire avec comme champs:
- Un titre,
- Adresse mail,
- Récapitulatif de la commande,
- Prix total,
- bouton passer commande,
Lancement de la page :
L'utilisateur aura le droit de choisir si il veut une version totalement muette du site ou non.
Menu de navigation:
Animation au survol d'un lien, une ligne se trace en dessous comme un trait de pinceau. Cet animation sera faite à l'aide de la technique du "sprite". Ce trait de pinceau sera là en permanence pour souligner la page active. Il permettra alors de ne pas se perdre dans le site, mais aussi de rappeler l'aspect graphique de la typographie utilisée dans le logo.
Technique pour stocker du son identique à celle du sprite à savoir plusieurs sont dans une seule bande audio.
Le sound design se fera ici, au clique d'une page, un "Power Chord" de guitare avec de la distorsion sera joué. Pour des raisons d'accessibilité, un bouton pour couper le son sera également mis à disposition dans de menu.
Vu la quantité de page distincte, un menu déroulant sera réalisé afin de regrouper les éléments similaires. Les pages "Discographie" et "Biographie" seront regroupées dans "Découvrir PanKrart".
Pied-de-page :
Au survol, les liens se démarquent par leur opacité.
Les boutons : Les boutons réagissent au survol, une fois cliqué, l'aspect graphique montre qu'il s'enfonce légèrement. Cela apportera un réponse de la part de la page qui montre à l'utilisateur que le bouton peut bel et bien être cliqué. Les coins du bouton seront légèrement arrondis pour avoir un aspect moins "agressif" que les boutons parfaitement carrés.
Section Présentation :
Une grande photo sera en arrière-plan, le nom PanKart sera affiché en grand et un court texte introduisant le groupe sera disponible en dessous. Les deux boutons seront disponibles juste en dessous. Cette section prendra toute la page et une partie de la section du dessous sera légèrement visible pour que l'utilisateur comprenne qu'il peut parcourir la page vers le bas.
Section dates :
Fond d'une couleur unie, Un texte assez bref qui donne la date, le titre de l'évènement, le lieu qui, lorsqu'on clique dessus copie l'adresse. Tout cela ponctué par des petites icônes. Le contenu sera écrit au milieu de la section. La fin de cette section sera légèrement oblique afin d'ajouter un aspect dynamique et donc de rappeler le côté engagé de PanKart.
Section album :
Le début de cette section sera, elle oblique à cause de la fin de la section précédente et c'est le but, encore une fois, ça rapport du dynamisme et l'envie de bouger du groupe. Cette section se compose du titre de la section dans le coin de celle-ci, suivit de la pochette de l'album et de deux boutons qui permettent soit de l'acheter, soit d'écouter cet album en streaming. Un menu se montrera au clique pour permettre à l'utilisateur de choisir l'endroit où il veut acheter ou écouter l'album.
Cette partie sera composée d'une suite d'articles, un élément graphique viendra marquer le coupe de cœur ou le coup de gueule. Il y aura un bouton "lire l'article" si sil y a un article, le style sera assez sobre pour permettre une lecture optimale, ensuite, la communauté aura la possibilité de maitre un "J'aime" pour les coup de gueule et un "Nous aussi on les emmerde" pour les coups de gueule. Les boutons auront donc un style particulier en fonction du type de l'article. Le bouton j'aime sera en forme de pancarte avec un cœur et un point d'exclamation dedans, le bouton "Nous aussi on les emmerde" est sous la même forme sauf que le cœur est une main dont le majeur est fièrement montré. Une image pourra être jointe et sera disposée en dessous du texte.
Globalement identique aux actualités à la différence qu'il y aura moyen d'épingler un article pour qu'il reste au-dessus de la liste et soit mis en évidence. Ça permettra alors de mettre en avant le dernier EP ou album sorti et donc le promouvoir.
Section biographie:
Le nom du groupe sera écrit en gros et le logo y sera présent, le texte sera ponctué d'images qui réagiront au survol, le photos bougeront légèrement grâce à une animation en JavaScript. Ça permet alors de créer une impression de superposition avec la page. Au clique, les images s'agrandiront de manière à ce qu'on puisse visualiser l'image plus clairement. Des boutons qui redirige vers Gigstarter, qui permettent d'écouter et d'acheter seront disponible, leur comportement sera identique à ceux de la page d'accueil.
Section biographie des membres:
La section sera présentée par une suite de vignettes qui s'agrandissent et décalent les autres vignettes au survol, ça permet de montrer que ces vignettes sont cliquables et aussi de donner du dynamisme au site. Une petit icône de l'instrument s'animera également au survol et laissera apparaître un texte qui est le nom de l'instrument.
Section Présentation:
La section se présentera de la même manière que celle de la bio du groupe à la différence qu'on y précisera le rôle du membre concerné, mais aussi une petite icône représentera l'instrument joué, celle si s'animera au survol.
(Fonctionnalité cachée, si on clique sur cette icône elle joue le son de l'instrument si le mode son du site est activé)
Section Rappel des autres membres:
Section identique que dans la bio du groupe.
La discographie reprendra chaque album un à un, avec des boutons pour acheter et écouter avec un comportement identiques à ceux sur la page d'accueil. Les pochettes seront animées au survol: si l'audio du site est activé, un extrait audio d'un titre soit sélectionné par PanKart, soit aléatoire se jouera.
Il y aura des boutons d'achat et d'écoute pour l'album, ensuite, pour chaque chanson, on pourra découvrir un mot du groupe vis à vis de celle-ci. Au clique sur le lien pour en savoir plus sur cette chanson, la page descendra au titre souhaité et un texte dexpliquatif sera dispnible.
Section Album photo :
Au survol de l'album, l'élément s'agrandit légèrement et pousse les autres éléments, ça permet à l'élément en question de se démarquer et donc de montrer qu'il est cliquable, la pochette d'un album sera présentée par la dernière photo de celui-ci recouverte par un bandeau qui donne le nom de l'album. En dessous de chaque album, la date y sera notée.
Section Vidéos :
Même principe que la section précédents
Un fil d'Ariane y sera disposé pour que l'utilisateur ne soit pas perdu, il sera cliquable et permettra de revenir en arrière. La collection de photo se déroulera alors en dessous du titre de l'album et au clique, elle pourra s'agrandir.
Même chose que pour la page photo à la différence que les collections seront des petites vignettes et lorsqu'on clique dessus, un lecteur se met par-dessus la page et l'utilisateur a le choix ou non de lire la vidéo.
La liste des dates sera sobre et bien délimitée afin que l'utilisateur ne se perde pas ou ne se trompe pas de date. Au survol de la date souhaitée, l'arrière-plan de la ligne concernant cette date réagit e manière à montrer qu'elle est sélectionnée. C'est donc plus facile à lire.
Les Listes d'albums seront triées en fonction de leur date de sortie, une bordure entourera l'ensemble des chansons disponible. Chaque chanson réagira au survol de manière à ressortir par rapport aux autres, toute la vignette sera cliquable.
Un mini-métronome sera implémenté en JavaScript, et la vitesse sera déterminée lors de la publication d'une nouvelle chanson. Le reste de la page sera relativement sobre. Le lien pour écouter la chanson se comportera comme ceux disponibles sur la page d'accueil.
Le formulaire de contact enverra un mail à PanKart sur une adresse à déterminer, le mail en question comportera l'adresse mail de l'envoyeur, le sujet et le message, le bouton envoyé se situera en dessous et les éléments seront les champs de formulaires seront centrés sur la page.
une liste de vignette sera montrée, si on clique sur une vignette, l'utilisateur est redirigé sur la page produit.
L'aperçu du produit est cliquable et montre le produit en plus grand, il peut y avoir plusieurs photos visionnable grâce à un système de carrousel.
Le bouton prendre contact pour acheter envoie l'utilisateur vers une page similaire à celle du formulaire avec un titre différent, un petit texte explicatif lui explique le fonctionnement de l'achat par formulaire. Les champs de formulaire sont préremplis et lors du clique sur le bouton "passer commande". Une fois ce bouton cliqué, un écran disant "Votre commande a bien été prise en compte" lui sera montré et une proposition pour retourner à la page d'accueil lui sera montrée. Un décompte apparaîtra et un phrase précisera que l'utilisateur sera redirigé sur la page d'accueil.
Sur quelles plateformes de streaming êtes-vous disponible en dehors de Spotify, Deezer et Amazon music? Amazon est le seul site qui permet de vendre vos albums ?