Les secrets d'un design basé sur une carte efficace
Donc, vous voulez devenir tendance avec une interface de type carte? C'est probablement une excellente idée. Les cartes sont une option populaire et conviviale pour tous les types de conception numérique sur différentes tailles d'appareils.
La clé de la conception d'une carte consiste à créer un élément sur lequel l'utilisateur souhaite cliquer. (C'est la clé d'une carte géniale.) Une carte doit servir de conteneur pour un contenu spécifique (lien de contenu, inscription, lecteur vidéo, etc.) avec lequel les utilisateurs veulent interagir.
Voici comment tu le conçois ...
Commencez par un contour noir et blanc
Cela semble assez simple: commencez par un fil noir et blanc pour le design. Pensez à l'intention de la carte et aux parties de celle-ci qui seront cliquables ou susceptibles d'être touchées. (La carte entière peut servir de lien.)
Prévoyez des éléments tels que l'espacement, les images et la typographie afin de pouvoir voir la carte sans couleur ou embellissement. Considérez-le comme la phase "carte à jouer" du design. Tous les éléments de la carte sont là. Cela ressemble-t-il à un cadre facile à comprendre?
Pensez à la manière dont vous l'utiliseriez à ce stade. Où voulez-vous cliquer pour une action? Le motif et le résultat sont-ils clairs? Comment retournez-vous ou avancez-vous? Les réponses à ces questions devraient être pertinentes sans laisser de traces, comme un bouton rouge "cliquez ici" qui clignote à l'écran.
Comme pour tout autre projet, si le contour ne fonctionne pas en noir et blanc, la conception finale ne le sera probablement pas non plus.
Utiliser un espacement exagéré
Le plus grand défi en matière de cartes est de créer un design compact qui ne soit pas encombré. C'est là que les espaces blancs entrent en jeu. Et vous voudrez en utiliser plus que vous vous sentez à l'aise au début.
L'ajout d'espaces donnera plus d'espace aux éléments pour rendre la carte plus spacieuse et plus lisible.
En règle générale, vous souhaiterez peut-être commencer par deux fois l'espacement que vous pouvez normalement considérer entre les éléments. Les gouttières doivent être extra larges et l’espacement entre les lignes peut également être utilisé. L'espace supplémentaire vous aidera à créer un design ouvert et à organiser le contenu plus clairement. La carte comporte un canevas assez limité et devrait tenir sur un seul écran sur un téléphone et une partie de taille similaire sur des appareils plus grands tels que des tablettes ou des ordinateurs de bureau. Les cartes peuvent également rivaliser avec d'autres cartes pour attirer l'attention sur de plus grands écrans. Des espaces ajoutés permettront à la conception entière de se sentir plus ouverte et facile à plonger.
Ajouter de la couleur naturelle et de l'ombrage
Vous êtes maintenant prêt à penser à la couleur et à l’ombrage pour la conception. Gardez l'aspect naturel et imitez la réalité dans les ombres et les styles du design.
Non, nous ne parlons pas de skeuomorphisme ici, nous parlons de créer de la couleur avec des contours et des ombres naturels. Pensez à la façon dont une carte sera vue. L'utilisateur devrait avoir le même sentiment que s'il le tenait réellement.
Utilisez certaines des règles de base de la physique pour imaginer (et concevoir) chaque carte telle qu'elle se déroulerait:
- L'éclairage devrait projeter des ombres à l'arrière et à l'arrière.
- La partie la plus sombre du dessin est probablement au fond grâce aux conditions d'éclairage, qui viennent normalement d'en haut.
- Évitez le contenu dans les zones nécessaires à la tenue de la carte.
- Les points de contact (et les appels à l'action associés) devraient être des points focaux et faciles à interagir. (Tout comme le visage d’une carte à jouer est au centre du dessin)
- Une carte équivaut à un bit d'information.
Créer des calques simples
Maintenant que vous pensez à la physique, passez au niveau supérieur avec la superposition simple pour créer un style de carte unifié pour toute l'interface. Vous ne savez pas par où commencer? Google Directives de conception des matériaux sont un excellent point de départ.
"Dans la conception matérielle, les propriétés physiques du papier sont traduites à l’écran. L'arrière-plan d'une application ressemble à la texture plate et opaque d'une feuille de papier.
Le comportement d'une application reproduit la capacité du papier à être redimensionnée, mélangée et reliée en plusieurs feuilles. Les éléments qui ne font pas partie des applications, tels que les barres d'état ou les barres système, reçoivent un traitement différent. Ils sont séparés du contenu de l'application en dessous d'eux et ne portent pas les propriétés physiques du papier.
Décomposez cela et cela revient à créer un objet numérique et à le rendre physique. Et si les utilisateurs veulent le toucher, ils voudront cliquer dessus. Le concept est aussi simple que cela.
S'en tenir à des caractères simples
En matière de typographie, les simples sans empattement sont souvent la solution. Évitez les options super minces ou condensées car elles peuvent être un peu plus difficiles pour les yeux.
La plupart des cartes fonctionnent mieux avec deux options de caractères (même si elles appartiennent à la même famille) - quelque chose pour le corps principal et une autre pour le titre ou l’appel à l’action. En ce qui concerne la typographie, le facteur le plus important est de ne pas oublier d'inclure beaucoup de contrastes pour que les éléments de texte soient faciles à lire. N'oubliez pas d'inclure le contraste entre les caractères et le contraste entre l'arrière-plan et les éléments de texte de chaque carte.
Limiter les éléments de l'interface utilisateur
Répétez après moi: une carte équivaut à une action.
Cela signifie probablement que vous n'avez pas besoin d'inclure un certain nombre d'éléments d'interface utilisateur tels que des boutons dans la conception.
Vous n'avez peut-être même pas besoin d'un bouton dans un style de carte.
Mais si vous pensez que les utilisateurs ont besoin d'un indice visuel, un bouton suffit. Gardez la forme et la conception simples - encore une fois, l'approche Material Design est une bonne option - et ne vous en tenez qu'à un seul bouton.
Un bouton est probablement le seul élément d'interface utilisateur dont vous avez besoin. C'est votre objectif de conception.
Conclusion
Il n'y a pas de formule magique pour la carte parfaite, mais vous pouvez faire certains choix de conception pour encourager chaque utilisateur à cliquer (ou à cliquer). Gardez votre design centré dans la réalité, suivez une approche minimaliste avec beaucoup d'espace et de contraste, mettez l'accent sur une typographie simple et créez une action unique pour chaque carte.
En suivant ce plan, vous pourrez mieux imaginer et conceptualiser les projets de type carte avec lesquels les utilisateurs souhaitent interagir. Combinez ces idées avec la théorie du design et vos compétences folles pour un grand projet qui sera amusant pour les utilisateurs et esthétique.