Les membres ayant 30 points peuvent parler sur les canaux annonces, projets et hs du chat.
La shoutbox n'est pas chargée par défaut pour des raisons de performances. Cliquez pour charger.

Forum Casio - Vie communautaire


Index du Forum » Vie communautaire » Nouvelle charte graphique pour PC
Palra Hors ligne Membre Points: 276 Défis: 0 Message

Nouvelle charte graphique pour PC

Posté le 10/06/2014 23:54

Bonjour à tous,

Dans la continuité de ce HS, j'ai proposé à la communauté un nouveau design pour le site, et pour ce faire, il faut définir une charte graphique claire et précise pour pouvoir créer un thème Bootstrap correspondant.

Tout d'abord, les grandes lignes : flat design ou design plus réaliste ? Côtés plats ou arrondis ? Dégradés de couleurs ou pas ? Ombrages ? Si oui, où ?

Je complétais ce post plus tard, afin d'ajouter les critères de la charte graphique (qui ne sont ni plus ni moins les variables des sources de Bootstrap), mais si vous voulez en discuter, ça se passe ici !

Edit by Eiyeron : bossant sur le thème aussi, je stocke une page mise à jour à chaque modif que je fais/palra fait sur le thème sur mon serveur.


1, 2, 3, 4, 5, 6 Suivante
Louloux Hors ligne Ancien administrateur Points: 7035 Défis: 61 Message

Citer : Posté le 11/06/2014 17:56 | #


Perso j'aime beaucoup le flat design (ben ouais j'ai un windows phone) et c'est plus simple à implémenter. Après tu fais comme tu le sens, c'est toi l'expert

Pour répondre à tes questions : côtés plats, dégradés pas nécessaires, ombrages non plus.
Dark storm Hors ligne Labélisateur Points: 11641 Défis: 176 Message

Citer : Posté le 11/06/2014 19:07 | #


Perso je continuerai dans la lancée de ce qui a déjà été fait : des cadres discrets avec des bords légèrement arrondis, de légers dégradés rouges, etc.

