RAPPORT DE STAGE D’ETE

LICENCE EN INFORMATIQUE ET MULTIMEDIAS

Intitulé du stage
Réalisation du design d’un site web

Réalisé par
Feriel Rabah

Entreprise d’accueil

Encadrant Entreprise
Mme.Shayma Bibeni

Année Universitaire
2020-2021
Table des matières
Introduction ...................................................................................................................................................................... 6

Chapitre 1 : Présentation de l’entreprise.......................................................................................................................... 7

1. Présentation du milieu de stage ........................................................................................................................... 7

1.1. Groupe ELLOUMI :....................................................................................................................................... 7

1.2. COFICAB : .................................................................................................................................................... 7

1.2.1. Vision ....................................................................................................................................................... 7

1.2.2. Mission .................................................................................................................................................... 7

2. Organigramme COFICAB ....................................................................................................................................... 8

3. Département IT/IS :............................................................................................................................................... 8

Chapitre 2 : Contexte du projet et environnement du travail .......................................................................................... 9

1. Présentation du sujet de stage ............................................................................................................................. 9

2. Environnement de travail...................................................................................................................................... 9

2.1. Adobe XD ...................................................................................................................................................... 9

2.1.1. Définition ................................................................................................................................................ 9

2.1.2. Pourquoi Adobe XD................................................................................................................................ 9

2.2. Interface Adobe XD ..................................................................................................................................... 10

Chapitre 3 : Réalisation ................................................................................................................................................... 13

Conclusion générales ...................................................................................................................................................... 19

Webographie .................................................................................................................................................................. 19
Table des figures
Figure 1 : logo COFICAB.................................................................................................................................. 7

Figure 2 : organigramme de COFICAB Tunisie................................................................................................ 8

Figure 3 : Interface d'accueil du logiciel .......................................................................................................... 10

Figure 4 : Interface de travail d'Adobe XD ...................................................................................................... 11

Figure 5 : Maquettes réalisées.......................................................................................................................... 13

Figure 6 : Nouveau design de la page d'accueil ............................................................................................... 14

Figure 7 : Page d'accueil actuelle ..................................................................................................................... 14

Figure 8 : Page des produits actuelle ............................................................................................................... 15

Figure 9 : Nouveau design de la page des produits ......................................................................................... 16

Figure 10 : Page de mission et valeurs............................................................................................................. 17

Figure 11 : Nouveau design de la page de mission et valeurs ......................................................................... 18

 Dédicaces

A celle qui a attendu avec patience les fruits de sa bonne éducation et de ses

dévouements. A ma chère mère

A celui qui s’est changé la nuit en jour pour M’assurer les bonnes conditions

A mon cher père

A mon cher frère et ma chère sœur qui m’ont beaucoup encouragés et soutenues

A tous ceux qui me connaissent et contribuent de près ou de loin à entamer ce

travail et auxquels je dois être reconnaissante Je dédie ce modeste travail

 Remerciement
C’est un plaisir et un moment très agréable de rendre hommage et de formuler
des
Remerciements aux personnes qui, d’une manière ou d’une autre m’ont ’aidées
dans ce stage.
. Mon remerciement s’adresse à
Toute l’équipe du COFICAB groupe Tunisie. Je leur exprime ma
reconnaissance.
Et ma haute considération pour leur bienveillance, leur accueil et leurs conseils
Précieux.
Je tiens à remercier vivement toutes les personnes du département IT/IS
pour leurs soutiens et leurs conseils.
 Introduction

Le stage se trouve si important pour notre formation, car il permet d’avoir des connaissances sur le domaine
de l’informatique de s’adapter avec la vie professionnelle, d’améliorer et d’enrichir le niveau technique et la
perfection pratique.

Dans le cadre de ma deuxième année a institué supérieur des études de

technologies, j’étais amenée à effectuer un stage

pendant 21/06/2021 à 21/08/2021. Dans la continuation de la

formation riche au sien de l’école, ce stage avait pour but non seulement de

découvrir le monde professionnel mais aussi d’établir des liens entre les

connaissances acquises au sein de l’université et l’expérience

vécue au sein de l’entreprise COFICAB Tunisie, et plus exactement au

Département Informatique.
 Chapitre 1 : Présentation de l’entreprise
1. Présentation du milieu de stage

1.1. Groupe ELLOUMI :

Le groupe ELLOUMI est l’un des plus grand groupes industriels Tunisiens, il a été créé en 1946 par
Monsieur Mohammed Toufik ELLOUMI. Il est spécialisé dans une grande variété de services comme les
câbles automobiles, électriques et de télécommunications, les faisceaux de câbles, l'agroalimentaire,
l'immobilier, l'urbanisme, la vente au détail, l'électroménager et le conseil.

1.2. COFICAB :

COFICAB est une entreprise fondée en Tunisie par groupe ELLOUMI en 1992.Elle est spécialisée dans la
conception, la fabrication et la vente des câbles et fils automobiles.

Son expérience dans le secteur automobile lui a permis de se déployer sur le plan international en
implémentant d’autres sites de production dans différents pays comme Maroc, Portugal, Serbie, Chine,
Mexique et Roumanie.

Figure 1 : logo COFICAB

1.2.1. Vision
COFICAB a pour vision de développer de plus en plus sa présence à l’échelle internationale ainsi que la
recherche de la technologie et de l'excellence.

