Cyberbeam - Protéger votre site web

Guillaume Moreau, le fondateur de Cyberbeam a fait appel à mes services pour faire une refonte de sa charte graphique et de son site web.

Il souhaitait un logo plus travaillé, garder le contenu actuel de son site web mais revoir le design pour une navigation plus immersive et dynamique.

1 - L'identité visuelle

La première phase du projet comprenait la création de la charte graphique de Cyberbeam.

Pour la refonte de son logo, j’ai décidé de lui réaliser 3 croquis différents. ✏️

Nous avons opté pour la seconde proposition qui semblait être plus moderne et plus facile à comprendre :

• Les initiales CB imbriqués pour former un blason faisant référence à un bouclier de protection et une vague en bonus pour créer un clin d’œil à son premier logo

En bonus pour sa charte graphique, j’ai réalisé une version "semi-3D" de son logo. Ce même logo sera affiché en grand sur la bannière principale de son site web à côté de la promesse.

2 - Le site web

La seconde phase du projet était de faire la refonte du site Cyberbeam.

Pour cela, je suis parti sur un style innovant incluant pas mal d’interactions/animations au niveau des sections.

Le style des boutons principaux du site est assez poussé.

Je me suis assuré d'avoir une forme coupée avec du CSS Clipping mask pour créer un effet plus "Cyber/Techno" du site web.

Lors du survol sur le bouton, une lueur externe apparaît et le bleu dégradé devient un peu plus saturé, enfin quand on relâche le bouton, la lueur externe se disperse pour totalement disparaître.

Sur la bannière principale, vous pouvez voir le logo bouger et grossir au fur et à mesure que vous déplacez le curseur, mais aussi le mot “Hack” de la promesse se décomposer.

J'ai décomposé les images d'illustration des produits afin de pouvoir les animer individuellement pour créer des visuels plus percutants.

Le pied de page, ou aussi appelé "Footer" est la partie d'un site web à laquelle de nombreux utilisateurs ne font pas vraiment attention, mais surtout où de nombreux développeurs ne prennent pas le temps de les travailler autant que possible.

Pour rendre l'immersion plus complète du début à la fin, j'ai travaillé le "Footer" de Cyberbeam comme s'il s'agissait de l'un des éléments les plus importants du site. 💪

Nous pouvons trouver :

• Un slider infini indiquant "Protect your website"

• Une lueur suivant le mouvement du curseur et illuminant certains éléments au premier plan

• Le nom du site tout en bas qui se remplit en fonction de la position Y de la souris.

N'oubliez pas le petit "❤️" si vous avez apprécié ce projet !

-------------

Vous souhaitez vous aussi démarrer un projet avec moi?

N'hésitez pas à me contacter, je suis très réactif. ⚡️

📩 Par mail : contact@muratdesigns.com

📞 Par téléphone : +33 (0)7 72 14 62 92