Conseils pour améliorer la lisibilité de mon design

Bonsoir. Depuis que j’utilise le super menu de noodom j’essaie de changer un peu la lisibilité de mes designs. Pour la page conso par exemple, j’en rajoute, j’en rajoute et je commence à trouver ça moche.
La page est pleine, pas aérée et l’ordre ne me convient pas trop.
Ce petit message juste pour avoir des suggestions. Merci

Salut
Peut être affiché la partie de droite lors d’un clic sur un icone et à la place de la partie de droite un graphe de la conso jour

Oui, dans l’esprit je voudrais regrouper les consos pièce par pièce car je n’ai pas besoin de tout voir en même temps. Du coup je pourrais faire autant d’icones qu’il y a de pièces. C’est compliqué à mettre en place ?

Je ne saurais te dire
Perso j’ai pas fait de design
J’utilise plutôt l’appli Jeedom connect

Bonjour,
Difficile de conseiller, les goûts et les couleurs étant ce qu’ils sont… :wink:
Mieux vaut regarder un peu sur la toile les designs qui existent déjà, et s’en inspirer ?
Ceci dit, il faut juste observer quelques règles de base pour améliorer grandement la lisibilité d’un design.

  • Trop d’info tue l’info. Celle-ci doit être accessible au premier coup d’œil, lisible, et pertinente.
    Exemple : je ne vois pas l’intérêt de faire figurer la tension, ou le courant dans ce tableau… Est-ce réellement important ?
  • le choix des couleurs : pas trop de contraste. Noir et blanc, c’est trop extrême. Lisible, mais agressif. Un peu de couleur, ou tout simplement de nuances, ne nuira pas à l’esthétique globale…
  • Un style uniforme. Surtout, ne pas mélanger des icônes ‹ réalistes › (nuages, soleil, radiateur,…), avec des icônes plus épurées (dites ‹ flat ›). Idem pour le choix des polices de caractères et la taille : jamais plus de deux polices différentes sur une page.
  • Toujours pour les icônes et autres widget, ne pas hésiter à jouer avec la lumière. Un contre jour ou un autre effet, surtout pour un widget qui change d’allure suivant une info (une touche ou autre), ca rends pas mal du tout.
  • Choisir un fond non uniforme. Une seule couleur, c’est monotone. Pourquoi pas un dégradé (vertical, horizontal, concentrique,…) ?

Etc, etc…
C’est vaste !

2 « J'aime »

Bonsoir,

Concernant la conso j’ai fait un truc plus visuel comme ca (pour donner des idées…éventuellement :wink: ):


(

1 « J'aime »

Merci, j’ai effectivement un peu de pain sur la planche :wink:

Top également mais ça je ne pense pas savoir faire :cry:

Bonjour

Sur le tableau tu peux mettre les unités en haut de colonne comme ceci, cela va aérer ton tableau:

Jour (kWh) Année (kWh) Courant (A) Puissance (W) Volt (V)

Pour les 2 autres tableaux Index :

Index Mois (kWh) Index Jour (kWh)

Cordialement

C’est ce que je vais faire, en plus c’est simple et ça me va bien, merci

Bonjour Daniel. Tu peux m’expliquer comment faire un dégradé si ce n’est pas compliqué?
Merci

Salut,

3 « J'aime »

Bonjour,

Pour faire un joli dégradé sur un design, à part la méthode un peu particulière de @Furaxworld ( :rofl: :rofl: :rofl:) mais qui ne marche que pour la nuque et les pattes :grin:, j’utilise pour ma part un logiciel de dessin et de retouche photos gratuit paint.net. Il doit certainement en exister d’autre, l’important étant qu’il intègre quelques fonctions de retouche photo (ce que ne permet pas le Paint de Microsoft par exemple…).

Ouvrir un nouveau projet, en prenant bien soin de dimensionner la taille en pixel en cohérence avec la taille de l’écran principal sur lequel Jeedom sera utilisé (une tablette murale, un PC…).
Puis avec l’outil remplissage, le colorer avec la couleur choisie.

Puis avec l’outil ‹ Effet ›, ‹ Photo ›, ‹ Vignette › :

Jouer avec les réglages Centré, Rayon et Intensité pour définir le dégradé voulu.

Voilà, pas plus compliqué. :slightly_smiling_face:

Créer un dégradé, générateur de dégradés CSS | Gradients.app

:slight_smile:

1 « J'aime »

ça je sais faire :wink:
Mais après tu le sauvegardes et tu l’intègres en tant qu’image dans le design ?

:grinning:
Comment tu as su que je devais aller chez le coiffeur ? :rofl:

1 « J'aime »

Oui, c’est ça.
Il faut créer un design vierge, édition, ajouter une image/caméra, clic droit + paramètre d’affichage, clic sur envoyer et sélectionner le fond d’écran ainsi créé.

Y’a du boulot !!!
Le fond dégradé je maitrise :wink:
Par contre, comme tu peux le voir, j’ai passé sur 2 équipements le fond en transparent pour ne plus avoir de gros pâtés noirs. Je voulais passer la police de caractères en gris foncé (par exemple), mais si je décoche Défaut sur la couleur de la police de caractères mes icones sont tous gris


J’enchaine…
si je change la couleur du fond de l’équipement, ça ne change pas la couleur du bandeau qui reste verte.
Pour le widget Tempo, la couleur grise n’est pas prise en compte

Pour avoir le contour gris, il y a fallu que je passe de la catégorie Energie à Automatisme
C’est la seule solution ?