Logo

Introduction

Bonjour! Bienvenue dans le design System d'Olivia. Olivia est ma chaussure. Un outil facilitant la création et la maintenance d'un site.

Les objectifs du système sont notamment d'améliorer la cohérence et la qualité de l'interface utilisateur, de rendre le processus de conception et de développement plus efficace et plus ciblé, d'établir un vocabulaire partagé entre concepteur et développeur et de fournir des indications claires et faciles à découvrir concernant les meilleures pratiques de conception et de développement.

Typographie

Nous utilisons exclusivement Titilium Web comme police de base pour l’ensemble du site d'Olivia. Le maintien de la clarté typographique et de la hiérarchie est important. Voici une vitrine de différentes façons de structurer le contenu:

Paragraphe:

Ceci est un paragraphe principal. Il peut être utilisé comme slogan ou sous-titre de forme plus longue pour une page ou une section de contenu. Il a une taille de police et une hauteur de ligne légèrement plus grandes.

Ceci est un paragraphe normal. Sur les pages statiques, il est conçu pour la lisibilité et l'optimisation du nombre de caractères par ligne. La taille de la police est plus grande pour prendre en compte des morceaux de texte plus longs.

Couleurs

L'utilisation de la palette de couleurs apporte une cohérence et une reconnaissance au site d'Olivia. Cette cohérence repose sur un ensemble de règles bien définies sur la manière de travailler avec la bibliothèque de composants dans le contexte de thèmes sombres et clairs.

Couleurs primaires:

Balance des couleurs:

45%
20%
35%

Bouttons

Nous visons à ce que tous les boutons de l'application soient aussi cohérents que possible. Les boutons expriment l'action à exécuter lorsque l'utilisateur clique dessus ou le touche. Les boutons sont utilisés pour initialiser une action, en arrière-plan ou au premier plan d'une expérience.

Les boutons sont principalement utilisés pour les actions. Certains exemples incluent Ajouter, Enregistrer, Supprimer et S'inscrire. Chaque page peut avoir un ou deux boutons principaux . Tous les appels à l'action restants doivent être représentés en tant que boutons secondaires.

Listes

Les listes sont composées de contenu associé regroupé et organisé verticalement.

  1. C'est une
  2. liste ordonnée
  3. qui peut être utilisé pour
  4. .. quelque chose

Formulaires

Les formulaires sont utilisés pour soumettre des données, soyez donc aussi concis que possible lors de la conception. Pensez à chaque champ et à la valeur que fourniront les données. Que gagnez-vous en collectant ces informations?

Commencez par demander:

Barre de progression et spinners

Les spinners sont utilisés lors de la récupération de données ou de l'exécution de calculs lents, et permettent d'informer les utilisateurs que le chargement est en cours. L'expérience d'attente est une opportunité de conception cruciale. Tandis que la barre de progression sert à montrer à quel niveau de l'histoire nous sommes.

25%

50%

100%

Alert et modals

Les modaux communiquent des informations via une fenêtre secondaire et permettent à l'utilisateur de conserver le contexte d'une tâche particulière. Utilisez les modaux avec parcimonie car ils interrompent le flux de travail de l'utilisateur. Les alertes servent à alerter.

Alert

croix

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Textures et pictogrammes

Les pictogrammes permettent de visualiser des éléments déjà connu par les utilisateurs afin d'éviter les mots inutiles et que ce soit plus visuel.

text