ds_banner_alt

GoodBarber
Design System

Le Design System de GoodBarber

Pourquoi ces directives de design ?

GoodBarber est un App Builder no-code lancé en 2011. Il permet à quiconque de créer sa propre application native ou Progressive Web App sans avoir besoin d'écrire de code. C'est un outil puissant pour les personnes souhaitant créer une application mais ne disposant pas des compétences techniques pour le faire. Dès le début, il a été dans notre ADN de fournir la technologie et les ressources pour transformer un design en une application robuste. Nous nous efforçons de continuer à fournir les meilleures solutions pour la création de belles applications.

Lorsque GoodBarber a été lancé pour la première fois, le domaine de la conception de l'expérience utilisateur (UX) n'était pas aussi largement compris ou adopté qu'il l'est aujourd'hui. Dans le passé, avant l'existence des Design Systems, créer des applications mobiles était souvent un processus difficile pour les designers et les développeurs. Sans un ensemble de directives cohérentes et de bonnes pratiques à suivre, il était difficile de garantir que l'application était visuellement cohérente et facile à utiliser sur ses différents écrans. Les designers et les développeurs faisaient également face à beaucoup d'inefficacité lors de la création de nouvelles fonctionnalités, car ils devaient souvent repartir de zéro à chaque fois. Cela résultait en une perte de temps et de ressources considérable. De plus, la collaboration et la communication étaient également difficiles, car il n'y avait pas de langage commun ou d'ensemble de normes parmi les membres de l'équipe.

Depuis lors, les méthodes et les outils des concepteurs ont considérablement évolué. Les Design Systems ont aidé à surmonter ces défis en fournissant un ensemble de lignes directrices et de bonnes pratiques que les designers et les développeurs peuvent suivre. Au fur et à mesure que la plateforme GoodBarber a évolué, nous avons réalisé la nécessité de repenser la conception de nos modèles dans leur intégralité afin de gagner en cohérence visuelle à travers les plateformes et d'accélérer le processus de développement. Nous l'avons fait en créant le GoodBarber Design System, un ensemble de lignes directrices et de bonnes pratiques pour garantir la cohérence, l'efficacité, la collaboration, la scalabilité, le branding et l'accessibilité dans le processus de conception.

En publiant le GoodBarber Design System au public, nous partageons avec tous nos principes de conception, qui ont été développés et affinés au fil des ans. Cela peut aider les utilisateurs avancés à atteindre également la cohérence, l'efficacité et la scalabilité lors de la création de plugins personnalisés ou lors de personnalisations avancées dans leur application.

Pour l'équipe GoodBarber, le GoodBarber Design System rationalise le processus de développement d'applications, assure une expérience utilisateur cohérente, et améliore la qualité globale des applications que vous créez avec notre technologie.

Les développeurs ont accès aux spécifications techniques des pages et des composants : leur taille, leur positionnement, leurs comportements et leurs propriétés.

Les designers peuvent se baser sur un ensemble de règles d'espacement, de tailles de polices, de ratios d'images ou de répartition des couleurs pour la création de nouvelles pages.

Objectifs

ds_objectives_principles_alt

Rationaliser la création et la production de templates en appliquant des principes de construction.

ds_objectives_consistency_alt

Assurez la cohérence visuelle entre les pages d'une application sur différentes plateformes.

ds_objectives_smoothux_alt

Garantir une expérience utilisateur fluide et optimale

Qu'est-ce qu'un bon design ?

Bonne gestion de l'espace

En design, l'espace "blanc", également connu sous le nom d'espace négatif, fait référence à l'espace vide entre les éléments sur une page. Il est souvent considéré comme un espace perdu alors qu'en fait, il joue un rôle important dans la création d'un design épuré et non encombré. Il aide à séparer et à mettre en valeur différents éléments, les rendant plus faciles à lire et à comprendre. De plus, l'espace "blanc" peut également créer un sens de hiérarchie, guidant l'œil de l'utilisateur vers les informations les plus importantes de la page.

