Rapport de Projet

Licence appliquée en Communication et MultiMedia

Création d’une agence de communication :

Réalisé par :
Sondes GHOMMIDH

L’année universitaire
2020-2021
Table des matières

Introduction générale ........................................................................................................... 6

Chapitre I : Analyse et spécifications des besoins ............................................................... 8

I.Analyse graphique ............................................................................................................ 9

1.Analyse graphique des logos ........................................................................................ 9

2.Analyse graphique de L’Alchimiste studio ................................................................. 10

3.Analyse graphique de Else&Bang ............................................................................... 13

4.Analyse graphique de Pantagram ................................................................................ 17

II.Analyse des besoins ....................................................................................................... 20

1.Identification des acteurs ............................................................................................ 20

2.Les besoins fonctionnels ............................................................................................. 21

3.Les besoins non-fonctionnels ...................................................................................... 21

Chapitre II : Conception .................................................................................................... 22

I.Conception graphique ..................................................................................................... 23

1.Présentation de l’agence ............................................................................................. 23

2.Charte graphique ....................................................................................................... 23

II.Conception du site web ................................................................................................. 29

1.Synopsis du site web .................................................................................................. 29

2.Objectif du site web .................................................................................................... 29

3.Cible du site web ........................................................................................................ 29

4.Schéma de navigation ................................................................................................ 30

5.Scénario maquette ..................................................................................................... 30

Chapitre III : Réalisation et développement ..................................................................... 33

I.Environnement de design ................................................................................................ 34

1.Adobe Photoshop CC 2020......................................................................................... 34

Page | 2
 2.Adobe Illustrator CC 2020 .......................................................................................... 34

3.Adobe XD .................................................................................................................. 35

I.Environnement de développement ................................................................................. 35

1.WampServer............................................................................................................... 35

2.Wordpress .................................................................................................................. 35

III.Interfaces du site web ................................................................................................... 37

1.Page d’accueil ............................................................................................................ 38

2.Page « A propos » ...................................................................................................... 39

3.Page « Projets» ........................................................................................................... 40

4.Page « Services»......................................................................................................... 41

5.Page « Contact».......................................................................................................... 42

Conclusion générale ............................................................................................................ 43

Page | 3
Liste des figures

Figure 1: Logo de l'Alchimiste .............................................................................................. 10

Figure 2: page Home du site web lalchimiste-studio.com...................................................... 12
Figure 3 : Page about du site web lalchimiste-studio.com ..................................................... 12
Figure 4: Logo de else&bang ................................................................................................ 14
Figure 5 site web : www.elsebang.com ................................................................................. 15
Figure 6: Page réalisations du site web www.elsebang.com ................................................. 15
Figure 7: Page Contact du site web www.elsebang.com ........................................................ 16
Figure 8: logo de pentagram ................................................................................................. 17
Figure 9 : capture du site Pentagram.com.............................................................................. 19
Figure 10: capture du site Pentagram.com............................................................................. 19
Figure 11: Recherche graphique sur papier ........................................................................... 24
Figure 12 : Recherche graphique sur AI (1) .......................................................................... 25
Figure 13: Recherche graphique sur AI (2) ........................................................................... 26
Figure 14: Logo choisi pour " Fresh Start" ............................................................................ 27
Figure 15 : Palette couleur du logo ....................................................................................... 28
Figure 16: Roue Chromatique ............................................................................................... 28
Figure 17: Schéma de navigation .......................................................................................... 30
Figure 18: Maquette du site web ........................................................................................... 31
Figure 19:logo Adobe photoshop .......................................................................................... 34
Figure 20: Logo Adobe Illustrator......................................................................................... 34
Figure 21:Logo Adobe XD ...................................................................................................35
Figure 22: Logo de WampServer .......................................................................................... 35
Figure 23: Logo de Wordpress.............................................................................................. 35
Figure 24: Logo du plug-in WPForms .................................................................................. 36
Figure 25 : Logo du Plug-in Elementor ................................................................................. 36
Figure 26: Page d'accueil du site web de Fresh Start ............................................................. 37
Figure 27 : Page " a propos " du site web de Fresh Start ........................................................ 39
Figure 28 : Page "projets"du site web de Fresh Start ............................................................. 40
Figure 29: Page "services" du site web de Fresh Start ........................................................... 41
Figure 30 : Page Contact du site web de Fresh Start .............................................................. 42

