Benjamin Belliard Portfolio

NICE COAST

admin5779 — Fri, 14 Jun 2024 15:41:24 +0000

NICE COAST

Twitch est une plateforme de streaming principalement utilisée par les joueurs de jeux vidéos.

Le streameur (diffuseur) à besoin de plusieurs ressources graphiques pour personnaliser sa chaîne.

Il lui faut notamment un design constitué de panels de présentation, d’un overlay à superposer sur son jeu et sa webcam mais aussi des alertes (pouvant être animées) pour avertir de l’action d’un spectateur (don, abonnement, follow…). Enfin, pour intéragir entre eux et avec le streamer, les spectateurs peuvent utiliser des emotes (émoticônes) propres à la chaîne du streamer.

Voici des réalisations pour la chaîne Twitch de Nice_coast.

Design

Pour sa chaîne, nice_coast désirait un monogramme des initiales de son pseudo comme logo.

Logo final

Piste non retenue

J’ai ensuite réalisé des scènes de stream en adéquation avec la charte graphique précédemment réalisée.

Une entorse à la charte graphique à été faite pour les panels de description de sa chaîne (affichés sous le flux vidéo). Ils reprennent le design de cartes d’accès présentes dans le jeu streamé par nice_coast.

Illustrations

Voici les emotes ou emoticônes utilisées par les spectateurs de nice_coast dans son chat. Elles permettent aux personnes présente d’interagir entre eux et avec lui.

Motion Design

Voici les alertes jouées lors d’évènements spécifiques sur le stream de nice_coast.

L’article NICE COAST est apparu en premier sur Benjamin Belliard Portfolio.

CHARLES MASIALA

admin5779 — Fri, 14 Jun 2024 15:24:40 +0000

CHARLES MASIALA

Charles Masiala est un entrepreneur en pose de charpente. Sa volonté était d’avoir un logo reprenant ses initiales en monogramme tout en rappelant la charpente au premier coup d’oeil.

Logo et Charte Graphique

Le logo est donc composé du monogramme « CM » au dessus duquel repose une toiture.
Le marron du logo rappelle le bois utilisé en charpente

Logo final

Pistes non retenues

Mockups

Mise en situation de la charte graphique sur différents supports.

Carte de visite

Covering camion

L’article CHARLES MASIALA est apparu en premier sur Benjamin Belliard Portfolio.

TECH ASSIST

admin5779 — Fri, 14 Jun 2024 12:37:52 +0000

TECH ASSIST

Tech Assist est une entreprise de réparation et dépannage informatique basé dans l’Indre. Leur volonté était de créer une image de marque moderne, professionnelle et bien remarquable pour lancer leur activité.

Logo et Charte Graphique Tech Assist

Le logo est un monogramme des initiales de l’entreprise. Le bleu est utilisé pour rappeler le côté technologique du secteur d’activité sans être un bleu criard comme souvent dans ce milieu.
Dans le logo finale le mot « Tech » est en italique pour renforcer l’aspect technologique porté vers l’avenir.

Logo final

Piste non retenue

Mockups

Mise en situation de la charte graphique sur différents supports.

Carte de visite

Devanture de boutique

L’article TECH ASSIST est apparu en premier sur Benjamin Belliard Portfolio.

ATELIERS BOXES COLOMBELLOIS

admin5779 — Fri, 14 Jun 2024 11:31:18 +0000

ATELIERS BOXES COLOMBELLOIS

ABC (Ateliers Boxes Colombellois) est un club de boxe anglaise à destination de tous les âges, il à une visée didactique et enseigne les bases de la boxe anglaise. ABC désirait une nouvelle charte graphique pour créer une image de marque reconnaissable et instaurer une cohérence entre leurs différents supports de communication.

Logo et Charte Graphique ABC

Ce logo est sous forme de blason, un animal à été choisi ainsi que des couleurs.

Le félin représente la force et l’agilité.

Le club étant un club de boxe Anglaise, les couleurs bleu et rouge devaient apparaitre pour représenter les deux coins du ring.

la couleur complémentaire choisie est le jaune car le club se veut accessible à tous (d’où ses initiales ABC), avec ce jaune nous avons les 3 couleurs primaires visibles sur le logo.

Un bleu marine à été choisi en couleurs complémentaire pour adoucir l’ensemble.

Logo final

Piste minimaliste non retenue

Supports Prints

Pour promouvoir le club ainsi que sa nouvelle charte graphique, de nouveaux supports de communication ont étés réalisés.

Affiche

Flyer

Carte de visite

Bulletin d’adhésion

Supports textiles

Voici des mockups de supports textiles à destination des adhérents du club.

L’article ATELIERS BOXES COLOMBELLOIS est apparu en premier sur Benjamin Belliard Portfolio.

