Charlène

01Présentation

02Projets pédagogiquesDes secrets enfouis sous Paris

MoveN’meetRefonte du site MMI Montbéliard

PortfolioBOSS03Projets personnels

Mon logoBastien Marchand Production

0201Présentation

Passionnée par le graphisme et le web depuis plusieurs années, j'ai décidé d'intégrer le DUT Métiers du Multimédia et de l'Internet de l'IUT de Belfort-Montbéliard. J'ai énormément apprécié ces 2 années car ce DUT nous permet d'être polyvalent et d'apprendre les bases en design, développement web et communication. J'ai eu l'occasion de prouver ce que je savais faire à travers des projets individuels et collectifs ainsi que lors des BOSS (que vous découvrirez plus loin). A l'issue de ces 2 années en MMI, je sais que je veux travailler dans le design et le web. C'est donc tout naturellement que je souhaite me tourner vers une licence profesionnelle Webdesign (à Montbéliard).Par conséquent, je suis à la recherche d'une entreprise pour un 1 an en alternance pour un poste de webdesigner, d'UX/UI designer ou graphiste.

2

02Projets pédagogiquesDes secrets enfouis sous Paris

Lors de mon 1er semestre en DUT MMI, jnous avons dû réalisé un projet individuel. Les consignes était que nous devions faire un site mobile first et rédiger des articles.

Le thème de mon projet était «Des secrets enfouis sous Paris» faisant réfé-rence aux célèbres Catacombes de Paris. Nous devions rédiger 3 articles, avec les containtes d’écritures pour le web. Je me suis inspirée du film «Cata-combes» sorti en 2014 ainsi que d’articles du web.

3

Pour mon harmonie, j’ai choisi des nuances de rouge car le rouge est souvent associé au danger, à l’interdiction, mais aussi à la couleur du sang.Le beige rappelle la couleur des os présents dans les Catacombes et permet d’apporter un peu de lumière (en plus du blanc).

#75020A #B50410 #B50410 #BBA67B

Après avoir choisi le thème, j’ai d’abord défini l’identité visuelle de mon projet en commençant par l’harmonie colorée puis j’ai dessiné un logo à l’aide de ma tablette graphique.

J’ai choisi de représenter mon logo par un os parce que les catacombes en sont essentiellement composées.Je l’ai dessiné grâce à ma tablette graphique.

4

Une fois mon identité visuelle créée, il était temps de passer à la

maquette. Je l’ai réalisé sur Adobe XD.

Nous avions environ 1 mois et demi pour réaliser la maquette, puis nos

professeurs devaient la validée (ou non) lors d’une soutenance maquette.

Retrouvez l’intégralité de la maquette sur mon portfolio charlenevilliette.fr

5

Après validation, nous avons pu commencer l’intégration de la maquette en HTML5, CSS3 et javascript.

Cette seconde phase du projet à durée presque 2 mois. Elle s’est clôturée par une soutenance finale où nous avons présenter notre

projet à nos professeurs et camarades en expliquant nos choix puis leur faisant une démonstration de notre site depuis un télé-

phone mobile.

6

02Projets pédagogiquesMoveN’meet

Durant le semestre 2, nous avons dû réalisé un projet collectif en groupe de 3 qui consistait à réaliser une application pour un concept innovant.Pour ce projet, chaque personne avait le rôle soit de développeur, soit de designer, soit de communiquant. C’était donc pour moi complétement évident que je tienne le rôle de designer.

Ce projet s’est lui aussi déroulé en 2 phases. Une première phase qui consistait à réalisé la landing page de notre future application. et la deuxième qui consistait à réaliser l’application.