Page | 4
Liste des tableaux

Tableau 1 Analyse Graphique du Logo "ALCHIMISTE"...................................................... 11

Tableau 2 Analyse Graphique du Site Web de "ALCHIMISTE" ........................................... 13
Tableau 3 Analyse Graphique du Logo de "else&bang" ........................................................ 15
Tableau 4 Analyse Graphique du Site Web de "else&bang" .................................................. 16
Tableau 5 Analyse Graphique du logo de "Pentagram" ......................................................... 18
Tableau 6 Analyse Graphique du site web : Pentagram.com ................................................. 20

Page | 5
Introduction générale

« La communication est la transmission et l’échange de faits, d’idées, de sentiments ou

d’actions »

Leland Brown

La communication, selon Leland Brown, est la transmission et l'échange de faits,

d'opinions ou d'émotions à travers des mots, des lettres, des symboles, des messages, des
photos ou des vidéos.

On distingue généralement trois formes de communication :

- Communication Interpersonnelle
- Communication de groupe
- Communication de masse (media)

La communication multimédia est le fait d’informer, de communiquer, et d’établir une

relation avec quelqu’un ou quelque chose à travers des moyens physiques et / ou numériques
(application web, télévision, radio, presse écrite, affichage ou cinéma…).

En effet, La stratégie de communication multimédia consiste à déterminer, créer et diffuser

un message à une audience cible afin de construire une image de marque, engager un
internaute à effectuer une action et influencer une audience etc.

Il existe des entités diverses spécialisées dans ce type de communication comme les boites
de production, les agences digitales, les agences de communication etc.

Pour le cas de l’agence de communication, cette dernière a pour mission d’accompagner des
entreprises, des collectivités locales, des associations ou autres dans la mise en place de leurs
moyens de communication pour se faire connaître, présenter leurs activités au plus grand
nombre, et au final acquérir de nouveaux clients ou atteindre un public particulier.

Il y a deux grandes familles d’agences de communication :

- Les agences de communication globale : ils s'occupent de tous types de

communication interne et externe, prenant en charge le marketing et la publicité.

Page | 6
 - Les agences de communication expertes : il s’agit d’agences spécialisées dans un ou
plusieurs domaines (agence web, agence print, agence média, agence
d’évènementiel...).

Le nombre d’agences de communication en Tunisie évolue de jour en jour sur le marché

de tel façon que la compétition entre ces dernières s'accentue de plus en plus.

Parmi les plus fortes agence, on peut citer J. Walter Thompson Tunis, Mindshare, McCann
etc.

Concernant J. Walter Thompson Tunis, cette agence est considérée comme la meilleure
agence de communication. Parmi les grands clients qui leur font confiance on trouve
Ooredoo, Syphax Airlines…

Quant à Mindshare Tunisie, cette dernière a gagné le plus de prix au Festival of Media
MENA 2015 dont le prix "Réseau de l'agence de l'année" et le prix "Campagne de l'année".

Dans le cadre de notre formation au sein de l’université centrale, nous sommes amenés au
cours de cette année universitaire à réaliser un projet de clôture. Le projet possède comme
objectif principal : la conception et la création d’un site web d’une agence de communication.

Dans le premier chapitre «Analyse et spécifications des besoins » nous allons commencer
par la phase d’analyse graphique des logos et sites web de quelques exemples d’agences.
Après, nous allons aborder la phase d’analyse des besoins. Dans cette partie nous allons
identifier les acteurs de notre système et les besoins du client qui deviendront ensuite les
fonctionnalités de notre application.
Puis dans le chapitre qui suit, «Conception » nous illustrons la deuxième étape qui est la
phase de conception détaillée.
Enfin, le troisième chapitre sera dédié à la réalisation de l’application web où nous allons
présenter l’environnement de développement, les outils et langages de programmation utilisés
dans notre travail, puis montrer quelques interfaces graphiques de notre application réalisée.
Et nous conclurons notre travail par une conclusion générale.

Page | 7
Page | 8
Introduction

La phase d'analyse et de spécification est la première étape du processus de développement

