Share
Il existe mille façons de concevoir et de créer des boutons aujourd'hui et il vous suffit de passer un peu de temps à parcourir le travail sur dribbble pour en avoir une idée. Bon nombre de ces exemples sont exactement les mêmes, mais il arrive parfois que quelques-uns se sentent un peu plus soignés et attentionnés..
En tirant parti des superbes nouvelles propriétés CSS3, nous pouvons créer des styles de boutons incroyablement élégants et stylés sans même avoir le souffle d'une image et disposer de styles de secours parfaitement adaptés aux navigateurs plus anciens. Vous voudrez peut-être créer vos boutons directement en CSS ou choisir l'outil de présentation de votre choix, mais il est important de réfléchir à la manière dont la conception de vos boutons se situe dans son contexte..
Il est trop facile de rechercher simplement un 'PSD Elements' d'interface utilisateur préconçu que certaines âmes généreuses ont partagé gratuitement (et qui contient sans aucun doute des boutons inspirés d'Apple). Mais pourquoi ne pas prendre un moment pour déterminer si le style de bouton est approprié dans le contexte de votre conception et déterminer s’il est possible de créer quelque chose de plus original?
Recycler les boutons de quelqu'un d'autre c'est bien, cela fait gagner du temps, mais rien ne nous empêche de prendre un moment pour comprendre un peu plus en détail la conception et la composition de vos boutons (ou ceux de quelqu'un d'autre). Comment sont-ils conçus? Sont-ils adaptés à l'interface / au contexte / à la marque? Existe-t-il une opportunité de créer quelque chose d'unique? Mes boutons sont-ils assez visibles? Ai-je besoin de boutons primaires, secondaires, tertiaires? Sont-ils assez différents les uns des autres? Est-ce qu'ils ont l'air glissant? (Pourquoi pas, nous voulons tous concevoir des trucs super cool, non?!).
Voici dix choses simples et rapides auxquelles je pense toujours lorsque je crée des boutons. Je ne vais pas partager des idées sur l'utilisation des effets de calque dans Photoshop, mais quelques principes de conception simples et généraux qui peuvent aller très loin dans l'optimisation de la conception de vos boutons et de l'interface utilisateur en général..
Il est important que vos boutons correspondent à leur style contextuel. Cela pourrait signifier s’intégrer à une palette de couleurs, à un style graphique ou s’inspirer d’une forme de recommandation de la marque ou d’un logo. Peut-être pouvez-vous choisir certaines formes, textures ou styles de design de premier plan. Peut-être qu’un logo a un aspect circulaire et que vous pouvez le remarquer dans vos boutons ou dans d’autres appels potentiels à l’action..
Si une interface utilise principalement une couleur unie, de gros boutons brillants ressemblant à ceux d’Apple ne sont peut-être pas la solution. Si vous le pouvez, profitez de l’occasion pour expérimenter l’extension de la marque à l’interface en utilisant des formes, des effets, des couleurs ou d’autres formes appropriées d’embellissement..
Par la suite, arrêtez-vous un instant avant d'ouvrir le «PSD Elements de l'interface utilisateur». Il est facile de joindre les diplômés, les ombres, les biseaux, etc., mais prenez un moment pour déterminer si le choix est non seulement de correspondre à une marque, mais également à l'interface dans laquelle les boutons sont placés et s'ils ont besoin de se sentir excessivement "boutonnés"..
Les boutons peuvent avoir besoin de se sentir particulièrement comme des boutons dans une application et sur un mobile, par exemple, mais avec des sites Web, il est peut-être possible de faire quelque chose d'un peu différent avec vos boutons ou vos appels à l'action..
Avec autant de conceptions d'interface inspirées par le style Apple OS, en particulier dans de nombreux PSD d'élément d'interface utilisateur, les boutons peuvent se perdre un peu parmi les autres éléments utilisés dans l'interface utilisateur, diluant ainsi leur puissance potentiellement importante. Essayez d’utiliser une couleur, une taille, un espace ou une typographie pour que vos boutons aient le poids visuel dont ils ont besoin pour se distinguer du reste de l’interface..
Dans le prolongement de ce qui précède, si votre conception comporte de nombreux autres éléments d’interface utilisateur à coins arrondis, envisagez d’utiliser des boutons circulaires ou éventuellement un autre changement de forme. Cela pourrait vous donner un peu plus de contraste pour que vos appels à l'action importants aient la prééminence dont ils pourraient avoir besoin.
Si vous recherchez un style inspiré du système d'exploitation ou si vous travaillez avec un fichier PSD d'éléments prédéfinis, il est probable que vos éléments d'interface utilisateur auront principalement une forme rectangulaire arrondie. Envisagez de réduire le niveau d'embellissement des éléments pouvant vous permettre de vous sentir moins «boutonnés»..
Par exemple, les menus de sélection sur mesure, les commandes segmentées, les déclencheurs de menu personnalisés peuvent tous avoir les mêmes formes de coins arrondis, mais utiliser moins d’effets d’ombre, de bordure, de biseau, de dégradé ou autres peut aider à réduire leur richesse et à promouvoir les styles de bouton..
La plupart des boutons que nous voyons ont une bordure ou un contour. En gros, si votre bouton est plus sombre que l'arrière-plan sur lequel il est assis, utilisez un trait sombre de la couleur générale du bouton. Si l'inverse est vrai, optez pour un trait qui est une nuance plus foncée de la couleur d'arrière-plan. Si vous vous en tenez à l'ancien et que vous l'utilisez sur un arrière-plan plus foncé, je constate que les bords du bouton sont un peu "sales". L'utilisation de ce dernier peut également aider à rendre votre bouton vraiment pop. J’estime qu’il s’agit d’un principe de conception général lorsqu’il s’agit de contours / marges dans la conception Web.
Au fil des ans, j'ai toujours juré par ma «loi de l'ombre». La «loi des ombres» stipule que les ombres portées fonctionnent mieux lorsqu'un élément est plus clair que son arrière-plan. Si un élément est plus sombre que son arrière-plan, les ombres portées doivent être utilisées de manière très subtile. Semblable aux traits et aux bordures de correspondance des couleurs, j'estime qu'il s'agit d'un principe de conception général qui s'applique à tous les éléments de l'interface utilisateur..
En plus d’être un autre petit détail qui permet de différencier davantage vos boutons d’éléments d’interface utilisateur similaires, l’utilisation d’éléments iconiques simples, tels que des flèches, peut donner une idée de l’action et donner une idée de ce qui se passe lorsqu'un utilisateur clique.
Par exemple, une flèche pointant juste après le texte d'un bouton donne peut-être à l'utilisateur le sentiment de continuer ou de quitter la page. Une flèche pointant vers le bas pourrait suggérer que certains contenus seront progressivement divulgués ci-dessous, ou peut-être qu'une sorte de menu s'ouvrira.
Si vous concevez une interface comportant de nombreuses actions et fonctionnalités, il peut être important de définir un langage visuel avec vos boutons en définissant des styles primaire, secondaire, tertiaire et potentiellement plus..
Pensez à réserver la couleur la plus forte et la plus audacieuse à vos boutons principaux et à utiliser progressivement moins de force ou de saturation à mesure que vous réduisez l'importance. En plus de la couleur et de la nuance, envisagez de réduire la taille, les espaces, la taille du texte et le niveau d'embellissement pour réduire davantage le poids visuel des boutons qui ne sont pas primaires..
C'est une évidence, mais c'est souvent quelque chose qui est considéré à la fin du processus de conception. Utilisez toujours les principaux états requis pour vos boutons afin de s’assurer qu’ils fournissent à l’utilisateur un retour suffisant dans leur contexte. Les utilisateurs auront probablement un modèle mental de la façon dont un bouton fonctionne dans le monde réel, car ils l'utilisent dans ses différents états. Quelques simples modifications CSS avec des ombres, des bordures et des dégradés, etc., peuvent donner à l'utilisateur des informations simples et une touche de piment.!
En tant que concepteurs, vous suivrez votre propre processus. Je parie souvent que vous pouvez déplacer votre tête de l'écran, l'incliner légèrement, plisser les yeux et dire «Ouais, c'est à peu près ça!». Cela fait partie du plaisir de concevoir bien sûr, et les concepteurs talentueux ont tendance à bien faire les choses, mais je pense qu'il est toujours bon d'exécuter un peu de commentaire interne, d'interroger et de raisonner sur les décisions de conception que vous prenez..
Il n'y a pas de mal à réutiliser ou à s'appuyer sur des styles et des éléments d'interface utilisateur prédéfinis, ils permettent évidemment de gagner beaucoup de temps. Il se peut même que quelqu'un ait parfaitement conçu ce que vous cherchez et le propose gratuitement. Cependant, je ne pense pas qu'il soit nuisible de mieux comprendre le processus de conception et de concevoir ce que vous créez, et d'informer vos décisions de conception à l'avenir..
Accentsconagua