Boutons de barre de navigation avec déclinaison : Hover

par Ancients Jeu 03 Mar 2016, 17:04

En bref...

Nature de la création : Barre de navigation
Taille de la création (en pixels) : 940x45
Couleur de fond : [Vous devez être inscrit et connecté pour voir ce lien]

Image(s)

Lien(s) image(s) :

[Vous devez être inscrit et connecté pour voir ce lien]

Visualiser:

Texte

Texte à insérer : Voir la description dans le sujet
Police à utiliser : Exocet (détails dans le sujet)
Couleur police : voir la description dans le sujet (2 couleurs)

En détails...

Lien de mon forum Forumactif : [Vous devez être inscrit et connecté pour voir ce lien]
Commentaire(s) supplémentaire(s) :

Bonjour, j'aimerai faire une barre de navigation seulement avec des images et la fonction : hover.

Commençons l'explication par étapes :

1. Tout d'abord j'aimerai que les boutons à la suite ressemble au design de cette barre de navigation (par rapport à la taille/dimension)

*supprimé*

2. Les boutons devront ressembler à ça au niveau visuel et texture (ne pas respecter la dimension que vous voyez, adaptez à la barre de navigation ci-dessus) :

[Vous devez être inscrit et connecté pour voir cette image]

La première ligne correspond au bouton neutre

La deuxième ligne correspond au bouton avec le curseur dessus
le bouton est plus éclairé qu'en position neutre

Je n'ai pas besoin de cette 3ème déclinaison

Il me faudra ces 2 versions pour chaque bouton (mouse on/off)

3. Voici la liste des boutons dont j'aurais besoin dans l'ordre :

Le portail:

Le forum:

Membre:

Groupe:

Recherche:

Le Profil:

Messagerie:

Connexion:

Déconnexion:

S'inscrire:

4. Informations supplémentaires :

Référencez-vous à la barre de navigation pour le rendu final et aux boutons avec les déclinaisons plus haut pour vous inspirer de l'esprit artistique et de la texture.

La police utilisée : Exocet
voici le lien : [Vous devez être inscrit et connecté pour voir ce lien]

La couleur de la police au stade neutre utilisée : [Vous devez être inscrit et connecté pour voir ce lien]
La couleur de la police avec hover utilisée : blanc

Pour récapituler il faudra 12 boutons avec 2 déclinaisons par boutons pour le hover soit : 24 boutons (Les déclinaisons ne devraient pas prendre beaucoup de temps je pense)

Si vous avez des questions, je suis à votre entière disposition. Nous pouvons dialoguer via skype/teamspeak si vous le voulez, parfois la parole est un gain de temps.

Un grand merci d'avance, bien à vous.

[Vous devez être inscrit et connecté pour voir cette image]

Votre commande a été vérifiée par un [Vous devez être inscrit et connecté pour voir ce lien] et est conforme au règlement. Elle peut dès à présent recevoir des propositions.

Merci de ne pas modifier votre commande après l'insertion de ce message, et de bien vouloir être patient. N'hésitez pas à remonter votre commande (UP) une fois par tranche de 24h.

par ◦Jay◦ Jeu 03 Mar 2016, 17:32

Bonjour Ancients,

-Il y a des boutons qui ne seront pas apparent lorsque vous ne serez pas connecté, il faudrait me les énumérer.

-Les Boutons "membre" et "groupe" ne devraient-ils pas être au pluriel ?

-Il serait préférable que le bouton "s'inscrire" se trouve avant les bouton connexion/déconnexion.

Bien à vous.

par Ancients Jeu 03 Mar 2016, 17:43

Bonjour Jay,

Si je me base sur la barre de connexion classique du forum, tous les boutons s'y trouve lorsque l'on est pas connecté.

Mais je pense enlever les boutons "Profil" et "Messagerie".

Pour ce qui est des boutons "Membres" et "Groupes", vous avez raison, ils sont au pluriel.

