[pro] Site de restaurant / bistros a l'étranger

[EDIT : J'ai remplace l'image (premier jet) par ma version finale]
[EDIT2 : J'ai remplace la premiere maquette par la nouvelle version, et ajouter 2 versions de l'autre bar]
[EDIT 3 : Les sites sont en ligne ! Les liens sont disponibles dans le dernier message.]

Bonsoir a tous,

J'ai eu pour projet de creer un site internet global pour une chaine de restaurants francais a l'etranger.
Cette societe francaise regroupe donc 3 restaurants.
Nous nous sommes mit d'accord sur une prehome accueillant les différents logos des restaurants.
Après avoir clique sur un des logos, on arrive sur le mini-site du restaurant en question.
La structure des mini-sites sera la même pour tous, juste la charte graphique changera en fonction du restaurant ainsi que le contenu (bien-sur).

http://www.fannymoritz.fr/p-v5.jpg
http://www.fannymoritz.fr/maquette-b1.jpg
http://www.fannymoritz.fr/maquette-b2.jpg
Modifié par fanny95 (03 Apr 2012 - 18:19)

Salut,

Je trouve cela bien réalisé, c'est aéré mais les couleurs me semblent ternes.
L'espace entre "sitemap" et "where find us" est trop large.

Le beige et le bordeau me sont imposes. Pour ne pas que ca fasse juste 2 tons, j'ai rajoute le vert kaki. Je peux pas tellement changer, a part si je rends l'une d'entre elles plus ou moins opaques.

Concernant l'espace dans le footer, j'ai utilise les grilles. Et chaque pqrtie du footer font "1 tiers".
Mais je suis d'accord avec toi, faudrait que je trouve un moyen de combler cet espace en mettant peut etre une image, ou en organisant autrement.

"Where find us" c'est pas trés anglais ça non ?

Sinon c'est sympa mais il y a un peu trop d'espace un peu partout à mon goût.

fanny95 a écrit :
Le beige et le bordeau me sont imposes.

Ok alors si les couleurs sont imposées tu n'as pas le choix effectivement, je me dis que pour un bistro frenchy des couleurs chaudes serait plus indiquées, c'est assez subjectif...

fanny95 a écrit :

Concernant l'espace dans le footer, j'ai utilise les grilles. Et chaque pqrtie du footer font "1 tiers".
Mais je suis d'accord avec toi, faudrait que je trouve un moyen de combler cet espace en mettant peut etre une image, ou en organisant autrement.

Pour combler l'espace >> de jolies icônes...
Modifié par jmlapam (05 Feb 2012 - 00:49)

jmlapam a écrit :
Ok alors si les couleurs sont imposées tu n'as pas le choix effectivement, je me dis que pour un bistro frenchy des couleurs chaudes serait plus indiquées, c'est assez subjectif...

D'autant qu'il faut que ça s'adapte à la perception asiatique. Qui est très différente de l'occidentale.

Par contre, il faudrait, effectivement, revoir l'anglais.

Les couleurs beige et bordeaux me sont imposées car ce sont les couleurs du bar/resto en question. La peinture est beige aux murs, et le logo est bordeaux.

J'ai modifie l'image par ma version finale.
J'ai mis un bandeau rouge a carreaux car il rappelle le menu qu'il y a au restaurant.
Ca rends un peu plus "peps" je pense.
J'ai rajoute des icônes dans le footer pour équilibrer le tout.
J'ai fais une sorte de cadre pour le slide photo comme tous les cadres qu'il y a accroche dans le restaurant. Est-ce que vous aviez remarque que c'était un cadre ? lol

fanny95 a écrit :
Est-ce que vous aviez remarque que c'était un cadre ? lol

Ah non pas du tout ! Ajoutes-y des boiseries, sinon ton logo me gêne, il fait tout simple par rapport à ton menu.

Salut,

J'aime bien ta maquette. Les couleurs ne me dérangent pas même si elles sont assez demi teintes.

Ce qui me choque :

Le contraste du quadrillage du bandeau du menu est bien trop important, et nuit un peu à la lisibilité du menu. Il faudrait l'adoucir. Presque au même niveau que le pied du site, presque.