Ecole 404

admin5779 — Thu, 16 Dec 2021 08:41:08 +0000

MES REALISATIONS AU SEIN DE L'ECOLE 404

L’Ecole 404 est mon centre de formation. cette école dispense des formations dans le domaine numérique et à pour vocation de « développer les compétences du futur ».

C’est en son sein que j’ai réalisé divers projets que voici, certains en tant qu’élève d’autres en tant qu’alternant :

Print Affiche Portes Ouvertes

Voici un travail autour d’une affiche pour les portes ouvertes de l’école 404.

Le thème imposé était le Bauhaus (Le mouvement Bauhaus est considéré aujourd’hui comme l’un des mouvements d’architecture, d’art et de design les plus influents de l’histoire et tient son nom d’une ancienne école d’art).

Nous devions aussi respecter la charte graphique de l’école.

J’ai utilisé Adobe Illustrator (pour le travail sur la typo) et Adobe InDesign pour la mise en page.

Délai : 1 jour

Voici le résultat de mon travail :

Design D'application (Conception UI)

Au sein de l’école 404, un projet nous à été confié, celui d’imaginer une application de messagerie à destination de l’école. Cette application devra respecter les guidelines imposés par la plateforme choisie (Android ou iOS). Pour ma part j’ai porté mon choix sur Android. Mon application respecte donc les guidelines de Material Design.

J’ai intitulé mon application « Caen ça va ».

Pour commencer j’ai décidé de créer un logo. J’ai repris les les chiffres de 404 et j’ai décider de transformer le tout en un personnage. Les « 4 » forment les bras du personnage et le « 0 » représente sa bouche en train de parler (puisqu’il s’agit d’une application de messagerie). Le personnage semble positif avec ses yeux souriants.

Pour ce logo j’ai utilisé Adobe Illustrator

L’application permet d’envoyer des messages et de passer des appels, dans les deux cas on peut communiquer avec une personne ou au sein d’un groupe. L’application inclut une liste de contacts ainsi que la possibilité de créer un groupe, de paramétrer son compte…

J’ai utilisé Adobe Xd pour la conception de l’application.

Délai : 1 mois

Etude de cas : Club de Taï Jitsu Do

Dans cette étude de cas, nous devions proposer les bases de l’identité visuelle du club de Tai Jitsu Do de Creully, quels choix de couleurs, typographie, types d’illustration, etc.

Puis, nous devions imaginer une maquette du site internet du club.

Enfin nous devions préconiser des réseaux sociaux au club pour atteindre ses objectifs.

Délai : 1 jour

Voici la maquette du site que j’ai imaginé sur Adobe Xd.

Logo et Charte Graphique e-404.io

Durant mon alternance il m’a été donné pour mission de réaliser un nouveau logo pour l’école.

En effet, celle-ci change de concept et de nom. Il était alors impératif de réaliser une nouvelle charte graphique.

Site Internet e-404.io

Après avoir réaliser la nouvelle charte graphique et le nouveau logo de l’école j’ai eu pour mission de réaliser le nouveau site internet en me basant sur le nouvel univers graphique de l’école.

Animation vectorielle

Voici une petite animation vectorielle réalisée pour e-404.io avec le nouveau logo

L’article Ecole 404 est apparu en premier sur Benjamin Belliard Portfolio.

Ecoute et Médiation

admin5779 — Sun, 12 Dec 2021 16:36:43 +0000

ECOUTE ET MEDIATION

Ecoute et Médiation est un cabinet de médiation familiale sur Angers.

Mathilde Alexandre avait besoin d’un site internet pour se présenter et faire découvrir son métier en donnant quelques informations sur celui-ci. Elle souhaitait aussi un formulaire de contact ainsi qu’une intégration de Google Maps.

Conception du site

Le site est un site vitrine présentant le métier de médiateur, les thèmes abordés au cours de la médiation ainsi que la médiatrice elle même !

L’article Ecoute et Médiation est apparu en premier sur Benjamin Belliard Portfolio.

S3A

admin5779 — Sun, 12 Dec 2021 16:36:17 +0000

SERVICE CIVIQUE S3A

J’ai effectué un service civique au sein de l’association S3A d’Hérouville Saint-Clair. S3A (Structure d’Aide Aux Associations) est une association offrant un soutien aux autres association. Elle offre notamment des services de comptabilité et de communication. C’est aussi l’association qui gère la MDA (Maison Des Associations) d’Hérouville Saint-Clair. Elle est dirigée par Grégory Autier.

Durant cette année de Service Civique j’ai mis à disposition mes compétences pour diverses missions : flyers, affiches, papier en-tête, mails graphiques, site internet, impression 3D, montage vidéo…

