24
Fév

Le Cloud, par Alliancy : l’étude de cas

Lorsque le magazine parisien Alliancy nous a contactés pour concevoir ensemble une infographie sur le thème du Cloud Computing, nous avons pris conscience de la complexité d’amener une vision claire sur ces 3 composantes si souvent citées, mais tellement mal comprises : le IaaS, le PaaS et le SaaS.

1. La conceptualisation

Le brief de départ était de conceptualiser le Cloud Computing, afin de le rendre le plus compréhensible par tous. L’idée était de ne pas réutiliser le symbole classique et sur-exploité du nuage, mais de partir sur une autre image, plus concrète.

Après des heures de brainstorming, nous avons décidé, en collaboration avec notre client, de partir sur un personnage par type de Cloud, et de l’associer à un environnement. Le tout dans un même immeuble, en jouant avec le passage d’un étage à l’autre. En effet, la contrainte était également de lier chaque type de Cloud par les services, qui sont communs. Ceux-ci ont été conceptualisés par l’ascenseur, et le consultant à l’intérieur.

alliancy-schemas

La piste développée et validée par le client, nous sommes passés à la phase graphique.

2. Le graphisme

Si nous étions entièrement libres sur le style visuel, nous sommes rapidement partis sur de l’illustration plutôt que de la photographie. Ce choix nous a permis de pouvoir composer aisément, de A à Z, les mises en scène, sans allouer un grand budget à des shootings photos, ou vidéos.

Le magazine Alliancy étant papier autant que Web, la contrainte était de prévoir une interface interactive pour le Web facilement déclinable pour le print. Nous avons alors imaginé un scénario, une discussion entre les différents personnages de l’infographie pour amener à un déroulement facilement transposable sous la forme bande dessinée.

alliancy-print

Nous avons ensuite décliné ce scénario sur le Web, en ajoutant un écran d’introduction, afin de bien comprendre le déroulement.
Le tout validé avec notre client, nous étions prêts à attaquer le développement.

3. Le développement

Toutes les illustrations présentes sur le site ont été intégrées au format SVG (scalable vector graphics).
Le format SVG est un format vectoriel qui, par opposition aux formats matriciels (comme le JPEG, le GIF, le PNG) et comme son nom l’indique, ne subit pas de dégradation lorsqu’il est agrandi. Il s’agit en effet de données basées sur XML, autrement dit, l’image est constituée de formules mathématiques et non de pixels. Cela permet de n’uploader aucune image, mais de les dessiner dans le navigateur à coup de lignes html.

alliancy-ecrans

Le choix du SVG a également été effectué pour ses possibilités d’animations, notamment grâce à la librairie RaphaëlJS. Le temps de chargement de la page est aussi optimisé, puisqu’il n’y a pas de fichiers images à charger.

Les petites animations CSS ont été ajoutées par rendre le tout plus moderne et interactif.
Des modales avec textes explicatifs ont également été incrémentées.
S’en est suivi la période de recettage, de petits hacks pour que le tout fonctionne même sous Internet Explorer (eh oui !), pour au final avoir une sortie et rendre le projet public.

http://www.alliancy.fr/cloud

Le mot de la fin

Le projet d’infographie Cloud, pour le magazine Alliancy, et en partenariat avec Orange Business Services et Microsoft a été un projet très plaisant pour l’équipe. La qualité de la collaboration avec le client, la confiance réciproque et son ouverture ont permis au projet de se développer très rapidement, tout en s’essayant à des techniques encore peu exploitées à l’agence.

Qu’en pensez-vous ?

N’hésitez pas à nous contacter pour nous soumettre votre projet !

Top

2 Commentaires

  1. Benjamin dit :

    Pouce en l’air !

    1. Merci Benjamin, toujours fidèle : )

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *