Mandarina Web
SEAir

Webdesign • Intégration HTML/CSS dans Wordpress

SEAir est une entreprise spécialisée dans la recherche et l'innovation des foils pour bateaux. L'entreprise dispose d'un bureau d'étude et d'ateliers à Lorient (Bretagne).

SEAir possédait un site internet peu adapté à ses besoins et souhaitait rafraichir son image sur la toile.
C'est l'agence de communication digitale parisienne Le Doigt Sur Le Truc qui a coordiné l'ensemble du projet.

Stratégie visuelle

SEAir avait déjà un logotype et une couleur jaune bien définis. Il s'agissait alors de construire leur image digitale autour de ces deux éléments qu'ils souhaitaient conserver.
En nautisme le jaune est associé aux éléments de sécurité, cette couleur se veut donc rassurante. Néanmoins il s'agit d'une teinte très flashy à utiliser avec prudence et parcimonie. Le webdesign s'est alors construit autour de teintes plutôt neutres : anthracite, noir, parfois gris clair, en privilégiant les gris foncés qui rappellent la couleur du matériau composite utilisé pour fabriquer les foils.
Le jaune quant à lui est réservé à de petits éléments graphiques, généralement utilisé avec des lignes fines et élégantes : éléments de survol dans le menu et sur certains boutons par exemple. Le jaune est également repris dans des formes géométriques, associé avec des photos en niveaux de gris qui servent d'arrière plan pour certaines parties du site.

Couleurs

RVB : #202121
CMJN : 73, 66, 65, 73
RVB : #333333
CMJN : 69, 63, 62, 58
RVB : #ffff00
CMJN : 6, 0, 97, 0

Police de caractères

Abel typeface

Webdesign

Il a été convenu de développer le site sur Wordpress car le chargé du contenu et des actualités était déjà formé à ce CMS.
Conjointement avec l'équipe de SEAir et le chrgé de projet chez Le Doigt Sur Le Truc, nous avons réfléchi à une nouvelle arobrescence et une organisation des informations plus claire et plus ergonomique.
Un véritable travail de fond a été fait pour identifier et mettre en exergue les points fort de SEAir.

Le contenu étant assez technique, nous avons pris le parti d'aérer la mise en page avec des visuels, et de mettre en valeur certaines caractéristiques grâce à des encadrés et des pictogrammes.
Des petites animations légères et subtiles (en CSS3) apportent de la profondeur et un aspect moderne au site.

Un site technique mais accueillant

SEAir sur mac Impression écran SEAir SEAir Webdesign screenshot