Les boutons "Connexion" et "S'inscrire" vont de paire. Ils sont affichés lorsqu'on est pas connecté et disparaissent tous les deux lorsque l'on est connecté pour laisser la place au bouton "Déconnexion".

Pour résumer :

Statut déconnecté : Portail Forum Membres Groupes Recherche Connexion S'inscrire
Statut connecté : Portail Forum Membres Groupes Recherche Profil Messagerie Déconnexion

Qu'en pensez-vous?

Edit : Le but est d'avoir une BDN avec un hover pour chaque partie, allez-vous faire 2 BDN pour "connecté" / "déconnecté" avec des images hover pour chaque? Comment gérer au niveau du code ensuite? Je n'ai pas tout saisi.

par ◦Jay◦ Jeu 03 Mar 2016, 18:01

Vous dites 12 boutons mais n'en citez que 10, je pense que vous oubliez le bouton nouveau MP, est-ce bien cela ? Mais il en manque encore un, est-ce le bouton F.A.Q. ? Il n'apparait pas sur votre forum...

Pour le bouton s'inscrire(sign up), il faudra le positionner avant le bouton connexion.

Donc, comme suit :

-Déco : Portail Forum Membres Groupes Recherche S'inscrire Connexion
-Co : Portail Forum Membres Groupes Recherche Profil Messagerie Déconnexion

Est-ce bien cela ?

par Ancients Jeu 03 Mar 2016, 18:07

Oui c'est bien cela.

Pour les 2 boutons manquants, c'est pour "connexion" "déconnexion" : dans mes spoilers j'ai précisé 2 boutons pour chaque.

Connexion : un bouton avec le texte "Login" et un autre avec l'image
Déconnexion : un bouton avec le texte "Logout" et un autre avec l'image