à adopter. En effet, nous nous intéresserons à l'étude graphique du site et du logos et à en
dégager les significations. Par la suite, nous aborderons l’étude de la manière du
fonctionnement du site web et ceci en recensant les besoins fonctionnels et les besoins non-
fonctionnels.

I. Analyse graphique

L’analyse graphique repose sur l’observation, la description, la dénotation des

caractéristiques formelles, structurelles, matérielles et colorées des formes graphiques et
textuelles.

La démarche adoptée au cours de cette analyse consiste à étudier le logotype tout comme le
site web en tant que tout, voire les formes graphiques, le texte et les couleurs. Cette analyse
repose sur la description des signes graphiques et la détermination de leurs significations non
subjective et le message envoyé au client.

1. Analyses graphiques des logos

1.1. Définition d’un logo

Le logo est l'abréviation du mot logotype. Il se compose généralement d’éléments

graphiques (symboles, formes géométriques etc…) ou d’un texte.

Il correspond à la représentation et l’identification visuelle d’une marque, d’une entreprise ou

d’une association et fait partie de son identité visuelle.

Un logo doit être unique et facile à lire. D’autant plus qu’il doit, dans la plupart des cas,
évoluer au fil du temps avec l'entreprise ou la marque et ses ambitions.

Il existe trois types de logos : les logos symboles, les logos typographiques, et les logos mixtes
et on les retrouve sur plusieurs supports médias.

Page | 9
 2. Analyse graphique de L’Alchimiste studio
2.1. Présentation de l’agence

Il s’agit d’une Agence de communication et publicité Tunisienne. Les activités principales de

cette agence consistent à fournir des Conseils en communication, Packaging, publicité et
marketing.

2.2. Visuel et analyse du logo

2.2.1. Visuel du logo

Figure 1: Logo de l'Alchimiste

#c67050

Code couleur :

R : 198 C : 0%

V : 112 M : 90%

B : 80 J : 63%

N : 0%

Page | 10
 2.2.2. Analyse du Logo

Tableau 1 Analyse Graphique du Logo "ALCHIMISTE"

Dénotation Connotation
- Logo symbolique. - Ce triangle symbolise les
- Le logo est composé de la lettre pyramides et le cercle symbolise
principale du nom de l’agence l’alchimie. En effet, dans le livre
« Alchimiste » inscrite dans un de « l’alchimiste » de Paulo
cercle marron. Coelho, un jeune homme, part à la
- Au milieu de la lettre A, il y a un recherche d’un trésor dans les
triangle et un cercle au-dessus. Pyramides, Lorsqu’il rencontre
- La couleur utilisée est #BF6550. l’Alchimiste dans le désert.
- La couleur marron évoque la
douceur et le bien-être. Elle
présente la nature et la Couleur de
la terre dans le désert.

Page | 11
2.3. Analyse graphique du site web de l’alchimiste : visuels et analyse
2.3.1. Visuel du site web

Figure 2: page Home du site web lalchimiste-studio.com

Figure 3 : Page about du site web lalchimiste-studio.com

Page | 12
 2.3.2. Analyse du site web

Tableau 2 Analyse Graphique du Site Web de "ALCHIMISTE"

Dénotation Connotation
- Site web one-page. – Le site est homogène et simple d’où il
- un menu en haut reprenant les 5 facilite la navigation
grandes parties du site (Home, – Le nombre de couleurs est limité
portfolio, About, News Contact). (noir et marron).
- Un background noir. – Le menu est toujours lisible sur
- Logo de l’agence situé à gauche de la l’écran.
page. – La présence de la vidéo dès qu’on
- une vidéo est le premier élément consulte le site nous renvoie au côté
graphique qui s’affiche communicationnel actuel.
- La bannière se présente sous forme de
vidéo.

3. Analyse graphique de Else&Bang

3.1. Présentation de l’agence

C’est une agence de conseil en communication à Paris, spécialisée en stratégies de marques :

plateforme de marque, identité, stratégie digitale, social media, campagnes…

Page | 13
3.2. Visuel et analyse du logo
3.2.1. Visuel du logo

Figure 4: Logo de else&bang

#fb2b45 #306edd

Code couleur : Code couleur :

