() translation by (you can also view the original English article)
Existen miles de formas para diseñar y crear botones hoy en día y usted solo tiene que emplear una pequeña cantidad de tiempo mirando a través de trabajos en dribbble para encontrar un sentido en ellos. Una gran cantidad de estos ejemplos son exactamente lo mismo, pero ocasionalmente están los pocos casos singulares que se sienten como si tuvieran un poco más de cuidado y atención en su elaboración.
Tomando ventaja de nuevas propiedades CSS3, podemos crear estilos de botones sorprendéntemente elegantes con estilos geniales sin el olorcillo de una imagen además de tener estilo adecuados a la perfección en caso de una alternativa en navegadores antiuguos. Ud. puede crear los botones únicamente en css o puede acudir a la herramienta de diseño de su elección, sin embargo es importante pensar detenidamente acerca de cómo el diseño del botón vive en contexto.
Es todo tan sencillo como para simplemente alcanzar un 'PSD Elementos de interfaz de usuario' prediseñado que algún alma generosa ha compartido de manera gratuita (y sin duda contiene botones inspirados en Apple). ¿Pero por qué no tomarse un momento para considerar si dicho estilo de botón es el apropiado en el contexto de su diseño, si existe el suficiente espacio para crear algo un poco más original?
Está bien reciclar el botón de alguien, ahorra tiempo, pero tampoco hace daño tomarse un tiempo para entender el diseño y la composición de los botones propios (o los botones de alguien más) un poco más detalladamente. ¿Cómo están diseñados? ¿Se adecuan a la interfaz/el contexto/la marca? ¿Existe una oportunidad de crear algo único? ¿Son mis botones lo suficientemente prominentes? ¿Necesito botones primarios, secundarios, terciarios? ¿Se diferencian sustancialmente unos de otros? ¿Se ven baratos? (¿Por qué no, todos queremos diseñar cosas que se vean cool, verdad?!).
Aquí hay diez cosas rápidas y simples en las que siempre pienso cuando diseño botones. No voy a compartir ideas acerca de cómo usar efectos de capa en Photoshop, sino más bien principios de diseño simples, generales que pueden recorrer un larpo camino al optimizar el diseño de sus botones y otros elemento de IU en general.
1. Encajar con la Marca
Es importante que sus botones encajen con su estilo contextual. Esto podría significar adecuarse a una paleta de color, estilo gráfico o tomar un rastro de alguna forma de marca, lineamientos o logotipo. Tal vez hayan algunas formas prominentes, texturas o estilos de diseño de los que pueda recoger algo. Posiblemente un logotipo tenga un aspecto circular y usted podría tomar esto en sus botones u otros llamados a la acción potenciales.
Si una interfaz predominantemente utiliza color plano, entonces tal vez botones grandes y brillantes del tipo de Apple no sean el camino indicado. Si usted puede, tome la oportunidad de experimentar con extender la marca a través de la interfaz utilizando las formas, efectos, colores u otras formas de embellecimiento apropiados.
2. Encajar con el Estilo Contextual
Siguiendo con lo de arriba, deténgase un momento antes de abrir el 'PSD de Elementos de IU'. Es fácil alcanzar gradientes, sombras, biseles, etc, pero tome un tiempo en pensar si es la decisión acertada no solo encajar con una marca, sino también con la interfaz en la que los botones se encuentran y además si los botones necesitan sentirse en extremo 'botonosos'.
Los botones necesitan sentirse particularmente como botones dentro de una aplicación y en el móvil por ejemplo, pero con los sitios web tal vez hay más campo para hacer algo un poco diferente con sus botones o llamados a la acción.
3. Asegúrese de que los Botones tengan Suficiente Contraste
Con tantos diseños de interfaz inspirados en el estilo de Apple OS, particularmente en muchos de los PSD's de Elementos de IU, los botones pueden llegar a perderse un poco entre otros elementos utilizados en la IU, diluyendo así su importante poder potencial. Trate de usar color, tamaño, espacio en blanco y tipografíua para asegurar que sus botones tengan el peso visual que necesitan para sobresalir del resto de la interfaz.
4. Considere Botones Redondeados o con Alguna Forma
Siguiendo con lo anterior, si existen varios elementos adicionales con esquinas redondeadas en su diseño, considere utilizar botones con una terminación circular o tal vez algún otro cambio en la forma. Esto podría darle un poco más de contraste que asegure que sus llamados a acción importantes tengan la prominencia que necesiten tener.
5. De-enfatice los Elementos Secundarios de la IU
Si está aspirando a un estilo inspirado en OS o está trabajando con un PSD con elementos pre-diseñados, entonces es probable que sus elementos de IU serán predominantemente redondeados y de forma rectangular. Considere reducir el nivel de embellecimiento en elementos que pueden afrontar sentirse menos 'botonosos'.
Por ejemplo, menús de selección hechos a medida, controles segmentados, disparadores personalizados de menú, pueden tener todos las mismas formas redondeadas en las esquinas pero utilizando menos sombra, borde, bisel, gradiente u otros efectos que ayuden a reducir su riqueza y a su vez promuevan los estilos de botón.
6. Concuerde Colores en Trazos y Bordes
Muchos de los botones que vemos allá afuera tienen algún tipo de borde o trazo sobre ellos. Hablando vagamente, si su botón es más oscuro que el fondo en el que se encuentra, use un trazo más oscuro que el del color general del botón. Si lo contrario es cierto, entonces elija un trazo que sea una sombra más oscura del color de fondo. Si mantiene la primera opción y lo utiliza en un fondo más oscuro, pienso que puede volver las esquinas del botón un poco 'sucias'. Utilizando la segunda opción puede ayudar a hacer que el botón sobresalga realmente. Considero que este es un gran principio de diseño general cuando se trata de trazos y bordes en diseño web.
7. Sea Cuidadoso con Sombras Difuminadas
A lo largo de los años siempre he sido fiel a mi 'Ley de Sombras'. La 'Ley de Sombras' establece que las sombras funcionan mejor cuando un elemento es más claro que su fondo. Si un elemento es más oscuro que su fondo, entonces las sombras deberían usarse muy sutilmente. De manera similar a concordar trazos y bordes, considero mucho esto como un principio general de diseño que aplica a todos los elementos de la IU.
8. Iconografía Sutil Puede Proporcionar Asequibilidad
Así como ser otro pequeño detalle que puede diferenciar aún más sus botones de elementos de IU similares, el uso de simples elementos icónicos tales como flechas pueden dar algún sentido de acción y una pequeña asequibilidad en cuanto a lo que sucede cuando un usuario hace clic.
Por ejemplo, una flecha apuntando hacia la derecha luego del texto en un botón posiblemente da al usuario alguna sensación de movimiento hacia adelante o de abandonar la página. Una flecha apuntando hacia a abajo sugiere que algún contenido será revelado debajo, o tal vez que algún tipo de menú se abrirá.
9. Considere Estilos Primarios, Secundarios y Terciarios
Si usted está diseñando una interfaz donde existen consistentemente muchas acciones y funcionalidad en la pantalla, puede ser importante establecer algún lenguaje visual con sus botones al establecer estilos primarios, secundarios, terciarios y potencialmente más estilos.
Considere reservar el color más fuerte y marcado para sus botones primarios y utilizar progresivamente menos fuerza o saturación mientras reduce importancia. De la misma forma en que color y forma, considere reducir tamaño, espacio en blanco y nivel de embellecimiento para reducir además el peso visual de botones que no son primarios.
10. Siempre Haga Estados de Retroalimentación
Este es realmente una tontería, pero habitualmente se considera llegando al final del proceso de diseño. Siempre trabaje en los estados esenciales requeridos por sus botones para asegurar que proporcionen al usuario la suficiente retroalimentación dentro de su contexto. Los usuarios tendrán con más probabilidad un modelo mental acerca de cómo trabaja un botón en el mundo real si lo utilizan a través de varios estados. ¡Algunas modificaciones simples de CSS con sombras, borde y gradientes y similares pueden darle al usuario retroalimentación simple y un toque de atractivo visual!
Conclusión
Como diseñadores tienen todos ustedes su propio proceso por el que atraviesan. Apuesto en varias ocasiones al tiempo que puede incluir alejar su cabeza de la pantalla, inclinarla levemente, mirar de reojo y decir '¡Si, esto es correcto!'. Eso es parte de la diversión en diseñar por supuesto y los diseñadores talentosos tienden a hacerlo bien realizando únicamente eso, pero considero que siempre es bueno hacer un poco de autocrítica, interrogar y razonar acerca de las decisiones de diseño que ustedes están haciendo.
No existe ningún daño al reutilizar o respaldarse en estilos pre-diseñados y elementos de IU,ello pueden obviamente ahorrar un montón de tiempo. Puede existir incluso el caso de que alguien que haya creado exactamente con perfección al píxel lo que usted está buscando y lo esté ofreciendo gratis. Sin embargo, no creo que haya daño alguno en tener un entendimiento más profundo del proceso de diseño y del trabajo detrás de lo que se está creando e impulsando hacia adelante sus decisiones de diseño.
