Bonjour,

Étant passionné d'informatique, j'ai décidé de créer un petit site web de statistique en lien avec internet, et la technologique.

Seulement voila, la ou les lignes de codes ne me posent aucun problème, ce n'est pas le cas du design.

Pour le moment, mon site ressemble à ceci (les "..." sont les valeurs que je n'ai pas encore faites). Les valeurs évoluent en temps réels (comme indiqué en bas à droite, 40 actualisations par secondes)

J'ai pris ce screen en position verticale de mon écran, pour voir tout le site en un coups. Sinon, sa donne ceci :

Qu'en pensez vous ?

Que devrais-je faire d'après vous pour l'améliorer ?

Cordialement,

Ps: De base c'était ce design :

-
Edité par Bhasher 2 novembre 2017 à 21:35:05

Hello,

On a tous des goûts différents côté design....

Le plus important dans ton cas est d'avoir un confort de visibilité et un lecture rapide, donc :

- Eviter les formes sur le background central ( celui du body pas de souci)

- Augmenter la taille de police, de nos jours tous les sites le font...

- Plus de contraste, mettre en évidence les infos pertinentes.

- Cohérences dans le choix des couleurs, tu peux t'aider avec des outils en ligne comme :

Celui que j'utilise-> http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF 

Ajustements / Chromatiques -> https://material.io/guidelines/style/color.html#color-color-palette 

Style material design-> https://color.adobe.com/fr/create/color-wheel/ 

- Pas de surcharge graphique, la ça va...

Voilà pour commencer...

-
Edité par Lucky13 1 novembre 2017 à 23:48:52

Que pense tu de ceci :

Pour mieux faire les comparatif, j'ai cré dossier "versions" :

https://internetstats.shost.ca/versions/

Dans lequel il y a toutes les versions.

C'est pratique pour comparer les deux derniers (celle ci, et celle juste avant).

Encore merci à toi !

W est pas mal, par contre l'écart de taille est mal équilibré, cela provoque un décalage de texte. 

Finalement en visuel sur mon écran, le fond avec motif ne dérange pas vraiment. Toutes les version se ressemble à un point prêt, elle sont proches.

Utiliser l''outil de développement de ton navigateur pour modifier le css (taille police, couleurs, etc...)

Ex :

Question :  ton projet cible que type de médias ? du mobile, tablette, pc, etc.. je pose la question car on pourrait afficher plus d'infos sans avoir à descendre (même via le menu) .

Ton design n'est pas responsive, la rupture de mise en page est vite arrivée, le menu se décale sur un 14pcs. Seul mon 17pcs affiche bien le résultat souhaité. Réduis le fenêtre du navigateur, détecte les points de ruptures via l'outil de développement et utilise les medias-queries. Sinon le l=modèle flexbox peut-être une solution (hors menu)

-
Edité par Lucky13 2 novembre 2017 à 12:05:23

Chaque version se ressemble, et c'est normal. A chaque fois, un seul type d'élément est changer. De plus, la plus-parts des versions sont au niveau du JS ou du PHP.

Pour le responsive, la version "2017.11.2-11.00 Responsive update" l'est. je l'ai fais ce matin.

Je vise deux publics : les PC, et les smartphones.

Merci !

En effet, mais avec quelques désagréments :

Ici le menu prend trop de place en hauteur, l'utilisateur va devoir jouer du doigt..

Et Pourquoi le conteneur principale occupe si peu de place ? 

Bonjour,

J'ai modifié la hauteur prise par le menu.

J'ai également remis le menu en mode "static", même sur la version mobile.

Et j'ai aussi augmenté la taille prise par le conteneur.

Cordialement,

-
Edité par Bhasher 4 novembre 2017 à 11:26:17

Oui c'est mieux 

La police mérite un niveau d'un poil supérieur je pense, 

Par contre le menu est à régler, ex sur un 17pcs :

Encore quelque détails et ce devrait être bon, après tu peux jouer avec les couleurs pour trouver un Design qui te conviens (selon le contexte)

-
Edité par Lucky13 4 novembre 2017 à 11:18:29

Lucky13 a écrit:

Oui c'est mieux 

La police mérite un niveau d'un poil supérieur je pense, 

Par contre le menu est à régler, ex sur un 17pcs :

Encore quelque détails et ce devrait être bon, après tu peux jouer avec les couleurs pour trouver un Design qui te conviens (selon le contexte)

-
Edité par Lucky13 il y a 11 minutes

J'avais remodifé mon message avant d'avoir update la page, je n'avais donc pas vus la réponse

Car entre temps, je me suis dis que le disign horizontale sur deux couches était mieux.

Ton second screen m'intrigue. J'ai beau repassé en boucle des agrandissement, rétrécissement, je ne tombe jamais la dessus.

Je t'avoue que de base, ce post était la pour parler de cela ; les couleurs.

Je ne sais pas choisir des couleurs. Je trouve le design actuel un peu trop gris, mais je n'arrive pas à trouver autre chose.

Particulièrement le menu, que je trouve très moche.

Merci !

PS: Qu'utilise tu pour simuler les taille ? (car moi, je ne fais qu'agrandir, rétrécir ma fenêtre)

