Rapport de projet - DVNTS

Licence pro

Creaweb

RAPPORT DE

PROJET

(2020-2021)

DVNTS.STUDIO est composé de Antoine DELCOURTE,

evan FASQUELLE, pierre GOURTAY, victor CANGO, youcef Kada-Rabah

remerciements En premier lieu, toute l’équipe tient à remercier particulièrement Océane pour son implication tout au long du projet, depuis Septembre jusqu’à la fin de l’année ; et pour la réactivité dont elle a souvent fait preuve quant à nos propositions de maquettes et à nos questionnements.

Nous aimerions aussi gratifier les efforts de Mme Charnay pour son accompagnement et ses réponses à nos questions concernant le projet tuteuré, ses modalités de rendu et ses conseils afin de nous préparer à l’oral.

Enfin, nous remercions également Mme Hayenne pour nous avoir aidé à retravailler le contenu en rapport avec la mobilité lors de la refonte de l’IUT.

SOMMAIRE

01

Introduction

02 DVNTS

03 IUT DE LENS

04 Bilan de projet

05 Conclusion

06 annexes

06

08

19

30

41

43

INTRODUCTION

Dans le cadre de notre Licence Professionnelle “Créaweb : Métiers du numérique”, l’équipe a eu pour mission de réaliser un projet tuteuré - projet qui se démarque comme une étape primordiale de la formation.

Nous avons opté pour le projet de type agence web ; c'est-à-dire de se mettre, en équipe de 5, dans la peau d’une agence qui doit répondre à des commandes clients concrètes dans l’optique de renforcer notre préparation à la professionnalisation.

De plus, traiter plusieurs sous-projets permet aux membres du groupe de développer et mettre à profit nos différentes compétences ainsi que de répondre à des besoins du monde réel - ce qui est un point non négligeable pour l’équipe.

Aujourd’hui, notre équipe est composée de cinq membres : Antoine, Evan, Pierre, Victor et Youcef. Même si chaque membre a un statut qui lui est propre, une certaine souplesse s’est manifestée dans la répartition des tâches selon le projet.

Dans un premier temps, le rapport couvrira la création de notre agence digitale : de sa conception d’abord, en évoquant la genèse et sa mise en route, avant de passer à l’étape concrète de la réalisation. Par la suite, la refonte du site de l’IUT sera également soumise à l’étude en traitant d’abord de la phase d’analyse, puis de notre réponse aux besoins relevés en amont.

Remarque : la mise en page de ce rapport de projet tuteuré s’oriente sur des choix graphiques correspondant à l’agence, son identité et ses valeurs.

07

DVNTS dvnts.studio

Genèse et

mise en route Présentation de l’agence Notre agence est née à partir d’une vision claire : un amour indéfectible pour l’une des tendances les plus en vogue dans le domaine du design graphique : le brutalisme. Ce style graphique (qui concerne à l’origine l’architecture des années 1950-1970 et ayant comme berceau, entre autres, la ville de Berlin) a fini par s’immiscer dans le monde digital et du design graphique / web.

De cette manière, elle se traduit désormais par un parti pris graphique assumé et osé : privilégier la surprise et l’originalité plutôt que l’accessibilité.

Il est question d’interfaces aux typographies immenses, aux couleurs criardes, et parfois remplies d’animations farfelues.

Nous nous sommes réunis afin de discuter de l’identité de notre collectif et pour mener une veille informationnelle : définir un nom, une identité visuelle, et discuter des projets potentiels à honorer.

Création de l’agence C’est avec cette appétence pour le style brutaliste et autour de ce noyau fort de ses cinq membres que l’agence s’est articulée et a trouvé son nom : DVNTS (abréviation de DEVIANTS, qui désigne des individus qui adoptent un comportement contraire à la norme).

Nous estimons que cette définition résume assez bien le design brutaliste ; et accessoirement le terme DEVIANTS se construit à partir de la racine “DEV” qui peut aussi laisser penser au développement (qui constitue toute une branche de compétences de l’équipe).

09

Si nous estimons que l’accessibilité doit être reléguée à la marge, alors il en sera ainsi.

Toute l’idée de l’agence est de jouer sur cette audace et cette absence de peur des représailles ou des retours vis-à-vis de nos productions, sous prétexte que le style graphique exige cela.

En clair, DVNTS est une agence à l’écoute, innovante et qui n’hésite pas à prendre à contrepied la façon de conçevoir des produits digitaux. L’idée n’est pas de suivre un modèle, mais de créer le vôtre. Notre expertise, votre potentiel. Notre vision, votre projet.

LIVRABLES Ce site étant notre site d’agence, nous étions évidemment nos propres commanditaires.

Nous avons ainsi défini une liste de livrables : une identité graphique & visuelle un site internet un back-office d’administration pour ajouter des articles création de réseaux sociaux supports promotionnels ou éléments de branding annexes

Veille graphique Se lancer dans la création de notre identité graphique & visuelle ainsi que dans la définition de nos valeurs a demandé un réel travail en amont ; d’abord une veille graphique et culturelle vis-à-vis des autres agences qui partagent cette appétence pour le design brutaliste. Notre équipe a tenté de s’approprier les codes de cette tendance (par le biais de sites d’inspirations comme Awwwards) afin d’au mieux les reservir dans notre propre site vitrine.

En fait, la veille constitue même le plus gros morceau au démarrage du projet tuteuré : nous sommes passés par plusieurs jets et de nombreuses idées. En sont ressorties plusieurs pistes que nous avons petit à petit remis à l’étude, explorées, avant d’opter pour le parti pris suivant : la typographie au cœur de notre direction artistique, des compositions simples mais impactantes, et un jeu de couleurs subtile avec des touches d’originalité.

10

Réalisation Afin de s’organiser le plus efficacement possible, notre premier brief nous a permis de savoir comment répartir les tâches au sein du groupe - tout en gardant en tête notre philosophie de travail : chacun a un rôle fixe, mais une certaine flexibilité est de mise.

Organisation et gestion de projet Antoine

Front-end developer

Participation aux phases de brainstorm

et de veille

Evan

Web + Graphic designer

Réalisation de l’identité visuelle &

graphique, et du web design

Pierre

Graphic designer

Réalisation de premières propositions

graphiques

Victor

Front-end developer

Développement front-end, déploiement et

SEO

Youcef

Back-end developer

Création et administration d’un back-office

sur-mesure

11