L’association venait juste de dévoiler sa nouvelle charte graphique et prévoyait des travaux de rénovation du bâtiment. C’est dans ce cadre que j’ai travaillé.

Web (Site, Newsletter et Mails Graphiques)

S3A souhaitait aussi réaliser une refonte complète de leur site internet, je n’avais pas encore de contenu à intégrer mais j’ai réalisé une en-tète et un pied de page avec la nouvelle charte graphique.

Les pages de contenus étaient encore factices

J’ai fais cette réalisation sur WordPress.

Attention : Le site à subit des changements entre temps, je ne suis donc pas l’auteur de tout le site mais le design global est toujours le même

Prints (Flyers, Affiches, Livrets)

Au sein de S3A j’ai eu l’occasion de réaliser des documents prints (notamment pour de l’évènementiel) comme des Flyers, Affiches et autres livrets. Certains à destination de S3A d’autres pour diverses associations adhérentes.

Montage Vidéo

J’ai réalisé une série de vidéo concernant la rénovation de la Maison Des Associations. Les vidéos mettaient en avant :

Les raisons de cette rénovation
Les attentes des membres des associations
Les contraintes techniques et de délais de la part des entreprises travaillant à cette rénovation
Une interview de M. Rodolphe Thomas (Maire d’Hérouvillle) ainsi que de Corine Olivier (présidente de S3A).

J’ai fais le montage de ces différentes interviews sur Adobe Premiere (avec un peu de After Effects pour le motion Design d’intro et outro).

Malheureusement je n’ai pas accès à ces vidéos qui étaient destinées à un usage interne entre les associations.

Impression 3D

J’ai eu l’occasion de réaliser une version 3D du nouveau logo de S3A à l’occasion de la traditionnelle galette des rois. Les usagers de l’association ont pu découvrir leur nouveau logo ainsi. Ce plan avait pour but d’être réutilisé à l’avenir (pour des portes clés par exemple).

L’article S3A est apparu en premier sur Benjamin Belliard Portfolio.

Youtube

admin5779 — Sun, 12 Dec 2021 16:35:44 +0000

MES REALISATIONS POUR YOUTUBE

Youtube est la plateforme vidéo la plus connue/populaire d’internet, c’est une réelle institution et on y retrouve du contenu aussi divers que varié.

Etant moi même joueur de jeux vidéos je l’utilise pour partager des moments forts de mes parties en ligne.

Bien qu’il s’agisse d’une plateforme de divertissement il y a énormément de travail derrière en terme de montage vidéo, de design, création de logo, de visuels (pour les miniatures des vidéos). Mais aussi de motion design nottament pour les introductions des vidéos.

Montage Vidéo et Motion Design

Voici un exemple de montage vidéo que j’ai eu l’occasion de réaliser pour ma chaîne Youtube.

Ce montage est assez simple mais il comporte une intro et une outro en Motion Design.

La difficulté principale d’un montage vidéo est de le rendre dynamique et pertinent pour capter l’attention du spectateur.

Pour cette réalisation j’ai utilisé Adobe Premiere Pro (pour le montage) ainsi que After Effects (pour la partie Motion Design).

Miniatures

J’ai eu l’occasion de réaliser plusieurs miniatures de vidéos pour différentes chaînes youtube.

La contrainte ici est la taille d’affichage et la visibilité globale. En effet une miniature de vidéo doit contenir des informations claires et concises sur la vidéo elle même. Ces informations doivent « taper à l’œil » de l’utilisateur car la miniature sera au milieu de bons nombres d’autres, il faut donner envie à l’utilisateur de cliquer sur notre miniature et pas sur une autre.

Voici quelques exemples de miniatures que j’ai réalisé avec Adobe Photoshop.

Logo et Bannière

Une chaîne Youtube à besoin d’une identité visuelle qui est réalisée principalement grâce à un logo et une bannière.

Si le logo n’a qu’une contrainte (celle d’être rond), la bannière, elle, à une grande contrainte liée à son utilisation responsive (elle s’adapte selon la taille d’écran et le support utilisé). Il est donc important que toutes les informations s’affichent correctement sur tous les supports (smartphone, tablette, ordinateur, TV…)

L’article Youtube est apparu en premier sur Benjamin Belliard Portfolio.

Twitch

admin5779 — Sat, 11 Dec 2021 20:45:59 +0000

MES REALISATIONS POUR TWITCH

Twitch est une plateforme de streaming principalement utilisée par les joueurs de jeux vidéos.

Le streameur (diffuseur) à besoin de plusieurs ressources graphiques pour personnaliser sa chaîne.

C’est dans ce cadre que j’ai pu réaliser divers projets que vous voici.

Illustrations

Les illustrations que j’ai eu l’occasion de réaliser pour twitch étaient soumise à une grande contrainte, la taille de l’affichage.