R : 251 C : 0% R : 48 C : 82%

V : 43 M : 90% V : 110 M : 58%

B : 69 J : 63% B : 221 J : 0%

N : 0% N : 0%

#331440

Code couleur :

R : 58 C : 9%

V : 20 M : 69%

B : 64 J : 0%

N : 75%

Page | 14
 3.2.2. Analyse du logo

Tableau 3 Analyse Graphique du Logo de "else&bang"

Dénotation Connotation
- Logo mixte : combinaison de texte et - Le police est sans serif et créée par
des motifs dessinés. l’agence elle-même pour assurer
- Le texte est composé de deux termes : l’exclusivité.
« else » signifie « autre » et « bang » - Les bulles arrondis dessinées à la main
signifie « coup » donnent un effet dynamique et vivant
- Utilisation de police sans serif. au logo.
- Les couleurs utilisées sont - Else&Bang utilise le bleu, le rouge et le
violet comme combinaison, afin
d’apporter une sensation de chaleur,
intelligence, de sécurité et de douceur..

3.3. Visuel et analyse du site web

3.3.1. Visuel du site web

Figure 6:Figure
Page réalisations
5 site web du site web www.elsebang.com
: www.elsebang.com

Page | 15
 Figure 7: Page Contact du site web www.elsebang.com

3.3.2. Analyse du site web

Tableau 4 Analyse Graphique du Site Web de "else&bang"

Dénotation Connotation
- Site web dynamique qui contient 5 - Les mosaïques contiennent des liens
pages (agence, offre, réalisations, directs qui aident à la navigation.
else&learn, bang !, contact). - Le site possède plusieurs espaces
- Les pages du site se présentent sous la interactifs qui simplifient le transfert de
forme d’une mosaïque (plusieurs l’information aux internautes (forums,
carreaux). chat, etc.).
- Le menu se situe en haut des pages.
- Le background du site est blanc.
- Plusieurs couleurs sont utilisés dans le
site.

Page | 16
 4. Analyse graphique de Pantagram
4.1 . Présentation de l’agence Pantagram

Pentagram est un studio de design international fondé à Londres. Leur travail englobe
le graphisme et l'identité visuelle, les produits et le packaging, les sites Web et les expériences
numériques, la publicité et les communications, le son et la motion design.

4.2. Visuel et analyse du logo

4.2.1. Visuel du logo

Figure 8: logo de pentagram

#FE0000

Code couleur :

R : 254 C : 0%

V:0 M : 95%

B:0 J : 92%

N : 0%

Page | 17
 4.2.2. Analyse du logo

Tableau 5 Analyse Graphique du logo de "Pentagram"

Dénotation
- Logo typographique (Groupe de lettres
liées).
- Le logotype est composé d’un seul
terme « Pentagram » qui signifie en
français « Pentagramme ».
- La typographie utilisée est Modern
Twenty crée par Monotype.
- La couleur utilisé est #D91438
Connotation
- Le terme pentagramme est composé du
préfixe « penta- » qui signifie « cinq »
et du suffixe « -gramme ». Il indique un
objet graphique qui représente une
figure géométrique à cinq éléments,
telle une étoile à cinq branches.
- L’étoile à cinq branches, fait références
aux cinq partenaires fondateurs de
l’agence.
- Modern Twenty, est une police avec
empattement qui exprime la modernité
et qui donne un effet de sérieux et de
professionnalisme.
- La couleur rouge signifie le maximum
d’énergie, la puissance et la passion.

Page | 18
4.1. Visuel et analyse du site
4.1.1. Visuel du site web

Figure
Figure 10:
9 : capture
capture du
du site
site Pentagram.com
Pentagram.com

Figure 10 : capture du site web Pentagram.com

Page | 19
 4.1.2. Analyse du site web

Tableau 6 Analyse Graphique du site web : Pentagram.com

Dénotation
- Le site contient un slider animé.
- Le body du page web est sous forme de
mosaïque.
- Le logo se trouve à gauche du site alors
que le menu est à droite
- Les carreaux présentent le portfolio de
l’agence
- Le menu est toujours lisible sur l’écran.
Connotation
- Les pages sont homogènes, consistantes
et équilibrées.
- Organisation du contenu est simple en
conséquence ça offre une navigation
aisée.
- L’emploi de la couleur blanc comme
background inspire le calme.
- Présentation des projets sous forme de
mosaïques sur toute la page pour que
l’internaute se concentre sur le travail
de l’agence et pour qu’il accède à tout le
contenu depuis une seule page.