1.2.2. Mission
Sa mission se traduit par la création des câbles pour les technologies automobiles du futur, tout en offrant
des solutions innovantes et compétitives à leurs clients et être les meilleurs en termes de qualité, tout en
garantissant le plein respect de la santé, de la sécurité et de l'environnement.

7
2. Organigramme COFICAB

Figure 2 : organigramme de COFICAB Tunisie

3. Département IT/IS :

Comme toute entreprise, COFICAB a intégré dans son organisation le département informatique dans le but
d’établir des mesures de performance basées sur les objectifs de l'organisation.

Ce département a pour mission :

• Le développement des solutions innovantes qui soutiennent l’automatisation des processus.

• Le développement des solutions d’infrastructure informatique qui assurent la sécurité des données.

• Suivre les bonnes pratiques du PMO qui s’occupe des processus de gestion projet.

• Adéquation des systèmes informatique avec l’activité de l’entreprise.

• Développement web/mobile

8
 Chapitre 2 : Contexte du projet et environnement du travail
1. Présentation du sujet de stage

Tout au long de ce stage, on m’a demandé de changer l’aspect graphique des pages du site web de
COFICAB afin de créer un design adorable et cohérant.

2. Environnement de travail

2.1. Adobe XD

2.1.1. Définition

Adobe XD est un outil idéal pour faciliter la conception d’une interface utilisateur ergonomique et réaliser
une déclinaison flexible sur les différents terminaux mobiles : tablettes, iPhone, Smartphone, etc.
Il offre à l’utilisateur tous les outils requis, outre une interaction fluide, pour créer un prototype UI de haute
fidélité graphique et adapté à tout type d’expérience utilisateur.[1]

2.1.2. Pourquoi Adobe XD

L’Adobe XD assure des diverses fonctionnalités :

• Personnalisez instantanément l'apparence de votre interface utilisateur en fonction des

recommandations des clients. Cela renforce la crédibilité de votre équipe et la satisfaction de vos
clients.

• Créez des interfaces utilisateur puissantes en tirant parti des complémentarités de divers logiciels de
la suite Adobe et sélectionnez des outils tiers. En effet, les utilisateurs peuvent intégrer des modules
externes (importation de photos, d'icônes, de couleurs, d'effets, etc.) dans leur espace de travail via
des plugins sans quitter l'interface d'Adobe XD.

• Inclure le client tout au long du processus de conception. Cela garantit un dépannage rapide et une
réponse rapide aux plaintes des clients. C'est la solution pour faire avancer votre projet plus
rapidement.

9
2.2. Interface Adobe XD

Lorsque vous lancez Adobe XD, une “fenêtre de démarrage” apparaît :

Figure 3 : Interface d'accueil du logiciel

Ici, vous pouvez choisir la taille de votre planche graphique, qui représente l'écran de l'application ou la page
du site Web que vous allez créer.

Voici l’interface de travail :

10
 Figure 4 : Interface de travail d'Adobe XD

• Barre d’outils gauche

Nous avons ici tous les principaux outils disponibles dans Adobe XD.
Du haut :
• outil de sélection (également accessible à l’aide du raccourci
clavier V du clavier)
• outil rectangle (R)
• outil ellipse (E)
• outil polygone (Y)
• outil linéaire (L)
• outil stylo (P)
• outil de texte (T)
• outil graphique (A)
• outil de zoom (Z)

Et puis en bas :
• bibliothèque
• Calques
• Plugins

• Panneau de droite (inspecteur des propriétés)

11
ce panneau, vous pouvez trouver plusieurs paramètres vous
permettant d'afficher ou de modifier les propriétés de vos objets :
• options d'alignement
• répéter la grille
• combinaison d'options (opérateurs booléens)
• taille et positionnement des objets
• style de texte
• opacité
• remplit
• les frontières
• ombres
• flou

12
 Chapitre 3 : Réalisation

On a commencé par la création des différentes maquettes comme le montre la figure ci-dessous :

Figure 5 : Maquettes réalisées

On a commencé par l’application de quelques modifications sur quelques pages du site comme c’est
mentionné dans les figures ci-dessous.

Page d’accueil :

13
Figure 7 : Page d'accueil actuelle Figure 6 : Nouveau design de la page d'accueil

14
Page des produits :

Cette page représente les différents produits qui sont fabriqués par COFICAB au sein de l’usine.

Figure 8 : Page des produits actuelle

15
La figure ci-dessous représente la maquette de cette page après modifications :

Figure 9 : Nouveau design de la page des produits

16
Page mission et valeurs :
Cette page décrit la mission et les valeurs de l’entreprise.

Figure 10 : Page de mission et valeurs

17
La figure ci-dessous représente la maquette de cette page réalisée par Adobe XD :

Figure 11 : Nouveau design de la page de mission et valeurs

18
 Conclusion générales
Notre stage a COFICAB nous a été bénéfique. En effet on a acquis une expérience qui nous a permis de
nous familiariser dans le monde du multimédia et surtout le Design.

En effet, notre stage nous a permis de consolider les connaissances acquises durant notre période de
formation l’université SESAME.

De plus, la mise en place de notre Design a exigé un minimum de connaissance en UX/UI Design.

Jusqu'à ce jour, nous avons pu réaliser les fonctionnalités principales de notre solution. Cependant, la
perfection ne pouvait pas être atteinte à 100%, cette application peut être améliorée notamment la mise à
jour des utilisateurs, les statistiques des naissances par mois, des décès par mois.

Webographie

[1] : https://www.usabilis.com/adobe-xd-prototypage/

19