JeuWeb - Crée ton jeu par navigateur
[Avis] Graphisme d'acceuil - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Art, graphisme, audio (https://jeuweb.org/forumdisplay.php?fid=50)
+--- Sujet : [Avis] Graphisme d'acceuil (/showthread.php?tid=1010)

Pages : 1 2 3

[Avis] Graphisme d'acceuil - didawin - 02-05-2014

Bonjour à tous,
Tous d'abord vous trouverez ici la présentation de mon projet :

Présentation

J'ai une hésitation, je m'explique actuellement la page d'acceuil est un gros plan sur un manga tenant un parchemin qui contient la zone d'inscription, avec une video, des liens et des screen en footer :

[Image: background-now.jpg]

et voici la deusieme solution (le personnage n'est pas fini bien entendu ) et je voyais donc la boite d'inscription au milieu, un peu du style de http://en.anno-online.com/en-GB mais en moins grande avec un manga assis au dessus du cadre d'inscription :

[Image: Background-En-Cours.jpg]

Dans la deusieme solution, le footer serais tout a droite (vidéo et screenshoot)

Pourquoi ce changement ? tout simplement parceque le personnage (Naruto) n'est pas de ma création :heu: .
Merci d'avance de vos remarques,conseils,et autre Smile

RE: [Avis] Graphisme d'acceuil - @lucard - 02-05-2014

Avoir une <div> centrée pour ton "inscription", quelque soit la taille de l'écran sera toujours plus facile à mettre en place.
Graphiquement aussi.

on à plus l'habitude de voir les choses alignées. qu'un peu partout.

pour le fond (ça me fait pensé à Piano no mori - ピアノの森)
je dirais qu'il faut que ce soit en rapport avec ton jeu... comme on ne sait pas trop à quoi cela va ressembler "ingame", c'est difficile d'avoir un avis objectif.
je ferais un retour plus poussé d'ici quelques jours.

RE: [Avis] Graphisme d'acceuil - @lucard - 02-05-2014

Hop je reviens finalement plus vite que prévu.

Je tiens à préciser que ce qui suit, est mon avis personnel et qu'il n'engage en rien JeuWeb.org, son personnel et/ou sa filiale. :p

1 - L'AMV, c'est pas bon,
1.1 tout d'abord car c'est repris de Naruto,
1.2 que c'est du fansub (illégale en France (je le sais,car j'en faisais)) bon là admettons, c'est de l'espagnol...
1.3 Que c'est assez violent. (Du sang !!! Au secours !) donc faudrait qu'il y ait une barrière d'âge limite pour accéder au site.
même si ça ne me choque pas, il est déconseillé d'en montrer.
1.4 Que la BO de "Requiem for Dream" (là encore c'est sans l'accord de Nonesuch ) mais c'est du déjà vu entendu 1 million de fois.
1.5 qu'il n'y a pas de bouton apparent pour faire "pause". (oui y'a clique droit sur la vidéo puis pause, mais c'est pas 'simple')

2 - Présentation générale.
2.1 Je ne comprends pas pourquoi il y a des box-shadow (ombres) sur des div transparentes... ?
2.2 ta pancarte, tout en haut, est toutes seule... (il faudrait réduire la hauteur de la div en dessous.
2.3 sur ton image : http://www.haishin.fr/images/Register.png
Tu as énormément d'espace vide sur ce png. tu pourrais optimiser le tout facilement (pour ça, demande de l'aide aux codeurs) Wink

Je pense qu'une présentation tout centré avec des bloc les uns au dessus des autres serait surement plus simple.
ne met pas de perso au dessus de l'inscription, cela ne fera que redescendre le tout... trop bas.
Laisse le personnage sur le côté.

pour ce qui est des SCREENSHOOTs une petite galerie dynamique en js/Ajax serait un plus.
Pour les liens, je les verrais sur le dessus de page. en header ?.
Une page de présentation est, je pense, indispensable, on ne s'inscrit rarement sans savoir de quoi il retourne. Wink

Maintenant il faut que tu nous montre un peu plus d'image de ton jeu en lui même. =)

bon courage, et bonne continuation.

RE: [Avis] Graphisme d'acceuil - didawin - 03-05-2014

Hello Smile
Tous d'abord merci de tes conseils/remarques Smile
Ensuite je remarque que je me suis mal exprimé -.-
Enfaite pour ces points :

