Editions ENI Livres | Vidéos | e-Formations
Introduction au design
Introduction
Le design est une composante importante dans le développement d’une application web, même pour les applications développées en no-code. En effet, le design est la première chose que les utilisateurs voient lorsqu’ils visitent une application web, et il peut avoir un impact significatif sur l’expérience utilisateur (UX) et la perception globale de l’interface utilisateur (UI).
Il est important de prendre en compte les principes de design et d’interface dès le début du processus de développement, cela permettra non seulement d’avoir une application qui fonctionne bien, mais qui est également agréable à utiliser.
Les bases du design
Pour comprendre les fondements du design, il est important de comprendre les principes de base tels que la hiérarchie visuelle, l’utilisation des espaces, la répartition des couleurs et des ombres, ou encore l’utilisation des icônes et de l’accessibilité. Toutes ces notions sont à élaborer en amont du développement, dans une charte graphique et un design system afin que l’intégration soit la plus rapide et simple possible.
La charte graphique est l’ensemble des éléments qui font l’identité visuelle de l’application, les couleurs, le logo, les polices d’écritures, etc. Le design system quant à lui est plus tangible, il sera de préférence créé directement sur Bubble et contiendra le design de chaque élément tel que les éléments Text, Button et Input.
Théories : les notions essentielles
Les notions suivantes sont importantes pour créer sa charte graphique et avoir une cohérence entre ses différents éléments d’interface, cela permettra à l’utilisateur de se retrouver visuellement dans toute l’application.
Hiérarchie visuelle
La hiérarchie visuelle consiste à mettre en évidence les éléments les plus importants de la page. Cela peut être réalisé en utilisant des tailles de police différentes, des couleurs différentes, des polices en gras ou en italique, ou en positionnant les éléments clés en haut de la page, dans des zones plus centrales ou démarquées. La hiérarchie visuelle permet aux utilisateurs et utilisatrices de comprendre rapidement ce qui est important sur la page et de naviguer plus facilement dans l’application.
Utilisation des espaces
Les espaces vides, ou espaces négatifs, sont importants pour donner une respiration à l’interface. En créant des marges suffisantes autour des éléments, les utilisateurs peuvent se concentrer sur les éléments clés de la page sans être submergés par trop d’informations. Les espaces peuvent également aider à organiser les éléments en groupes logiques de fonctionnalités ou d’informations...
Les styles
Lorsque vous créez une application web, vous avez la possibilité de personnaliser le style de chaque élément de la partie design. Un style possède un ensemble de paramètres qui définissent l’apparence visuelle d’un élément, tels que sa couleur, sa taille, ses contours, sa police de caractère, ses marges et ses espacements. Les styles ont pour objectif d’enregistrer les paramètres de design de chaque élément de votre interface pour les réutiliser à n’importe quel endroit de l’application sans avoir à refaire tout le paramétrage de l’élément.
Théorie : intérêt et utilisation des styles
La majorité des styles doit être définie avant même le début du développement du visuel et des fonctionnalités, tout comme les couleurs et les polices d’écriture doivent être définies. D’où l’intérêt de la page design system présentée précédemment, qui simplifiera l’organisation et le nommage de tous les styles de votre charte graphique avant de les sauvegarder.
L’exemple des styles de texte est le plus pertinent pour comprendre comment construire au mieux les styles. Le texte est certainement l’élément le plus utilisé et celui qui a le plus de variantes de styles dans une charte graphique, comprenant différentes tailles, polices, couleurs. Il est même...
