Diseña botones limpios de diseño plano para que muestren un precio asequible y se vean 'bien diseñados'

Empecé un pequeño framework CSS recientemente. ( http://mincss.com si alguien está interesado) Rápidamente eliminé un diseño inicial para algunos botones. Después de pedir comentarios sobre UX StackExchange (y recibir muchos comentarios buenos), me recomendaron venir aquí para obtener consejos adicionales sobre cómo mejorarlos.

Así es como se ven ahora, después de los comentarios de UXStackExchange. Eliminé el borde negro, agregué una "sombra" de 3px y eliminé el bisel de 1px:

Voy por un diseño plano.

Tengo 3 preguntas restantes:

• ¿Estos botones muestran suficiente capacidad de pago? (Esto parece ser un problema con el diseño plano)
• ¿Sugeriría agregar un pequeño gradiente?
• ¿Se ven bien diseñados? (subjetivo lo sé, pero no puedo pensar en una mejor manera de preguntar esto)

Con gusto agradeceré (y probablemente usaré) cualquier comentario sobre estos botones.

Creo que un gradiente muy sutil definitivamente mejorará la estética de los botones. Dado que el estilo "Metro" de Windows 8 es un gran defensor de este estilo, lo usaré como ejemplo:

A primera vista, los "mosaicos" parecen ser de un color plano, pero si se mira de cerca, hay un ligero gradiente que va de izquierda a derecha. Es más notable en algunos que en otros, pero todos lo tienen. Como dijo Yisela, quieres que este gradiente sea apenas perceptible, casi subconsciente.

Como mencionó, al diseñar botones planos debe vigilar un par de cosas. El primero es, yo diría: ¿Parece un botón?

Esto no es necesariamente algo que depende solo del botón, sino del resto de los elementos de su interfaz de usuario. Si está utilizando botones planos, le sugiero que evite formas / estilos similares en cualquier otro lugar. Debe mantener un vocabulario visual para que las personas puedan reconocer instantáneamente estos elementos como botones y no como otra cosa.

Las sombras son buenas para esto, porque dan una impresión de volumen. Por lo tanto, son más fáciles de ver. Además, estamos acostumbrados a los botones que tienen ese efecto. Sin embargo, consideraría usar un color que sea similar al color del botón. Por ejemplo, en lugar de usar negro para el botón rojo, use un rojo con 50% de opacidad. Otra opción para hacer que los botones sean más obvios es agregar un ícono (blanco, sólido).

Tendría mucho cuidado con los gradientes . No porque sean malos, sino porque en la tendencia plana súper simple actual, no encajan tan bien. Especialmente si los colores o tonos que usa son muy diferentes. Un pequeño gradiente puede verse muy bien, pero tiene que ser pequeño, apenas perceptible.

En resumen, me gusta cómo se ven. Solo cambiaría el color de la sombra a algo más claro, y tal vez haría que el texto en primer plano también sea más claro, probablemente blanco. La fuente es agradable y está utilizando un buen relleno, ¡así que buen trabajo! Veo que los está utilizando en el sitio, pero debajo de ellos tiene un conjunto de notificaciones en colores pastel que en realidad se parecen un poco. Reconsideraría su estilo, ya que pueden ser un poco confusos, y trataría de usar los mismos colores en todo el sitio (todos los pasteles o todos los contrastes).

Si bien puedo respetar la creación de botones tan mínimos, realmente debe considerar si se pueden aplicar en la web en diferentes sitios web, ya que está creando un marco. Si proporciona botones, debe asegurarse de proporcionar casi todo lo demás que alguien podría usar, como tablas, formularios, etc. (en lo que estoy seguro de que todavía está trabajando).

Echa un vistazo a Bootstrap si aún no lo has hecho. Bootstrap es un marco CSS maravillosamente simple y limpio que se puede adaptar o integrar fácilmente en otro sitio web y puede darle algunas ideas.

Ahora, en lo que respecta a estos botones reales, jugaría con un borde, ya que esto ayuda a encapsular el componente y un borde es bastante común en muchos botones. Revisé el sitio web y me gustan los estados de desplazamiento / clic y creo que les fue bien.

Si desea introducir gradientes, sea coherente y asegúrese de usarlos también en otros elementos, de lo contrario tendrá profundidades competitivas que lo distraerán.

Los botones se ven bien, sin embargo, el tipo de botones que muestran comodidad y sensación en el estilo plano general es una vez que se coloca la parte de sombra es una pequeña tira en la parte inferior del elemento principal (botón) y es principalmente un tono más oscuro del color del boton.