En ce qui concerne la mise en page du forum, je pense qu'il serai bien de garder la présentation rapide du membre qui a posté, sauf dans le cas où l'écran est trop petit. De même, il faudrait prévoir de quoi bloquer la largeur max, je sais que sur de très grands écrans (j'ai un iMac en 1920 x 1200), rien n'est plus désagréable que de lire des lignes de 40 cm de long... Du coup ça laisserai de la place à des bandeaux comme ceux que l'on peut retrouver dans la boite de réception.

On peut aussi repenser l'organisation de cette dernière, pour intégrer un max d'infos dedans, sans trop la surcharger : les 5 derniers MP, les derniers messages du fofo, les infos importantes (concours, etc.) : y'a moyen de faire quelque chose de bien.
Finir est souvent bien plus difficile que commencer. — Jack Beauregard
Cartix Hors ligne Membre Points: 2748 Défis: 98 Message

Citer : Posté le 11/06/2014 19:10 | #


Dark storm a écrit :
On peut aussi repenser l'organisation de cette dernière, pour intégrer un max d'infos dedans, sans trop la surcharger : les 5 derniers MP, les derniers messages du fofo, les infos importantes (concours, etc.) : y'a moyen de faire quelque chose de bien.

Tout à fait d'accord avec toi
Par présentation rapide du membre, tu veux dire Statut, Points, ... ? Si oui, je pense que sur GSM ça ne sert à rien, (vu qu'à mon avis, la majorité de ceux qui viennent sur P_C avec GSM sont des membres actifs, qui savent donc qui est qui (à la limite le nom ou/et le logo de profil suffiront)
La signature n'est peut-être pas non plus obligatoire sur mobile
Drac0300 Hors ligne Membre Points: 839 Défis: 39 Message

Citer : Posté le 11/06/2014 19:30 | #


Cartix a écrit :
(vu qu'à mon avis, la majorité de ceux qui viennent sur P_C avec GSM sont des membres actifs, qui savent donc qui est qui (à la limite le nom ou/et le logo de profil suffiront)


C'est sûrement vrai maintenant, vu que la navigation sur PC n'est pas très agréable sur mobile mais si elle le devient, ça risque de changer car, non seulement les téléphones/tablettes sont des outils de plus en plus répandus pour aller sur internet mais, en plus, un design qui faciliterait leur utilisation les encouragerait aussi.
(après, c'est ce que je pense )
Dans Z/1Z, 42==666
Coïncidence ? Je ne pense pas.
Ninestars Hors ligne Membre Points: 2462 Défis: 24 Message

Citer : Posté le 11/06/2014 20:23 | #


Je pense que Cartix a raison, ceux qui viennent sur mobile sont ceux qui connaissent déjà le site, car se sont ceux qui veulent accéder au forum, donc pas besoin de détailler les profils comme sur ordi, mettre juste le Pseudo et le "rang" (membre, administrateur, ...), a la limite mettre tout sur la même ligne avec l'image réduite.
Il faudrait supprimer les bannières latérales (d'ailleurs ça serait si elles pouvaient nous rediriger quand on clic dessus).
En fait, faire une version plus minimaliste du site pour les mobiles, sachant qu'ils ne peuvent pas télécharger les programmes de toute façon, donc plus accentuer sur le forum.
Sinon au passage ça serait de refaire l'image tout en haut (celle avec la calculatrice et "planete casio") elle est toute pixelisée !
Palra Hors ligne Membre Points: 276 Défis: 0 Message

Citer : Posté le 11/06/2014 22:08 | #


Pour compiler tout ce que a été dit :

On continue dans la lancée de ce qui a été fait ou alors on passe au flat design ? Les deux sont tout aussi "faciles" à implémenter.
La largeur max est bloquée par Bootstrap, elle est de 1170px, fini les lignes de 40 cm
Avec le responsive design, on peut non seulement changer l'affichage des blocs mais aussi en cacher en fonction de la taille de l'écran, donc on peut cacher, ou du moins cacher puis proposer de détailler l'affichage si besoin, des éléments ciblés et jugés trop encombrants.
Quand à l'image du haut, je pensais à la même chose, voire même vectorialiser le tout, mais je crains que ça ne soit supportés par tous les navigateurs, donc autant refaire les images plus simplement.
Calculatrice : Graph 35+ modée
Système d'exploitations : Apricity OS - Windows 10
Lephenixnoir Hors ligne Administrateur Points: 24678 Défis: 170 Message

Citer : Posté le 11/06/2014 22:13 | #


Le dessin vectoriel est supporté par beaucoup de navigateurs aujourd'hui, je ne pense pas qu'il faille t'en faire pour ça.
Et puis au pire, utilisez des caractères comme pour les autres icônes.
Mon graphe (11 Avril): ((Rogue Life || HH2) ; PythonExtra ; serial gint ; Boson X ; passe gint 3 ; ...) || (shoutbox v5 ; v5)
Silaxe Hors ligne Membre Points: 809 Défis: 12 Message

Citer : Posté le 11/06/2014 22:16 | #


Si vous avez besoin de petites images pour le nouveau site (en vecteur ou non) je peux vous en faire. J'ai le matos pour (tablette graphique,Gimp,Paint Tool Sai) et le skill (qui a du baissé depuis que je programme )
Palra Hors ligne Membre Points: 276 Défis: 0 Message

Citer : Posté le 11/06/2014 22:50 | #


Lephenixnoir, tu as raison pour le dessin vectoriel, pourquoi pas tenter ça alors ! Mais qui dit vectoriel dit flat design, enfin je vois ça comme ça
Silaxe, si tu es chaud, essaie de nous faire ça au format SVG ce serait cool
Calculatrice : Graph 35+ modée
Système d'exploitations : Apricity OS - Windows 10
Smashmaster Hors ligne Ancien modérateur Points: 4561 Défis: 253 Message

Citer : Posté le 11/06/2014 23:58 | #


Perso j'aimerai bien garder les dégradés, je ne suis pas trop fan du flat-design. Il existe pas mal de propriété CSS3 qui permettent de faire des dégradés, comme par exemple "background : gradient" ou bien "box-shadow : inset ... " (il existe des propriétés équivalents sur IE).

Lephenixnoir Hors ligne Administrateur Points: 24678 Défis: 170 Message

Citer : Posté le 12/06/2014 07:33 | #


Je ne suis pas fan non plus de flat design, mais sur les petits écrans il n'y a vraiment que ça qui rend bien, je trouve. Mettre des ombrages c'est bien, mais ça nécessite que tout le site soit dans le même thème et au final c'est lourd. Mais quelques dégradés, derrière les titres, un peu comme la barre de navigation, pourquoi pas.

Et puis :
Dark Strom a écrit :
Perso je continuerai dans la lancée de ce qui a déjà été fait : des cadres discrets avec des bords légèrement arrondis, de légers dégradés rouges, etc.

Je suis tout à fait d'accord.
Mon graphe (11 Avril): ((Rogue Life || HH2) ; PythonExtra ; serial gint ; Boson X ; passe gint 3 ; ...) || (shoutbox v5 ; v5)
Eiyeron Hors ligne Ancien modérateur Points: 5525 Défis: 57 Message

Citer : Posté le 12/06/2014 08:47 | #


Honnêtement, le flat design, comme le glass design (aero, IOS < 7, CSS3 2007 et boutons avec dégradés voyants) ne me plaisnet pas. J'aime le minimalisme mais j'aime bien aussi avoir un soupçon de relief.
Voici le custom theme que j'utilise pour Windows 7 qui reflète parfaitement ce juste milieu. Plat mais avec un relief léger.

Je tenterais bien d'effacer légèrement les dégrades qui sont déjà présent dans la navbar pour ceci :
background-image: linear-gradient(to bottom, #AA2C2C 0px, #862101 100%);


Ajouté le 12/06/2014 à 08:48 :
Autre suggestion : Utiliser LESS pour définir une palette sur laquelle on va se baser par la suite.
Silaxe Hors ligne Membre Points: 809 Défis: 12 Message

Citer : Posté le 12/06/2014 09:21 | #


@Palra La calculatrice? Si oui l image doit faire quelle taille?
Lephenixnoir Hors ligne Administrateur Points: 24678 Défis: 170 Message

Citer : Posté le 12/06/2014 09:22 | #


Vectorielle.
Mon graphe (11 Avril): ((Rogue Life || HH2) ; PythonExtra ; serial gint ; Boson X ; passe gint 3 ; ...) || (shoutbox v5 ; v5)
Silaxe Hors ligne Membre Points: 809 Défis: 12 Message

Citer : Posté le 12/06/2014 09:24 | #


Et la taille?

Ajouté le 12/06/2014 à 09:33 :
Euh par contre moi je sais dessiner en dessin vectoriel mais je ne sais pas programmer en svg.
Louloux Hors ligne Ancien administrateur Points: 7035 Défis: 61 Message

Citer : Posté le 12/06/2014 12:40 | #


Silaxe a écrit :
Et la taille?

Ajouté le 12/06/2014 à 09:33 :
Euh par contre moi je sais dessiner en dessin vectoriel mais je ne sais pas programmer en svg.

J'ai pas l'impression que t'y connaisses grand chose...
Le vectoriel n'a pas de taille, par définition : on peut l'agrandir à l'infini.
Le svg est le format vectoriel par excellence.
Lephenixnoir Hors ligne Administrateur Points: 24678 Défis: 170 Message

Citer : Posté le 12/06/2014 13:03 | #


Pourtant quand tu affiches une image vectorielle dans ton navigateur à 100%, elle a bien une taille, non ?
Le mien me dit "image.svg, nominally 128x128". De toute façon, il lui faut bien une taille à cette image, sinon un logiciel ne saurait pas comment l'afficher si rien n'est précisé.
De toute façon vu le contexte, inutile de dépasser 128x128.
Mon graphe (11 Avril): ((Rogue Life || HH2) ; PythonExtra ; serial gint ; Boson X ; passe gint 3 ; ...) || (shoutbox v5 ; v5)
Palra Hors ligne Membre Points: 276 Défis: 0 Message

Citer : Posté le 12/06/2014 15:23 | #


Donc en gros ce que j'ai déjà proposé ici conviendrait, faudrait ensuite réfléchir à l'organisation du contenu.
Sinon, y'a des gens qui connaissent ne serait-ce qu'un peu le CSS ? Dans ce cas là je pourrais créer un repo sur Github où l'on modifierai le thème Bootstrap original pour le faire coller au notre, si ça tente des gens.
Calculatrice : Graph 35+ modée
Système d'exploitations : Apricity OS - Windows 10
Eiyeron Hors ligne Ancien modérateur Points: 5525 Défis: 57 Message

Citer : Posté le 12/06/2014 15:24 | #


Palra a écrit :
Donc en gros ce que j'ai déjà proposé ici conviendrait, faudrait ensuite réfléchir à l'organisation du contenu.
Sinon, y'a des gens qui connaissent ne serait-ce qu'un peu le CSS ? Dans ce cas là je pourrais créer un repo sur Github où l'on modifierai le thème Bootstrap original pour le faire coller au notre, si ça tente des gens.


Boing, je m'y connais assez pour avoir fait le site que j'ai montré sur un autre topic.
Palra Hors ligne Membre Points: 276 Défis: 0 Message

Citer : Posté le 12/06/2014 15:25 | #


Ok, on pourrait lancer ça après le bac, j'ai vraiment besoin de réviser, enfin si tu veux créer le repo vas y, puis donnes nous le lien après
Calculatrice : Graph 35+ modée
Système d'exploitations : Apricity OS - Windows 10
1, 2, 3, 4, 5, 6 Suivante

LienAjouter une imageAjouter une vidéoAjouter un lien vers un profilAjouter du codeCiterAjouter un spoiler(texte affichable/masquable par un clic)Ajouter une barre de progressionItaliqueGrasSoulignéAfficher du texte barréCentréJustifiéPlus petitPlus grandPlus de smileys !
Cliquez pour épingler Cliquez pour détacher Cliquez pour fermer
Alignement de l'image: Redimensionnement de l'image (en pixel):
Afficher la liste des membres
:bow: :cool: :good: :love: ^^
:omg: :fusil: :aie: :argh: :mdr:
:boulet2: :thx: :champ: :whistle: :bounce:
valider
 :)  ;)  :D  :p
 :lol:  8)  :(  :@
 0_0  :oops:  :grr:  :E
 :O  :sry:  :mmm:  :waza:
 :'(  :here:  ^^  >:)

Σ π θ ± α β γ δ Δ σ λ
Veuillez donner la réponse en chiffre
Vous devez activer le Javascript dans votre navigateur pour pouvoir valider ce formulaire.

Si vous n'avez pas volontairement désactivé cette fonctionnalité de votre navigateur, il s'agit probablement d'un bug : contactez l'équipe de Planète Casio.

Planète Casio v4.3 © créé par Neuronix et Muelsaco 2004 - 2024 | Il y a 90 connectés | Nous contacter | Qui sommes-nous ? | Licences et remerciements

Planète Casio est un site communautaire non affilié à Casio. Toute reproduction de Planète Casio, même partielle, est interdite.
Les programmes et autres publications présentes sur Planète Casio restent la propriété de leurs auteurs et peuvent être soumis à des licences ou copyrights.
CASIO est une marque déposée par CASIO Computer Co., Ltd