Logo Afgalway

L’Alliance Française (AF) est une grande organisation culturelle et éducative mondiale à but non lucratif, elle comprend plus de 1000 structures sur 135 pays. Sa mission est de promouvoir la langue et la culture Française en dehors des pays francophones.

Bien plus qu’une simple école de français, elle permet aux élèves de s’ouvrir culturellement sur des univers comme l’art grâce à la rencontre d’artistes locaux et internationaux, la cuisine, le monde des affaires, le jeu pour les enfants avec le programme « French For Fun » en bref d’échanger sur les différences et les similitudes des pays et tout ça dans la bonne humeur please !
Les étudiants bénéficient de plus du programme d’apprentissage AF Frames, programme préparant aux examens et diplômes accrédités par le Ministère de l’Éducation National et en accord avec le COMMON EUROPEAN FRAMEWORK FOR LANGUAGES ( Cadre européen commun de référence pour les langues ).

Après 5 ans d’absence, AFGalway, bénéficiant de 35 ans d’expérience, s’est ré-implanté sur Galway et nous a contacté pour développer la partie « network » et la charte graphique de cette structure basée à Galway qui manquait cruellement de communication.

Etude de cas : des solutions adaptées

Notre rôle a été tout d’abord d’étudier la concurrence sur internet dans un domaine très convoité à Galway, qui est une ville universitaire, celui des cours de langue.

De cette étude est ressortie que nous avions plusieurs solutions à proposer pour les aider à se démarquer:

1. Tout d’abord le choix d’Afgalway de travailler avec Nethik pour la création du site internet est devenu évident lors de la présentation de l’outil Meabilis qui rend très simple la mise à jour du site et évite une charge de travail supplémentaire lorsque le client est déjà débordé > gain de temps
2. Un gros travail de création de contenu : des mots-clés efficaces et judicieusement choisis qui permettront au site de se positionner avant les concurrents sur les moteurs de recherche grâce au référencement naturel. > meilleure visibilité
   
3. Une architecture simple et efficace avec des raccourcis qui permettent aux élèves d’accéder directement à l’information recherchée > efficacité
   
4. La présence sur les réseaux sociaux : création d’un compte Facebook et Alliance Française Network
   > création d’un réseau
   
5. Plus d’interactivité : tests de français en ligne, agendas, et modules d’actualités. > site vivant
   
6. Plus de photos pour plus d’attrait pour les jeunes donc plus de visites! > importance de l’esthétique

La communication graphique : création d’un univers bi-culturel

> Mettre visuellement en relation deux cultures

Le défi était de taille car la cible est vaste : les élèves sont aussi bien des adultes, des étudiants ou des enfants, de nationalités différentes et les activités proposées diverses (apprendre pour le plaisir, passer des examens, pour raisons professionnelles, sans compter les activités culturelles…) impliquent de mettre en avant aussi bien le côté convivial que le coté sérieux de l’apprentissage.

Page d'accueil du site

Notre choix s’est porté rapidement sur la mise en avant de photos ayant des connotations fortes culturellement. Les Champs Elysées et l’Arc de triomphe comme une évidence pour la France et les cygnes du port de Galway pour l’Irlande et Galway.

La photo de l’enfant aux couleurs irlandaises caractéristiques arborant le sourire franc et spontané des bambins apporte la touche de bonne humeur recherchée.
Ces photos sont reliées par une courbe représentant le lien entre les cultures et le dynamisme de la structure en créant du mouvement.

De plus la spirale du logo qui a une signification forte, – du grec « speira » enroulement, sa racine « spar« , qui veut dire répandre, saupoudrer, de disséminer – dans notre cas illustre le développement de la francophonie dans le monde est repris en filigramme sur les divers supports

Le choix des couleurs est, sur le même principe que pour les photos, le fruit du mariage des 2 drapeaux français/irlandais avec le bleu français , le vert irlandais pour des mises en avant d’éléments graphiques et le rouge du logos qui a été conservé et utilisé comme couleur dominante de la charte.

> Des déclinaisons pour l’édition.

Créations de posters modifiables par le client

Exemple de poster modifiable

La demande du client était claire : être indépendant pour gérer la communication internet mais aussi papier. Nous avons donc proposé un système de fichiers avec des styles prédéfinis qui permettent une mise à jour simple pour communiquer sur les différentes animations et événements ponctuant la vie de l’association, avec possibilité d’exporter le fichier pour impression.

Créations de cartes de visite et carte de remerciement

Carton de remerciements