Identité graphique et visuelle Le point de départ d’une agence - une fois son nom et ses valeurs définies - est bien souvent l’identité graphique et visuelle. Cette dernière se traduit souvent par la recherche d’un univers (couleurs, typographies) et d’un logo. Ce dernier est passé par plusieurs phases de réflexion, de discussion, et d’essais : dans un premier temps, nous essayions de représenter une fleur dans un style graphique très simple et presque enfantin, mais sans vraie signification derrière.

Premières ébauches - Fleurs

Puis notre second choix s’est porté sur une étoile à cinq branches, censée représenter l’unité au sein de notre équipe (elle aussi composée de cinq membres).

L’étoile à cinq branches

12

Nous avions même réfléchi à des moyens de l’utiliser sur des mockups print ou d’accessoires (annexe n°1, p. 46 ). Cependant, l’étoile manquait selon nous de personnalité et d’originalité, et selon nous le potentiel se trouvait ailleurs. Cela n’a pas été facile de se décider et le choix de logo a fait l’objet de nombreuses discussions, veilles, et réunions, mais après plusieurs semaines, tout s’est éclairci.

Aujourd’hui, le logo de DVNTS.STUDIO est un œil vu de face dessiné à l’aide de formes simples et équilibrées (successions de cercles, pleins ou coupés de moitié). On peut également y voir un D retourné à 90°, rappelant l’initiale de DVNTS.

+ “D” DE DEVIANTS

= UN OEIL

Concept du logo DVNTS

Le choix de représenter l’œil cerné vient du désir d’illustrer notre lassitude vis-à-vis des produits digitaux actuels (sites web, identités graphiques, applications) qui sont monnaie courante sur le marché et ne font que reprendre des codes visuels et esthétiques que DVNTS estime vus et revus.

Ce logo représente aussi une grande opportunité en matière de branding, puisqu’il véhicule notre vision de manière forte et ce, très facilement. Nous avons opté pour quelque chose de distinctif, facilement réutilisable dans de nombreuses situations et facilement reconnaissable ; le logo peut être utilisé sur tout type de supports comme le site vitrine, du print, des cartes de visite, et même des produits de Merch (vêtements, sacs…). Il peut aussi être utilisé sur fond noir, avec des contours blancs ; ou décliné (sans la pupille notamment).

13

Déclinaisons du logo DVNTS

En matière de couleurs nous avons choisi principalement du noir et gris clair (couleurs assez fortes qui donnent un gros taux de contraste) avec une petite touche colorée et vibrante : un dégradé de couleurs pastel, à réserver pour mettre l’emphase sur nos éléments phare.

En ce qui concerne les typographies, un mélange de deux polices a été choisi : Neue Haas Grotesk et Silk. La Neue Haas Grotesk étant connue comme l’une des typographies les plus neutres et passe-partout du marché, nous avons trouvé intéressant de l’associer à la Silk : une typographie serif aux courbes agressives et assumées, afin d’ajouter du contraste et de la personnalité à notre identité.

Neue Haas Grotesk 55 Roman, Text / Display

Silk Serif Italic

Aperçu de la charte graphique

14

Design et maquettes Tout comme la vision que DVNTS soutient, le site vitrine se devait d’exploiter cette tendance brutaliste. Il a donc été question, dans un premier temps, de faire de la veille graphique puis de plancher sur des maquettes et un web design.

De plus, l’équipe voulait frapper fort en assumant son style avec des textes très grands en lettres capitales, des icônes pour venir agrémenter les paragraphes et casser leur monotonie ; ainsi que des animations pour rendre le tout plus original et surprenant.

S’il y a bien un parti pris pour lequel nous avons opté, c’est celui d’utiliser le logo comme élément central du site : ce dernier accompagne le visiteur tout au long de sa visite en suivant son curseur, observe ses actions - notons la pupille qui se remplit au survol d’un lien - et cligne régulièrement.

Ces choix traduisent une volonté de faire placer cet élément graphique au centre de la navigation et du parcours du site ; idée qui se manifeste aussi dans les changements de page, puisque l’œil sert aussi de transition entre chacune d’elles. Une autre idée nous est venue concernant le dark-mode du site, celle de fermer la paupière pour continuer de surprendre l’utilisateur et lui offrir une sorte de feedback (annexe n°2, p. 47 ).

Ces décisions sont motivées par l’envie de privilégier l’UI (l’interface utilisateur) à l’UX (l’expérience utilisateur), qui est une pratique bien souvent à bannir en webdesign, et pourtant, motrice de la tendance brutaliste.

Aperçu du site web DVNTS

15

Développement front & back Le site est développé avec Vue.js, un framework Javascript progressif qui permet de réaliser des “single-page applications” (SPA) réactives ; ce qui signifie que tout le contenu est chargé par le client dès le départ, et qu’il n’y a pas besoin de recharger la page lorsque l’on navigue dans les différentes parties du site.

Nous avons installé Vue.js via Vue-CLI, un outil qui permet de créer un “starter” d’application en quelques lignes de commande, embarquant le minimum requis : un routeur, tous les paquets et les dépendances nécessaires pour faire fonctionner l’application, et une poignée d’autres outils très utiles pour commencer à travailler.

Vue-CLI nécessite en revanche la version 2x de Vue.js (alors que la version la plus à jour est la 3x, offrant une nouvelle syntaxe qui permet, concrètement, d’avoir moins de code à écrire pour un résultat identique).

Vue.js n’est pas le seul framework Javascript permettant de construire ce genre d’applications, mais nous l’avons choisi pour plusieurs raisons : il propose des spécificités techniques le rendant plus simple à appréhender que ses concurrents, comme React (qui rend les éléments du site d’une manière différente pour optimiser les performances au détriment de certains problèmes de compatibilité). Il jouit aussi d’une documentation plus simple, traduite en français et complétée par une communauté très active - utile pour le débogage.

Afin de rajouter du contenu dynamique sur le site, nous avons créé une base de données.

Nous avons choisi le framework Express.js pour ce serveur puisqu’il s'intègre parfaitement dans un environnement de développement basé sur Node, permettant de créer des API REST accessibles facilement par notre client Vue. De plus, nous avions un peu d’expérience dans son utilisation puisque c’est la technologie utilisée lors du projet eCoal de l’année passée.

Pour ce qui est du travail collaboratif, il a été question de départager les tâches en deux : le front-end et le back-end. Et qui dit travail collaboratif dit mise en place d’un repository Github sur lequel chaque développeur venait greffer son code, dans un premier temps sur une branche isolée pour éviter les conflits.

Par ailleurs, les développeurs ont suivi une convention de nommage Git afin de mieux nommer leurs commits pour clarifier l’avancement de chacun et harmoniser le projet.

16