-
Edité par Bhasher 4 novembre 2017 à 11:38:39

J'utilise les outils de développement du navigateur :

Sous Chrome -> mobile , responsive ou création d'un création d'un device :

Sous Firefox tu as la vue adaptative , très pratique :

Informations + Il y a des outils en ligne comme http://www.responsinator.com/ 

Tout est la -> https://www.alsacreations.com/article/lire/1634-Comment-tester-un-site-responsive-partie-1.html 

-
Edité par Lucky13 4 novembre 2017 à 17:26:08

Je test des que je remonte mon pc !

Que pense tu du design du menu ?

Merci !

Bhasher a écrit:

Je test des que je remonte mon pc !

Que pense tu du design du menu ?

Merci !

La dernière : https://internetstats.shost.ca/index/

Je parle du menu du haut :

SSur le "Design général". C'est à dire le fond, les polices, ...

Merci !

Peux de changements  

Bon, la partie responsive est mieux équilibrée, mais taille de police à tester sur les mobiles, le cercle rouge de l'onglet actif est à ajuster quand on passe à une taille d'écran supérieure.

Pour les reste, choix des couleurs, ne pas avoir peur à présenter plusieurs design, changer les couleurs de chaque données tabulaires par colonne, un mode dark? pourquoi pas...

Laisse livre à ton imagination, inspire toi d'autres sites pour le desgin

Pour le menu encore : ça déborde toujours sur mon 17pcs  

-
Edité par Lucky13 6 novembre 2017 à 23:17:56

Le 17pcs m'intrigue.

Sur la vue adaptive de firefox, le 'cassage' du titre se fait entre le 676eme et le 677eme pixel de large. Mais, le tout sans le moindre soucis.

au 551eme pixel de large, (plus petit possible, vus qu'a partir de 550, on passe a la vue "téléphone"), tout se passe bien aussi.

Quels sont les dimensions de ton 17pcs ?

Ecran 17 pouces de PC portable standard...

En fait arrivé sur la page pas de souci, c'est quand je redimensionne la fenêtre de mon navigateur puis que je reviens à la taille maximum (standard) que le menu se décale.

-
Edité par Lucky13 8 novembre 2017 à 18:54:12

Malgré beaucoup d'essais, je n'ai pas réussi à la reproduire.

Pourrais tu me dire de combien de pixel (en comptant une bordure inferieur), le mot dépasse ?

Merci !

C'est aléatoire, je l'ai eu à une taille de fenêtre de à 1850px, à 1620px après avoir réduis/augmenté la fenêtre.

Ce n'est pas un problème de pixels, le calcul diffère selon le type d'écran (tablette, HD, Full HD, Réitina, etc) mais de positionnement.

Ce comportement est assez étrange en effet, peut-être du à une surcharge après avoir appliqué un @media-querie.

Ou alors il s se peut que ce soit bien le conteneur parent qui est le coupable :

-
Edité par Lucky13 9 novembre 2017 à 11:24:42

Subjectivement et sans développement : pabo

a écrit:

Subjectivement et sans développement : pabo

ll est passé en anonyme, donc à ouvert juste un compte pour poster ce message puis compte fermé  

Pour le design cela dépend du but recherché, lecture de données tabulaires importantes avec lisibilité + rapidité de lecture = ok, pas besoin de fioriture. Un peu comme une supervision ou IHM.

Dans le cas contraire, peut -mieux faire effectivement. Mais il faudrait alors préciser ce que représente ces informations pour le visiteur.

-
Edité par Lucky13 10 novembre 2017 à 20:47:41

Lucky13 a écrit:

Dans le cas contraire, peut -mieux faire effectivement. 

-
Edité par Lucky13 il y a environ 1 heure

Bein ma demande est claire non ?

Concernant le design (point 2) tu devrais poster dans le forum HTML/CSS, car la je suis le seul à donner un avis, ce qui n'est pas très pertinent, les goûts et couleurs de chacun ...