Cintas y etiquetas en diseño web
Las tendencias pueden nacer tan silenciosa y sutilmente que rara vez las notamos.
Y cuando encuesta cientos de sitios web, a menudo se ven patrones que de otra manera se perderían. Uno de esos patrones es el uso frecuente de etiquetas y cintas.
Estos pequeños florecimientos se han vuelto cada vez más populares. Este artículo aborda los dos elementos porque se usan juntos con tanta frecuencia.
Mientras que las cintas se explican por sí mismas, me refiero a las etiquetas falsas que cuelgan de la parte superior de la pantalla, como una etiqueta en una camiseta.
Los sitios web que usan estos elementos son realmente excepcionales en calidad. Reunir este magnífico escaparate resultó ser extraordinariamente fácil. Pocas tendencias son así: uno generalmente tiene que pasar por muchos ejemplos pobres para encontrar los más sabrosos.
¿Por qué usar estas cintas y etiquetas?
Las etiquetas son útiles porque atraen la atención del usuario al crear la ilusión de profundidad. Empujan su contenido hacia el usuario. Las etiquetas también se diseñan a menudo con golpe, ya sea a través de efectos tridimensionales o en colores llamativos.
Estos factores hacen que la etiqueta sea una ubicación privilegiada para información crítica: logotipos, navegación, llamadas a la acción. Vemos esto en el escaparate a continuación. Por supuesto, como siempre, evalúe sus necesidades antes de implementar este elemento en su propio sitio web.
La cinta comparte las mismas cualidades, que de hecho es la razón por la que la encontramos y la etiqueta juntas con tanta frecuencia: atrae la atención y es un gran lugar para obtener información importante. La forma de la cinta lo diferencia de la etiqueta, sin embargo; las dos flechas en sus extremos parecen apuntar al contenido dentro, dirigiendo sutilmente la atención del usuario.
Una familia de estilos
Otra razón por la que estos dos elementos se encuentran a menudo juntos en los sitios web es que ambos son representaciones digitales de la tela. No es de extrañar, entonces, que muchos de los sitios web que figuran a continuación tengan otros elementos relacionados con la tela, como suturas sutiles, texturas y otros elementos orgánicos.
Cintas
Carta al alumno
La cinta enmarca bien el nombre Carta al alumno aquí. Además, la página se presenta como una sola columna; el título con cinta alienta al usuario a comenzar su viaje en la parte superior y descender desde allí.
Ribot
Ribot La cinta de s es bastante sutil. El florecimiento anima la página, mientras que resume el enfoque de la compañía en un eslogan de dos palabras. Una forma perfecta de establecer expectativas, porque el nombre de la empresa no nos dice lo que hace.
Alex Pierce
Con el texto es enorme en la página de inicio de Alex Pierce En su cartera, se necesitaría un elemento bastante audaz para equilibrarlo. En este caso, la cinta hace un buen trabajo al configurar el encabezado. También me encanta cómo la capa doblada en el medio de la cinta agrega enfoque al nombre del diseñador.
Rockaholic!
En el bastante inusual Rockaholic! , la cinta dirige la atención del usuario hacia abajo, jugando agradablemente en el desplazamiento vertical del sitio web y ayudando al usuario a profundizar en el contenido.
Paris Jones
El delicioso color rojo de la cinta hace que el nombre de la banda Paris Jones sal de aquí. Aunque el tratamiento de texto es bastante sutil, el patrón audaz garantiza que lo notes.
Blog en Bois
En Blog en Bois , el efecto de flecha de la cinta es especialmente poderoso, en gran parte debido a la oscuridad que se contrasta detrás del amarillo. Me siento atraído hacia el logo una y otra vez. Sin duda es una forma poderosa de engranar la marca en la mente del usuario.
Boilerplate HTML5
El sitio web popular Boilerplate HTML5 utiliza cintas para llamar nuestra atención sobre los elementos de acción más importantes en la página. Me encanta que las cintas hagan su trabajo sin tener que decir "Descargue aquí". La combinación de cintas y etiquetas nos dice que aquí es donde descargar los recursos.
Cantilever Fish & Chips
El propósito de la cinta no es tan claro en Cantilever Fish & Chips . El detalle de estar "Abierto los 7 días de la semana" parece relativamente menor, pero presumiblemente es una distinción importante para este restaurante.
Wells Riley
Wells Riley es un ejemplo perfecto de cintas al servicio de la estética. Las cintas se ven geniales aquí y se convierten en el foco de la página.
Dhiraj Singh Karki
Siempre me encantan los diseños que se apartan de las convenciones. La cartera de diseñador de interfaz de usuario Dhiraj Singh Karki es solo un sitio web. Aquí, la cinta se usa con bastante inteligencia y no tiene el mismo impacto visual que en otros sitios web. Se integra perfectamente en la página y, sin embargo, tiene el estilo suficiente para evitar que el diseño parezca demasiado simple.
Ardilla listada
Ardilla listada es un gran ejemplo de cómo una cinta puede funcionar con elementos orgánicos. La cinta alrededor de la navegación principal encaja perfectamente con las ilustraciones detalladas a continuación. También evita que la navegación se pierda entre las poderosas ilustraciones.
Ryan M. Stryker
Una vez más, vemos el poder de la cinta para enfocar la atención. Su ubicación central y el contraste audaz garantizan que no se pierda Ryan M. Stryker 'nombre de.
Etiquetas
Ennea
Dado que Ennea es una marca de ropa, no es de extrañar que la etiqueta aquí contenga el logotipo y la marca. A veces, un enfoque directo funciona mejor.
Diseño Philip Meissner
La etiqueta contiene la navegación principal en Diseño Philip Meissner . Por lo general, me desanimaría esta configuración inusual de enlaces, pero la disposición y los colores aquí aseguran que los enlaces sean súper fáciles de encontrar.
Tinkering Monkey
¿Qué podría ser más importante en un sitio web de comercio electrónico y luego guiar a los usuarios para que lo revisen? Tinkering Monkey tiene una pequeña y audaz etiqueta para ayudar a los usuarios a completar su compra.
Parkbud
Con todas las aplicaciones de teléfonos inteligentes disponibles, las buenas necesitan comunicar sus diferenciadores clave. Parkbud es gratis, y la etiqueta roja en negrita se asegura de que usted lo sepa. La etiqueta está bien escondida, pero siempre visible desde el rabillo del ojo, recordándote que esta sabrosa aplicación es gratuita.
Lense
Lense es un ejemplo perfecto de etiquetas combinadas con texturas de tela. Observe primero el fondo texturizado del dril de algodón; también, el borde festoneado debajo de la navegación principal se siente muy orientado a los textiles.
Coreymade
Si bien es un pequeño detalle, realmente me encanta la forma en que la fuente del script hace la etiqueta en Coreymade se siente más como una etiqueta en una camisa que un logotipo de sitio web normal. Y el efecto pseudo-3D hace que la etiqueta realmente destaque para el espectador.
Netastica
La etiqueta en Netastica está allí para verse bonita, aunque todavía contiene información importante y vincula a los visitantes a la página de inicio.
Ryan Havoc Taylor
La etiqueta está en una ubicación tan visible en Ryan Havoc Taylor 'S sitio web que no necesita un montón de contraste para destacarse. Funciona bien con el flujo del sitio web y desempeña su función sin esfuerzo.
Cintas y etiquetas
En la parte final de este escaparate, veremos sitios web que utilizan tanto cintas como etiquetas.
ClearSpan Media
Las cintas y las etiquetas van muy bien juntas, como se muestra en ClearSpan Media . Aquí también encontrará telas con patrones, puntadas y sutiles variaciones de color. Las dos etiquetas arriba y la cinta abajo funcionan como un tipo de círculo de interés para el usuario.
Krichevtsova Alexandra
Mientras Krichevtsova Alexandra El sitio web es bastante simple en contenido, la etiqueta y la cinta añaden vida extra a los elementos clave. Puede disfrutar de este sitio web sin siquiera saber lo que hace la persona.
Wes Bos
La mayoría de los sitios web de esta colección tienen cintas bastante grandes. No es así con Wes Bos . Son mucho más pequeños, un buen recordatorio de que no necesitan dominar el diseño para realizar su función.
Conclusión
Dada la calidad de los sitios web de esta colección, ninguno de estos diseñadores se propuso construir algo "moderno". Más bien, se enfrentaron a una serie de necesidades, y de esas necesidades surgió un dispositivo visual efectivo para enfocar la atención, comunicando información crítica y destacando acciones importantes.
Si desea algunas buenas cintas basadas en CSS para su propio sitio web, las basadas en la web Generador de cinta 3-D es una herramienta útil para el trabajo.