À mesure que le projet de l’IUT nous demandait de plus en plus de temps et de ressources, il a été décidé que nous ne pouvions pas travailler pour d’autres commanditaires.

Afin de pallier l’éventuel manque de projets, il a été question de venir agrémenter le site d’agence et de le fournir davantage en contenu grâce à une partie blog, intitulée “Propaganda”. L’idée est de proposer, à travers des articles, des veilles esthétiques, des tutoriels ou des notes d’intention sur le monde du design et du développement créatif afin de “convertir” nos potentiels lecteurs à notre cause ; qu’ils partagent à leur tour les valeurs que DVNTS prône et tente d’incarner.

Concrètement, cette partie prend la forme d’un dashboard (un panneau d’administration) uniquement accessible aux membres de l’équipe, et qui permet d’ajouter, éditer ou supprimer des articles. À ce jour, il y a une dizaine d’articles sur le site et l’idée est de continuer d’agrémenter le site en contenu au fur et à mesure.

Difficultés rencontrées et solutions

trouvées Nous avons eu du mal à définir notre identité graphique clairement au départ : quelle typographie choisir ? Pour quelle(s) couleur(s) opter ? Plus nous faisions de veille sur des sites d’inspiration (Awwwards, Behance…) et plus le choix semblait rude. Trouver une identité dans cette tendance graphique n’est pas toujours simple car même si l’on pourrait croire qu’il suffit d'exagérer les tailles & les couleurs, il n’en est en fait rien : nous voulions quand même définir un système typographique cohérent et avoir un rendu soigné.

Sur le plan technique, le choix de Vue.js a été aussi un petit défi puisqu’aucun membre de l’équipe n’avait travaillé sur ce framework auparavant. Il a donc été question d’apprendre sur le tas, et ce du début à la fin du projet. La documentation ainsi qu’une série de tutoriels sur la formation Vue School ont permis de se familiariser à l’environnement de développement.

L’équipe retient particulièrement une complication technique concernant l’une des librairies utilisées pour le site : Locomotive Scroll. Cette librairie ajoute un effet de Smooth Scroll (défilement de page lisse), et ce, en modifiant la manière d’afficher le contenu.

17

Le fait est que la manière dont fonctionnent les SPA demande d’initialiser la librairie à chaque changement de route en mettant à jour l’instance créée et en détruisant les anciennes pour éviter des complications techniques (la page qui ne peut pas être entièrement scrollée, par exemple).

Et lorsque nous pensions avoir résolu le problème, il est en fait revenu au moment de greffer le back-end au site : les articles du site font l’objet d’une requête serveur, et le temps que cette requête s’effectue, Locomotive Scroll est déjà instanciée et ne parvient pas à afficher les articles. Ce sujet étant assez mal documenté sur internet, il a fallu effectuer beaucoup de tests et de recherches sur les forums (Stack Overflow, Github, les documentations officielles des frameworks…) avant de trouver des solutions : retarder le chargement de Locomotive Scroll, forcer l’instance à se mettre à jour une fois que les articles sont chargés, etc.

18

IUT de Lens iut-lens.youceflcv.fr

PHASE

d’a nalyse Problèmes et constats Le site actuel de l’IUT de Lens a été créé en 2015, et même s’il est en grande partie utilisable, de nombreux défauts d’interfaces et problèmes le rendent peu fonctionnel et parfois difficile d’utilisation pour les futurs élèves cherchant des informations sur l’établissement ou sur une formation. En bref - et c’est l’objet des lignes qui vont suivre un gros travail de restructuration et de tri a été nécessaire.

Nous avons donc décidé de relever les défauts du site actuel afin de savoir quoi et comment l’améliorer sur tous les points. Pierre, qui est un nouvel élève de l’établissement cette année, a eu l’occasion d’utiliser le site pour sa recherche en situation réelle au début de l’année 2020 - lorsqu’il a postulé. Il a répertorié les problèmes qu’il a rencontrés lors de sa première visite ainsi que ceux relevés après un examen plus approfondi.

Dès l’arrivée sur le site, on remarque que le site n’est pas très adapté pour les smartphones et le menu de navigation est difficile d’accès : le responsive était donc entièrement à revoir. Le contenu multimédia a aussi mal vieilli, de nombreuses photographies et vidéos qui étaient d’actualité ne le sont plus. Aussi, certaines images apparaissent pixelisées ou chevauchent du texte.

Si l’on couple les problèmes de contenu avec le manque d’animation, de feedbacks (des retours pour confirmer à l’utilisateur qu’il va cliquer sur un lien ou un média par exemple, et qu’il s’apprête à faire une action / valider quelque chose) ; on se retrouve vite avec un site au design un peu daté techniquement et très statique.

Par ailleurs, L’arborescence actuelle est trop complexe et ne respecte pas la règle des trois clics qui veut que l’on trouve la pièce d’information cherchée sur un site en un maximum de trois clics depuis la page d’accueil. Les informations sont donc éparpillées dans l’arborescence et parfois à des endroits peu intuitifs. De nombreuses pages ont des très faibles taux de visite, car le contenu qu’elles contiennent a tendance à se répéter ou est déjà disponible ailleurs.

20

De nouveaux besoins et contraintes Ne pouvant interagir directement avec la direction de l’IUT (le réel commanditaire du site), c’est la chargée de communication Océane qui a fait office de Product Owner pour ce projet - et qui a en fait servi d’intermédiaire entre les prestataires (nous) et le commanditaire.

Nous étions tous en étroite collaboration avec elle, et avions des réunions plus ou moins régulières (en présentiel puis en visioconférence par la suite).

Notre premier réflexe au début du projet a été de poser plusieurs questions à Océane afin d’avoir une vue d’ensemble de notre champ d’action.

L’une des premières grosses questions a été de savoir si nous étions libres de retravailler, non pas seulement le site, mais la charte graphique et l’identité de l’IUT.

Le logo actuel est complexe et très chargé en informations, et nous avions peur qu’il ne soit pas très lisible - voire qu’il jure avec le nouveau design que nous allions proposer par la suite.

L’autre point qui a posé question, c’étaient les couleurs : la charte actuelle comprend 5 couleurs et nous aurions aimé en avoir moins afin de renforcer l’identité du projet et dégager une couleur dominante. Après un premier échange, nous avons rapidement compris que ce genre de modifications est trop complexe d’un point de vue administratif, puisque le logo et les couleurs ne concernent pas que le site, mais aussi tout un tas de documents administratifs (brochures, factures, affiches, vidéos…) et il serait trop coûteux et délicat de répercuter le changement sur tous ces supports.