Citation :1 - L'AMV, c'est pas bon,
1.1 tout d'abord car c'est repris de Naruto,
1.2 que c'est du fansub (illégale en France (je le sais,car j'en faisais)) bon là admettons, c'est de l'espagnol...
1.3 Que c'est assez violent. (Du sang !!! Au secours !) donc faudrait qu'il y ait une barrière d'âge limite pour accéder au site.
même si ça ne me choque pas, il est déconseillé d'en montrer.
1.4 Que la BO de "Requiem for Dream" (là encore c'est sans l'accord de Nonesuch ) mais c'est du déjà vu entendu 1 million de fois.
C'est effectivement ce pourquoi je refait l'interface, ceci était une premiere version qui me permettait de voir si ce que j'implementais fonctionnait.
La vidéo seras enfaite une mise en scène du jeux (si je met bien une vidéo puisque ça n'est pas sur pour le moment)

Citation :1.5 qu'il n'y a pas de bouton apparent pour faire "pause". (oui y'a clique droit sur la vidéo puis pause, mais c'est pas 'simple')
Oui je si je met une vidéo par la suite je compte bien mettre les bouton principaux et aussi ne pas la démarrer puisque j'ai pour optique que l'utilisateur as bien le droit de choisir s'il veut voir ou non la vidéo.

Citation :2.1 Je ne comprends pas pourquoi il y a des box-shadow (ombres) sur des div transparentes... ?
Je trouvais ça un peut plus jolie ? de faire un petit cadre transparent ?

Citation :2.2 ta pancarte, tout en haut, est toutes seule... (il faudrait réduire la hauteur de la div en dessous.
Effectivement :/ je ne pense pas la laisser par la suite elle me parait pas en accord avec le reste.

Citation :2.3 sur ton image : http://www.haishin.fr/images/Register.png
Tu as énormément d'espace vide sur ce png. tu pourrais optimiser le tout facilement (pour ça, demande de l'aide aux codeurs)
D'accord merci je vais aller voir dans la partie developpement ^^

Citation :Je pense qu'une présentation tout centré avec des bloc les uns au dessus des autres serait surement plus simple.
ne met pas de perso au dessus de l'inscription, cela ne fera que redescendre le tout... trop bas.
Laisse le personnage sur le côté.
D'accord merci, je vais continuer de bosser dessus et posterait un "premier jets"

RE: [Avis] Graphisme d'acceuil - @lucard - 05-05-2014

Si tu veux faire un bord, il faut mettre un fond.
Fait un fond à demi transparent, color+alpha
soit RGBA :
rgba(50%,50%,50%, 0.5)
soit HSLA :
hsla(15, 15%, 15%, 0.5)
soit avec une couleur rgb ou hexa ou hls ou name + opacité :
opacity: 0.5;

le fait de ne rien voir, pour moi, ça veut dire qu'il manque quelque chose. (ou que le code marche pas).

Essaye de voir l'ensembles des jeux présents sur jeuWeb, regarde comment ils sont "montés", présentés,
essaye de de réduire la résolution de ton navigateur simplement en le réduisant la taille de ta fenêtre (pas besoin de réduire la résolution de ton écran Wink ) juste pour voir comment les autres sites se comportent à une échelle plus petite...

Maintenant, comme tu es dans l'univers Manga, essaye de trouver 2 trois mots/phrases en japonnais (en faisant attention qu'ils veuillent bien dire quelques choses)

虎穴に入らずんば虎児を得ず
八十の手習い (j'aime bien celui là, j'vous laisse chercher la trad !)
失敗は成功の元
今日出来ることを明日に延ばすな
...


(tu peux aussi chercher du Coréen... puisqu'ils sont aussi bien placé dans l'univers Manga.
par contre c'est pas mon truc.)

RE: [Avis] Graphisme d'acceuil - didawin - 05-05-2014

Re-bonjour Big Grin
Bon j'ai essayé de suivre tes conseils, et de me remettre à jours (avec css3)
Je n'ai fait que 3 bloc et voila que je bloque déjà :cogne:
J'ai une div "Parent" : Main (fond blanc pour que tu puisse la reconnaitre)
et dedans plusieurs div : header,register,footer, et rightnav.
je n'arrive pas à comprendre pourquoi le rightnav (menu) est descendu par rapport au Main :langue2:

(Edit : ça se passe ici www.haishin.fr/register2.php )
il n'y as pourtant rien de compliqué :

Code :
body
{
    background: url('../images/Background-En-Cours.jpg');
    background-attachment:fixed;
    background-size:100% 100%;
    background-repeat:no-repeat;
}

Essai{
width:100px;
background-color: #000000;
margin-left:550px;
}

Main{
display: inline-block;
position:relative;
margin-left:auto;
margin-right:auto;
background-color: #ffffff;
}

Main2{
display: inline-block;
margin-left:0px;
width:500px;

}

.rightnav{
display: inline-block;
width:200px;
background-color: #706b64;
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
}

section{
margin-left:auto;
margin-right:auto;
}

header{
background-color: #706b64;
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
padding: 30px;
margin-bottom:20px;
text-align:center;
}

.box{
    margin-left:auto;
    margin-right:auto;
    width:100%;
}

#register{
    display: inline-block;
    text-align: justify;
    background-color: #706b64;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 5px;
    padding: 10px;
    color: white;
    font-size: 0.9em;
}

