T R O E P G P A A 7 T R S 1 E D 0 2 ROMAIN VADILLO WEBDESIGN ET GRAPHISME Entreprise Biason B2 2016-2017 ESCEN
R
M E
E
C R
M E I
S T
N E
M
REMERCIEMENTS Je souhaite avant tout remercier toute l’équipe du service marketing de Biason, pour m’avoir accompagnée, soutenue et fait confiance tout au long de ce stage. J’ai apprécié de travailler au sein de cette petite équipe très soudée de stagiare, toujours de bonne humeur. Je souhaite tout particulièrement remercier Eric Barbeau, mon maitre de stage, qui m’a donner beaucoup de liberté dans mon travail de création et aidé à donner un sens à mes créations. Bien que mes travaux furent quelques fois un peu trop originaux par rapport à la demande il y a toujours montrer de la considération. Je remercie également mon directeur Mr.Biason, qui m’as permis d’integrer son équipe.
3
A M M O S
E R I A 08 16
06
INTRODUCTION 04 05
Ojectif du stage Pourquoi Biason ?
L’ENTREPRISE BIASON
08 Présentattion 10 Les chiffres 14 SWOT
26
L’EXPERIENCE 36 37
Autonomie Ce que j’ai retenu
LES MISSIONS
18 28 30 32
Web design SEO Graphisme Résultats
28
CONCLUSION
5
T C U D O R T
IN
OBJECTIF DU STAGE Mes 4 mois de stage mon permis d’expérimenter une grande variété des différents métiers du web. C’est grâce à cela que m’est apparu une affinité toute particulière pour le graphisme et le web design, sous wordpress notamment. Il m’as donc paru évident que ce stage devrait être dans un domaine correspondant à mes affinités, afin d’apprendre un maximum sur la création et ainsi développer mes atouts. Il s’agissait également lors de ce stage d’en apprendre d’avantage sur la vie en entreprise, car effectivement mon précédent stage était dans une petite startup familiale comprenant moins de 10 employés. Il me semblait donc nécessaire d’avoir une expérience dans une entreprise plus conséquente afin de me forger un avis plus objectif sur mon orientation future.
6
N O I T POURQUOI BIASON ?
Eric Barbeau (Mon tuteur de stage) m’as contacté en ayant comme projet la création de multiples sites pour Biason et ses marques. Biason Fenêtres étant une entreprise avec plusieurs millions de chiffres d’affaires et des centaines de salariés il m’as été donné une opportunité que je n’ai pu refuser. De plus, la mission qui m’a été proposée correspondait parfaitement à mes attentes, un projet de développement web, de la création de la maquette à la mise en ligne, accompagné de tout ce qui va de paire. Mais la qualité de la mission proposée n’était pas tout ce qui m’a attiré dans cette offre de stage, j’y est aussi vu une possibilité de murir en terme de responsabilités et de prise de conscience de l’impact de mon travail sur une société.
1 7
S I R P E R T N
E ’ L
ACTIVITES Une société locale
Nos collaborateurs
Présente depuis 1984 à Serres-Castet, dans les Pyrénées Atlantiques, la société Biason Fenêtres est spécialisée dans la fabrication de menuiseries. Pour garantir à ses clients des produits de qualité et une réactivité optimale, cette société dispose de 7 usines dont 5 dans le Sud-Ouest de la France et 2 en Espagne. Ainsi, elle maitrise la totalité du processus de fabrication.
En raison de son développement constant, la société accueille de nouveaux collaborateurs régulièrement. Ils sont aujourd’hui plus de 250 salariés à concentrer leurs efforts pour développer les produits et services. Les menuiseries de Biason Fenêtres sont vendues dans le Sud-Ouest par leurs propres équipes, dans toute la France par l’intermédiaire des clients distributeurs, et également en Espagne.
Un Personel à votre service L’ensemble du personnel accompagne et conseille les clients tout au long de leur projet. Ils déterminent ensemble des menuiseries adéquates en fonction des besoins exprimés. Les commerciaux présentent les toutes dernières nouveautés au sein de leur hall d’exposition de 300m². En supprimant les intermédiaires, ils renforcent la proximité et la relation avec leurs collaborateurs. Nos usines bénéficient de nombreuses certifications assurant le respect des normes
8
SE
LOCALISATION
Biason Fenetres se situe dans l’agglomeration paloise, à serres castet et plus exactement dans sa zone industrielle, il faut savoir que biason regroupe 4 usines dans cette zone : K-liplast, Arial (2 usines) et bien entendu Biason. Biason possede aussi une usine à Bayonne et deux autres en Espagne.
317 Rue de la Vallée d’Ossau 64121 Serres-Castet TEL : 05 59 33 98 09 WEB : biason.fr
9
BIASON FENETRES
30
MILLIONS
BIASON EN QUELQUES CHIFFRES
DE CHIFFRE D’AFFAIRES
400
250 SALARIES
FENETRES FABRIQUES/JOUR
USINES
7
EN EUROPE
10
vv
LES VALEURS Esprit familial
Innovation et qualité orientées
Avec un développement continu depuis plusieurs années, Biason Fenêtres a tenu à préserver son esprit familial à travers différentes actions. De nombreux collaborateurs se retrouvent durant leur temps libre, et notamment le midi pour effectuer des activités sportives. Chaque année, un repas d’entreprise est organisé après la fermeture annuelle de l’entreprise pour renforcer la complicité des membres et maintenir cet esprit familial.
Biason Fenêtres est en veille constante et cherche quotidiennement à innover pour anticiper et adapter ses produits et services aux futurs besoins des clients. La société est à l’écoute du client et du marché afin de répondre entièrement à leurs exigences. Détenir une fenêtre sécurisé et efficace en termes d’économie d’énergie est indispensable. De ce fait, le personnel est toujours plus réactif face aux demandes des clients. Leurs usines de productions
Esprit d’équipe collaboratif L’esprit d’équipe est une valeur ancrée depuis la création de Biason Fenêtres. Les pratiques managériales et l’implication de leurs collaborateurs sur le terrain sont focalisées autour de cet aspect. La société encourage les collaborateurs à prendre des initiatives et à proposer de nouvelles solutions. C’est l’union de tous leurs talents qui forge leur esprit d’équipe et leur réussite.
Respect de nos engagements
Satisfaction client
Les engagements de l’entrpeprise BIASON font parties de leur identité. Ainsi, les collaborateurs mettent tout en œuvre pour les respecter et trouver des solutions toujours plus efficaces. La qualité de leurs produits ne cesse d’être optimisée grâce à leur bureau d’étude et leur empreinte écologique s’est nettement réduite suite au recyclage des matériaux utilisés.
La société Biason Fenêtres accorde une attention toute particulière à la satisfaction de ses clients et se mobilise pour proposer un rapport qualité-prix optimal. Elle respecte l’ensemble des idées de ses clients et les soutient pour les mener à bien. Biason Fenêtres s’engage à établir des devis personnalisés correspondant aux attentes du client, à respecter les délais, à les accompagner et les conseiller tout au long de votre projet.
11
Les Marques Une société étendu Biason Fenetre a su étendre son domaine d’activité à tous les types de menuiseries, comprenant des battants en vantail aux grandes baies vitrées de 9M de long. Mais ce n’est pas tout, ils ont aussi su et du s’adapter à plusieurs types de demandes et de clients. Pour cela, le groupe s’est scindé en plusieurs réseaux de distributions afin de satisfaire des formats de commande qui peuvent fluctuer en fonction du clients, s’il est professionnel, particulier ou une marque de grande distribution par exemple.
ALU CANAL HISTORIQUE :
ARTISANTS: GRANDE DISTRIBUTION: A FACON:
PARTICULIER:
12
PVC
Organigramme Christian Biason PDG
Stéphanie Marcadet Directrice RH
Maxime Ramos Directeur Usine Arial
Bruno Morère Directeur Service Informatique
Genevieve Seigneure Directrice Financière
Hugo Vanden Eede Directeur Commercial
Eric Barbeau
Jean Luc Bastié Directeur Usine K-lipllast
Pole Marketing EN CONSTRUCTION
Les produits Une grande diversité
Le sur mesure
Biason Fenetres à la particularité de proposé à ses clients un choix presque infini de style de fenetres, cela peut aller de simple fenetres à frappes aux trapèzes en passant par les coullissants. De plus Biason à su développer le coté personalisation de ses menuiseries avec un panel de couleurs exceptionnel et énormement d’accessoires.
L’autre principal atout de cette entreprise sont les moyens investit dans ce que l’on appelle la menuiserie “A facon” ou autrement dit le sur mesure. Ils sont capable de produire des fenetres architectural de 9M de long pour plus de 3M de haut.
13
SWOT
S O
Fabricant-concepteur-Gammiste Marché Neuf/Rénovation Profondeur de gamme Pas de stock Structure commerciale pour vente locale Taille Visibilité Organisation Vente indirect sur la France Organisme non certificateur Fabrication Uniquement sur mesure Devllopement Informatique Innovations Techniques Marketing à developper Croissance externe Donner de la visibilité aux marques
W T
Législation Aides Fiscales ponctuels Vision à court terme Variation du cout des matieres premiere(Alu/Pvc) Concurence nombreuse et illisible Vente indeirect lié à de trop gros partenaires
14
LES CONCURENTS
SWOT Les employés
Les stagiaires
L’entreprise est dispersée en plusieurs zones distinctes. Tout d’abord se trouvent les locaux originaux de l’entreprise BIASON dans laquelle se trouve l’entièreté du pôle financier et l’administration qui se trouve à l’étage et avec qui je n’ai pas pu énormément échangé, j’aurais donc du mal à vous décrire leur travail. Vient ensuite la partie « Agence » des locaux, c’est là ou se situent les commerciaux directs qui vendent aux particuliers et possèdent des bureaux de rendez-vous comme n’importe quel autre commercial direct, puis
Mon bureau était probablement le plus atypique de l’entreprise, c’était le « cybercafé », car nous étions tous stagiaires. Les stagiaires avec moi étaient 4. Celui arrivé le premier a été chargé de la production de plan particulier pour aider les artisans à la pose des fenêtres. Mon maitre de stage a, par la suite, demandé de l’aide au fils de Mr Biason pour rédiger les contenus du site mais il a ensuite été remplacé par une fille qui avait un véritable poste de stagiaire et qui m’a aidé dans la création
15
E L
M S
I
S I
O I S
S N
G I S E D EB
W
LE PROJET INITIAL Differents Site Lorsque que j’ai été contacté par Biason l’ambition était la création de 7 Sites Web : un site institutionnel pour Biason dans un premier temps, puis des sites vitrines/produits pour chacune des marques, c’est à dire Arial,K-Liplast, Winkalu,Winkaplast,Resalu,Reaplast et Structurial. Le principe était simple, faire un design commun à certains sites et des contenus différents.
Un accés privé Il a aussi été prévu à l’origine de mettre en place une sorte de base de données accessible uniquement par les artisans et clients de chacun des différents sites afin qu’ils puissent accéder librement et aisément aux documents liés à leur achat. Cela avait pour but de rapprocher les clients du site web ainsi que de faciliter la transmission de données du vendeur (Commercial) au client (Artisan).
18
GN
CHRONOLOGIE
ACHAT STRUCTURE INSTALATION CMS Mise en place de la structure principale du site avec le cms et les plugin les plus importants. Verrouillage de la sécurité
SYNCHRO CONTENU Faire correspondre le design et le contenu de maniere à garder une experience utilisateur viable.
Commande des bases de données et achat des noms de domaine. Veille des noms de domaine disponible.
$
DESIGN/ MAPPING Création de maquettes, veilles répeter et début de l’integration direct via Wordpress et avada.
REFERENCEMENT Faire correspondre le design et le contenu de maniere à garder une experience utilisateur viable.
SEO
19
LES NOMS DE DOMAINE La première étape de la création des sites fut la sélection des différents noms de domaine pour chacun d’entre eux Par soucis de bon référencement il a donc été nécessaire de répertorié chacun des noms de domaines équivalant au nom de base de chacune des marques, cela fait aussi office de protection face à d’éventuels spéculateurs voulant nous revendre certains noms de domaine.
Il a fallu pour cela premièrement se renseigner quant à la disponibilité de chacun d’entre eux que ce soit les “.fr”, les “.com” ou les “.net”, même les “.eu” on été répertoriés. Par la suite il a donc fallu soit les acheter au prêt d’un hébergeur classique (tel que OVH) ou bien tout simplement de contacter la personne ou la société détenant les droits sur le nom de domaine.
Les noms de domaine choisis k-liplast.fr arial-industrie.fr winkalu.fr
structurial.fr biason-fenetres.com
resalu.fr reaplast.fr
winkaplast.com
L’HEBERGEMENT Le multisite Quand on réalise plusieurs sites sous une même enseigne il est préférable premièrement de les mettre chez le même hébergeur (pour une question d’organisation) et deuxièmement, il est aussi possible chez ce même hébergeur (OVH pour mon cas) d’utiliser une seule même base sql. C’est ce que l’on appelle le multisite, chaque nom de domaine renvoient vers un répertoire different du client ftp .
20
WORDPRESS
L’installation de wordpress dans le cadre dans site web proffessionel demade d’etre methodique
LA SECURITE
Le commencement Une fois les noms de domaine achetés et les hébergements commandés, le travail pouvait commencer. Des lors les installations de wordpress via le client ftp ont commencé, mais il ne s’agit pas juste de mettre wordpress. Mon travail consistant a mettre en place des sites professionnels et fonctionnels, il m’as fallu télécharger pour chacun des sites de nombreux plugin liés à l’organisation du travail que j’allais devoir effectuer. Plugin que je téléchargeais après chaque installation grâce à un cahier des charges bien précis que je me suis créé.
Les plugins liés Toujours dans un soucis de professionnalisation de mon travail il m’a été évident que mettre en place une sécurité équivalente a celle des sites fait par des agences web était une priorité. Pour répondre à cette problématique j’ai du avoir recours dans un premier temps à des plugins adaptés qui m’ont aidé a d’une part bloquer les trop grands nombres de connexions aux sites et d’autre part à complexifier l’accès aux pages éditeur de wordpress « wp-admin ».
Wordpress etant la plateforme de devellepoment web la plus utiliser au monde elle est aussi plein de failles
Le fichier ht.access Lors de mes recherches liées à la sécurité, j’ai très vite découvert l’importance du fameux fichier “ht.access” présent dans les fichiers sources de wordpress. Il s’agit d’un fichier php permettant l’exécution de commande sur l’entité même du site web (Par exemple n’autoriser que certains IP à accéder à une certaine page ou cacher l’existence de certains répertoires tels que wp-includes).Il m’as donc fallu y intégrer des lignes de code aidé de tutoriels
21
LA VEILLE
Une fois que la structure du site est mise en place, il est temps de passer à son design. Pour cela il faut avant tout avoir de l’inspiration et des idées. Je me suis donc renseigné à propos des méthodes : dans beaucoup d’agences de publicité ainsi que d’agences web, les créatifs ont une partie de la journée uniquement dédiée à la veille. Bien que l’activité semble superflue dans un premier temps elle s’avère extrêmement utile lorsqu’elle est faite régulièrement et forge une certaine culture du design et des tendances. C’est pour cela que chaque jour je me réservait une heure à la recherche de nouvelles idées graphiques.
LES INFLUENCEURS ET LES TENDANCES Comme énoncé précédemment, la veille est extrêmement importante dans l’élaboration d’une maquette de site web ou du moins pour son design. Mais faire de la veille commence par « savoir où rechercher », de ce fait grâce à certains de mes contact et de nombreuses recherches Google je me suis forgé un petit catalogue de sites et de réseaux où recherché des design.
IMAGESAVEC TENDANCES
22
PROCESSUS DE TRAVAIL Le mapping L’éveil de l’idée du design voit alors le jour à travers des croquis et dessins. J’ai durant ce stage énormément utiliser mon papier et mon stylo malgré mes piètres talent de dessinateur. Après multiples essais, il m’a semblé être le meilleur moyen pour moi de retranscrire mes idées et de les noter à long terme. La réalisation de croquis m’a été utile de diverses manières : cela m’a aidé tout d’abord à noter toutes mes idées et de les sauvegarder même si elle ne seront pas appliquées par la suite, je pourrais toujours les réutiliser pour un autre projet.
Ensuite, j’ai remarqué que beaucoup de mes idées étaient, lorsque je les avait en tête, tout à fait réalisables mais rendaient tout autre sur le papier et inversement. Certaines n’avaient aucun sens mais une fois développées sur papier semblaient fantastiques. La réalisation de mapping et de croquis m’as donc beaucoup aidé.
La gestion contenu / design Voila l’une des tache qui m’a semblé la plus compliquée lors du développement des sites web. La synchronisation entre le contenu que veut le client (autrement dit mon tuteur de stage dans mon cas), celui que créé la personne qui en est chargé, et son intégration dans le design du site n’est pas forcement une tache à laquelle on pense lorsque l’on n’a jamais réellement conçu de site. Et pourtant ! Cela est délicat et a demandé une adaptation de chaque personne impliquée dans le projet, d’ou la nécessité d’avoir un bon esprit d’équipe et de toujours garder un oeil objectif sur les situations.
23
LES OUTILS UTILISES AVADA Avada est ce que l’on appelle un thème premium wordpress. Alors qu’est-ce qu’un thèmes premium ? Il faut savoir que les thèmes wordpress son présents sous trois formes : les thèmes gratuits directement via l’interface wordpress qui sont très limités en terme de personnalisation qui n’ont souvent qu’un type de design accessible, puis les thèmes premium qui sont donc payants ( les plus cher se situent autour de 60€, comme avala) les plus connus sont enfold, avada et X, et pour finir il existe les thèmes personnalisés qui sont souvent utilisés par les intégrateurs professionnels et qui sont codés sur mesure. Les thèmes premium permettent ainsi une personnalisation presque infinie par rapport à un thèmes gratuit classique, mais demande beaucoup plus de pratique du au large panel d’options. Il faut aussi savoir que chaque thème premium a son propre fonctionnement.
Avada est ce que l’on appelle un thème prenium wordpress, alors un thème prenium qu’est que c’est ?
Pourquoi ce choix ? J’ai donc choisi avada pour réaliser les sites car je m’en était déjà servi lors de précédents projets et également car il est considérer comme le meilleur thème wordpress (du moins le plus puissant).
24
Revolution slider Avada, en plus de permettre une personnalisation hors du commun sans toucher une ligne de code, vous offre certains plugin habituellement payants. C’est notamment le cas de « revolution slider », qui est un plugin très spécial. C’est un outil de personnalisation encore plus développé que le thème lui même.
l’unique but de faire des élider classiques de haut de page, comme on peut le voir sur bon nombre de sites internet actuel, puis a décidé de s’étendre à la création de sites web entiers. Il m’as donc permis de créer des choses que seul un intégrateur expert saurait réaliser en beaucoup moins de temps que lui. Revolution slider est l’outil dont je me suis le plus servi durant ces 3 mois. Grâce à lui j’ai réalisé des incorporations de texte, des animations et même des pages entières.
Intégration Html/Css Pour certaines parties du site, j’ai eu recours à de l’intégration direct de code au sein de ma page. Qu’il s’agisse de simples modifications de taille ou de couleurs de police en passant par la personnalisation d’animation CSS, j’ai du dans de nombreux cas mettre les mains dans le cambouis. Avada me permet, en plus d’avoir un large panel d’animations et fonctionnalités esthétiques, d’intégrer directement à son squelette ma propre feuille de style CSS, un atout non négligeable quand on sait la difficulté que peut être l’intégration de codes dans wordpress.
25
v
MOBILITE La partie mobilité d’un site web est aujourd’hui une chose évidente, malgré qu’il subsiste encore de nombreux site non responsive.
Responsive design Que veut dire responsive design ? C’est l’action d’intégrer dans son design le fait que votre site viendra sans aucun doute s’afficher sur un téléphone un jour ou l’autre quelque soit votre audience, et de ce fait prendre en compte le changement de la taille de l’écran ainsi que du format du site web. Une grande partie de cet aspect était déjà pris en charge par AVADA, mais sur certains points comme les slider ou encore les intégration html il m’a fallu créer et dupliquer le contenu pour chaque type d’écran (grand, petit, tablette et téléphone).
Compatibilité navigateurs Lors de la première présentation du site au BDG de Biason, il m’est arrivé ce que l’on appelle communément une erreur de compatibilité. C’est à dire que mon site internet était illisible ou du moins en partie, par le navigateur présent sur l’ordinateur de présentation, ou plus exactement la version du navigateur. Cela m’as donc permis de me rendre compte du fait que dans de nombreux cas certaines version de chrome, mozilla, safari ne peuvent lire certaine de vos lignes de code. J’ai donc procédé à une vérification de comptabilité par la suite.
26
27
R E F E R O
SE
Une fois le site mis en forme, les textes intégrés et les images animées, on pourrais croire que mon travail s’arrête ici … Mais bien évidemment non, cela ne fait d’habitude pas partie du travail du web design mais en tant que seul responsable du bon fonctionnement des sites il était de mon devoir de veiller à son bon positionnement au sein des moteurs de recherche et en particulier Google.
LES OUTILS UTILISE Yoast SEO
Screaming Frog SEO spider
Ce plugin, bien qu’extrêmement connu et réputé, est l’un de ceux que j’installe des la création du wordpress du site pour son utilité. Il se manifeste sous la forme d’un petit onglet en bas de page version éditeur et notifie point par point les aspects SEO à améliorer dans notre page ou article. Il permet également la déclaration de mots clés cohérents à la page et de faire la méta description (tout en étant aidé par des conseils). Ce plugin va ainsi vous interpeler sur le nombre de mots clés présents sur la page, si c’est trop peu ou non, si les titres sont trop longs ou encore si le premier paragraphe est trop court. Il permet ainsi une rectification des principaux problèmes que l’on pourrait rencontrer en terme de SEO, et le tout en temps réel.
Ce plugin va ainsi vous interpeler sur le nombre de mots clés présents sur la page, si c’est trop peu ou non, si les titres sont trop longs ou encore si le premier paragraphe est trop court. Il permet ainsi une rectification des principaux problèmes que l’on pourrait rencontrer en terme de SEO, et le tout en temps réel.mais le tout en beaucoup plus décris et avec beaucoup plus de détails Le seul problème est qu’il faille refaire une analyse complète de la page à chaque fois.
28
T N E EM
C N RE
LES OUTILS UTILISE
Google Page Speed Test
GtMetrics
C’est un classique mais il est quand même nécessaire de la noter. Le site web de Google calculant un score en fonction de la vitesse de chargement de votre site est un essentiel de la trousse à outil du web designer, il permet de voir rapidement quels éléments mettent le plus de temps à charger sur votre page (Page de code javascript, réponse su serveur, taille des images).
GtMetrics est un outil qui intègre Google page speed test dans son analyse, mais également Yslow, un site de mesure de performance. Cet outil va donc recueillir plusieurs informations utiles au développement de votre site grâce à d’autres interfaces. Il va permettre de les analyser et va les organiser afin de les traiter plus efficacement. Par exemple il va vous proposer des images optimisées pour celles trop lourdes.
OnePage.org OnePage.org est un site logiciel, il est utilisé par de nombreux sites de grandes entreprises et possède une grande puissance d’analyse. Mais il n’est pas entièrement gratuit. Cet outil n’est pas celui que j’ai le plus utilisé du fait que la version gratuite ne permette que peu d’utilisation dans le temps (Nombre d’analyses limité, fonctionnalités bloquées etc ..) et que je l’ai découvert trop tard. Malgré cela c’est la chose la plus fantastique que j’ai pu voir en terme d’analyse SEO, il regroupe à lui seul tout les outils précédemment cités et peut faire bien plus. Car contrairement aux autres, OnePage.org ne fait pas qu’analyser une seule page mais va bien analyser tout votre site de fond en comble. Les Liens internes, les erreurs des requêtes, le noms des images, la profondeur des pages, tout y passe et vous êtes conseillés pour chacun des problèmes rencontrés. Mon travail de référencement à donc été de prendre en compte chacune des informations présentes sur cette page et de les utiliser à bon escient afin d’augmenter le ranking de mon site.
29
M S I H P A R G DESCRIPTION
Durant ces 4 mois il m’as fallu, en plus de créer le design des sites de toutes pièces, les fournir en photos, pictogramme, schéma et autres. J’ai donc été chargé dans la plupart des cas à créer, sur photoshop ou illustrator, des logo, gif ou des changements de couleurs de certains objets.
30
E M
LES MISSIONS
Les Logos L’une de mes premières taches liées au graphisme fut la réalisation des logos d’une nouvelle gamme de fenêtres auquel j’ai aussi participé à la création de son nom (Armony). Cette nouvelle gamme sera disponible pour toutes nos marques Aluminium (Winkalu, Résalu et Arial) et auront des appellations différentes pour chacune d’entre elles. Il a de ce fait été nécessaire de leurs créer un logo et de leur trouver un nom adapté. C’est là que mon travail entre en jeu : Biason fait d’habitude appelle à une agence de communication pour ce qui concerne les plaquettes de présentation, autocollants ou prospectus. Mais cette fois ci ils ont fait appel à moi pour élaborer des logo particuliers à chacune des marques qui soient cohérent avec le logo de la marque. Ayant des bases sur illustrator, j’ai donc du faire des maquettes de ce a quoi pourraient ressembler les futurs logo.
Les GIfs Une problématique est apparu lors d’un entretien avec le directeur général : comment montrer notre grande diversité de couleurs disponibles sur nos accessoires et nos fenêtres ? Dans l’optique de la résoudre il m’est apparu l’idée de créer des gifs animés où les éléments changeraient de couleur automatiquement à une cadence élevée. J’ai donc élaboré plusieurs GIF sur photoshop grâce à un tutoriel, qui ont ensuite été directement intégrés dans les illustrations du site.
31
S T A T L U S
v
RE
MOBILITE
La mission qui m’a été initialement donnée fut la création de 8 sites avec pour chacun tout le processus habituel à gérer de l’achat des noms de domaine au SEO en passant par le design. Cela à donc pris beaucoup plus de temps que cela ne laissait présager. De plus j’ai été (Sauf pour les contenus) autonome, ce qui m’a amené à passer beaucoup de temps à m’auto formé et parfois perdre du temps sur certain aspect du site qui n’en valait pas forcement la
32
S
Web Design De plus lors des premières semaines de stage, de nombreux soucis liés à la base de données, sont venues interrompre la progression des sites. De ce fait, seulement un seul des sites prévu est aujourd’hui terminé, un autre est sur le point d’être terminé et un troisième est en cours. Le premier est le site de la marque « ARIAL », il est actuellement entièrement fini, ce qui veut dire que le design est terminé, toutes les pages sont linkés et remplis du contenu qui lui correspond ainsi que du design qui lui est approprié. Cela signifie aussi que toute la partie sécurité est fonctionnel et testé, le site a aussi été passé entièrement en responsive, qui s’adapte donc à n’importe quelle taille d’écran. La partie référencement, quant à elle, est terminée mais n’as pas encore pu être testée grâce au ranking du site sur google car il n’est pas encore en ligne et n’est donc pas encore enregistré auprès de google. Le deuxième site qui est celui de la marque « K-LIPAST » en est à un point presque similaire hormis le fait que la partie référencement n’as pas du tout été entamé et que certaines pages sont encore vides par manque de contenu. Le dernier et troisième site en cours de progression est le site institutionnel du groupe BIASON où devront être groupés l’essentiel des informations liées à l’entreprise, il possède actuellement toute sa charte graphique ainsi que sa page d’accueil et sa structure (Menu et liens).
Web Design Pour les travaux que j’ai du réaliser en graphisme, c’est à dire les gif et les logo des gammes, ils sont actuellement tous terminés mais encore au stade de prototype. Hormis les logos destinés à la gamme Armony de Arial, aucun autre n’a pour l’instant été présenté à Mr Biason le PDG.
33
Y L
A
A N
S Y
P E
R E
O S
E C N E I R PE
EX
AUTONOMIE Mon stage portant sur la création d’un site web du début à la fin et concernant toutes les subtilités de son environnement (hors le contenu qui a été réaliser par d’autres stagiaire), et n’ayant aucun référent direct quant à la marche à suivre, il m’as fallu du temps à faire de la recherche aux problèmes qui se présentaient. Pour cela j’ai eu recours à toutes sortes de solutions : appel à des personnes, contact direct avec l’hébergeur, recherche sur des forums spécialisés, tuto, etc. Mais tout cela m’as appris qu’internet regorges de bien plus de savoir qu’il ne laisse paraitre et c’est ainsi que pendant 3 mois je me suis auto formé. Ayant beaucoup de mal à déléguer les taches ou à les appliquer à la lettre, ce mode de fonctionnement m’a énormément satisfait, et surtout m’as permis de me développer personnellement en terme de méthodologie de travail, du moins dans ce domaine.
36
E
D’AUTRES PORTES
Apres avoir passé quelques dizaines d’heures à faire de la veille et de la recherche d’information pour tout ce qui concernait le développement web, le graphisme et même le référencement, j’ai découvert un tout autre monde qui s’ouvrait à moi si j’y mettais les efforts. Notamment celui de l’intégration pure grâce à html/css, Javascipt avec Jquery ou encore Bootstrap, qui sont bon nombre d’éléments que je ne maitrise que très peu ou pas du tout, et qui je le pense me permettraient de m’épanouir encore plus dans la création.
CE QUE J’AI RETENU La création
L’utilité de la veille
Lors de ce stage, la liberté que j’ai pu avoir en terme de choix esthétiques m’a permis de me découvrir une grande préférence pour tout ce qui est en rapport de près ou de loin avec la création. Le simple fait d’avoir une idée en tête, de l’essayer et de la tailler à son image jusqu’a en faire quelque chose qui me plait est un fait qui m’amuse beaucoup.
L’une des choses qui a le plus retenu mon L’une des choses qui a le plus retenu mon attention lors de ce stage est la croissance énorme d’idée que j’ai pu avoir, non pas grâce à mon amélioration des outils utiliser mais plutôt grâce à la diversités de different design, graphisme, magazine, concept visuel etc, que j’ai pu voir.
37
C
N O
L C
S U
I S
N O
POUR TERMINER
Ce stage de 4 mois m’a permis de travailler sur des thèmes très différents et d’apporter à chaque fois la réponse la plus adaptée possible tout en étant web designer. J’ai trouvé intéressant de travailler sur tous ces différents supports, d’autant plus que je connaissais très peu certains, notamment tout ce qui était lié au graphisme. J’ai été confronté pour la deuxième fois au milieu professionnel, et j’ai appris à comprendre et accepter ses contraintes. C’était la première fois que je réalisais un site professionnel qui avait pour but final d’être intégré à une stratégie de communication, et les retours que l’on a pu me faire ont tous été primordiaux, tant positifs que négatifs. Mais au delà de tout cela, j’ai aussi trouvé la vie dans cette entreprise très formatrice. Ce stage étant ma première expérience dans une grande société à proprement parler, c’était la toute première fois que j’étais amené à travailler avec un chef de projet, ou à avoir autant de réunions avec le grand patron. En fait, à être réellement un maillon utile d’un organisme à part entière. Cela m’a appris à vivre en entreprise, à travailler en équipe…
39
N A
E N
X E
S E