Je suis indécis par rapport à ça, je n'arrive pas à voir si le texte n'agrandira pas trop la BDN (en anglais c'est déjà plus court).

Je vous laisse choisir selon ce qui vous semple le plus cohérent avec le visuel (vous seul pouvez juger d'où vous êtes) Smile

par ◦Jay◦ Jeu 03 Mar 2016, 18:14

Au temps pour moi, j'avais pensé avoir le texte+l'icône. Embarassed

Vous voulez le texte en anglais alors ?

par ◦Jay◦ Jeu 03 Mar 2016, 18:15

Oui, je vous fait une proposition, nous verrons par la suite.

par Ancients Jeu 03 Mar 2016, 18:15

Oui laissons le texte en anglais c'est assez classique pour de la connexion / déconnexion Smile

Puis-je vous envoyer un lien externe via mp?

par ◦Jay◦ Jeu 03 Mar 2016, 18:17

Non, ce n'est pas la peine merci.

par ◦Jay◦ Jeu 03 Mar 2016, 18:45

La barre fait 1000px, est-ce que cela irait ?

[Vous devez être inscrit et connecté pour voir cette image]

Bien à vous.

par Ancients Jeu 03 Mar 2016, 19:02

Alors tout d'abord bravo, pour un premier rendu j'aime beaucoup.

1. Je pense que je mettrais "recherche" à droit de "messagerie".

2. Je trouve que le texte prend un peu trop de place par rapport à la version originale et peu être un peu trop terne ou pas assez lumineux (de peu de chose)

3. Les 3 icons ne sont pas cohérent dans le style je trouve, mais c'est ça ma faute, je vais en chercher après ce post.

4. Vous avez mit "Deconnexion" au lieu de "Logout"

5. Je n'arrive toujours pas à me projeter avec le système de hover et cette BDN.

Qu'en pensez-vous?

par ◦Jay◦ Jeu 03 Mar 2016, 19:57

Est-ce que la taille conviendra ?

Vu que vous allez coder cette barre de navigation, il n'est pas utile de découper les boutons.

Je n'aurai pas le temps de la continuer ce soir, j'essaie demain.

Bien cordialement.

par Ancients Ven 04 Mar 2016, 02:30

Bonsoir Jay, la fatigue a prit le dessus tout à l'heure.

Le taille de la BDN me convient, merci pour votre aide.

EDIT : Voici les icons pour "Home"

Home:

Home hover:

Search:

Basez vous sur la dimension et la couleur des icons Home et Home_hover pour les autres.

Pour l'icon Search ci-joint, je ne sais pas trop s'il sera mieux que l'autre.

Celui que vous avez utilisé pour le moment me parait de moins bonne qualité que les deux autres (peut être le fait qu'il soit plus grand)

Voila tout ceci en complément avec mon avant dernier post.

Merci Jay

par ◦Jay◦ Ven 04 Mar 2016, 16:00

Bonjour Ancients,

-La loupe est inutilisable, j'en ai refait une.

-Mettre la recherche à côté de la messagerie est une erreur, cela fait deux icônes l'une à côté de l'autre et déséquilibre l'harmonie du texte et des boutons.

-Vous ne m'avais pas parlé de l'icône pour la messagerie, je l'ai changée pour une enveloppe.

[Vous devez être inscrit et connecté pour voir cette image]

Une proposition avec seulement du texte :

[Vous devez être inscrit et connecté pour voir cette image]

Bien à vous.

par Ancients Ven 04 Mar 2016, 16:16

Bonjour Jay,

Je préfère ma disposition d'icons, le fait qu'ils soient éparpillés dans le BDN me gène un peu.

- Remettez l'autre icon de messagerie.
- Utilisez une autre police d'écriture (tapez "diablo heavy font" sur google et prenez le 2ème lien)
- Je ne sais pas si vous avez adapté la luminosité et la couleur par rapport à l'icon "Home" (basez vous sur celui la)

Bien à vous

par ◦Jay◦ Ven 04 Mar 2016, 16:44

Comme ceci ?

[Vous devez être inscrit et connecté pour voir cette image]

par Ancients Ven 04 Mar 2016, 16:57

Pouvez vous essayer avec la police "diablo light font"?

Sinon l'icon "Home" est décalé sur la gauche. Et je ne sais pas si l'icon "Messagerie est trop grand ou si c'est la loupe qui ne va pas.

Vous êtes tombé sur un perfectionniste, gardez le sang froid Smile

Merci Jay pour votre aide

par ◦Jay◦ Ven 04 Mar 2016, 16:59

Oui, j'ai bien peur de pas pouvoir vous satisfaire.

Donnez moi le lien de cette police.

par Ancients Ven 04 Mar 2016, 17:01

Je suis déjà satisfait et très content de cette BDN. Ne vous méprenez pas!

Je suis juste pointilleux sur les détails pour ne pas gâcher tout ce travail.

Voici la police : [Vous devez être inscrit et connecté pour voir ce lien]

par ◦Jay◦ Ven 04 Mar 2016, 17:03

Cette police d'écriture est celle que j'ai utilisée sur les premières barres.

par Ancients Ven 04 Mar 2016, 17:43

Pouvez-vous réduire un peu la taille du texte et m'envoyer un aperçu à l'échelle 1:1

par ◦Jay◦ Sam 05 Mar 2016, 17:22

Bonjour Ancients, voici un nouvel essai :

[Vous devez être inscrit et connecté pour voir cette image]

Pour la voir à l'échelle, soit vous enregistrez l'image sur votre ordinateur et vous la visualisée ensuite ou bien, vous copiez l'adresse de l'image et la collez dans la barre d'adresse de votre navigateur !

Celle-ci est plus grande que les premières, dites-moi si vous la voudriez plus petite ou non. (si toutefois elle vous convenait.)

Bien à vous.

par Ancients Dim 06 Mar 2016, 00:31

Bonjour, je pense que nous y sommes presque, voici une liste de détails à régler selon moi :

Une barre à gauche de l'icon "Home" pour ouvrir le bouton comme ceci :

[Vous devez être inscrit et connecté pour voir cette image]

Un nouvel icon pour la loupe (l'icon actuel fait trop petit par rapport au reste) :

[Vous devez être inscrit et connecté pour voir cette image]

Je peux vous fournir l'icon dans les bonnes dimensions si vous voulez

Utilisez cette icon pour celui à coté de "Forum" :

[Vous devez être inscrit et connecté pour voir cette image]

Important : tous les titres ne sont pas alignés dans leur propre "bouton"

Il faudrait que le bouton "Groupes" avec son texte soit bien centré et symétrique (arrivant exactement au milieu de la BDN

Utilisez cette couleur pour chaque icon/texte en mode standard [Vous devez être inscrit et connecté pour voir ce lien] et augmentez un peu la luminosité du texte (se rapprocher de celle de référence)

Un grand merci pour votre aide et votre temps Jay, permettez moi d'insister, votre BDN me convient depuis le début.
Vous me fournissez un travail de qualité et rapide que j'apprécie grandement.

Ce ne sont que des détails propres à mon exigence.

Merci, je reste à votre disposition

par ◦Jay◦ Dim 06 Mar 2016, 06:32

Bonjour, oui, donnez moi l'icone dans la bonne dimension.

-Je ne comprends pas si vous voulez le texte de couleur [Vous devez être inscrit et connecté pour voir ce lien] mais plus clair, la couleur ne sera plus [Vous devez être inscrit et connecté pour voir ce lien] ...

-La couleur du texte est [Vous devez être inscrit et connecté pour voir ce lien] à partir de la je ne comprends pas ce que vous cherchez, voici le texte de base avec ajout de logout, c'est exactement la même couleur :

[Vous devez être inscrit et connecté pour voir ce lien]

par Ancients Dim 06 Mar 2016, 07:43

Bonjour,

Je comprends pour la couleur, dis comme cela, ça n'avait aucun sens.

Je voulais essayé de vous dire ce que j'observais : visuellement, on a l'impression que la première image est plus lumineuse.

[Vous devez être inscrit et connecté pour voir cette image]

Voici le logo pour search, j'espère que celui-ci ira :

[Vous devez être inscrit et connecté pour voir cette image]

Je préférais aussi quand la barre était plus petite.

Merci Jay, bonne journée

par ◦Jay◦ Dim 06 Mar 2016, 07:50

Les deux icônes sont légèrement différentes non ?
[Vous devez être inscrit et connecté pour voir cette image]

par ◦Jay◦ Dim 06 Mar 2016, 07:57

En fait, vous faites une capture d'écran de la visualisation redimensionnée par le forum !

Voici comme c'est en réalité, il y a une légére différence de police d'écriture dont je ne suis pas responsable :

[Vous devez être inscrit et connecté pour voir cette image]

à partir de la, je ne pourrai faire mieux.

par Ancients Dim 06 Mar 2016, 08:10

[Vous devez être inscrit et connecté pour voir cette image] Je pense que l'on peut partir sur celui-ci à vu d'oeil

Oui la police est légèrement différente mais on ne peut rien y faire et celle-ci est très bien.

[Vous devez être inscrit et connecté pour voir cette image]

Si c'est le rendu réel, cela me convient parfaitement.

par ◦Jay◦ Dim 06 Mar 2016, 17:41

Voila la barre redimensionnée :

[Vous devez être inscrit et connecté pour voir cette image]

par Ancients Dim 06 Mar 2016, 18:17

Bonjour Jay,

La BDN est superbe!

La taille, je n'arrive pas à me décider mais bon ce n'est plus un problème je verrai plus tard.
Par contre, y a t-il une possibilité d'améliorer la netteté du texte, je trouve que c'est l'ultime détail pour qu'elle soit parfaite!

Bravo en tout cas pour ce superbe boulot, j'espère que je ne vous ai pas trop rendu fou avec mes retouches.

Je suis conscient de ce que je vous redemande à chaque fois et ne l'oublie pas.

Merci encore pour votre temps et votre patience, beaucoup!

Boutons de barre de navigation avec déclinaison : Hover