L'ombrage du contenu du site mériterait d'être rouge/bordeaux au lieu de noir cela égayerait un peu plus la page. (Normal qu'il n'y ait pas d'ombrage sur le côté droit ?)

Le cadre autour de la photo est très terne, et comme il est très massif on ne voit presque que lui. Une couleur plus rouge avec un encadré plus discret serait certainement préférable.

Le pied de page ne me plait pas vraiment car il est très massif, peut être que l'arrêter au bord du site le rendrait moins présent. Là il est fait vraiment too much. J'imagine sur une résolution très wide, ça doit être encore plus présent.

Pour la colonne Sitemap, les deux sous colonnes mériteraient d'être un peu écartées, pour optiquement avoir un espace similaire entre press, carrers, contact et la deuxième colonne carrers, qu'entre cette même deuxième colonne et la troisième colonne location.
C'est peut être déja le bon écartement mathématiquement mais là il faudrait le faire optiquement.

Sinon j'ajouterai un peu de jaune orangé de manière fine et discrête (un léger dégradé en fond dans le bloc du logo, ou un filet horizontal séparateur ou je sais pas) pour ajouter un peu de lumière et de chaleur.
Modifié par Mikachu (06 Feb 2012 - 12:59)

Bonjour Fanny,

- rapidement, ce qui me choque dans ta maquette, je dénombre au moins 5 polices différentes (logo / menu / titrage / accroche / footer) ça fait beaucoup je trouve, en règle générale je me limite à 3.
- le "cadre photo" est pas terrible (sans méchanceté ça fait cheap).
- pour rejoindre Mikachu, le Bg du menu est trop contrasté, ça gène la lecture.
Peut-être faire des boutons par dessus avec un fond en léger dégradé plutôt sombre.

Bon courage pour la suite.

Yvan.

EDIT : il y a un problème avec ton ruban, aux extrémités, le quadrillage n'est pas incliné, il est horizontal. (c'est du pauvre petit détail mais bon)
Modifié par fufu (06 Feb 2012 - 13:46)

Laurie-Anne a écrit :
D'autant qu'il faut que ça s'adapte à la perception asiatique. Qui est très différente de l'occidentale.

Moué, la couleur est interprétée différemment mais une couleur chaude reste une couleur chaude...

@Fanny95: les icônes s'intègrent bien au design et comblent bien ce vide dans le footer.
Ce qui me gène est l'orientation de l'ombre qui n'est pas logique vu qu'elle porte à droite et à gauche sur le bandeau rouge mais seulement à gauche sur le main.
Modifié par jmlapam (07 Feb 2012 - 00:07)

jmlapam a écrit :
Ce qui me gène est l'orientation de l'ombre qui n'est pas logique vu qu'elle porte à droite et à gauche sur le bandeau rouge mais seulement à gauche sur le main.

On ne voit pas la même chose. Elle porte à gauche sur l'ensemble du site.

fufu a écrit :

On ne voit pas la même chose. Elle porte à gauche sur l'ensemble du site.

non.

Hello,

Ah oui c'est vrai, je trouve aussi que le pied de page est bien trop présent. Je serais plutôt d'avis de faire une rupture beaucoup moins franche avec le reste de l'écran, voire peut-être d'en abandonner l'idée… à tester.

Deuxième chose, qui m'étonne un poil : rassures-moi, les couleurs utilisées dans ton exemple ne seront pas utilisées pour le "mini-site" de ce restaurant-là, non ? Parce que ce ne sont absolument pas les couleurs et l'ambiance attendues pour un établissement nommé «Pastis»… Peu importe le fait que ce soit en Asie ou ailleurs dans le monde, quand on monte un restaurant étranger quelque part, je suppose que c'est a priori au moins un petit peu pour véhiculer une représentation plus ou moins «fidèle» – disons le carrément : stéréotypée, plus ou moins volontairement) – de là d'où l'on vient.

Je suppose que tu n'as posté qu'un exemple, mais bon au cas où…


jmlapam : un peu péremptoire comme réponse, non ? Ce serait bien de plutôt expliquer où tu vois une ombre portée portant à droite et à gauche dans la têtière ou ailleurs parce que je n'en vois pas non plus…

@audrajsb; toi aussi tu penses que les couleurs ne vont pas, je suis d'accord mais apparemment fanny n'a pas le choix.

Sinon pour le côté péremptoire, je ne sais pas, je suis vraiment persuadé de la chose c'est pour cela.
Je m'explique donc (et tu as raison d'ailleurs le "non" peut sembler un peu sec mais je me suis dit que c'était le moyen le plus court d'exprimer que je n'étais pas d'accord )

