Share
Existen mil formas de diseñar y crear botones hoy en día y solo necesita pasar un poco de tiempo buscando trabajo en dribable para tener una idea de ellos. Gran parte de estos ejemplos son exactamente iguales, pero en ocasiones hay algunos pocos que sienten que han tenido un poco más de cuidado y atención en su creación..
Aprovechando las nuevas y maravillosas propiedades de CSS3, podemos crear algunos estilos de botones increíblemente elegantes y con estilo sin tanto como el olor de una imagen y tener estilos de retroceso perfectamente adecuados para los navegadores más antiguos. Es posible que le guste crear sus botones directamente en CSS, o que desee dirigirse a la herramienta de diseño de su elección, pero es importante pensar cuidadosamente cómo vive su diseño de botones en contexto..
Es muy fácil simplemente llegar a un "UI Elements PSD" prediseñado que algunas almas generosas han compartido gratis (y sin duda contiene botones inspirados en Apple). Pero, ¿por qué no tomarse un momento para considerar si dicho estilo de botón es apropiado en el contexto de su diseño y considerar si hay espacio para crear algo un poco más original??
Reciclar los botones de otra persona está bien, ahorra tiempo, pero no hay problema en tomarse un momento para entender el diseño y la composición de sus botones (o los de alguien más) con un poco más de detalle. ¿Cómo se diseñan? ¿Se ajustan a la interfaz / contexto / marca? ¿Hay una oportunidad para crear algo único? ¿Mis botones son lo suficientemente prominentes? ¿Necesito botones primarios, secundarios, terciarios? ¿Se diferencian suficientemente entre sí? ¿Se ven astutos? (¿Por qué no, todos queremos diseñar cosas geniales, verdad ?!).
Aquí hay diez cosas rápidas y simples en las que siempre pienso cuando diseño botones. No voy a compartir ideas sobre cómo usar los efectos de capa en Photoshop, sino algunos principios de diseño generales y simples que pueden ayudarnos a optimizar el diseño de sus botones y otra interfaz de usuario en general..
Es importante que tus botones coincidan con su estilo contextual. Esto podría significar adaptarse a una paleta de colores, estilo gráfico o tomar ventaja de algún tipo de guía de marca o logotipo. Tal vez hay algunas formas prominentes, texturas o estilos de diseño que puedes captar. Tal vez un logotipo tenga un aspecto circular y usted pueda captarlo en sus botones u otras posibles llamadas a la acción..
Si una interfaz utiliza predominantemente colores planos, tal vez los botones grandes y brillantes de Apple no sean el camino a seguir. Si puede, aproveche la oportunidad de experimentar extendiendo la marca a través de la interfaz utilizando formas, efectos, colores u otras formas de adornos apropiados..
Siguiendo desde arriba, deténgase un momento antes de abrir el 'UI Elements PSD'. Es fácil llegar a los graduados, las sombras, los biselados, etc., pero tómese un momento para pensar si es la elección correcta no solo para que coincida con una marca, sino también con la interfaz en la que se encuentran los botones y si necesitan sentirse demasiado "abotonados"..
Es posible que los botones necesiten sentirse particularmente como botones en una aplicación y en un dispositivo móvil, por ejemplo, pero con los sitios web tal vez haya espacio para hacer algo un poco diferente con sus botones o llamadas a la acción.
Con tantos diseños de interfaz inspirados en el estilo del sistema operativo Apple, particularmente en muchos de los PSD de UI Element, los botones pueden perderse un poco entre otros elementos que se utilizan en la interfaz de usuario, diluyendo su poder potencialmente importante. Intente usar color, tamaño, espacios en blanco o tipografía para asegurarse de que sus botones tengan el peso visual que necesitan para sobresalir del resto de la interfaz.
Siguiendo con lo anterior, si hay muchos otros elementos de interfaz de usuario de esquinas redondeadas en su diseño, considere usar botones de extremo circular o tal vez algún otro cambio de forma. Esto podría darle un poco de contraste adicional que asegure que sus importantes llamadas a la acción tengan la prominencia que puedan necesitar..
Si te estás esforzando por un estilo inspirado en el sistema operativo o si estás trabajando con un PSD de elementos prediseñados, es probable que tus elementos de la interfaz de usuario tengan una forma predominantemente redondeada en las esquinas redondeadas. Considere la posibilidad de reducir el nivel de adorno en los elementos que pueden darse el lujo de sentirse menos "aburrido".
Por ejemplo, los menús de selección a medida, los controles segmentados y los activadores de menú personalizados pueden ser las mismas formas de esquina redondeadas, pero usar menos sombra, borde, bisel, degradado u otros efectos puede ayudar a reducir su riqueza y, a su vez, promover estilos de botones..
La mayoría de los botones que vemos por ahí tienen algún tipo de borde o trazo. En términos generales, si su botón es más oscuro que el fondo sobre el que se encuentra, utilice un trazo oscuro del color general del botón. Si lo contrario es cierto, entonces ve por un trazo que sea un tono más oscuro del color de fondo. Si te quedas con el anterior y lo usas en un fondo más oscuro, encuentro que puede hacer que los bordes de los botones queden un poco "sucios". El uso de este último también puede ayudar a hacer que su botón realmente salte. Considero que este es un principio de diseño general cuando se trata de trazos / bordes en diseño web.
A lo largo de los años he jurado siempre por mi 'Ley de las Sombras'. La 'Ley de las Sombras' establece que las sombras paralelas funcionan mejor cuando un elemento es más claro que su fondo. Si un elemento es más oscuro que su fondo, las sombras deben usarse de manera muy sutil. Al igual que los trazos y bordes de coincidencia de colores, considero que este es un principio de diseño general que se aplica a todos los elementos de la interfaz de usuario.
Además de ser otro pequeño detalle que puede diferenciar aún más sus botones de elementos de la interfaz de usuario similares, el uso de elementos icónicos simples, como las flechas, puede dar un cierto sentido de la acción y una pequeña posibilidad de lo que sucede cuando un usuario hace clic..
Por ejemplo, una flecha que apunta justo después del texto en un botón puede dar al usuario cierta sensación de moverse o salir de la página. Una flecha que apunta hacia abajo podría sugerir que algún contenido se divulgará progresivamente a continuación, o tal vez se abrirá algún tipo de menú.
Si está diseñando una interfaz en la que constantemente hay muchas acciones y funciones en pantalla, puede ser importante establecer un lenguaje visual con sus botones al establecer estilos primario, secundario, terciario y potencialmente más.
Considere la posibilidad de reservar el color más intenso y audaz para sus botones primarios y usar progresivamente menos fuerza o saturación a medida que reduce la importancia. Además del color y la sombra, considere reducir el tamaño, el espacio en blanco, el tamaño del texto y el nivel de adorno para reducir aún más el peso visual de los botones que no son primarios.
Esto no es realmente una obviedad, pero a menudo es algo considerado hacia el final del proceso de diseño. Siempre trabaje a través de los estados centrales requeridos para que sus botones aseguren que proporcionen al usuario suficiente retroalimentación en su contexto. Los usuarios probablemente tendrán un modelo mental de cómo funciona un botón en el mundo real a medida que lo usan a través de sus diversos estados. Algunos ajustes simples de CSS con sombras, bordes y degradados y similares pueden proporcionar al usuario algunos comentarios simples y un toque de atención.!
Como diseñadores, todos tendrán su propio proceso por el que pasan. Apostaré mucho del tiempo que puede implicar mover la cabeza hacia atrás desde la pantalla, inclinarla ligeramente, entrecerrar los ojos y decir "¡Sí, eso es correcto!". Eso es parte de la diversión de diseñar, por supuesto, y los diseñadores talentosos tienden a hacerlo bien, pero creo que siempre es bueno hacer un poco de comentarios internos, interrogar y razonar sobre las decisiones de diseño que está tomando..
No hay daño en reutilizar o apoyarse en estilos prediseñados y elementos de UI, obviamente pueden ahorrar mucho tiempo. Incluso puede darse el caso de que alguien haya creado los píxeles exactamente lo que estaba buscando y lo esté ofreciendo de forma gratuita. Sin embargo, no creo que haya ningún daño en tener una comprensión más profunda del proceso de diseño y en diseñar lo que está creando e informar sus decisiones de diseño en el futuro.
Accentsconagua