Styliser des boutons au design plat afin qu'ils soient abordables et aient l'air «bien conçus»

J'ai commencé récemment un petit framework CSS. ( http://mincss.com si quelqu'un est intéressé) J'ai rapidement frappé une conception initiale pour certains boutons. Après avoir demandé des commentaires sur UX StackExchange (et reçu beaucoup de bons commentaires), il m'a été recommandé de venir ici pour obtenir des conseils supplémentaires sur leur amélioration.

Voici à quoi ils ressemblent en ce moment, après les commentaires d'UXStackExchange. J'ai supprimé la bordure noire, ajouté une "ombre" de 3 pixels et supprimé le biseau de 1 pixel:

Je vais pour un look design plat.

Il me reste 3 questions:

• Ces boutons montrent-ils suffisamment de liberté? (Cela semble être un problème avec la conception plate)
• Recommanderiez-vous d'ajouter un petit dégradé?
• Ont-ils l'air bien conçus? (subjectif je sais, mais je ne peux pas penser à une meilleure façon de poser cette question)

J'accueillerai volontiers (et utiliserai probablement) tout commentaire sur ces boutons.

Je pense qu'un dégradé très subtil améliorera définitivement l'esthétique des boutons. Étant donné que le style "Metro" de Windows 8 est un grand partisan de ce style, je vais l'utiliser comme exemple:

À première vue, les "carreaux" semblent avoir une couleur plate, mais si vous regardez attentivement, il y a un très léger dégradé de gauche à droite. C'est plus visible sur certains que sur d'autres, mais ils l'ont tous. Comme l'a dit Yisela, vous voulez que ce gradient soit à peine perceptible, presque subconscient.

Comme vous l'avez mentionné, lors de la conception de boutons plats, vous devez garder un œil sur deux ou trois choses. Le premier étant, je dirais: ça ressemble à un bouton?

Ce n'est pas nécessairement quelque chose qui ne dépend que du bouton, mais du reste des éléments de votre interface utilisateur. Si vous utilisez des boutons plats, je vous suggère d'éviter les formes / styles similaires partout ailleurs. Vous devez conserver un vocabulaire visuel afin que les gens puissent reconnaître instantanément ces éléments comme des boutons et non comme autre chose.

Les ombres sont bonnes pour cela, car elles donnent une impression de volume. Par conséquent, ils sont plus faciles à voir. De plus, nous sommes habitués aux boutons ayant cet effet. J'envisagerais cependant d'utiliser une couleur similaire à la couleur du bouton. Par exemple, au lieu d'utiliser du noir pour le bouton rouge, utilisez un rouge avec une opacité de 50%. Une autre option pour rendre les boutons plus évidents consiste à ajouter une icône (blanche, solide).

Je serais très prudent avec les dégradés . Non pas parce qu'ils sont mauvais, mais parce que dans la tendance plate super simple actuelle, ils ne correspondent pas bien. Surtout si les couleurs ou les nuances que vous utilisez sont très différentes. Un petit dégradé peut sembler vraiment agréable, mais il doit être minuscule, à peine perceptible.

Bref, j'aime leur apparence. Je ne ferais que changer la couleur de l'ombre en quelque chose de plus clair, et peut-être aussi rendre le texte de premier plan plus clair, blanc probablement. La police est agréable et vous utilisez un bon rembourrage, donc beau travail! Je vois que vous les utilisez sur le site, mais en dessous, vous avez un ensemble de notifications dans des couleurs pastel qui se ressemblent un peu. Je reconsidérerais leur style, car ils peuvent être un peu déroutants, et j'essaierais d'utiliser les mêmes couleurs sur tout le site (tous pastels, ou tout contraste).

Bien que je puisse respecter la création de ces boutons minimaux, vous devez vraiment déterminer si / comment ils peuvent être appliqués sur le Web sur différents sites Web, car vous créez un cadre. Si vous fournissez des boutons, vous devez vous assurer de fournir à peu près tout ce que quelqu'un d'autre pourrait utiliser comme des tableaux, des formulaires, etc. (sur lesquels je suis sûr que vous travaillez toujours).

Jetez un œil à Bootstrap si vous ne l'avez pas déjà fait. Bootstrap est un framework CSS merveilleusement simple et propre qui peut être facilement adapté ou intégré dans un autre site Web et pourrait vous donner quelques idées.

Maintenant, en ce qui concerne ces boutons, je jouerais avec une bordure, car cela aide à encapsuler le composant et une bordure est assez commune à beaucoup de boutons. J'ai consulté le site Web et j'aime les états de vol stationnaire / clic et je pense que vous avez bien fait avec ceux-ci.

Si vous souhaitez introduire des dégradés, être cohérent et assurez-vous de les utiliser également sur d'autres éléments, sinon vous aurez des profondeurs concurrentes qui seront juste distrayantes.

Les boutons ont l'air bien, mais le type de boutons qui montrent l'abondance et la sensation dans le style plat général sont une fois où la partie d'ombre est placée est une petite bande au bas de l'élément principal (bouton) et est principalement une nuance plus foncée du Couleur du bouton.