Suivez les fils RSS
 

Des livres incontournables pour tout maîtriser

  • CSS avancées - vers HTML5 et CSS3
  • HTML5
  • CSS2
  • PHP5 avanc�
  • Memento MySQL
  • Memento CSS 3
  • Memento XHTML
  • WordPress 3 100% pratique
  • jQuery et jQuery UI
Auteur
Pages :
fanny95
#
Citer
143 Posts
[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)

http://www.netpom.fr 
^
jmlapam
#
Citer
Bazinga !
2148 Posts
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.

Don't <li> !

http://jmperso.eu 
^
fanny95
#
Citer
143 Posts
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.

http://www.netpom.fr 
^
PanPan50
#
Citer
63 Posts
"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.

http://www.guillaumeavoine.com/ 
^
jmlapam
#
Citer
Bazinga !
2148 Posts
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 &quot;1 tiers&quot;.
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... cligne
Modifié par jmlapam (05 Feb 2012 - 00:49)

Don't <li> !

http://jmperso.eu 
^
Laurie-Anne
#
Citer
Modérateur
6001 Posts
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.

http://laurie-anne.bourdain.name 
^
fanny95
#
Citer
143 Posts
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

http://www.netpom.fr 
^
PanPan50
#
Citer
63 Posts
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.

http://www.guillaumeavoine.com/ 
^
Mikachu
#
Citer
C'est quand les vacances ?
Modérateur
5137 Posts
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)

Une page en ligne ou au moins l'intégralité du code html et css ça aide à vous aider plus vite !

http://www.mikachudesign.com/ 
^
fufu
#
Citer
@ycostes
161 Posts
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)

L'expérience, ce n'est pas ce qui arrive à quelqu'un, c'est ce que quelqu'un fait avec ce qui lui arrive. (Aldous Huxley)

http://ycostes.net 
^
jmlapam
#
Citer
Bazinga !
2148 Posts
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)

Don't <li> !

http://jmperso.eu 
^
fufu
#
Citer
@ycostes
161 Posts
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.

L'expérience, ce n'est pas ce qui arrive à quelqu'un, c'est ce que quelqu'un fait avec ce qui lui arrive. (Aldous Huxley)

http://ycostes.net 
^
jmlapam
#
Citer
Bazinga !
2148 Posts
fufu a écrit :

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


non.

Don't <li> !

http://jmperso.eu 
^
audrasjb
#
Citer
Grenoble
620 Posts
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ù… cligne


jmlapam : un peu péremptoire comme réponse, non ? ohwell 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…

http://jeanbaptisteaudras.com/ 
^
jmlapam
#
Citer
Bazinga !
2148 Posts
@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 lol )

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. langue
Modifié par jmlapam (07 Feb 2012 - 05:07)

Don't <li> !

http://jmperso.eu 
^
fufu
#
Citer
@ycostes
161 Posts
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 &quot;non&quot; 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 lol )

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. langue


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.


L'expérience, ce n'est pas ce qui arrive à quelqu'un, c'est ce que quelqu'un fait avec ce qui lui arrive. (Aldous Huxley)

http://ycostes.net 
^
Itachi
#
Citer
19 Posts
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 langue
- 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 confused

www.christopheroncalli.fr 
^
fanny95
#
Citer
143 Posts
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)

http://www.netpom.fr 
^
fanny95
#
Citer
143 Posts
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 ?

http://www.netpom.fr 
^
jmlapam
#
Citer
Bazinga !
2148 Posts
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.

Don't <li> !

http://jmperso.eu 
^
Pages :