Le guide complet pour une conception d'interface de type carte efficace

L’architecture de type carte est l’un des principaux atouts de la conception Web, et en particulier de la conception mobile. Des applications aux sites Web réactifs, le format de style carte apparaît de plus en plus partout.

Et pour une bonne raison. La conception de la carte mobile est agréable à voir, fonctionne bien sur une variété de périphériques et crée une organisation distincte et une méthode pour la diffusion de contenu. C'est pourquoi de nombreuses grandes marques bien connues utilisent le format de carte et que de nombreux groupes de conception et de développement plus petits emboîtent le pas.

Qu'est-ce que la conception de cartes?

Les styles de conception de carte pour les sites Web mobiles et de bureau sont définis par une boîte de contenu qui ressemble à une carte de jeu. Les boîtes de type carte contiennent généralement un contenu ou des informations uniques et sont généralement orientées verticalement.

Mais comme pour toute technique de conception, il existe de nombreuses façons de casser les règles. Le principe de base derrière l’idée est de donner une rafale d’informations de manière facile à voir et à digérer d’un coup. Les sites de partage de médias sociaux populaires tels que Twitter et Pinterest utilisent ce format pour regrouper des images et des publications.

Qu'est-ce qui est bien avec une carte numérique? est-ce qu'il peut être manipulé de différentes manières. Ils peuvent apparaître empilés individuellement (comme c'est souvent le cas pour la conception mobile) ou tomber dans une grille pour les écrans plus grands. Les cartes peuvent être courtes ou hautes et conçues pour s'ajuster en fonction du contenu qu'elles contiennent.

La conception de style carte est également populaire pour les cadres réactifs, car les concepteurs peuvent ajouter et réduire des colonnes de cartes pour s’adapter à la forme et à la taille de l’écran. Alors que la plupart des concepteurs conçoivent des cartes avec une largeur fixe et permettent à la hauteur de la carte de rester variable.

Comment les cartes peuvent fonctionner pour votre projet

Les cartes sont une option à la mode en raison de leur flexibilité et de leur large éventail d'utilisations. (Il est également utile que certains des sites Web les plus populaires dans le monde aient utilisé une forme de carte dans des itérations de conception récentes - Google, Microsoft, Facebook, Twitter, Pinterest et Buzzfeed, pour en nommer quelques-unes.)

Mais voulez-vous utiliser un concept de type carte? Cette technique de conception a de nombreux avantages:

  • Cela rend le contenu facile à digérer.
  • Beaucoup de styles de design fonctionnent dans ce format, du plus plat au plus embelli.
  • Les cartes fonctionnent bien dans les cadres réactifs.
  • Le format a une apparence structurée et fournit une structure pour de nombreuses informations.
  • Cela fonctionne bien pour de nombreux types de contenu.
  • Les dessins de style carte sont pratiquement conçus pour être partagés sur les réseaux sociaux.

Concevoir une grande carte

Le meilleur design de carte est simple. Il propose également une expérience riche en contenu. Pour réussir un projet de type carte, ces deux éléments doivent être présents. Mais il existe de nombreuses autres techniques de conception qui peuvent également ajouter à la fonctionnalité et à l'esthétique.

La grande chose à propos des cartes est qu’il n’ya pas vraiment d’ensemble de règles de conception à suivre. Les principes de base d’un bon design sont tout ce que vous devez comprendre pour commencer à faire un projet de style carte.

Utilisez beaucoup d'espace

L'espace est un facteur commun dans les projets de conception de style carte. En particulier, beaucoup d'espace blanc. Il est important de donner à chaque élément l’espace nécessaire pour être vu, lu et compris. Cela est particulièrement vrai dans un bloc qui contient souvent un? Mini design? de sa propre. Pensez-y comme suit: si chaque carte de votre projet contient une image, un titre, un texte de copie principale, un bouton d’appel à l’action et un bouton ou un lien de partage, vous devez utiliser au moins cinq éléments sur un espace d’environ 600 pixels de large. .

Avoir beaucoup d'espace autour de chaque élément donne aux utilisateurs le temps de réinitialiser visuellement lorsqu'ils regardent d'un élément à l'autre ou d'une carte à l'autre. Inclure beaucoup de marges entre les éléments aidera également à focaliser l'attention sur la carte d'une manière qui fonctionne avec la hiérarchie de contenu.

Une information par carte

Nous avons déjà déterminé que la carte contiendrait plusieurs éléments dans un dessin, mais chacun devrait se concentrer sur un seul élément d'information ou de contenu. Suivez le concept d’une idée par bloc pour que l’image et tous les textes associés soient unifiés.

Cette idée peut créer un contenu qui pourrait être très varié dans le même espace, semblant intentionnel et organisé. Il offre aux utilisateurs la possibilité de choisir les éléments de votre portefeuille de contenu qu'ils souhaitent utiliser et partager.

Sélectionnez une image nette et nette

L'image est le roi de l'espace de conception de cartes. Vous avez besoin d'une image de qualité - et l'image doit être géniale même petite - pour attirer les utilisateurs vers chaque carte. (N'oubliez pas qu'il s'agit d'un espace Internet saturé.)

Si vous n'avez pas d'image, optez pour un style de style artistique ou créez un texte qui ne peut s'empêcher d'attirer les utilisateurs? (Rappelez-vous le lama? Évasion? À la fin de février qui est devenu viral grâce à de grands auteurs de titres.)

Utiliser une typographie simple

Optez pour des polices simples dans des couleurs simples et faciles à lire - les noirs et les gris sont populaires - qui restent à l’écart de la conception. Les empattements moyens à arrondis sont appréciés pour leur lisibilité et leur design neutre.

Limitez également le nombre de caractères. Pour la plupart des projets de cartes, un seul caractère suffit. Pensez à utiliser une variante audacieuse, mais dans la plupart des cas, les différences de taille suffisent pour tirer le meilleur parti du texte. (Pendant que vous y êtes, veillez également à limiter le nombre de mots. Une pensée par carte.)

Inclure un détail inattendu

Bien que les interfaces de style de carte soient souvent simples, l’ajout de détails inattendus peut lui donner le flair qui convient. Pensez à une découpe recadrée ou en coin, à un bord incliné ou à un effet 3D pour mettre en valeur les cartes.

D'autres techniques, telles que les superpositions de couleur ou les effets de survol, peuvent être tout aussi agréables. Pensez également à ajouter un effet aux éléments de contenu les plus significatifs afin que chaque carte ne soit pas tout à fait égale en termes de poids visuel.

Créer une grille ouverte

Celui-ci est peut-être le concept le plus difficile à comprendre, en fonction de la façon dont votre projet de conception se concrétise. Tout aussi important que la conception de chaque carte est le? Extérieur? espace entre chaque élément.

Créez un cadre de grille qui inclut un type de contraste avec chaque carte. Concevez le cadre de sorte que l’espacement soit uniforme d’une carte à l’autre et qu’il y ait suffisamment d’espace entre chaque élément. Cela pourrait entrer encore plus en ligne de compte lorsque des points de rupture pourraient tomber dans un cadre réactif avec des cartes à largeur fixe en particulier.

Considérer la convivialité

Une carte devrait être plus qu'un simple élément de design; cela devrait aider un utilisateur à accomplir certaines actions. Qu'il s'agisse de lire un article ou un article, de vous inscrire à un bulletin électronique ou de faire un achat, l'interface de la carte doit permettre une interaction facile.

Considérez comment ces interactions fonctionnent également. Allez au-delà du clic. De nombreux projets de conception comportant des cartes seront consommés sur des appareils mobiles. Envisagez des interactions utilisant des tapotements et des balayages plutôt que des clics traditionnels. Assurez-vous que les boutons ou les actions sont faciles à voir et à exécuter, notamment en disposant de suffisamment d'espace entre les objets pour pouvoir être touchés sans activer le mauvais élément.

Conclusion

Les projets de design de style carte sont amusants, tendance et fonctionnels. L'utilisation de certains principes de base de la conception vous aidera à créer un jeu de cartes esthétique et fonctionnel.

L'idée n ° 1 à garder à l'esprit est la simplicité. Tout ce qui concerne une carte doit être facile à lire et à comprendre. Bonne chance pour votre projet!