Conception et design d'applica­tions et de sites web

Compétence en design depuis 2010

Depuis 2010, nous concevons et designons des produits numériques – le design est l'une de nos compétences clés. Nous sommes spécialisés dans la conception de produits numériques esthétiques et conviviaux qui simplifient la vie quotidienne des personnes qui les utilisent.

Notre équipe concept et design crée des expériences d’utilisation claires et intuitives. Grâce à l'étroite collaboration entre les équipes design, recherche d'utilisation et développement logiciel, nous créons des applications et des sites web qui se distinguent par leur cohérence et leur orientation ciblée vers le public visé. Un concept bien pensé et un langage de design clair créent une expérience d'utilisation qui permet d'utiliser les fonctions et les contenus sans effort et avec plaisir.

Conception d'applications et de sites web : alliance entre esthétique et fonctionnalité

La conception d'applications et de sites web ne se limite pas à la création d'interfaces esthétiques. C'est tout l'art de concilier esthétique et fonctionnalité afin que les produits numériques soient non seulement beaux, mais aussi intuitifs et efficaces à utiliser. 

Deux disciplines jouent ici un rôle central : la conception de l'interface d'utilisation (UI) et la conception de l'expérience d'utilisation (UX).

L'UX pose les bases, l'UI apporte le look & feel

Alors que le design UX se concentre sur l’ensemble de l’expérience d’utilisation, du guidage des utilisateurs et utilisatrices à l'architecture de l'information en passant par les fonctionnalités, le design UI se concentre sur la conception de l'interface.

Ces deux disciplines sont indissociables : sans une UX bien pensée, même la plus belle interface ne sert à rien, et sans une UI attrayante, même la meilleure fonctionnalité reste invisible.

Éléments du design UI

L'interface d'utilisation constitue le point de contact entre l’être humain et la machine. Le design UI définit la manière dont cette interface est conçue. Les couleurs, les icônes ou encore les typographies utilisées confèrent du caractère à un produit numérique. Pour qu'une interface soit vivante, le design UI comprend également des animations, des transitions, des composants et leurs états, ainsi qu'un concept sonore et tactile approprié. Il ne faut pas non plus oublier les critères de responsiveness et d'accessibilité.

Le CICD comme base

Dans la plupart des cas, les produits numériques doivent être clairement identifiables comme appartenant à une entreprise ou à une organisation. Cela signifie que les éléments de conception s'alignent sur les directives d'identité visuelle et de conception d'entreprise (CICD) ou les complètent. Dans tous les cas, les CICD constituent une base importante pour la conception visuelle. Cela signifie également que si une marque entièrement nouvelle est créée pour une solution numérique, au moins un CICD rudimentaire doit être défini.

Couleurs et typographies

Un CICD doit être complété s'il ne contient pas les paramètres, informations et définitions nécessaires pour le monde numérique. Par exemple, parce que les couleurs sont définies pour l'impression et non pour les écrans, ou parce que les typographies ne sont pas sous licence ou tout simplement inadaptées aux produits numériques. 

Clarifier les couleurs et les typographies constitue une étape clé sur le chemin vers le design final – c’est souvent le point de départ. Pour garantir efficacité et cohérence sur le long terme, il est toutefois indispensable de formaliser bien davantage d’éléments au sein d’un design system. Celui-ci comprend la création de styles de couleurs et de typographies. Pour les polices, on définit en outre les tailles, l'interligne et les couleurs. On spécifie également les combinaisons autorisées. Il en résulte une hiérarchie. Dans la conception web, on attribue également les balises classiques, telles que H1, H2, H3, etc.

Composants UI

Pour implémenter des fonctionnalités tout en garantissant qu’un bouton ne soit pas différent à chaque occurrence, il est essentiel – même sans développer un design system complet – de définir les principaux composants. Parmi eux, on trouve par exemple :

• Éléments de navigation tels que les menus ou les tab bars

• Boutons et éléments similaires : boutons, bascules, cases à cocher, menus déroulants, etc.

• Composants de formulaire tels que champs de texte et sélecteurs de date

• Messages d'erreur et indicateurs de statut

• Boîtes de dialogue, fenêtres contextuelles, pop-overs et flyouts

• Éléments de mise en page tels que cartes, tableaux, accordéons et autres éléments similaires

Cette liste n'est pas exhaustive. Chaque concept nécessite une combinaison différente de composants. Parfois plus, parfois moins. Parfois simple, parfois complexe. Comme les projets IT évoluent souvent jusqu’aux derniers instants avant la mise en production, il est dans tous les cas judicieux de travailler de manière standardisée avec des composants, même pour des projets de petite envergure. Une petite modification est ainsi appliquée à toutes les instances en quelques secondes, ce qui évite les goulots d'étranglement.

Animations et micro-interactions

