Platos Helveticos

Platos Helveticos est un site Internet créé pour promouvoir la cuisine suisse en Espagne. Créations visuelles, aide à la mise en page du site.

Platos Helveticos - Mandat

Réalisation d’un mandat de création visuelles :

Vectorisation du logo
Création de visuels
Création d’une carte interactive
Aide à la mise en page du site

Réalisation graphique

Platos Heveticos est un site Internet créé pour promouvoir des recettes de cuisine en Espagne. Le but étant de permettre aux Hispaniques de réaliser des plats avec les produits locaux.

Participation

En collaboration avec devpops.ch pour la mise en fonction du site, j’ai réalisé les visuels du header et du footer avec Photoshop et une carte de la suisse interactive.

Effet bois brulé

Réalisé avec Photoshop

Icônes de catégories

Réalisé avec Illustrator

Carte interactive

Développement de code d’une carte interactive avec CSS et JS. Intégration à un SVG de tooltip contenant texte descriptif et image le code CSS permet de modifier, ici la couleur d’une zone au passage de la souris.

Définition :

SVG ensemble de point qui forme une forme. l’ensemble des formes dessine une image. Le SVG permet de mieux appréhender l’intégration de codes supplémentaires notamment ici du JavaScript pour les info-bulle (tooltip) et du CSS pour les effets au survol de la souris. L’avantage du SVG est qu’ il s’adapte parfaitement au responsive et est donc lisible sur tous les écrans.

Utilisation:

Ce code peut trouver d’autres applications : explication de texte (voir Wikipedia), ou jeux d’énigmes. Ici l’utilité est l’information d’élément compris dans une carte géographique, Mon ami Jaime l’a utilisée pour son site de recette de cuisine pour faire connaître la cuisine suisse en Espagne.

Fonctionnalités:

passage de la souris grisé
info-bulle cantons et lacs
au clic sur les cantons lien vers les catégorie de recette liées au canton

Platos Helveticos est un site Internet créé pour promouvoir la cuisine suisse en Espagne. Créations visuelles, aide à la mise en page du site.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.