II. Analyse des besoins

L’analyse des besoins sert à déterminer les besoins fonctionnels et non fonctionnels du site
web. L’objectif de l’analyse est de dégager les fonctionnalités du site web pour chaque type
d’utilisateur et à clarifier les besoins et les exigences des clients.

1. Identification des acteurs

Un acteur représente l’abstraction d’un rôle joué par des entités externes (utilisateur,
dispositif matériel ou autre système) qui interagissent directement avec le système étudié.

Notre application web contient deux acteurs principaux :

- Administrateur : ses tâches consistent à faire la mise à jour du site web

(photos, textes …)
- Internaute : Il a la possibilité de Consulter le site web (articles, photos,
vidéos…), contacter l’agence.

Page | 20
 2. Les besoins fonctionnels

Dans cette partie nous détaillons les fonctionnalités, que le site web doit fournir aux
internautes, qui se présentent comme suit :

 Accéder au site web : Consultation des différentes pages du site et avoir des
informations qui concernent cette agence.
 Consultation des services : Consultation des services présentés par l’agence.
 Consultation du portfolio : Le site web fournit quelques projets réalisés récemment.
 contacter l'agence : Echanger des mails électroniques avec l’agence.
 Consultation des informations à propos de l’agence : l’application web permet aux
utilisateurs de connaitre des informations caractérisant l’agence.
3. Les besoins non-fonctionnels

Les besoins non fonctionnels sont des indicateurs de qualité qui caractérisent et spécifient
les propriétés du site web tel que la performance, l’ergonomie, la convivialité etc.

 La performance : le site web doit être performant et fonctionne de façon cohérente

sans erreurs afin de répondre à toutes les exigences des utilisateurs.
 L'ergonomie : Le site web doit être adapté au thème de l'agence, accessible et qui
donne satisfaction à l’utilisateur.
 L'interface : les pages web doivent respecter les principes des interfaces tels que
l'ergonomie et fiabilité
 La convivialité : le site doit fournir des interfaces conviviales .c'est à dire simple et
facile à manipuler par les internautes.
 La compatibilité: le site web doit être responsive c'est à dire compatible avec les
différentes machines et navigateurs.

CONCLUSION :

Dans ce chapitre nous avons présenté une étude graphique des sites web existants, ainsi
qu’une spécification complète des besoins qui sont indispensables pour mieux faciliter le
travail à réaliser.

Dans le chapitre suivant nous allons aborder l’étude conceptuelle de notre site web.

Page | 21
Page | 22
Introduction

La conception représente une phase primordiale et déterminante pour produire un site web
de haute qualité.

C’est dans cette partie que nous allons clarifier en premier lieu l’identité visuelle de
l’agence, à travers la définition de la charte graphique. Puis, dans un deuxième lieu nous
allons présenter la conception du site web en décrivant les objectifs, le cible et scénario du
site.

I. Conception graphique
1. Présentation de l’agence

Notre projet consiste à créer une agence de communication et de sponsoring basée à Tunis.
Cette agence s’occupe de créer l’identité visuelle, les sites web et de faire connaitre et de
promouvoir la marque, les produits et services du client sur le net.

Nous avons choisi de nommer l’agence Fresh Start. Le nom est composé de deux termes :
« fresh » signifie « nouveau» et « Start » signifie « départ ».

Nous avons choisi Fresh Start (=nouveau départ) comme nom d'agence pour dire aux
clients qu'ils ont l'opportunité de bien démarrer avec nous et les motiver à franchir une
nouvelle expérience en dehors de leur zone de confort en les proposant de nouvelles stratégies
et idées.

2. Charte graphique

La charte graphique regroupe l’ensemble des logos, polices (typographies), couleurs,

icônes, calques et autres symboles qui peuvent être utilisées sur les différents supports de
communication d’une entreprise.

2.1. LOGO

Pour la conception du logo nous avons suivi les étapes suivantes :

