Apprendre par l'exemple 6 Leçons pour la conception de sites Web de restauration

Le sujet d'aujourd'hui est délicieux: les sites Web de restaurants et d'aliments. Les petites entreprises paient les factures des designers indépendants et les restaurants locaux peuvent constituer une source importante de revenus. Si vous vous lancez dans la conception de votre premier site de restaurant, vous devez savoir certaines choses.

Dans cet article, nous allons apprendre par l'exemple en jetant un coup d'œil à de nombreux sites Web de restaurants et de plats alléchants. En examinant ce que ces concepteurs ont bien fait, vous contribuerez à assurer votre propre succès dans ce domaine.

La photographie est tout

Site: La barre de griffe

Je réalise que cela ressemble à une déclaration générale ou peut-être même à une hyperbole, mais je suis assez sérieux. Avec les sites de restaurant, les «déchets entrants, sortants»? l'aphorisme est tout à fait approprié. Si vous travaillez avec des coups de nourriture laids, vous êtes voué à l'échec.

En tant que visiteur d'un site Web de restaurant, mon intérêt principal sera très probablement la nourriture. Vous devez me vendre le produit et la photographie est le moyen de le faire. Le truc, c'est que la photographie culinaire est très difficile, vous ne pouvez donc pas choisir le moyen le moins cher. Une mauvaise photographie de nourriture peut faire plus de mal que de bien.

Source: photo de gauche et photo de droite

Votre travail en tant que concepteur consiste à convaincre le client d’investir réellement dans de superbes photos s’il n’en a pas déjà. Si vous êtes également photographe, vous pourriez même gagner quelques dollars de plus.

À peu près tous les sites de cet article suivent ce conseil, mais en voici quelques-uns qui ont particulièrement bien réussi:

Findus Norge

Cappellos

Culinaria

Montrez-moi l'atmosphère

Site: Au Petit Panisse

Lorsque vous réfléchissez aux éléments visuels du site, vous pourriez être tenté de penser uniquement à la nourriture. Cependant, le tirage secondaire pour un restaurant, diable pour beaucoup de gens la primaire dessiner pour un restaurant, c'est l'ambiance. Je peux avoir un bon burger n'importe où, mais je veux manger un hamburger dans un endroit génial!

Il y a tellement d'incertitude à essayer un nouvel endroit où manger. Si je peux vraiment avoir une idée de l'endroit sur le site Web, je me sentirai plus confiant dans ma décision de manger sur place. D'un point de vue pratique, il arrive souvent qu'une photo de l'atmosphère et du décor me donne une bonne idée du code vestimentaire général du lieu. Par exemple, voudriez-vous vous habiller pour le restaurant montré ci-dessus? Celui-ci, ça va?

Site: Roux sur la place du Parlement

Effet de levier sur la texture et la couleur

Site: Goût Gilt

La texture est un outil puissant que vous avez à votre disposition lorsque vous concevez un site lié à l'alimentation. Les meilleurs designers de ce créneau utilisent des tonnes de textures réalistes sur leurs sites. Gilt Taste, le site ci-dessus, en est un excellent exemple. La page d'accueil est pleine de textures différentes, à la fois dans les photos autonomes et en tant qu'arrière-plans pour le type.

Comme autre exemple, voici une petite portion recadrée d’un thème de restaurant de ThemeForest. Remarquez combien de textures vous pouvez trouver dans cette petite zone!

Site: Restaurant Victoria Thème

Le choix des couleurs est extrêmement important pour les sites Web consacrés à l’alimentation. La couleur aide à créer l'ambiance et à augmenter l'attrait. N'ayez pas peur d'utiliser des couleurs vives et tirez toujours le droit de la nourriture lorsque cela est possible pour tout lier bien.

Site: La chair de poule

Décomposer

Site: Sens des aliments

Autre astuce solide pour travailler avec la photographie culinaire: les gens sont fascinés par le processus. L'art de prendre des ingrédients crus et de les transformer en plats délicieux est quelque chose qui nous attire tous.

De plus, le simple fait de montrer des ingrédients frais rend la nourriture plus saine et plus appétissante. Personne n'aime penser que le restaurant a expédié cette lasagne dans un camion. Ils veulent voir des tomates!

