One page pour le restaurant du Sô 🍔

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.

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

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 :

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/