En effet ces illustrations sont des émoticônes à utiliser dans un chat de discussion, elle doivent donc être lisibles même en très petit.

Le challenge est donc de réussir à représenter des émotions avec cette contrainte de taille.

Il faut donc utiliser les bons contrastes et optimiser la place de chaque élément.

Le type de fichier est le .png permettant de conserver un fond d’image transparent.

Pour les concevoir j’utilise le logiciel Clip Studio Paint ainsi que Adobe Photoshop (avec une tablette graphique).

J’ai eu l’occasion d’en réaliser pour plusieurs chaînes.

Design

Le design d’une chaîne Twitch est composée de plusieurs éléments comme : un logo, des panels de présentation, des overlays (scènes)…

Il faut créer une harmonie au travers de ces divers éléments, on cherche à créer une réelle identité visuelle (typo, couleurs, logo, ton…)

Ces éléments ont des contraintes de taille, de poids de fichier…

Pour cette partie j’utilise Adobe Photoshop et Illustrator.

Ci-dessus un exemple d’overlay, il s’agit d’une superposition par dessus le jeu pour afficher des informations diverses, ici un cadre de webcam est présent

Motion Design

Lorsqu’un spectateur réalise une action sur la chaîne comme la suivre, faire un don, s’abonner (abonnement payant) par exemple, une alerte est jouée sur le stream. Cela peut être une image fixe ou bien une image animée.

Ici j’ai réalisé des animations (motion design) pour ces alertes.

Une fois de plus il y a plusieurs contraintes notamment de taille, de lisibilité, de poids de fichier et enfin de type de fichier.

Il s’agit de fichier en .webm (un type de fichier vidéo très léger optimisé pour le web et acceptant les fonds transparents).

Pour les réaliser j’utilise Adobe Photoshop pour créer le visuel et After Effects pour faire l’animation.

https://www.benjamin-belliard.fr/wp-content/uploads/2021/12/TestAlertsBitsOK.webm

https://www.benjamin-belliard.fr/wp-content/uploads/2021/12/TestAlertsDonationOK.webm

https://www.benjamin-belliard.fr/wp-content/uploads/2021/12/TestAlertsSubOK.webm

https://www.benjamin-belliard.fr/wp-content/uploads/2021/12/TestAlertsFollowOK.webm

https://www.benjamin-belliard.fr/wp-content/uploads/2021/12/TestAlertsHostRaidOK.webm

https://www.benjamin-belliard.fr/wp-content/uploads/2021/12/Sub12M.webm

Motion Graphics

Le motion graphics est à mi chemin entre le motion design et l’illustration. On dessine chaque élément de l’animation.

Comme pour les illustrations plus haut ces animations sont des émoticônes à utiliser dans un chat de discussion, elle suivent donc la même contrainte de lisibilité.

Pour ces émotîcones un peu particulières 3 grandes contraintes sont imposées :

Le poids du fichier ne doit pas excéder 1Mo
Le fichier doit impérativement être au format .gif (format d’image permettant les animations et fonds transparents)
L’annimation ne doit pas dépasser 60 images

Pour les réaliser je dessine tous les éléments dont j’ai besoin sur Clip Studio Paint (avec une tablette graphique) puis je m’occupe de l’animation des différents calques sur Adobe Photoshop.

L’article Twitch est apparu en premier sur Benjamin Belliard Portfolio.

Benjamin Belliard Portfolio

NICE COAST

NICE COAST

Design

Illustrations

Motion Design

CHARLES MASIALA

CHARLES MASIALA

Logo et Charte Graphique

Mockups

TECH ASSIST

TECH ASSIST

Logo et Charte Graphique Tech Assist

Mockups

ATELIERS BOXES COLOMBELLOIS

ATELIERS BOXES COLOMBELLOIS

Logo et Charte Graphique ABC

Supports Prints

Supports textiles

Ecole 404

MES REALISATIONS AU SEIN DE L'ECOLE 404

Print Affiche Portes Ouvertes

Design D'application (Conception UI)

Etude de cas : Club de Taï Jitsu Do

Logo et Charte Graphique e-404.io

Site Internet e-404.io

Animation vectorielle

Ecoute et Médiation

ECOUTE ET MEDIATION

Conception du site

S3A

SERVICE CIVIQUE S3A

Web (Site, Newsletter et Mails Graphiques)

Prints (Flyers, Affiches, Livrets)

Montage Vidéo​

Impression 3D

Youtube

MES REALISATIONS POUR YOUTUBE

Montage Vidéo et Motion Design

Miniatures

Logo et Bannière

Twitch

MES REALISATIONS POUR TWITCH

Illustrations

Design

Motion Design

Motion Graphics

Montage Vidéo