Néanmoins, nous avons joui d’un passe-droit concernant des variantes de couleurs : Océane nous a permis de donner un petit coup de neuf à ces dernières pour les rendre plus adaptées au web (les rendre plus vives, plus éclatantes).

Un autre blocage a concerné notre proposition d’utiliser une version minifiée / simplifiée du logo uniquement dans le header ; mais là aussi, cela a été refusé car la direction souhaite avoir apparaître son logo complet en toutes circonstances.

Ensuite, Océane a beaucoup insisté sur les problèmes qu’elle rencontrait jusqu’alors avec le site actuel et son back-office (son panneau d’administration pour ajouter du contenu, des pages, des articles…) : il est trop anarchique et il y a un décalage important entre ce qu’elle souhaite dans le back-office et la manière de l’afficher sur le site. Les images & textes ne se placent pas comme elle le désire.

21

Là aussi, il a donc fallu repartir de zéro : il n’a pas été question de reprendre le thème WordPress actuel et de modifier le front uniquement, mais bel et bien de repenser l’entièreté du site de zéro, back-office compris. Ainsi, la chargée de communication ainsi que tous les futurs utilisateurs (côté administrateurs) qui seront amenés à utiliser le site et à l’alimenter pourront le faire plus facilement.

Une autre de nos préoccupations a concerné le budget alloué à la refonte. En effet, pour mener à bien le développement, l’équipe a eu besoin d’utiliser un plugin WordPress (Advanced Custom Fields, ou ACF) qui permet aux administrateurs du back-office de très facilement modifier les contenus textes & images de n’importe quel gabarit de page (pas que les articles). Le plugin est gratuit de base mais pour accéder aux fonctionnalités les plus puissantes (et que nous avons jugé requises pour ce projet), il est préférable d’acquérir la version Pro qui, elle, est payante.

Du côté de l’administration de l’IUT, dégager un budget n’est pas non plus chose aisée car il a fallu faire plusieurs briefs afin de justifier l’achat du plugin, expliquer en quoi il est utile, et pourquoi il constitue une dépense nécessaire dans le cadre de cette refonte.

Après plusieurs allers-retours et quelques semaines de flottement, l’IUT nous a donné son accord pour acheter ACF Pro. En ce qui concerne les polices d’écriture, Océane nous a invité à choisir des polices gratuites issues de l’API Google Fonts afin de ne pas rajouter d’autres dépenses ; la plupart des licences de polices étant payantes - et avoisinant des montants souvent assez élevés lorsque le projet est d’envergure.

Le dernier point qui a fait l’objet d’un échange - et même plusieurs - est l’arborescence.

Comme souvent, nous avons eu quelques consignes au départ, notamment celle de clarifier la navigation actuelle et revoir complètement l’UX (expérience et parcours utilisateur).

Grâce à ces premiers échanges, nous avons pu nous mettre au travail et lister de manière concrète les problèmes du site dans l’optique de rédiger le cahier des charges.

étude de la concurrence Afin d’avoir une idée plus concrète de ce qui se fait en matière de site internet pour les établissements du supérieur comme l’IUT de Lens, nous avons mené plusieurs études de la concurrence.

22

Ces études avaient pour but de confirmer des choix au niveau du contenu des pages et éviter des problèmes au niveau de l’expérience utilisateur. Notre veille a donc principalement concerné des sites d’écoles et d’universités, afin de voir de quelle manière ces derniers affichaient leurs formations, présentaient leurs modalités, les dates d’inscriptions, etc.

Un bon exemple d’étude de concurrence que nous avons effectué est l’étude pour les fiches de formations : Océane nous avait proposé comme ressource le site de l’ESRA ; et de notre côté, nous avons aussi été regarder du côté de l’ECV, des GOBELINS, et des IUT des villes de Brest, Nantes, Vannes, Marseille, Tours et Laval. Nous avons donc pris une page de formation type pour chacun des sites suivants et relevé plusieurs points que nous jugions pertinents.

On doit retrouver, sur la page de formation, les éléments que les élèves recherchent en priorité ; à savoir l’intitulé de formation, le contenu de cette dernière, les objectifs, les conditions d’entrées (type de bac et d’études préalables) et les liens vers l’inscription.

Ces éléments sont essentiels pour la page et sans eux, notre fiche ne remplirait pas entièrement sa fonction.

Nous avons ensuite défini les éléments qui peuvent être optionnels, mais qui permettraient une meilleure expérience utilisateur. On pense à du contenu photo / vidéo pour présenter la formation de manière dynamique, les débouchés après l’obtention du diplôme, les informations complémentaires (sur l’alternance, l’international, etc.) et aussi du contenu téléchargeable comme la brochure ou un PDF résumé.

23

Répondre

aux besoins Ainsi, après tous ces échanges et cette longue phase de travail en amont, nous avons pu établir un cahier des charges précis avant de commencer à travailler ; nouvelle arborescence & parcours utilisateur design & maquettes du site intégration des maquettes développement d’un back-office WordPress sur-mesure

Organisation et gestion de projet Antoine

Front-end & WordPress developer

Intégration des maquettes et développement du back-office WordPress

Evan

Web + Graphic designer

Réalisation de l’identité visuelle &

graphique, et du web design

Pierre

Consultant contenu et UX

Définition d’une arborescence de site, tri et rédaction du contenu

Victor

Web designer

Réalisation des premières versions des maquettes

Youcef

Back-end developer

Mise en place d’un serveur de test pour le site de l’IUT

24

Afin de suivre l’avancée de chacun sur ses objectifs personnels, nous avons créé une section dédiée à l’IUT sur le serveur Discord de notre agence. À chaque fois qu’un membre du groupe avance sur sa partie, il envoie un message sur le canal textuel dédié.

Un groupe de discussion Facebook est aussi mis en place avec Océane.

Chaque côté donne des nouvelles sur l’avancement global du projet et les différentes parties acceptées par l’administration. Une discussion sur ce groupe était établie au moins une fois toutes les deux semaines et une réunion via webcams interposées au moins une fois tous les deux mois.

La mise en place d’un Trello a aussi été considérée par les membres du groupe afin de faciliter le suivi des différents objectifs. Cependant, vu que l’intégralité des membres du groupe étaient déjà en contact via d’autres moyens de communications comme Messenger et Discord, nous avons jugé qu’un Trello, bien qu’efficace, risquait de complexifier la prise de nouvelles sur l’avancée du projet. Finalement, non désireux de diluer les informations disponibles sur trois supports à la place de deux, nous avons décidé de rester sur Discord pour toutes communications concernant le projet.