Notre concept innovant était une application qui permettrait à des sportifs de tout niveaux (débutants, intermédiaires, confirmés) de pouvoir se rencontrer via l’application puis grâce à un espace d’échanges entre les utilisateurs, d’organiser des sessions footing, des matchs de basket, de foot, ou même d’aller à la salle de sport à plusieurs et encore bien d’autres choses. Chaque utilisateurs pouvaient personnaliser son profil en renseignant son âge, en ajoutant une photo de lui, en listant les sports qu’il pratiquait et évidemment en renseignant sa localisation afin d’apparaitre dans le rayon d’autres utilisateurs.

Lors de la phase de création de la landing page, j’ai donc crée l’identité visuelle du projet.

7

#ED6A7A #E94551 #D9ECF3 #00ABC3 #072D3F

Notre harmonie colorée se compose de 2 couleurs principales ainsi que des nuances.

Nous avons choisi 2 rouges car le rouge est une couleur chaleureuse et énergique. Elle reflète aussi le courage, la force, la puissance et aussi l’amitié.

Nos 3 autres couleurs sont des nuances de bleus. Le bleu est souvent associé à la liberté, à la sérénité, au rêve. Le bleu foncé dégage de la confiance et de la sécurité.

L’association de ses couleurs fait comprendre à l’utilisateur que notre application repose sur la confiance et sur une ambiance chaleureuse entre les utilisateurs. L’utilisateur sera aussi plus déterminé et se sentira plus en sécurité.

Pour le logo, nous avons choisi de créer un logotype car le nom relativement court et mémorisable de

notre application nous le permettait.

Nous avons créé plusieurs versions de ce logo pour pouvoir l’adapter correctement peu importe la cou-

leur de fond et suivant les potentiels autres éléments autour.

8

Après avoir définit la charte graphique de notre projet, j’ai réalisé les maquettes bureau, tablette et mobile de la landing page. (maquettes entières sur mon site web)

Le développeur du projet à intégré les 3 maquettes afin de les mettre en ligne et de les présenter lors de la 1ère soutenance.

La seconde phase du projet concerne la réalisation et l’intégration de la maquette de l’application. Lors de cette phase, je me suis, encore une fois, occupé de la maquette. J’ai créer un fond pour la page d’accueil qui apparait au lancement de l’application.

9

Sur la maquette de l’application, on peut retrouver le fil d’actualité, l’accès à notre profil et à ceux des autres utilisateurs, la section «évènement», l’accès aux messages privés avec d’autres utilisateurs, la modification de notre profil, etc...

Retrouvez l’intégralité de la maquette sur mon portfolio charlenevilliette.fr

Lors de la dernière soutenance de ce projet, nous avons donc présenter les maquettes

et l’application intégrée, ainsi que toute la stratégie de communication mise en place.

10

02Projets pédagogiquesRefonte du site MMI Montbéliard

Lors du semestre 3, nous avons dû réaliser un projet collectif par groupe de 3, commandité par un vrai client. Notre client était le département MMI, plus précisément, un de nos professeurs.

Le sujet de notre projet est la refonte de l’actuel site du départemenent qui a maintenant quelques années.

Afin de définir les fonctionnalités à implémenter, la solution technique à privilégier, et aussi le design de l’interface, nous avons organiser des réunions avec notre professeur afin de le questionner.

Une fois tout cela déterminé, nous avons pu commencer les maquettes mobile et bureau. Vous pourrez les retrouver entièrement sur mon site web.

Sur ce projet, nous sommes 2 designers. Ainsi, j’ai pu me rendre compte de la difficulté à travailler avec quelqu’un qui n’as pas forcément la même vision que moi. Nous nous sommes donc partagé le travail et chacun a pu travailler sur ce qu’il préfère/sait faire le mieux.

Pour ce projet, nous avons choisi de développer le site MMI sous Wordpress, ainsi le client pourra modifier les contenus du site très facilement et seul. De plus, tout ce qu’il y a de technique sur le prototype pouvait être fait grâce à des plugins.

Le projet est encore en cours. Sa soutenance aura lieu au mois de mai et nous présenteront le site web MMI Montbéliard intégré et fonctionnel.

11

