Le site aux comètes, d’xo7

xo7 est une équipe de geeks ultra calés, qui bossent ensemble. Entre dév spécifiques et produits internes, le jeune équipage avait besoin d’un univers visuel et d’un point de chute dans le monde des internets… Au départ: une fusée pour logo, un produit nommé Galaxie, et une atmosphère “humaine” à transposer. Direction donc l’espace, vers l’infini… et au delà !

xo7-iphone5C-red

xo7.fr

DA digital ou encore, Designer d’Astre Digital :p

Allez, dans le thème de l’espace, des comètes aux planètes, tout y passe ! Ici la thématique est simplement suggérée par plusieurs éléments artistiques dont voici quelques exemples:

Un fond étoilé avec impression de profondeur. Sur ordinateurs, grâce au Javascript, les différents éléments du site se déplacent à vitesses désynchronisées. Cette technique issue des cartoons donne une impression de 3D. On parle alors d’effet parralax. (et là, vous faites semblant de ne pas connaître pour me faire plaisir… et faites “haaaan… intéressant !”).

Un design aéré. Je n’ai pas laissé la place au superflu. Ici, chaque élément possède son emplacement bien spécial, et est séparé par de grandes marges. Ces grands espaces reflètent ainsi l’impression de vide dans l’espace :)

xo7-ipad-air

rendu sur un ipad Air

Chaque contenu possède son environnement visuel. Dès que la typologie de contenu change, le design sous-tend ce changement par des contrastes esthétiques. J’ai choisi pour cet univers d’utiliser des galaxies aux couleurs contrastant avec le bleu général. La distinction entre deux contenus se fait alors instinctivement.

xo7-ipad-design-contrast

environnement visuel contrasté

Et enfin bien sur, toute une série d’illustrations vient habiller le site dans la thématique ! Astronautes, satellite, planètes, comètes, galaxies, étoiles, et autres constellations… Voici quelques exemples parmi d’autres:

Quelques détails de la charte

Quelques détails de la charte

…d’autres détails

…d’autres détails

Bref, le style dessiné répond vraiment à la volonté de présenter une boîte web pas comme les autres. Une boîte où les excès de formalités et les développeurs déprimés cèdent leur place à une relation de confiance et des valeurs humaines. Entre couleurs fortes et dessins de petits bonshommes, la singularité d’xo7 est là !

Et pour les rencontres professionnelles, cette identité est aussi déclinée sur une série de cartes de visite sur lesquelles chaque personne de l’entreprise est représentée sous la forme de son avatar. Avec en bonus, une carte plus sobre pour les rencontres plus formelles :)

les cartes de visite d'xo7 en question

les cartes de visite d’xo7 en question, avec à la fin, la version plus sobre et formelle

Billet d’embarquement pour tout périphérique

xo7.fr est conçu pour le futur, car qu’importe la taille ou la définition d’écran du périphérique sur lequel il est affiché, xo7.fr s’adapte !

un site adaptatif

un site adaptatif

Vous avez vu le site depuis votre ordinateur ? Allez le voir sur téléphone, il est sensiblement différent… Éh oui, il possède une mise en page optimisée pour toutes les tailles d’écran ! J’ai dit TOUTES les tailles d’écran ! Smartphone, phablet, tablette, netbook, ordinateur portable, ordinateur fixe, machin, chouette, truc… Et cela grâce à la fameuse grille responsive css de bootstrap.

Aussi, toutes les définitions d’écran sont supportées, même celles pas encore sur le marché ! L’astuce, c’est de réaliser toutes les images en vectoriel, soit, sur des bases de formes géométriques.

 

Partie mécano, le moteur de l’intérieur…

Si vous n’avez pas encore jeté un oeil, allez-y tout de suite, et observez les subtiles animations sous-tendant l’atmosphère spatiale.

Dès le haut du site, un satellite tourne comme s’il était en orbite. Il s’agit ici d’une Keyframe CSS3, une sorte de scène répétée avec un langage de mise en page. Dans cette scène, une boîte invisible comportant une image de satellite, réalise en boucle une translation ainsi qu’une rotation. Nous avons donc notre image de satellite se déplaçant le long d’un cercle invisible, comme un vrai satellite autour de son axe ! Et enfin, pour parfaire l’illusion, je fais tourner sur elle-même l’image du satellite.

Aussi, vous pourrez remarquer la profondeur de champ qu’apporte l’animation des étoiles (énoncées plus haut). Elle est conçue grâce au script stellar.js. Ce script est le moteur permettant de déplacer plusieurs images d’étoiles à différentes vitesses.

Enfin, dernier élément valant le coup d’être expliqué, la construction de la constellation. En fonction de la taille d’écran, la mise en page change, et donc le tracé qui relie les étoiles s’allonge ou se rétrécit. J’ai dû dessiner les traits à l’aide du jQuery, au sein d’un élément svg dimensionné et positionné à la volée. En somme, un sacré calcul de coordonnées ^^

jquery_logo

Librairie Javascript ayant permis de dessiner la constellation

Décollez, direction la galaxie xo7.fr