Design et maquettes Très vite, l’équipe a proposé des premiers jets de maquette pour donner l’intention graphique du projet. Quelques jours après notre toute première réunion, une première page d’accueil était soumise à Océane et à la direction.

Première version proposée du site de l’IUT de Lens

25

La direction a manifesté son enthousiasme à la réception des maquettes puisque le rendu était institutionnel tout en étant plus moderne ; mais nous avons continué à améliorer le design. Une nouvelle proposition, plus colorée, a ainsi vu le jour, avec l’ajout de diverses formes.

Deuxième version proposée du site de l’IUT de Lens

Nous avons ensuite décidé de ne plus utiliser les formes dans un pattern, et de les faire flotter indépendemment, nous offrant ainsi plus de liberté pour le reste du site. Cette version a alors été validée et retenue pour l’intégration.

L’idée est de proposer une nouvelle direction artistique plus assumée, et plus fraîche avec notamment l’ajout d’une nouvelle couleur dans la charte graphique : un bleu mi-foncé, tendant à peine vers le violet. Cette teinte apparaît comme la couleur principale et est souvent utilisée pour faire ressortir les boutons d’action, les liens, et les sections à mettre en avant.

Pour ce qui est des autres couleurs, nous sommes parvenus à les utiliser en les couplant à tout un panel de formes simples (cercles, demi-cercles, triangles…) qui viennent rajouter de la vie à la mise en page et légèrement casser la monotonie ainsi que le côté “trop” institutionnel - que nous avons nous-même fini par remettre en cause au moment des premières maquettes, comme écrit plus tôt. Nous avons fait le choix d’attribuer une couleur du logo par pôle (comme c’est le cas sur les emplois du temps ou même dans le bâtiment de l’IUT) car ce code couleur est parlant et déjà ancré dans l’inconscient collectif des étudiants.

26

Néanmoins, cette règle n’était pas du tout appliquée au site actuel ; une incohérence de plus que nous avons pris soin de corriger en route. Ces formes & couleurs sont présentes partout à travers le site pour indiquer clairement à l’utilisateur de quel pôle il est question ; mais elles sont aussi utilisées de manière purement graphique. Sur la hero section - la section d’arrivée du site en haut de la page d’accueil - par exemple, on retrouve ces formes de couleur et à l’intérieur, des portraits d’étudiants de l’IUT. Ces portraits,

visibles

dès

l’entrée,

instaurent

directement

une

atmosphère

humaine,

bienveillante et chaleureuse.

Le logo, que nous trouvions au départ complexe à utiliser (et que nous ne pouvions pas changer), a fini par révéler son potentiel puisqu’il est utilisé lors du chargement du site où chaque carré de couleur est animé. Là aussi, ajouter une étape de chargement au site appuie notre volonté de rendre le tout plus moderne et original.

Aperçu du site web de l’IUT de Lens

27

Développement front & back L’enjeu principal vis-à-vis de la refonte du site de l’IUT, en termes de développement, a été de créer un site administrable au maximum. La première étape a été de créer un back-office WordPress sur-mesure afin de faciliter l’édition, l’ajout et la suppression de contenu sur les différentes pages. Grâce à l’outil ACF Pro que l’IUT a accepté d’acquérir, il a été possible de modifier l’administration de chaque page spécifiquement, du site en général, de spécificités techniques tel que le formulaire de contact.

L’idée était d’éviter aux futurs chargés de communication de l’IUT de rencontrer des difficultés au moment de récupérer l’administration du site, d’éviter qu’il faille contacter un enseignant pour modifier un bouton ou une image. Une interface simple et intuitive ainsi qu’une documentation en ligne offrent ainsi une meilleure prise en main (annexe n°3, p.

47 ).

Afin de faciliter le développement front-end, un framework CSS orienté OOCSS et BEM sur-mesure avec des fonctionnalités SCSS telles que les algorithmes afin de générer des classes (à la manière d’un Bootstrap) et des variables en tout genre (couleurs, typos…) a été développé pour le site. L’avantage de cette méthode est la modification rapide du style d’un élément sans avoir à modifier un CSS spécifique mais juste en changeant ses classes.

Côté back-end, la plupart des pages du site sont découpées en sections avec récupération des données ACF saisies par les administrateurs, traitement de ces dernières, et affichage des éléments par des algorithmes (par exemple, le tableau des formations sur la page « Alternance/Formation continue » est entièrement générée par un algorithme).

Difficultés rencontrées et solutions

trouvées Le projet a été marqué par de nombreuses phases “tunnel” où nous n’avions pas de retours ou de nouvelles de la part de la direction durant plusieurs jours, semaines - et même mois. Cela vient de plusieurs facteurs, comme le rythme de l’alternance qui, de manière générale, ne nous permettait pas de nous concentrer sur le projet en début de semaine.

28

Les disponibilités d’Océane ne correspondaient pas forcément aux nôtres or nous avions toujours besoin de passer par elle pour montrer notre travail et demander la validation du commanditaire. Cette navette perpétuelle prenait du temps, beaucoup de temps - et il fallait bien souvent que Océane relance la direction pour donner un peu de rythme.

Une de nos erreurs, toujours concernant l’IUT, a été de nous lancer trop tôt dans le webdesign et la conception des maquettes alors que l’arborescence et le contenu de l’IUT n’ont, en fait, jamais été clairement définis jusqu’à il y a encore quelques semaines seulement. Or, l’arborescence n’ayant cessé de changer et d’évoluer, cela impacte directement les éléments du menu / menus déroulants et les boutons, le nombre de pages à maquetter…

De même pour le contenu - essentiellement à la charge d’Océane et de la direction de l’IUT - qui a pris beaucoup de temps avant de sortir de terre ; et là aussi, sans contenu précis, impossible de savoir comment correctement maquetter les pages car tout dépend de la forme que prennent les éléments.

Par exemple, en sachant qu’une page qui doit contenir beaucoup de texte écrit, nous savons que nous pourrons prendre moins de libertés graphique puisqu’il faudra réussir à caser le maximum de choses possibles. A l’inverse, une page assez légère peut se permettre d’être plus visuelle et plus graphique, et même être illustrée par des images ou des icônes.

Il aurait donc été plus judicieux de notre part de se concentrer entièrement sur l’arborescence et le contenu dès le départ - quitte à ne pas avoir de maquettes pendant plusieurs mois - car cela aurait évité les mauvaises surprises et les allers-retours inutiles, qui n’ont été que des pertes de temps sur la fin du projet.

29

bilan de Projet

Réflexion

sur les projets

Une dualité entre nos deux projets s’est manifestée tout au long de l’année : d’un côté, le l’agence DVNTS nous a permis d’explorer, d’expérimenter, et de nous chercher un peu identitairement. L’agence était l’opportunité de mettre en pratique nos envies et notre vision préférée du design.

De l’autre, l’IUT qui est apparu comme un projet institutionnel - donc bien plus chargé, rigide et normé. Le design et le développement n’ont pas du tout connu le même traitement et ce, sur de nombreux points (identités visuelles et technologies choisies très différentes).

D’ailleurs, outre le thème et l’univers de ces deux projets qui était complètement différent, il est aussi important de noter que la nature de ces derniers n’était pas non plus la même.

En ce qui concerne DVNTS, il a été question de créer un concept, une identité - et de là, en a découlé la réalisation du site - de toute pièce. Il n’y avait aucun matériau préalable, et c’était à nous de tout imaginer. Tandis que pour l’IUT, il s’agissait d’une refonte d’un site déjà existant ; avec des enjeux à respecter, un cahier des charges qui a été dressé pour nous, et avec de nombreuses contraintes à respecter. Le traitement n’a donc pas du tout été le même à chaque fois.

Néanmoins, malgré deux projets très différents - autant dans le fond que la forme chaque expérience a été enrichissante et nous a assurément appris des choses qui seront utiles à chacun. Au final, que ce soit DVNTS ou l’IUT, les deux sites ont fait l’objet d’une analyse, d’inspiration et d’une étude rigoureuse de la concurrence.

Notre agence a beau revendiquer des valeurs brutalistes, être passionnée par le design, le développement créatif, et par des projets originaux ; elle se doit aussi de faire preuve d’une certaine polyvalence et d’une ouverture vers le reste du marché afin de se positionner dans le monde du travail.

31

Bilan individuel

de l’équipe Victor Compétences investies ou acquises Ayant été principalement chargé de la mise en place et du développement front-end du site de l’agence, la principale compétence que j’ai pu acquérir et travailler est assurément Vue.js : ce fut mon tout premier contact avec le framework, et j’en retiens une expérience vraiment nouvelle et plutôt convaincante. Le framework jouit d’une bonne documentation et j’ai pu exploiter une partie du potentiel du framework. Il en va de même pour la librairie Locomotive Scroll, que je n’avais encore jamais utilisée dans un projet.

Ce projet m’a aussi initié à Github Desktop, qui s’avère - après ce projet - être une bonne alternative aux lignes de commandes lorsque les opérations sont simples mais répétitives.

Gestion de projet J’ai eu l’occasion de comprendre et de remarquer l’importance du lancement d’un projet : le plus gros se joue en réalité dès les premiers jours / semaines. La gestion de projet de l’IUT était un peu nébuleuse par moments car nous n’avons pas réellement défini de lead technique ni de lead naturel au sein de l’équipe, et j’ai plutôt l’impression qu’on se passait le rôle un à un en fonction des situations.

Concernant DVNTS, le back-end a mis du temps à venir se greffer au front (ce qui demande toujours quelques ajustements) et certaines propositions graphiques ou demandes d’ajout auraient sûrement pu être formulées plus tôt afin d’avoir un peu plus de temps pour correctement les honorer et améliorer le site.

Méthodes de travail Il aurait peut-être été judicieux de tirer plein potentiel des outils comme Trello, qui ont l’avantage d’être visuels et simples à utiliser. Nous avons utilisé Discord et le système de

32

salons n’est pas toujours adapté au travail de groupe : il est facile de manquer une notification ou de perdre de vue des informations importantes, à mesure que les messages s’accumulent. Du reste, j’ai principalement utilisé Github pour collaborer lors des phases de développement, et nous avons pu mettre en pratique une convention de nommage rigoureuse pour nommer les commits et pour organiser nos branches (afin d’éviter

les

conflits,

ou

d’avoir

des

branches

de

secours

en

cas

de

problèmes

techniques).

Communication au sein de l’équipe Rien à signaler de ce côté, la communication interne a toujours été respectueuse, aucun membre n’a été écarté ou mis de côté. Tout le monde a été acteur, à un moment ou à un autre.

Difficultés et lacunes personnelles Si je devais retenir une difficulté en particulier, elle concerne assurément l’implémentation de la librairie Locomotive Scroll (citée quelques lignes plus haut) dans le site de l’agence. Épaulé par Youcef, lui et moi étions en étroite collaboration afin d’essayer de régler les nombreux problèmes causés par cette librairie.

Pistes d'amélioration Si l’arborescence et le contenu de l’IUT avaient été bien définis et travaillés dès le départ, nous aurions sûrement gagné beaucoup de temps et d’allers-retours inutiles avec le commanditaire. Si je suis amené à retravailler ce genre de projet, il sera important que j’insiste sur ce point avec le client / Product Owner dès le début.

Impact sur le choix de la suite Le projet, de manière générale, n’a pas modifié mon choix pour la suite, il n’a en fait que le renforcer : j’ai d’autant plus envie de travailler et développer mes compétences en Vue.js (et dans les frameworks Javascript en général), mais aussi mettre un pied plus franc dans le développement créatif (création de sites expérientiels originaux, et pas seulement des sites web classiques).

Il a aussi renforcé ma volonté de designer ou développer des projets vraiment originaux, plus osés et libres créativement parlant. Je considère ce projet tuteuré comme une sorte de transition, enrichissante et cohérente vis-à-vis de ce qui m’attend pour la suite de mes études & de mon parcours.

33

Pierre Compétences investies ou acquises J’ai usé de beaucoup de compétences rédactionnelles - axées web - pour rédiger le contenu du site. J’ai aussi pu acquérir des compétences en analyse de données et en expérience utilisateur, et cela m’a permis d’affiner ma critique.

Gestion de projet La gestion pour ce projet s'est faite de façon spontanée et était surtout basée sur le bon vouloir de chacun. L’utilisation d’un serveur de tchat pour faire part de nos avancées était efficace et permettait un véritable échange entre les membres du groupe à chaque avancement.

Méthodes de travail J’ai principalement utilisé Google Drive et Google Docs pour ma part du travail sur ce projet. L’avantage principal de ces deux outils est qu’ils facilitent grandement le partage de mes travaux avec les autres personnes de l’équipe, mais aussi les personnes extérieures comme Océane. J’ai eu l’occasion de travailler avec elle en binôme avec elle sur le contenu textuel des pages.

