Explicación de los estados de botones

Me gustaría que esto fuera una referencia, pero no del todo sea interpretado como lo definitivo. Una de las cosas que se debe saber en esto del diseño gráfico es que todo cambia. Los ejemplos dados aquí son de hace varios años, así que seguramente sea una muestra de cómo trabajaba en aquel entonces.

Los tres estados ‘tradicionales’ son:

  • Normal
  • ‘Hover’
  • Activo

Ahora mismo puedes usar todos estos estados:

  • Normal
  • Enfocado
  • ‘Hover’
  • Presionado
  • Activo
  • Desactivado
  • Error
  • entre otros que quieras poner

Y puedes seguir siendo creativo añadiendo estados. A mi me toco hacer uno así de creativo. Uno de los problemas que se tenía era que las promociones caducaban, pero la página sequía estando activa con el botón desactivado. Así que la solución era convertir el botón una ves acabada en uno que invitara a ver las promociones activas. Esto ayudaba a los números de la web, porque le dábamos a los usuarios la oportunidad directa de seguir en la web.

A continuación es una muestra de los estados del botón y como veras, crearlo no es solo poner uno o dos. Así se lo pasaba a los programadores en turno con la explicación directa. Esto de explicar con detalle lo recomiendo para no tener malos entendidos cuando le toque crear los códigos a los programadores.

Luego tenía este con los ‘templates’ para usar según la ocasión. Aunque esto no trata directamente de botones, si de una manera sencilla de presentar las posibilidades que se pueden tener según sea el caso.

No solo en la construcción de los textos, también si las cajas requieren una información extra. siempre es bueno tenerle esas posibilidades. Aquí se presentan diferentes situaciones de cómo presentar una información. Además se tiene la posibilidad de tener imágenes que podrás utilizar según las necesidades.

Algo importante que tengo en cuenta y pienso se debe presentar cuando se hace un trabajo de diseño, es tener todas las posibles soluciones a escenarios que se puedan tener. Nunca presentes lo básico, porque le darás libertad directa a los programadores y estos pueden ser “creativos” de forma perjudicar para el diseño que acabas de crear.