Site: Delicioso

Site: La chair de poule

Construire des menus personnalisés pour le Web

Vous savez ce que mon plus gros peeve est avec les sites Web de restaurant? Les menus Le plus souvent, cette partie du site offre une expérience utilisateur horrible. Je grince des dents chaque fois que je commande chez Paradise Bakery en ligne:

Site: Paradise Bakery

Au lieu de se donner la peine de créer un menu sur leur site Web, ils ont simplement téléchargé un million d'analyses de leur menu physique que je dois ensuite parcourir une page à la fois. Si vous cliquez sur l'option de téléchargement du fichier PDF, vous obtenez littéralement l'illustration PDF plate qu'ils envoient à l'imprimante pour créer leurs menus pliables. Je n'invente rien

Cette chose est si grosse que vous devez zoomer sur de petites portions puis faire un panoramique jusqu'à ce que vous trouviez ce que vous voulez. C'est une façon étonnamment mauvaise de présenter un menu aux utilisateurs du site Web.

Si vous envisagez de lancer un fichier PDF du menu d'impression et de l'appeler un jour, arrêtez ce que vous êtes en train de faire et donnez-vous une tape dans le visage. Arrêtez d'être si paresseux et faites votre travail. Si vous recherchez un exemple concret, consultez le menu de Kuleto ci-dessous:

Site: Kuleto's

Ce menu utilise un système à trois colonnes génial et facile à utiliser pour préciser vos choix. Tout d’abord, vous choisissez votre repas (petit-déjeuner, déjeuner, dîner, etc.), puis une catégorie et les options de cette catégorie vous sont présentées. À tout moment, il est facile d'affiner votre sélection ou de changer les choses.

Si vous voulez un itinéraire plus simple, consultez The Claw Bar. Leur menu Web utilise la métaphore du menu d'impression, mais il utilise toujours du texte en direct et est formaté pour le Web.

Site: La barre de griffe

Ne pas oublier les bases

Il est assez facile de se laisser entraîner par tous les conseils ci-dessus et d'oublier les éléments les plus élémentaires de la conception Web. N'oubliez pas que, quelle que soit la conception du site, vous devez toujours bien prendre en compte les objectifs de l'utilisateur moyen.

Pour un restaurant, vous pouvez à peu près garantir que les visiteurs voudront quelques informations spécifiques:

  • Que servent-ils? (menu et graphiques)
  • Combien ça coûte? (menu)
  • A quoi ressemble l'endroit? (graphiques et vidéo)
  • Où est-ce?
  • Puis-je commander ou faire une réservation en ligne?
  • Quel est le numéro de téléphone?

Comme vous pouvez le constater, nous avons déjà abordé la plupart des objectifs principaux dans les conseils ci-dessus. Cependant, le contact de base et les informations de commande sont une préoccupation majeure que nous n'avons pas abordée. Je suis fermement convaincu que les informations de contact et d'emplacement sont une priorité absolue pour le site d'un restaurant. C'est pourquoi ces informations doivent figurer sur la page d'accueil, dans un emplacement bien en vue.

Dans le modèle ci-dessous, vous trouverez une grande carte accrocheuse dans le pied de page (probablement le premier endroit que vous penseriez regarder). Juste à côté de la carte, vous trouverez toutes les informations de contact dont vous avez besoin: email, numéro de téléphone, liens sociaux, etc.

Site: Le thème du restaurant

La leçon à tirer ici: ne forcez jamais vos utilisateurs à rechercher des informations de base, car vous craignez que cela ne gâche votre beau design. Votre travail consiste à mettre en valeur et à présenter des informations importantes de manière attrayante et utilisable, et non à créer un site qui a fière allure aux dépens de son objectif.

Montrez-nous vos favoris!

Maintenant que vous avez vu nos exemples des meilleurs sites de restauration et de restauration que nous avons pu trouver, écrivez-nous et affichez-nous vos favoris. Ou, mieux encore, montrez-nous les restaurants qui manquent vraiment l'attention et lancez des idées d'amélioration.