Communication au sein de l’équipe Très agréable, l’ambiance était bonne et il y avait toujours une personne joignable pour demander de l’aide ou un avis sur mon travail. Tout le monde a su être réactif à des moments cruciaux du projet.

Difficultés et lacunes personnelles J’ai eu des périodes de vide dans mon travail pendant les délais de validations des maquettes ou de l’arborescence. Je suis quand même resté actif en essayant d’aider sur d’autres points du projet et en participant aux réunions d’information avec Océane pour voir si je pouvais participer à l’accélération des échanges. Le nombre important de contenu texte que j’ai écrit tout au long de l’année pour le projet m’a mis en face de mes lacunes en conjugaison, ainsi que ma tendance à tourner les phrases de façon étrange.

J’ai pu surmonter ce problème avec l’aide des autres et en repassant derrière moi-même.

Pistes d'amélioration La communication avec l’administration de l’IUT aurait sûrement été plus fluide si nous avions été plus impliqués dans cette dernière. Pour mes prochains projets similaires, je 34

n’aurai pas peur de déranger en demandant des nouvelles de l’avancement du projet du côté du commanditaire.

Impact sur le choix de la suite La création de contenu textuel axée web est très intéressante et nécessite de vraies connaissances. Je veux continuer de travailler dans l’intégration web, mais ce projet m’aura permis de voir plus en détails des points d’un projet sur lesquels je ne travaille pas normalement.

Youcef Compétences investies ou acquises Niveau développement à proprement parler, j’ai surtout investi de mon temps de travail sur DVNTS. La découverte d’un nouveau framework a été intéressante, d’autant plus que notre formation traite beaucoup moins des frameworks basés en Javascript.

Sur les deux projets j’ai aussi eu l’occasion d’utiliser mes autres compétences telles qu’en communication ou en intégration continue.

Gestion de projet L’équipe fonctionnant sans leader véritable, la gestion de projet était plutôt dynamique, certaines personnes assurant les rôles de gestionnaires selon le projet ou situation. Ce fonctionnement m’a personnellement convenu.

Méthodes de travail Le partage d’informations bloquait parfois à quelques moments de par les outils utilisés (Discord comme plateforme principale a de nombreux avantages, mais la certitude de réception d’un message par tous les membres de l’équipe n’est pas l’un d’eux).

Il aurait peut-être été plus judicieux d’adopter un outil ou une méthode plus appropriée pour pallier ce problème.

Communication au sein de l’équipe La communication était plutôt décontractée au sein de l’équipe, tout en nous permettant des phases plus sérieuses lors des périodes plus chargées en travail. Rien à dire de ce côté là.

35

Difficultés et lacunes personnelles Ma difficulté principale a été que je me suis laissé embourber à un certain moment de l’année par un mélange du rythme de la formation, de la partie en entreprise et de difficultés personnelles. S’en extirper a pris plus de temps que désirable, ce qui a impacté mes performances.

Pistes d'amélioration Je pense que dans les moments où l’équipe se trouvait ralentie pour diverses raisons (communication lente avec l’IUT, rythme soutenu en cours, etc ...), un leader aurait peut-être pu relancer la machine avec plus d’aise que dans une structure sans.

Ceci dit, avoir un leader à proprement parler crée une dynamique d’équipe différente de celle qu’on avait, ce qui aurait peut-être plus nui sur d'autres fronts.

Impact sur le choix de la suite Je ne pense pas que le projet ait réellement impacté mes choix futurs, si ce n’est qu’il me conforte un peu dans l’idée qu’une agence à petite échelle est le genre d’environnement dans lequel je souhaiterai intégrer le marché.

Antoine Compétences investies ou acquises Chargé du développement du site de l’IUT je suis principalement intervenu sur l’administration de ce dernier. En effet, étant depuis peu développeur Full-Stack WP j’ai décidé d’utiliser mes compétences acquises lors de mon alternance pour mettre en place un site stable et facilement modifiable par les chargés de communication amenés à travailler dessus.

J’ai été amené à utiliser des compétences déjà acquises (utilisation d’ACF Pro pour créer un back office efficace et intuitif, création d’un framework CSS fait maison…) mais aussi à découvrir de nouvelles manières d’utiliser WordPress (notamment les taxonomies que j’avais peu utilisées).

De même, la recherche de plugins pour répondre à des besoins spécifiques (création d’un champs ACF « sélection de couleur » ou d’un formulaire simple et rapide à modifier pour un administrateur lambda) a été très intéressante dans l’analyse de solutions pour déterminer la plus optimale.

36

Gestion de projet Force est de constater qu’il y a certains points dans la gestion de projet qui m’ont échappé. Par exemple, nous avions tous en début de projet une idée de ce que nous devions faire ; toutefois nous n’avons pas défini de plan précis de quoi faire, quand et comment. Cela a pu nous égarer en début de route.

Malgré tout, l’utilisation d’un serveur Discord privé dédié au projet nous a permis de toujours avoir une vision globale de l’avancée du projet et de nous organiser entre nous pour progresser à chaque étape.

Méthodes de travail Pour la création du Back Office du nouveau site de l’IUT, j’ai beaucoup dialogué avec Océane afin de comprendre les difficultés principales d’un chargé de communication au sein de l’établissement (difficultés à modifier des contenus, devoir appeler M. Audemard au moindre changement) et ai cherché à proposer des solutions à ces problèmes récurrents.

Pour la partie front-end du site, afin d’éviter de trop dissocier mon travail des avancées graphiques des maquettes, j’ai cherché, lors des phases de développement, à procéder d’une manière bien précise.

Tout d’abord, éclaircir les éventuelles interrogations concernant la maquette à coder.

Ensuite, passer au développement en confrontant la volonté graphique et la réalité technique. Pour finir, partager le résultat via des captures d’écran et traiter les retours concernant mon travail.

Communication au sein de l’équipe La communication au sein de l’équipe est restée totale du début à la fin, avec un sérieux non dénué de moments plus légers, à aucun moment je n’ai senti que quelqu’un ne disait pas les choses ou qu’il y avait un manque de dialogue entre nous. Parfois, si quelqu’un rencontrait des difficultés, il nous les partageait sans forcément attendre de solution mais j’ai toujours considéré que d’avoir un interlocuteur intéressé par nos problèmes rencontrés au sein d’un projet aide à alléger la charge.

Difficultés et lacunes personnelles J’ai essayé de garder la motivation et l’entrain tout du long tout de fois il m’est arrivé d’être grandement frustré par des difficultés techniques ou des évolutions au sein du projet qui remettaient en question mon travail précédent. Par ailleurs, des difficultés personnelles m’ont progressivement décroché du projet (comme des cours et du travail 37

en général) et il a été difficile d’avancer pendant un long moment.

