GIFF - Expérience Utilisateur et Interface - UI - UX

From Dolibarr ERP CRM Wiki
Jump to navigation Jump to search


Présentation du sujet pour ce GIFF

  1. Travail préparatoire : Analyser et définir l'ensemble des composants utilisés dans Dolibarr
  2. Compléter la page permettant de consulter les composants UX - Déplacement du dossier /test et renommage /htdocs/documentation/ui à déplacer
  3. Préparer la refonte des composants
  4. Application au thème Eldy

Outils de travail

Outils de travail temporaire

Étapes prévues

Étape 1 : Premier GIFF - Développement du rendu visuel sur Dolibarr équivalent aux bibliothèques classiques

  • Rangement des exemples d'UI/UX (https://github.com/Dolibarr/dolibarr/issues/30278)
    • Il faut que l'on puisse le tester l'interface native de Dolibarr
    • Le mettre dans les paramètres du module builder
    • Onglet dans le module builder
    • Dans le dossier du module builder
    • Ajout dans les templates dans la configuration

    • Exemple de la galerie actuelle des composants UI/UX

    • UI-UX composants réalisés par eoxia.com

    Permettre une navigation dans les modèles UI/UX

      • Définir la page d'exemple de navigation
    • Définir les éléments du DOM de Dolibarr
      • Faire la liste des premiers
    • Définir les premiers rendus graphiques ou rapatrier les existants
      • Liste dans les cards
      • Les menus
      • Sémantique
      • Voir toutes les issues créées sur Github
    • Réalisation d'un POC d'intégration pour faire des prototypes visuels (Maquette)
      • Voir ou stocker les modèles de composant et les formats
      • Logiciels envisagés pour les tests : Figma,Draw.io, voir d'autres logiciels Open-Source
    • Taux horaire et montant jour défini ce jour.



    Problématiques

    Sémantique

    • DOM : à définir
    • Gabarit : C'est la structure (Template), langage : ?
    • Style Language CSS

    Problématique 1 - Comparaison des outils

    Outils étudiés :

    [1]https://tailwindui.com/ - Git du dépôt

    [2]https://picocss.com/ - Git du dépôt

    Étudier les frameWork existant afin d'envisager une intégration dans le cœur de Dolibarr et ou de s'inspirer des solutions existantes.

    Étude Tailwincss
    Avantages
    • Avoir une charte de nommage connue
    • Les différentes intégrations dans des outils classiques comme Figma etc...
    Inconvénients
    • Abandon du framework
    • Ajout d'une dépendance
    Étude Picocss
    Avantages
    • à faire
    Inconvénients
    • Abandon du framework
    • Ajour d'une dépendance

    Problématique 2 - Orientation et choix

    Point évoqué :

    • Mettre en place des exemples concrets :
    • Mettre en place

    Projection du projet à moyen et long terme

    Définition des éléments graphiques (Composants) - Réalisation d'une page d'exemple

    Proposition d'améliorations de composants tant en expériences utilisateurs et en graphisme

    Organisation de la structure de Dolibarr

    Démarrage par le module Builder

    Retrieved from "https://wiki.dolibarr.org/index.php?title=GIFF_-_Expérience_Utilisateur_et_Interface_-_UI_-_UX&oldid=61951"