Les interfaces utilisateur numériques ne doivent pas être statiques : on s’en rend souvent compte surtout lorsque les animations et les micro-interactions font défaut. Les personnes qui utilisent une application s’attendent, consciemment ou non, à ce qu’elle se comporte et se déplace d’une certaine manière. Et cela peut varier selon la plateforme, qu'il s'agisse du web, d'une application iPhone, d'une application Android ou même d'une application desktop. Grâce à notre expérience, nous savons exactement où une transition, une animation ou une micro-interaction est utile : l'application semble-t-elle trop statique ? Est-elle trop fantaisiste pour ta marque ?

Ces questions, ainsi que d'autres et de nombreux détails, doivent être abordées de manière consciente. Selon le contexte, nous utilisons différentes technologies telles que Swift UI, Jetpack Compose ou Keyframes sur le web. Notre catalogue comprend également des outils tels que Rive et Lottie pour les exigences plus complexes.

Tu trouveras des informations plus détaillées à ce sujet dans l'article de blog « Micro-interactions et animations dans les applis : que peuvent-elles apporter? »

Son

Le son peut également servir d'interface entre l’être humain et la machine : dans la plupart des cas, les applications sont silencieuses. Les sons, par exemple en cas d'erreurs ou de notifications, sont laissés à la discrétion du système d'exploitation. Mais ce n'est pas toujours le cas : les applications qui fonctionnent en arrière-plan ou sans intervention active utilisent souvent des sons pour attirer l'attention des personnes qui les utilisent. Dans de tels cas, le design soulève des questions similaires à celles posées par les couleurs : quel est le son de ta marque ? Faut-il recourir à des standards ou produire quelque chose d'unique ?

Haptique

Même lorsque nous parlons de design visuel, nous évoquons souvent « la sensation » qu’une interface procure. Portant, nos smartphones font également appel au sens du toucher. Le retour tactile ou haptique, c'est-à-dire la perception d'événements par notre peau, est rendu possible grâce aux moteurs à vibration intégrés à nos appareils. Le retour haptique est un élément souvent sous-estimé de la conception d'interfaces, car sa perception est souvent inconsciente. C'est pourquoi il est pertinent et particulièrement attendu de manière inconsciente dans les applications natives. Dans les applications web également, le retour haptique est possible en fonction du navigateur, du système d'exploitation et des paramètres de l'appareil.

Accessibilité

Dans la conception visuelle, il est important de veiller non seulement à ce qu'un produit numérique soit attrayant et s'intègre dans les directives existantes en matière de design et d'identité d'entreprise, mais aussi à ce que l'interface soit conçue de manière à être accessible à tous. 

Par exemple, les contrastes de couleurs sont-ils suffisamment élevés, la taille des caractères peut-elle être ajustée sans compromettre complètement le design et les conditions techniques requises pour la compatibilité avec les lecteurs d'écran sont-elles réunies ?
Le design accessible n'est pas une «fonctionnalité supplémentaire» ou un «plus», mais un élément fondamental : il ne gêne personne, mais contribue à rendre une solution numérique accessible au plus grand nombre d'utilisateurs et utilisatrices possible. La navigation au clavier est par exemple essentielle lorsqu’un doigt cassé rend l’usage de la souris difficile. Un texte lisible est indispensable lorsqu’une opération entraîne temporairement une baisse de la vision.

Le site A11y - Blindspot Accessibility offre par exemple un bon aperçu du sujet.

Nos articles de blog contiennent également des informations sur le thème de l'accessibilité :

• L'accessibilité numérique vue par une testeuse

• Sans lumière dans le réseau lumineux - pourquoi l'accessibilité est importante et ce qu'il faut prendre en compte.
  

Comme ce sujet nous tient particulièrement à cœur, nous sommes également membres de l'association des donateurs de la fondation « Accès pour tous ».

Un bon design, c'est le moins de design possible

Même si tous ces éléments sont importants, il ne faut pas oublier de laisser suffisamment d'espace au contenu (texte et images) et de ne pas tout encombrer avec des éléments UI. Le designer industriel allemand Dieter Rams l'a très bien illustré dans ses 10 principes pour un bon design, en relativisant les 9 premiers principes de sa liste avec le 10e : « Un bon design est un design minimaliste ». C’est un principe auquel nous nous référons chaque fois que cela fait sens.

Expérience polyvalente

Notre équipe Concept & Design est composée d'experts et expertes issus de différents horizons et possédant des connaissances spécialisées dans les domaines les plus divers. Cette diversité nous permet d’aller au-delà du «design classique» de produits numériques et de proposer des prestations complémentaires, essentielles au développement et à la commercialisation réussis d’une solution digitale :

• Conception des produits imprimés et les préparer pour l'impression

• Conception des animations 2D et les préparer pour une utilisation numérique

• Créer, texturer et animer des modèles 3D

• Créer des sons pour les retours d'information

Tu as besoin d'aide dans le domaine de la conception et du design ? N'hésite pas à nous contacter par e-mail !