Skip to content

NatachaBelboom/projet-PanKart

Repository files navigation

projet-PanKart

Eleve à la Haute Ecole de la Province de Liège en Bac 2. Ce projet fait partie du cours de Design Web

Moodboard

Lien du moodboard : https://app.milanote.com/1Ld1iL1pCxFB4y?p=0jRrej911D7

Présentation du projet

Pankart est un groupe de musique belge créé en 2018. Leur style de musique est dy rock celtique engagé. Leur Leitmotiv : "Standing still is not an option !".

Ils ont des choses à dire et à revendiquer et n'hésite pas à le faire à travers les paroles de leurs chansons. Ils veulent faire bouger les choses mais pas que! Leur but est aussi de faire danser le public et leurs fans.

Public cible

Tout public à partir de 20 +/- localisé pas spécialement qu'en Belgique.

Cahier des charges / brief du client

  1. Description

Groupe engagé. Leur communauté de fan est restreinte mais fidèle et grâce à eux (en quelque sorte), ils ont gagné le concours Gigstarter artiste de l'année 2020.

Pour l'instant, on peut retrouver PanKart sur Gitstarter qui est une plateforme hébergeant environs 9000 artistes, Facebook, Instagram. Chansons disponibles sur Spotify, Deezer, AppleMusic,... Sortie de l'EP en avril 2020.

Double objectif: 1. avoir un max de dates et être visible. Donner envie aux gens de les "connaître". 2. Faire passer leurs coups de gueule et leurs coups de coeur niveau actualité et bien d'autre

  1. Charte graphique

Le logo est noir avec du jaune/orange. Le mot pankart est écrit avec le k en majuscule et à l'envers. (Reprendre ses couleurs dans le site)

  1. Souhaits

TECHNIQUE : HTML5 et responsive et désir d'être autonome par la suite. DESIGN: le maitre mot? ECO-CONCEPTION WEB. Moderne, beau, reflète l'époque dans laquelle on est, donne envie de rester sur le site et met en avant les valeurs du groupe. Et pourquoi pas du design sonore?

  1. Contenu
  • biographie du groupe + biographie par membre,
  • galerie photos/videos,
  • paroles des chansons,
  • les news,
  • coup de coeur/coup de gueule,
  • revues de presse,
  • contacts,
  • booking,
  • liens vers les réseaux/streaming/app.

Plan du site

  1. Page d'accueil
  • Votre logo
  • Une photo
  • Menu de navigation
  • Information sur la victoire du concours Gigstarter artiste de l'année 2020
  • Liens vers réseaux sociaux
  • Bouton "qui sommes-nous" -> mène à la biographie
  1. Page coups de gueule / coups de coeur
  • résumé de l'article
  • avis positif ou négatif
  • Photo
  1. Page concert
  • Dates de concert + lieu
  • Lien vers les renseignements
  1. Page biographie
  • Biographie du groupe avec description
  • Biographies des membres
  • Photos de chaque membre
  1. Page musiques
  • Liste des chansons + date
  • Paroles
  1. Page galerie
  • Photos
  • Vidéos
  1. Page contact
  • Informations de contact
  • Formulaire

Stratégie

Le menu de navigation est commun à toutes les pages. Le bouton de la page courante est dans une autre couleur. Cela permet à l'utilisateur de se situer dans le site. Le logo permet de retourner sur la page d'accueil.

Page d'accueil

Tout au long de la page d'accueil se trouveront en arrière-plan les punchlines que vous aimez utiliser. Le style de la page est assez foncé avec des zones de couleurs jaune/orange comme dans votre logo.

  1. Présentation

Votre logo et la photo en fond nous met dans l'ambiance. Un texte introductif accompagne la photo avec un lien vers la page des membres. Il y a aussi une flèche animée avec un effet de sursaut dans le bas de la page pour attirer le regard et donner envie à l'utilisateur de poursuivre sa découverte du site. (cliquable + scroll)

  1. Section coup de coeur / coup de gueule

A chaque changement de section, la couleur de fond change aussi. Les articles sont diposés de manière à ce qu'on ne voit que les plus récents. L'avis du groupe est affiché à côté de la photo de l'article. Un lien vers l'article en entier est présent.

  1. Section concert

Le fond change encore une fois de couleur car on change de section. Les dates sont listées une par une. Cette section est très aérée, elle permet ainsi à l'utilisateur de voir directement les informations qui le concerne. Le bouton pour acheter une place de concert se démarque du reste.

Page biographie groupe + membres

  1. Biographie du groupe

Une photo du groupe est affichée à côté de la biographie.

  1. Biographie des membres:

La biographie d'un membre est affichée. Les photos des autres membres sont en dessous en forme de vignette. En appuyant dessus, la biogarphie change.

Page musiques

Les chansons sont listées l'une après les autres. On remarque un bouton "play". Une fois une musique lancée, les paroles apparaissent grâce à une animation. Une demi page apparait vers la droite par dessus le reste. Ainsi, on voit toujours la liste des chansons et les paroles.

Page galerie

Les photos sont affichées en grand. Une photo à la fois et possibilité de les faire tourner grâce à un slider. Il est possible aussi d'afficher la photo en plein écran en cliquant dessus.

Même principe pour les vidéos sauf qu'elle se lance quand on clique dessus.

Page de contact

Le formulaire de contact comprend une adresse mail, le sujet et un message. Encore une fois, le bouton envoyer se distingue du reste grâce à une couleur et un agrandissement au survol.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published