Unique

En mode différent

La commande consistait à créer une marque ainsi que son site internet fictif.

Ce projet comportait trois étapes :

  • Construction d’une stratégie de communication
  • Réalisation d’un concept board (logo, ton visuel, etc.)
  • Création d’une maquette graphique responsive
  • Intentions

    graphiques

    Unique est une marque de récupération et customisation de vêtements. Avec un thème visuel ludique (illustrations, couleurs, pictogrammes…), ce site a un univers graphique qui nous donne un coup de jeune !

    J’ai sélectionné une couleur principale : un bleu électrique, couleur dynamique, associée à la confiance. Et des couleurs secondaires, que nous retrouvons dans les illustrations.

    #6c9aff

    #f2bfc0

    #fbe77e

    #8adcb1

    Le logo est composé d’une typographie grasse, sans empattements ainsi qu’une lettre confectionnée à la main (avec un fil de pelote de laine), qui raconte l’histoire de la marque. Les illustrations et ce fil de couture «faites-main», renvoient à notre axe de communication : la customisation de vêtements.

    La typographie :

    Dosis

    Portez ce vieux whisky au juge blond qui fume

    Technique

    et logiciels

    La principale contrainte technique était d’être le plus minimaliste possible dans les éléments graphiques, afin de conserver ce principe de fil de couture de la charte graphique. Problème : en web il est impossible de descendre en-dessous d’1 px pour les contours. Il était donc nécessaire de trouver un subterfuge pour que les illustrations paraissent le plus fines possible. J’ai alors privilégié un contour plus épais que d’origine, mais avec un noir moins prononcé (70%), qui donne cette impression d’un contour plus fin.

    Les maquettes graphiques ont été réalisé sous Illustrator.
    La retouche d’image sous Photoshop.

    tadam

    Mobiliers de créateurs

    La commande consistait à créer une marque ainsi que son site internet fictif. De la création du logo, ton visuel, concept board, jusqu’à la maquette graphique du site : tout devait être pensé de façon optimale pour les déclinaisons tablette et mobile.

    Tadam est un site de vente de mobiliers/déco conçus par des artistes et artisans. Sélectionnés, ces créateurs proposent des réalisations uniques et haut de gamme. On ne vend pas un “meuble” en tant que tel : on transforme un objet en une véritable œuvre d’art qu’on expose chez nous.

    Intentions

    graphiques

    La typographie du logo a été sélectionné pour ses courbes, que nous retrouvons tout au long du site internet. Courbes, qui rappellent l’univers du spectacle, de la démonstration. Nous nous attendons alors à être surpris par ces créations, comme lors d’un numéro.

    J’ai sélectionné des couleurs froides et pâles afin que notre regard soit dirigé davantage sur les oeuvres d’art.

    #e6dcd2

    #e8f0f4

    #1c1e1c

    #fcfcfb

    J’ai sélectionné des polices de caractères qui se complétaient de part leurs formes : Une police de titre à empattements, qui renvoie un message de tradition et de confiance. Une seconde typographie,« monospace » pour le texte cliquable, qui rappelle les polices classiques des machines à écrire. Elle était idéale pour se différencier du texte courant. Enfin, une typographie de texte courant, plus moderne, elle met l’accent sur la lisibilité et la simplicité. Ce contraste lui permet de bien s’associer avec une police à empattements.

    Les typographies :

    UNNA
    PORTEZ CE VIEUX WHISKY AU JUGE BLOND QUI FUME

    Raleway
    Portez ce vieux whisky au juge blond qui fume

    cutive mono
    portez ce vieux whisky au juge blond qui fume

    Technique

    et logiciels

    La principale contrainte technique était de trouver un équilibre entre : le site e-commerce, où l’objectif principal est de vendre et ce principe « d’exposition d’oeuvres » où le mobilier doit être mis en lumière au détriment de tout autre élément parasite. Sur la page d’accueil, j’ai privilégié de grandes images qui sont là pour séduire l’utilisateur. Avec une navigation hiérarchique, nous arrivons alors à la fiche produit où nous pouvons découvrir le prix et les éléments techniques de l’article.

    Les maquettes graphiques ont été réalisé sous Illustrator.
    La retouche d’image sous Photoshop.

    Nukon

    Au coeur de l'image

    La commande consistait à créer le site internet d’une marque, à partir de son catalogue papier. Nous devions retrouver un « air de famille » avec l’identité visuelle du catalogue.

    Ce projet comportait plusieurs étapes :

  • Élaboration d’une charte graphique (en fonction du catalogue papier)
  • Création d'une architecture du site et de son système de navigation (plan de navigation détaillé)
  • Fabrication des maquettes
  • Intégration du site (langages HTML/CSS/JS/PHP) et mise en ligne sur un hébergement
  • Intentions

    graphiques

    J'ai privilégié une vidéo d'introduction sur la page d'accueil, qui nous laisse imaginer que c'est ce que nous sommes entrain de filmer grâce à l'appareil.
    Afin de rappeler l'univers de la photo/vidéo, j'ai inséré un compteur de temps et un logo d'enregistrement vidéo "REC" qui clignotte tout au long de la vidéo. Le but recherché était d'être plongé dans une interface d'appareil photo, dès la page d'accueil. Nous devions alors retrouver les éléments caractéristiques d'un appareil : boutons, écran, visée…

    J’ai sélectionné des couleurs qui nous rappellent cet univers industriel, ainsi que la couleur principale de la marque : le jaune.

    #f2e332

    #000000

    #333333

    #fcfcfb

    Il était primordial de rassembler les catégories de produit de manière stratégique, le but étant de créer une navigation en fonction d'un parcours utilisateur type.
    L'aborescence et la structure du site ont été pensé de manière à bien visualiser chaque niveau. De ce fait, nous distinguons clairement la page d'accueil, d'une page produit ou d'une liste produits, ce qui simplifie le parcours utilisateur.

    Les typographies :

    HELVETICA BOLD
    Portez ce vieux whisky au juge blond qui fume

    HELVETICA REGULAR
    Portez ce vieux whisky au juge blond qui fume

    Technique

    et logiciels

    Afin de créer un design plus réaliste et épuré d'appareil photo, la tendance du "Neumorphism" pouvait apporter cette impression de relief aux boutons type "produits" (à différencier des boutons de navigation). Grâce à des générateurs en ligne, j'ai pu jouer avec les ombres et lumières et intégrer les lignes de code directement dans le css.

    Le plan de navigation détaillé a été été réalisé avec Illustrator, les maquettes graphiques sous Adobe XD, la retouche d’image sous Photoshop et le montage vidéo sous Premiere Pro.
    Le développement du site s'est fait à l'aide de l'éditeur de code Visual Studio Code.

    Mentions légales