En haut sur le bandeau imitation vichy, de chaque côté je vois une ombre sur les petits replis.
Le problème est que le repli de gauche est plus petit que celui de droite donc au niveau de la perspective c'est bizarre, on a du plat en haut, et un effet d'ombre sur la gauche qui tend à faire pencher le design sur la droite.
Modifié par jmlapam (07 Feb 2012 - 05:07)

jmlapam a écrit :
Sinon pour le côté péremptoire, je ne sais pas, je suis vraiment persuadé de la chose c'est pour cela.
Je m'explique donc (et tu as raison d'ailleurs le "non" peut sembler un peu sec mais je me suis dit que c'était le moyen le plus court d'exprimer que je n'étais pas d'accord )

En haut sur le bandeau imitation vichy, de chaque côté je vois une ombre sur les petits replis.
Le problème est que le repli de gauche est plus petit que celui de droite donc au niveau de la perspective c'est bizarre, on a du plat en haut, et un effet d'ombre sur la gauche qui tend à faire pencher le design sur la droite.

j'ai pas compris grand chose, ça doit venir de moi. Mais le peu que je comprends n'a rien à voir avec une ombre porté à droite aux extrémités du menu comme tu le disais plus haut : .

jmlapam a écrit :
Ce qui me gène est l'orientation de l'ombre qui n'est pas logique vu qu'elle porte à droite et à gauche sur le bandeau rouge mais seulement à gauche sur le main.

Bonjour Fanny,

En vrac :
- cela manque un peu de dynamisme pour un site de bar qui se revendique de plus le meilleur de sa catégorie (alignement trop marqué, choix des polices peu adapté, et les couleurs un peu ternes mais ça tu n'y peux rien, peu d'images...)
- le footer est trop imposant et/ou trop marqué,
- beaucoup de carreaux (header, footer) mais ça c'est subjectif
- Je trouve la tagline trop discrète par rapport à l'image,
- où est la touche française? ce qui distingue ton client des autres bars?
- le menu devrait être consultable directement en ligne avec possibilité d'impression plutôt qu'un pdf, c'est plus convivial.

HS : très jolies photos sur ton site

Bonsoir a tous,

Merci pour vos nombreux commentaires.

Sinon, en règles générales, je vais faire les modifications suivantes. Je ferais un EDIT quand l'image aura été modifie ici.

General
- Modification police des titres et essai pour avoir juste 3 fonts en tout
- Ajouter l'image d'un plat surement avec un fond d'ardoise noir pour mettre en avant le menu de la semaine
- Pour la petite touche française, ajout de cadres sur le fond extérieur (cadres français comme il y a dans le restaurant)

Ombres
Elles penchent vers la gauche sur tout le site. Il y a juste un petit problème d'ombres sur le triangle noir du cote droit ou il y a de l'ombre aussi, alors qu'il ne devrait pas y en avoir la car fond plus clair.

Cadre slide
- A revoir avec boiseries

Navigation
- Quadrillage a l'exterieur oriente vers le bas
- Contraste a revoir
- Couleur a change car en revoyant le menu du restaurant, ce n'est pas un quadrille rouge mais un quadrille de la meme couleur que le logo.

Footer
- Test avec un pied de page s'arrêtant au milieu du site.
- Espacement a revoir entre les 3 colonnes
Modifié par fanny95 (10 Feb 2012 - 11:59)

Bonjour tout le monde,

J'ai travaille sur la maquette du restaurant ainsi que sur celle du bar.

Restaurant
Il y a certaines choses que je n'ai pas réussi a faire comme :
- cadre + realiste
- orientation du quadrillage de la navigation (utilisation de la methode de motif)

Sinon, j'ai modifie la police des titres ainsi que celle de la navigation. Les ombres sont plus bordeaux. Le contraste de la navigation a été baisse, et le rouge est moins agressif (suite a la demande du client). Le footer a été arrêter au milieu et l'espacement a été revu.

Bar
J'ai repris en charte graphique les tapisseries et les cadres et deco qu'il y a aux murs.
Je vous ai propose 2 maquettes car j'hésite a proposer au client l'un de deux cadres (l'un plus dore et l'autre plus réaliste qui vient directement de chez eux). Ainsi que 2 fonds différents : l'un avec les masques (que la cliente a adore) et un 2e dont le fond vient directement de leurs murs.

Qu'en pensez-vous ?

Salut,

Je trouve cela plus chaud !
En revanche, tu as mis une espèce de vert tilleul avec une luminosité faible qui n'est pas du meilleur goût pour ce qui me concerne.