02Projets pédagogiquesPortfolio

Mon portfolio est composé de plusieurs parties. La première est un à propos, où je me présente, où je présente ce que je fais. La deuxième partie regroupe toutes mes compétences, quelles soient graphiques, en développement, ou en terme de logiciels. Suite à ça, on retrouve la partie la plus importante du portfolio : la galerie. Dans cette section, vous pouvez retrouvez tout ce que j’ai créer, de la simple illustration aux gros projets. Enfin, vous aurez de quoi me contacter grâce à un formulaire de contact et à un footer regroupant tous mes réseaux sociaux.

Pour clore ces 2 années de DUT MMI, le département a choisi de nous faire faire un dernier projet, en individuel cette fois.

Son but, c’est que nous ayons tous un portfolio en ligne à la sortie du DUT.

Pour ma part, j’en ai déjà un en ligne depuis 2016.Mon premier portfolio à été développé avec Wordpress. Il m’a aidé à avoir ma place en MMI. Le deuxième portfolio a été créer l’année dernière. Je l’ai, cette fois ci, coder à la main. Il m’a servi dans mes recherches d’apprentissage pour la 2ème année de MMI. J’ai préféré le coder entièrement à la main plutôt qu’avec Wordpress parce que j’aime coder, et je trouve ça important que les entreprises dans lesquelles je postule puisse voir ce que je peux faire, en plus du contenu de mon site.

Avant ce projet, j’avais donc déjà un portfolio sur pieds. J’en ai alors profiter pour revoir son interface, ainsi qu’ajouter le framework Bootstrap.

12

02Projets pédagogiquesBOSS

Chaque semestre, nous avions un examen appelé BOSS. Cet examen dure 1 journée (8h) au premier semestre, et 2 jours (16h) au deuxième semestre. Il consiste à essayer de faire un site entier fonctionnel dans la durée impartie.

Lors du BOSS de semestre 1, nous devions réaliser le contenu d’un site mobile first ainsi que son intégration.

Lors du BOSS de semestre 2, nous devions réaliser le front-end d’un site bureau sur un acteur ou une actrice le 1er jour, et le back-end ainsi que la partie dynamique du site le 2ème jour.

13

03Projets personnelsMon logo

Pour mon logo, je voulais quelque chose de simple, reconnaissable, mémorisable et facilement adaptable à tous type de documents, interfaces, etc. Mes initiales étant CV, j’ai d’abord recherché une «configuration» esthétique des deux lettres.

Je voulais que l’on puisse toujours correctement distingué le C du V, c’est pour cela que je n’ai pas coller les lettres entre elles. Le fait d’avoir un C «vide» et un V «plein» apporte un certain équilibre. Les deux lettres sont penchées pour casser la symétrie.

Le C forme à 3/4 un cercle, et le V vient compléter le quart du C vide.

14

03Projets personnelsBastien Marchand Production

L’entreprise Bastien Marchand Production est une entreprise de production audiovisuelle principalement. Elle souhaitait un logo.

J’ai donc déterminé avec le client ce qu’il souhaitait comme type de logo (logotype, pictogramme,...), quelles couleurs il voulait, s’il y avait des éléments qu’il souhaitait absolument voir apparaitre dans son logo...

Après plusieurs essais et retouches, le client à retenu ce logo. Il s’agit d’un logo combiné, la partie pictogramme du logo regroupe sa passion pour la photo et la vidéo grâce à l’objectif, ainsi que ses compétences en réseaux grâce aux connexions blanches. Et la partie logotype est le nom de son entreprise avec son nom et son prénom en gras.

Le client possède son logo en 3 tailles, petite, moyenne et grande, ainsi qu’en couleurs et en niveaux de gris.

15

Retrouvez-moi sur www.charlenevilliette.fr

Il a aussi souhaité que je fasse sa carte de visite. Nous avons procéder de la même manière que pour son logo pour définir la carte de visite dont il a besoin.

16