Page | 23
a. Recherche graphique sur papier

Figure 11: Recherche graphique sur papier

Page | 24
a. Recherche graphique sur Adobe illustrator

Figure 12 : Recherche graphique sur AI (1)

Page | 25
Figure 13: Recherche graphique sur AI (2)

Page | 26
 b. Logo choisi

Figure 14: Logo choisi pour " Fresh Start"

Le logo se compose de deux éléments :

 Un signe : L’oiseau phœnix en dégradé.
 Un texte : « Fresh Start » le nom de l’agence.
c. Symbolique du logotype

Nous avons choisi le phœnix comme logo car il présente un beau symbole du nouveau
départ.

En effet, le phœnix est un animal mythique, caractérisé par son pouvoir de se consumer
de ses propres flammes puis renaître de ses cendres.

d. Couleurs du logotype

Le phœnix se distingue par sa couleur pourpre, son cou rayonnant d'or et ses plumes rouge
et doré éclatant ou multicolore.

Par conséquent nous avons choisi cette palette de couleurs : le jaune et le violet.

Page | 27
 Palette de couleurs

Figure 15 : Palette couleur du logo

Roue chromatique

Figure 16: Roue Chromatique

Page | 28
 e. La typographie du logotype

La police utilisée est « Rector » :

ABCDEFGHIJKLMNOPQRSTUWXYZabcdefghijklmnopqrstu
vwxyz

II. Conception du site web

1. Synopsis du site web

Notre agence fresh start propose un site web qui contient 6 pages (Page d’accueil, Page
Portfolio, page services, Page à propos et Page contact,).

C’est une plateforme qui permet à chacun des internautes d’accéder facilement à des
informations à propos de l’agence et les services qu’elle propose.

D’autant plus qu’elle permet au de contacter l’agence à travers un formulaire et les

coordonnées.

2. Objectifs du site web

Les objectifs des sites internet différents en fonction du domaine d’activité. Chaque
entreprise dispose d’objectifs qui lui sont propres et de besoins spécifiques lors de la création
du site web.

Concernant notre site web, nos propres objectifs sont :

- Acquisition de nouveaux clients / prospects.

- Amélioration de la notoriété de l’entreprise.
- Instaurer une relation de confiance avec les clients
- Fidéliser les internautes

3. Cible du site web

La définition de la cible est considérée Parmi les priorités de l’entreprise, vu qu’elle

permet de construire son modèle d’affaires, créer son site web et de définir sa stratégie.

Plus la vision de la cible est nette et précise, plus l’objectif est opérationnel. Il est donc
impératif d’identifier et de segmenter sa cible rigoureusement.

Page | 29
Pour notre agence, la cible large est constituée des personnes de différentes âges ,à partir de
18 ans, intéressés par les produits du domaine de la communication et de la multimédia.
Ainsi le site web doit refléter les compétences techniques et créatives et joue le rôle du
support publicitaire.

4. Schéma de navigation

Figure 17: Schéma de navigation

5. Scénario maquette

Un scénario-maquette (storyboard) . Il se présente généralement sous la forme d’une série

de croquis les plus fidèles possibles par rapport à la version finale visée représentant le format
souhaité de chaque page-écran.

Nous avons créé un scénario maquette pour en savoir plus sur le fonctionnement éventuel
du site web avant son développement.

Page | 30
Figure 18: Maquette du site web

Page | 31
Conclusion

En conclusion, pour la conception du site web nous avons déterminé la charte graphique de
ce dernier et ce pour faciliter la compréhension de notre plateforme.

Après cette étape vient la phase de la réalisation que nous allons abordé au cours du prochain
chapitre.

Page | 32
Page | 33
Introduction

Au niveau de cette dernière partie, nous allons énumérer les outils que nous avons utilisés
pour réaliser notre site ainsi que ses principales interfaces.

I. Environnement de design
1. Adobe Photoshop CC 2020

Figure 19:logo Adobe photoshop

Il s’agit d’un logiciel de retouche image ayant très grande base des filtres et des effets. Il
permet dans ses dernières versions d’établir des animations.

Au niveau de cette partie, ce logiciel a été utilisé dans la construction des bannières et des
photos du site web.

2. Adobe Illustrator CC 2020