Un contenu efficace et vivant grâce à des mises à jours très régulières et un texte réfléchi, un design fort iconographiquement avec des photos et des symboles spécifiquement choisis voilà des bons ingrédients pour un site et une communication réussis!

L’activité concernée :
Élevage de Poneys shetlands et chevaux Mérens dans les Pyrénées Orientales.

La prestation demandée :
Un logo, porteur de sens et facilement reconnaissable, des couleurs et une identité visuelle forte, respectant les goûts du client. Cette création de charte graphique devait ensuite pouvoir être déclinée sur un ensemble de supports : web, avec la création d’un site internet, papier (carte de visites, affiches, documents administratifs) ou encore sur des objets promotionnels (tee-shirts…).

Voici donc le résultat :

Le logo

Le site internet (www.elevage-arbre-blanc.fr)

Les cartes de visites

Les tee-shirts

Les affiches (imprimées sur bâche 60×100cm)

Pour rappel, Meabilis est un outil en ligne, développé par Nethik, qui permet de créer un site internet facilement et à moindre coût : www.meabilis.fr

Le but de cette refonte?  Rendre le contenu plus clair, tout en étant plus dense, simplifier la navigation (et travailler la navigation clavier) et se concentrer sur l’essentiel. Les fonctionnalités et services sont plus détaillés, de nouvelles offres à la carte sont présentées et une vidéo de présentation permet de découvrir l’outil en quelques minutes.

D’un point de vue plus technique, cette refonte a aussi été l’occasion d’utiliser HTML5 pour construire le portail et évidemment de le réaliser avec l’outil Meabilis!

Alors qu’en pensez-vous?

En ce moment sur Meabilis, découvrez notre offre spéciale :

Pour tout abonnement d’un an à l‘offre Mea Plus (10€ HT/mois), nous créons les 5 premières pages de votre site!

L’utilisation des grilles dans le processus de création graphique du site internet nous vient bien sûr du monde de l’édition : derrière chaque magazine, chaque livre, se cache une structure invisible qui sera son squelette donc en quelque sorte sa signature graphique.

Pourquoi caler les éléments sur du papier et ne plus le faire à l’écran?

La grille utilisée dans le web permet d’une part, d’obtenir des sites bien structurés, agréables à regarder avec des espaces de vide suffisants pour permettre une lecture agréable du contenu, et d’autre part, de standardiser les templates, ce qui est bien pratique pour les développeurs qui n’auront pas à compter les pixels de votre maquette graphique!.
Le but du site internet étant de transmettre une information, structurer le contenu dans le web vous permet d’explorer votre créativité (qui bien sûr vous a poussé hors des limites du compréhensible pour les non-initiés!) et de garder un texte lisible et aéré avec une réelle impression de maîtrise de l’espace.

Quelle grille utiliser?

Il est facile d’être perdu vu la quantité de méthodes disponibles sur la toile, je vais donc vous en présenter 2 qui me semblent efficaces.

Un système souvent utilisé dans la mise en page d’un site internet est celui de la grille de 960 px de large divisée en 12 ou 16 colonnes.

Le principe et de laisser des marges à gauche et à droite de 10px puis de faire des colonnes de 60px de large s’il y a 12 colonnes ou de 40px s’il y a 16 colonnes.
Si vous êtes perdu, vous pouvez jeter un œil à la démo ci-dessous, certainement plus parlante que bien des explications : http://960.gs/demo.html. Le principal inconvénient de cette grille est qu’elle est très contraignante à mettre en place dans la préparation des fichiers.

Pour ma part, j’ai préféré opter pour un autre système de grille beaucoup plus simple, notamment pour les moins « matheux » d’entre nous, en utilisant uniquement des multiples de 10 : les éléments sont toujours des multiples de 10 et mes marges aussi, que du bonheur!
Je vous laisse un layout pour illustrer cette méthode dite des « 10 pixels ». En général, je laisse des marges de 10px à droite et à gauche de mon contenu, puis 30px entre les ensembles d’éléments et 20px entre les sous-ensembles.

Télécharger le layout

Pour une mise en place plus que rapide de ma maquette, j’utilise la grille dans Illustrator (ou photoshop) :
Allez dans les préférences puis dans Repères et grilles.
J’ai choisi ici des pas de 240px et des subdivisions de 24px, mais vous pouvez choisir ce qui vous conviendra le mieux, du moment que cela reste multiple de 10 (60/6, 320/32, 240/24 ….).

Ensuite, je place les repères sur ma page et je n’ai plus qu’à caler mes éléments : me voilà avec un beau template!
J’espère que ces conseils vous serviront.

Et vous, utilisez-vous les grilles?