Accueillir! Je suis Sparsh Malhotra, et aujourd'hui, je suis ravi de partager avec vous un sujet qui me tient à cœur : la conception d'interface utilisateur. En tant que développeur frontend, j'ai toujours été intéressé par la création d'interfaces utilisateur époustouflantes, mais soyons honnêtes, cela n'a pas toujours été facile.

J'avais l'habitude de souhaiter pouvoir rendre mes idées géniales sans compter sur un designer, mais chaque fois que j'essayais de concevoir quelque chose moi-même, je devenais frustré et j'abandonnais. Pouvez-vous raconter? Si oui, vous n'êtes pas seul.

C'est pourquoi je suis ici pour vous dire que la conception de belles interfaces utilisateur ne doit pas être si compliquée. Vous pouvez tirer parti de votre point de vue unique en tant que développeur sur la façon dont les consommateurs interagissent avec les logiciels pour créer de meilleures interfaces utilisateur. Et en suivant les dernières tendances et techniques de conception d'interface utilisateur, vous pouvez être moins dépendant du concepteur réel de l'équipe.

Dans cette série, "Comment utiliser l'interface utilisateur en 2023", je discuterai des stratégies et des conseils que j'ai retenus et qui m'ont permis de concevoir de belles interfaces utilisateur que les utilisateurs adorent. Je vous fournirai des conseils et des exemples utiles pour vous aider à démarrer sur n'importe quoi, des palettes de couleurs à la typographie, à la conception de la mise en page, etc.

Ainsi, que vous soyez un développeur chevronné ou débutant, préparez-vous à faire passer vos compétences en conception d'interface utilisateur au niveau supérieur. Êtes-vous prêt à embarquer dans ce voyage avec moi ? Super! Allons-y!

PARTIE 1 — Commençons à zéro

La première étape compte : choisir les fonctionnalités plutôt que la mise en page

Que concevez-vous en premier lorsque vous commencez la conception d'une nouvelle application ? Si c'est la barre de navigation en haut de la page, vous faites une erreur.

Concevoir le shell de l'application, ce qui inclut la détermination de la mise en page de la page, par exemple où placer les éléments de navigation, s'il faut avoir une barre de navigation supérieure ou une barre latérale, s'il faut utiliser un conteneur ou une pleine largeur pour le contenu de la page, et où placer le logo, n'est pas le meilleur point de départ. Cette approche peut conduire à rester coincé dans le processus de conception et à négliger d'autres aspects essentiels de la conception.

Une application est essentiellement un groupe de fonctionnalités.

Sans avoir une idée claire des fonctionnalités de l'application et de la façon dont elles fonctionnent ensemble, il est difficile de prendre des décisions éclairées sur les éléments de conception qui fonctionneront le mieux. Il est donc essentiel de se concentrer d'abord sur les fonctionnalités de l'application et de recueillir des informations sur la façon dont elles interagiront avant de prendre des décisions concernant la conception de l'application.

Les détails peuvent attendre

Dans les premières étapes de la conception des fonctionnalités, il est facile de s'enliser avec des détails mineurs tels que les polices de caractères et les ombres. Bien que ces éléments soient importants, il est plus important de se concentrer sur l'objectif plus large de la fonctionnalité et sur la manière dont elle s'intègre dans la conception globale. Ce n'est qu'une fois que les éléments de base sont en place que vous devriez commencer à affiner les détails pour vous assurer qu'ils s'alignent sur les objectifs de conception plus larges. En priorisant d'abord les aspects essentiels, vous pouvez créer une conception plus cohérente et efficace, qui répond mieux aux besoins de l'utilisateur.

Les conceptions basse fidélité permettent un processus de conception rapide, vous permettant de passer rapidement à la construction du produit final. Utilisez des croquis et des structures filaires pour l'idéation, puis affinez la conception que vous avez choisie dans des formats plus fidèles. En donnant la priorité à la vitesse et en utilisant des maquettes basse fidélité pour explorer des idées, vous pouvez rapidement développer une conception finale plus efficace.

Choisissez votre voix de conception

Les designs sont comme des personnalités — ils communiquent certaines caractéristiques et valeurs. Un site bancaire peut viser un look professionnel et sécurisé, tandis qu'une startup branchée peut opter pour une ambiance ludique et amusante. Il est important de choisir une personnalité de conception qui s'aligne sur le message et le public cible de la marque.

Bien que cela puisse paraître abstrait, attribuer une personnalité à un design repose en réalité sur des facteurs solides et concrets :-

Choix de la police

La typographie joue un rôle énorme dans la détermination de la sensation d'un design.

• Si vous voulez un look élégant ou classique, vous voudrez peut-être incorporer une police serif dans votre design :

• Pour un look ludique, vous pouvez utiliser un sans serif arrondi :

• Si vous optez pour un look plus simple ou si vous souhaitez vous fier à d'autres éléments pour donner de la personnalité, un sans empattement neutre fonctionne très bien :

Les designers n'ont pas besoin d'être des experts en psychologie de la couleur pour l'utiliser efficacement. Prêter attention à ce que les couleurs vous font ressentir et sélectionner celles qui correspondent à la personnalité et au message du design peut créer un impact visuel puissant.

• Le bleu est sûr et familier - personne ne se plaint jamais du bleu :

• L'or pourrait dire "cher" et "sophistiqué"
• Le rose est un peu plus amusant et pas si sérieux

Arrondir les coins d'un design peut sembler être un détail mineur, mais cela peut affecter de manière significative la sensation générale et l'esthétique.

• Un petit rayon de bordure est assez neutre et ne communique pas vraiment beaucoup de personnalité en soi
• Un grand rayon de bordure commence à se sentir plus ludique
• Aucun rayon de frontière ne semble beaucoup plus sérieux ou formel

Utiliser des systèmes de conception prédéfinis

Il est facile de tomber dans le piège de penser qu'avoir des options infinies pour les couleurs, les polices et d'autres éléments de conception est une bonne chose. Après tout, avoir plus de choix signifie plus de possibilités pour créer quelque chose de vraiment unique, n'est-ce pas ? Eh bien, pas exactement.

En réalité, avoir trop d'options peut entraver votre processus de conception. Lorsque vous avez tant de décisions à prendre, chacune semble plus intimidante que la précédente. Vous vous retrouvez angoissé sur les moindres détails, comme l'utilisation d'une taille de police de 12 pixels ou 13 pixels ou si une ombre de boîte doit avoir une opacité de 10% ou 15%. Avec autant de possibilités, il est facile de se sentir dépassé et de rester coincé dans un état d'indécision.

• Définir les systèmes à l'avance

N'utilisez pas le sélecteur de couleurs chaque fois que vous avez besoin de choisir une nouvelle nuance de violet - choisissez parmi un ensemble de 8 à 10 nuances choisies à l'avance.

De même, ne modifiez pas la taille d'une police d'un pixel à la fois jusqu'à ce qu'elle soit parfaite. Définissez à l'avance une échelle de caractères restrictive et utilisez-la pour prendre toute décision future concernant la taille de la police.

• Concevoir en éliminant

Commencez par deviner quelle taille fonctionnerait le mieux, peut-être 16px. Ensuite, comparez-le aux options de chaque côté, telles que 12px et 24px. En règle générale, deux des trois options apparaîtront nettement inférieures. Si les options inférieures sont celles des extrémités extérieures, l'option du milieu est probablement le meilleur choix.

Cette méthode est efficace pour tout élément de conception doté d'un système d'options défini. En limitant vos choix à ceux qui présentent des différences notables, sélectionner le meilleur est une tâche simple.