Figure 20: Logo Adobe Illustrator

Adobe Illustrator est un logiciel de création graphique vectorielle, Ce dernier a été utilisé
pour recherche graphique et la création du logo.

Page | 34
 3. Adobe XD

Figure 21:Logo Adobe XD

Adobe XD est un logiciel de graphisme et de conception. Le logiciel permet d’appliquer des

méthodes de conception telles que le prototypage ou la création de wireframes.

Nous avons créé la maquette du site web et les diagrammes via ce logiciel.

II. Environnement de développement

1. WampServer

Figure 22: Logo de WampServer

Il s'agit d'une plateforme de développement Web, permettant de faire fonctionner localement

(sans se connecter à un serveur externe) ainsi que la manipulation d’une base de données
Mysql.

2. Wordpress

Figure 23: Logo de Wordpress

Page | 35
C’est un système de gestion de contenu gratuit, libre et open-source. Ce logiciel écrit
en PHP repose sur une base de données MySQL et est distribué par la fondation
WordPress.org. Les fonctionnalités de WordPress lui permettent de créer et gérer différents
types de sites Web.

2.1. Les plug-ins

Les extensions WordPress sont de petits logiciels qui s’intègrent et fonctionnent sur
WordPress.

- WPForms

Figure 24: Logo du plug-in WPForms

C’est est un plugin Drag and Drop pour la construction des formulaires de contact sur
WordPress.

- Elementor

Figure 25 : Logo du Plug-in Elementor

C’est un constructeur de pages qui offre des conceptions de page haut de gamme et des
fonctionnalités avancées.

Page | 36
III. Interfaces du site web
1. Page d’accueil

Figure 26: Page d'accueil du site web de Fresh Start

Page | 37
C’est la page d’accueil qui s’affiche dès l’accès à notre site web, elle est constituée de 3
parties principales :
- Une bannière publicitaire qui contient des animations donnant un flash sur
les projets réalisés par l’agence.
- Un formulaire de contact
- Un panneau qui affiche les services de notre agence

Page | 38
 2. Page « A propos »

Figure 27 : Page " a propos " du site web de Fresh Start

La page « A propos » consiste en une bannière pleine écran où s’affiche la description de

l’agence ainsi que sa vision et sa mission.

Page | 39
 3. Page « Projets»

Figure 28 : Page "projets"du site web de Fresh Start

La page « Projets» a une bannière pleine écran correspondant à un panneau qui affiche les 4
derniers projets avec une petite description.

Page | 40
 4. Page « Services»

Figure 29: Page "services" du site web de Fresh Start

La page « Services» correspond à un panneau qui affiche les 6 services de l’agence tout en
montrant les photos des principaux projets réalisés.

Page | 41
5. Page « Contact»

Figure 30 : Page Contact du site web de Fresh Start

- Une bannière pleine écran

- Une grille contient les coordonnées de l’agence
- Un formulaire de contact

Page | 42
 Conclusion générale
Une agence de communication n'est autre qu'une entité dont l'objectif principale est de
prendre en mains les entreprises et les aider à promouvoir leur produit (image, créations,
service, etc.).

Diverses sont les agences qui sont spécialisées en la matière et qui ont réussi à prouver leur
savoir-faire à l'échelle nationale comme l’Alchimiste studio et internationale également
Pentagram.
Pour subvenir aux besoins de sa clientèle, l'agence de communication met en œuvre
différents outils et méthodes dont "le digital" qui a fait preuve d'importance au sein du
domaine de multimédia.
Parmi les divers outils adopté dans le digital, nous avons choisis de se focaliser sur la
conception site web et logo.
C'est dans ce cadre que vient s'installer le projet qui fait l'objet de ce rapport.
En effet, ce projet consiste à créer une charte graphique d'une agence de communication ainsi
que son site web.
Le site web ainsi réalisé est constitué de 6 pages et d'un formulaire de contact direct, d'autant
plus qu'il est en accord avec la charte graphique que nous avons conçu.
Pour ce faire, nous avons utilisé Adobe illustrator et Adobe photoshop pour la création de la
charte graphique, Le CMS Wordpress pour la création du site web et WampServer pour la
gestion de la base des données et le fonctionnent local du site.

Page | 43