footer{
background-color: #706b64;
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
padding: 60px;
margin-top:20px;
text-align:center;
}

*>Main{
display: inline-block;
position:relative;
margin-left:auto;
margin-right:auto;
}


RE: [Avis] Graphisme d'acceuil - Xenos - 05-05-2014

Citation :le fait de ne rien voir, pour moi, ça veut dire qu'il manque quelque chose. (ou que le code marche pas).
C'est valide pour beaucoup de gens Wink Exemple, en cartographique (couleur blanche/absence de couleur = absence de données et non "donnée valant 0").

Citation :essaye de de réduire la résolution de ton navigateur simplement en le réduisant la taille de ta fenêtre
Firefox permet de modifier cette taille sans changer la fenêtre: utilise Ctrl+Maj+M ou "développement / vue adaptative". Chrome doit surement faire pareil, mais je ne sais pas où se trouverait cette option. La vue ne sera alors active que sur l'onglet où tu l'as demandée, et pas pour toute la fenêtre.

Les tags personnalisés n'existent pas en HTML. Les "essais", "main", "main2" sont à remplacer par des "div" ou des tags plus appropriés (article, nav,...).
Amuse-toi à ajouter la propriété "vertical-align" à ton menu de droite, avec les valeurs "top", "middle", "bottom", "super"...

Le positionnement choisi est d'ailleurs mal adapté à mon avis. Penche-toi plutôt sur flex box.

RE: [Avis] Graphisme d'acceuil - didawin - 05-05-2014

Citation :C'est valide pour beaucoup de gens 16 Exemple, en cartographique (couleur blanche/absence de couleur = absence de données et non "donnée valant 0").
Oui j'ai retiré les cadre transparent ^^

Citation :Firefox permet de modifier cette taille sans changer la fenêtre: utilise Ctrl+Maj+M ou "développement / vue adaptative". Chrome doit surement faire pareil, mais je ne sais pas où se trouverait cette option. La vue ne sera alors active que sur l'onglet où tu l'as demandée, et pas pour toute la fenêtre.
Merci pour cette astuce !

Citation :Les tags personnalisés n'existent pas en HTML. Les "essais", "main", "main2" sont à remplacer par des "div" ou des tags plus appropriés (article, nav,...).
J'avais vu ça sur le site du zero :heu: mais je viens de les remplaçer par des div ça feras plus "propre" Smile

Citation :Amuse-toi à ajouter la propriété "vertical-align" à ton menu de droite, avec les valeurs "top", "middle", "bottom", "super"...
Merci Smile autant que le HTML,PHP ça va, mais le CSS n'est pas vraiment mon amis :cogne:
(lorsque j'ai commencer a apprendre le developpement web, on n'utiliser pas autant le CSS qu'aujourd'hui)

Citation :Le positionnement choisi est d'ailleurs mal adapté à mon avis. Penche-toi plutôt sur flex box.
Je vais étudier ça merci Smile

RE: [Avis] Graphisme d'acceuil - @lucard - 05-05-2014

hop voilà un test de ce que j'imaginerais :
[image]

tu remarqueras que j'ai mis :
"background-image" pour le bloc/div de l'inscription.

cela à pour but de garder le dessin "dans la div" car toi, tu met le dessin directement sur le Background et lorsque la résolution est trop petite, ton ange passe derrière ta div.

RE: [Avis] Graphisme d'acceuil - didawin - 05-05-2014

(05-05-2014, 04:34 PM)@lucard a écrit : hop voilà un test de ce que j'imaginerais :
[image]

tu remarqueras que j'ai mis :
"background-image" pour le bloc/div de l'inscription.

cela à pour but de garder le dessin "dans la div" car toi, tu met le dessin directement sur le Background et lorsque la résolution est trop petite, ton ange passe derrière ta div.

C'est vrai que ça rend plutôt bien Smile
Allez hop, je prend le flexbox de Xenos, la structure de @lucard, je mélange, et ... il faut maintenant le codé Big Grin
Merci de vos conseils/remarques/idée que j'ai bien pris en compte Smile

Edit : Si je comprend bien le principe j'aurais donc ici (dans l'idée de lucard) 1 flexbox de 5 enfant (row):Logo,Bouton,Inscription,Presentation,Galerie ?
Avec Bouton et Galerie deux flexbox de X enfant (X= nombre d'image/bouton)
Je vais tenter tout ça Tongue