D’un point de vue technique cela dit je n’ai pas rencontré de réelles situations critiques, des défis à surmonter oui mais rien d’impossible ou de décourageant sur le long terme.

Pistes d'amélioration

Contrairement à la communication au sein de l’équipe, la communication avec le client a été

très

problématique

et

handicapante,

je

ferais

à

toujours

tout

faire

pour

éviter

des

situations similaires à l’avenir.

De même, j’ai remarqué qu’il m’arrivait de chercher des solutions complexes alors que la simplicité

remplissait

les

attentes

(notamment

concernant

les

fonctionnalités

WordPress). Je pense faire plus souvent attention à chercher non pas la solution la plus travaillée/recherchée

mais

tout

simplement

la

plus

pratique

du

moment

que

cette

dernière remplit les besoins.

Impact sur le choix de la suite

Le fait de pouvoir trouver une utilité à mes apprentissages éclectiques et d’y trouver une forme

d’accomplissement

Développeur

Full

Stack

m’a

permis

WordPress,

je

de

constater

que

ne

l’aurai

envisagé

pas

je

suis il

sur y

a

le

bon

encore

chemin. un

an

et

pourtant aujourd’hui je suis convaincu que c’est ce que je recherche dans ce milieu et, qui plus est, j’aime travailler ainsi. C’est un métier dont j’aime même les difficultés !

Evan

Compétences investies ou acquises

Étant principalement chargé de la conception graphique, j’ai investi mes compétences en branding, en direction artistique et en webdesign pour la réalisation de ces projets.

J’ai aussi investi et amélioré mes compétences en UX design à travers le site de l’IUT de Lens et ses différentes composantes.

DVNTS m’a enfin permis d’apprendre à maîtriser (en partie) la tendance brutaliste que j’affectionne particulièrement, en l’exploitant à l’extrême.

Gestion de projet

L’équipe ne possédant pas de réel leader, la gestion du projet s’est faite de manière assez naturelle Nous

:

chacun

avons

eu

connaissait

une

assez

ses

bonne

missions capacité

et

pouvait

avancer

d'adaptation

face

de

manière

aux

autonome.

situations

qui

se

présentaient face à nous.

38

Méthodes de travail Tout au long du projet, j’ai utilisé la fonctionnalité des liens de partage qu’offre Adobe XD pour

faire

part

de

mes

avancées

graphiques

aux

membres

de

l’équipe

et

au

commanditaire. Cette méthode est très avantageuse puisqu’elle permet de mettre à jour un lien unique, visible en permanence, avec la possibilité d’ajouter des commentaires directement

sur

développeurs,

les

avec

maquettes. un

accès

Ce

facilité

lien

peut

aux

également

différentes

être

consulté

ressources

par

nécessaires

les au

développement du projet.

Pour chacun des projets, j’ai d’abord eu une phase importante de veille sur différentes plateformes

créatives

(Behance,

Dribbble,

Awwwards)

pour

ensuite

commencer

la

conception graphique sur Adobe XD, en prenant soin de tenir compte de l’avis des membres de l’équipe à chaque avancée.

Communication au sein de l’équipe La communication au sein de l’équipe était très saine. De mon côté, je n’ai pas hésité à donner mon avis et à montrer mon désaccord sur divers sujets lorsque les idées divergeaient, et je pense que c’était le cas pour tous les membres. Avec le contexte actuel, la communication s’est principalement faite en ligne avec des outils comme Discord et Messenger.

Difficultés et lacunes personnelles Pour DVNTS, le fait d’exploiter une tendance graphique aussi originale et inhabituelle n’a pas été évident. Bien que familier avec le concept du brutalisme, je n’avais jamais poussé ce style à l’extrême et cela m’a demandé une veille importante afin de comprendre et maîtriser au mieux les codes qui la constituent.

Du côté de l’IUT de Lens, les délais entre les retours et les retours eux-mêmes ont été une grande source de frustration à titre personnel. Les longues pauses engendrées par ces derniers ont également été parfois démotivantes.

D’un point de vue global, il a été difficile pour moi de concilier le rythme de l’alternance poussé avec le projet tutoré.

Pistes d'amélioration Si je suis amené à travailler à nouveau sur ce type de projet, je pense que je serais plus insistant auprès du commanditaire pour obtenir les ressources manquantes le plus tôt possible, afin d’accélérer le projet. Avoir un leader aurait également pu être intéressant dans les moments creux où le groupe rencontrait une baisse de motivation générale.

39

Impact sur le choix de la suite Le projet tutoré a conforté mon choix de vouloir devenir UX/UI Designer. Par ailleurs, il a confirmé mon appétence, déjà trouvée durant mon alternance, pour les projets à fort potentiel créatif comme DVNTS face aux projets institutionnels comme l’IUT de Lens qui m’amusent beaucoup moins. Toutefois, cette dualité entre les deux projets était très intéressante et challengeante.

40

CONCLUSION

Force est de constater que notre équipe aurait aimé pouvoir produire davantage lors de ce projet tuteuré : le site de l’IUT s’est révélé être une commande très chronophage, ce qui nous a forcé à revoir nos objectifs d’origine à la baisse.

Nous avions en effet d’autres idées de commanditaire au début de l’année ; il était question d’un site vitrine pour un collectif de motion design, un second pour promouvoir un studio de jeux-vidéo, ou encore un dernier pour présenter une marque de vêtements.

Finalement, il a été question de redistribuer nos forces entre DVNTS et l’IUT seulement, et une certaine frustration se fait - après coup - ressentir.

Néanmoins, nous sommes fiers du travail abattu et des résultats : le site de DVNTS colle à nos envies et à ce que nous nous étions projetés ; et concernant le site de l’IUT, la direction nous a fait parvenir des retours très positifs et enthousiastes vis-à-vis de cette refonte.

42

ANNEXES

sommaire

des annexes 01 logo étoiles sur mockups

45

02 Dark mode DVNTS

46

03 Back office iut de lens

47

44

ANNEXE 01

Utilisation d’une ancienne version du logo DVNTS (l’étoile à 5 branches) sur un sac et un magazine.

45

ANNEXE 02

Aperçu du dark mode du site web DVNTS.STUDIO,

avec le logo ayant la paupière fermée.

46

ANNEXE 03

Un aperçu du back-office avant la refonte (1)

Un aperçu du back-office avant la refonte (2)

47

ANNEXE 03

Un aperçu du back-office après la refonte

48