Projets
Burger vosgien

Publié le 29 août 2017

One page pour le restaurant du Sî 🍔

Le restaurant du SĂŽ (http://restaurantduso.fr/) qui se dĂ©cline aussi en pizzeria est basĂ© au Val d’Ajol, une ville se trouvant dans les Vosges. Suite Ă  la rĂ©alisation de maquettes graphiques par une graphiste de l'agence LĂ©zards'CrĂ©ation et acceptĂ©es par le client, ma mission a Ă©tĂ© de dĂ©velopper un site one page visuellement trĂšs attrayant (les photos de burger en tĂ©moignent) et qui permet aux utilisateurs de connaĂźtre les dĂ©tails du restaurant (lieu, horaires, tĂ©lĂ©phone...) ainsi que la carte et les menus proposĂ©s. J'ai rĂ©alisĂ© tout le dĂ©veloppement web au sein de l'agence LĂ©zards'CrĂ©ation lors de mon stage de plusieurs mois.

Identité visuelle

Le style visuel du site est Ă  la fois rĂ©tro et actuel. On retrouve plusieurs parties de la page qui comporte des Ă©lĂ©ments vintage tel que des motifs ou une ardoise. Les images en pleine page sont quand Ă  elles plutĂŽt modernes ce qui apporte une impression de complĂ©mentaritĂ© et un style chaleureux (couleurs douces, nourriture fraĂźche, utilisation du bois...). Les parties du site avec une image de fond reprĂ©sentant du bois appuie un peu plus le cĂŽtĂ© traditionnel et convivial. L’harmonie colorĂ©e est composĂ©e d’un vert asperge faisant rĂ©fĂ©rence Ă  la cuisine naturelle et traditionnelle, et d’un gris anthracite : couleur de l’ardoise. [harmonie_coloree] Deux typographies sont utilisĂ©es sur le site web. Pour les titres, Vibur permet d’ajouter un style artisanal qui correspond parfaitement Ă  la cuisine du restaurant. Pour les texte courants, Open Sans a Ă©tĂ© utilisĂ©e, elle dispose de nombreuses dĂ©clinaisons et permet de nuancer le texte courant des titres. Elle est trĂšs lisible mĂȘme dans une petite taille de corps de texte car elle ne dispose pas d'empattements. C'est donc un bon choix puisqu'elle permet de mettre en forme les textes et est adaptĂ©e Ă  la lecture sur le web. Échantillon de la typographie Vibur   Le site est composĂ© respectivement de :
  • Une entĂȘte mettant en valeur un produit grĂące Ă  une photographie en pleine page
  • Une section prĂ©sentant le restaurant avec du texte et un slider
  • La carte et les menus proposĂ©s dans le restaurant
  • La liste des pizzas proposĂ©es avec leur description et leurs prix
  • Une Google Map pour situer le restaurant
  Maquette du site Internet le restaurant du SÎ  

DĂ©veloppement

Semblable au dĂ©veloppement du one page pour Alessio Agencement, le site a Ă©tĂ© intĂ©grĂ© assez rapidement. En 1 semaine, j’ai eu le temps de finir un premier jet Ă  envoyer au client. Je redoutais la fonctionnalitĂ© permettant de consulter la carte du restaurant, c’est pourquoi elle Ă  Ă©tĂ© un challenge pour moi. J’ai dĂ©cidĂ© je charger toutes les informations sous forme de simple liste HTML, les catĂ©gories (entrĂ©es, plats, desserts...) Ă©tant les Ă©lĂ©ments de la liste et les produits (Ă©lĂ©ments Ă  la carte) Ă©tant les sous-Ă©lĂ©ments. En disposant les Ă©lĂ©ments sous forme d’onglets, on peux alors facilement cacher ou afficher des Ă©lĂ©ments par le biais de Javascript. Les images d’arriĂšres plans n’ont pas Ă©tĂ©s simples Ă  intĂ©grer. On parle ici d’images avec une rĂ©solution dĂ©finie sur une page dont la rĂ©solution est indĂ©finie. Il faut donc trouver la technique qui donne les meilleurs rĂ©sultats sur les diffĂ©rents supports. Nous avons la chance de bĂ©nĂ©ficier de trĂšs grandes images, ce qui m’a permis de les Ă©tirer pour convenir Ă  la plupart des rĂ©solution d’écrans. Pour ce qui est des images d’illustration comme la photographie de poisson, j’ai dĂ©cidĂ© de les fixer au bord de l’écran de façon Ă  garder facilement le ratio de taille entre le fond et le contenu. Le grand slider qui prĂ©sente les photos du restaurant est gĂ©rĂ© par le plugin jQuery slick.js, il m’a fait gagnĂ© un temps prĂ©cieux sur la plupart de mes projets. J’ai nĂ©anmoins fais moi-mĂȘme les fenĂȘtre modales avec du JS basique. Elles permettent de visualiser la carte sur mobile : Aperçu du site mobile du restaurant du SĂŽ  

Bilan

Ce projet a Ă©tĂ© agrĂ©able Ă  dĂ©velopper tout en m’entraĂźnant aux keyframes et transitions CSS que j’ai utilisĂ© pour animer le logo du restaurant (effet de pancarte se balançant). Les commanditaires du site nous ont communiquĂ© leurs apprĂ©ciations vis Ă  vis du rendu final. Le site est accessible Ă  l'adresse : http://restaurantduso.fr/