Trouver les mêmes espaces entre les éléments est également un moyen simple d'assurer la cohérence visuelle entre les pages. L'utilisation d'une grille pour assurer l'alignement du texte est une technique courante utilisée en design graphique et en typographie. Nous nous appuierons donc sur une grille pour assurer cet alignement, qui est essentiel pour une lecture fluide. Des valeurs d'espacement récurrentes doivent également être choisies pour garantir la cohérence à travers les différentes sections sur tous les appareils.

Hiérarchie claire

Je vous prie de m'excuser pour cette erreur. Voici la version corrigée : Un bon contraste entre les différents niveaux de texte est essentiel pour créer une mise en page visuellement organisée et facile à lire. L'utilisation de différentes tailles et styles de texte, tels que les titres et le corps de texte, aide à créer une hiérarchie d'informations et à guider le regard de l'utilisateur à travers la mise en page.

Dans notre Design System, nous utilisons le nombre d'or pour établir le rapport de taille entre les titres et le corps de texte. Le nombre d'or, également connu sous le nom de "Proportion Divine", est un rapport mathématique souvent utilisé dans le design pour créer des conceptions visuellement agréables et harmonieuses. En utilisant le nombre d'or pour établir le rapport de taille entre les titres et le corps de texte, nous parvenons à créer un contraste à la fois esthétiquement plaisant et fonctionnel.

De plus, nous utilisons aussi d'autres techniques typographiques telles que le poids, la couleur et l'espacement pour créer un contraste entre les différents niveaux de texte, ce qui nous permet de nous assurer que les titres se détachent bien du corps de texte et dirigent l'attention de l'utilisateur. En employant ces techniques, nous parvenons à créer une mise en page visuellement organisée et facile à lire, guidant l'utilisateur à travers le contenu de manière claire et sans heurts.

Gestion efficace des polices et des couleurs

Un design qui utilise trop de polices et de couleurs peut donner une mauvaise image en créant de la confusion. Limiter ces éléments est une bonne pratique qui aide à clarifier le contenu.

Dans notre back office, avant toute autre action, l'utilisateur est invité à sélectionner un thème qu'il peut ensuite personnaliser pour créer l'identité visuelle de son application. Cela permet un certain cadrage : en effet, les thèmes proposés sont construits avec un nombre limité de polices, sélectionnées pour former de belles combinaisons Titre/Corps de texte.

Les palettes de couleurs sont limitées à 4 couleurs principales et leur bonne répartition participe à la hiérarchisation de l'information (par exemple : une couleur primaire pour la marque et les boutons, une ou deux couleurs secondaires pour les boutons moins importants, les liens, etc).

Ce cadre permet d'appliquer un design par défaut efficace aux applications, mais GoodBarber permet également aux utilisateurs avancés de personnaliser leur projet de manière très précise, bien au-delà des recommandations de base.

Le Design System de GoodBarber

Le "Design System" de GoodBarber est une solution globale qui agit à la fois comme cadre, boîte à outils et charte graphique pour les concepteurs et développeurs. Il regroupe une série de directives en constante évolution pour offrir un langage de design cohérent et unifié à travers la plateforme, sur lequel les professionnels peuvent s'appuyer pour garantir uniformité, efficacité, et modularité dans leurs réalisations. Ce système vise à établir un terrain d'entente sur les principes et motifs de design, tout en offrant la possibilité d'adaptation et de personnalisation selon les besoins. Le "Design System" de GoodBarber est un outil essentiel qui facilite le développement d'applications, en permettant de concevoir des applications à la fois esthétiques et fonctionnelles.

Fondations

Notre Design System inclut des directives pour la construction de modèles qui sont cohérents, efficaces et faciles à utiliser.

Composants

Les composants dans notre Design System sont des blocs de construction qui peuvent être utilisés pour créer un design cohérent et uniforme à travers votre application.

Ressources

Notre Design System comprend une bibliothèque de prototypes et de spécifications techniques pour les différents écrans du produit. Ces spécifications sont destinées à un usage interne par nos designers et développeurs.

Conseils pour créer une app