Articles

Degradados web inspiradores y dónde encontrarlos

Los degradados web vuelven a ser un elemento de diseño para el mundo en línea. Se han convertido en una forma fácil de dar vida a su sitio web.

Si se aplican bien, dan al ojo una sensación unificada que invita al usuario a permanecer en el sitio web. Esta sensación surge de la falta de bordes ásperos y roturas en la estructura de la página.

degradados web-nyc_pride Como puede ver en el ejemplo anterior, el degradado calma la acción de la imagen de fondo para que sea adecuada para ser el fondo de este diseño de interfaz de usuario.

Quiero saber la razón de ello?

El secreto es que la armonía que un gradiente extiende deriva de fenómenos en la naturaleza donde en su mayoría no aparecen bordes ásperos. Todo tiene una forma orgánica o transiciones suaves.

Además, los humanos tienen una gran visión del color y disfrutan viendo los colores. Imagina un degradado en blanco y negro. Depende del caso, pero lo más probable es que no parezca que en muchos casos se prefieran gradientes grandes y coloridos.

¿Por qué crees que a todo el mundo le gusta ver puestas de sol?

gradientes web-gradiente de puesta de sol

O simplemente pone su cabeza hacia el cielo?

degradados web: degradado natural

El uso de degradados en el fondo de una página web también puede ser una forma discreta de guiar la vista del visitante a través del contenido sin necesidad de colocar flechas molestas en primer plano.

El primer plano debe utilizarse para la información importante de todos modos y el segundo plano puede cumplir un propósito secundario.

Aplicado a elementos como botones e iconos, los degradados también pueden generar un efecto 3D sencillo.

No siempre es fácil encontrar el gradiente adecuado y aplicarlo correctamente con todos estos beneficios.

no te preocupes. Hay una solución.

Hay muchas herramientas en línea que ya ofrecen una gran cantidad de degradados preparados, ya sea solo para inspirarse o directamente para integrarlos fácilmente en su sitio web.

Ahora solo tienes que averiguar qué herramienta se adapta mejor a tus necesidades.

Comencemos.

Degradados web inspiradores

degradados web-symodd

Como se mencionó, symodd es un ejemplo clásico de cómo los buenos degradados web pueden funcionar como un fondo simple que es interesante y atractivo de todos modos.

degradados web-qards

No solo utiliza un degradado de Qards como fondo, sino que también se aplican a casi todos los elementos, especialmente a los iconos y botones.

degradados web - gogoro

Gogoro está utilizando un degradado en una forma que lo hace más dinámico y apoya el propósito de la marca.

Como puede ver en estos sitios web, se trata de encontrar el equilibrio adecuado y usar los colores con moderación.

No es un degradado inspirador:

degradados web-Mal ejemplo

Este degradado es tan feo que tengo que disculparme por presentarlo aquí porque duele mucho el ojo. Tiene demasiados colores que son todos muy diferentes. Además, el texto negro plano en primer plano parece desplazado y queda suprimido por el degradado.

Por lo tanto, si después de ver estos ejemplos aún no está seguro de si podría aplicar un degradado que sea capaz de soportar su proyecto de la manera que debería, puede profundizar en el diseño web y gráfico.

No es suficiente?

DISEÑO WEB PROFESIONAL

Aprender más acerca de nuestra firma en el curso.Elija el mejor horario para estudiar en LÍNEA o en la escuela.

la VISTA de CURSO

Siga esta guía para obtener una mejor comprensión de los tipos de gradiente y asesora sobre las mejores prácticas.

…y dónde encontrarlos

web gradientes - uiGradients
web gradientes - uiGradients

uiGradients es muy fácil de usar, ya que sólo tiene dos pantallas principales. Después de cargar, puede ver directamente un degradado aleatorio en toda la pantalla.

Con las flechas a los lados, puede cambiar dentro de la gran oferta de todo tipo de gradientes. La segunda pantalla muestra todos los degradados como una lista para desplazarse y ordenar por color.

La atmósfera que crean los degradados web es compatible con su nombre individual. Como característica especial, también puede rotar el degradado para ver cómo se ve desde otra perspectiva.

Para las personas que desean contribuir con su degradado creado a la comunidad, existe la opción de agregar su degradado a la colección a través de GitHub. Esto hace que la variedad de gradientes sea casi ilimitada.

uiGradients proporciona tres formas de guardar el gradiente elegido. Si desea recrear el degradado en un software o código de diseño gráfico, simplemente puede copiar el Código de color hexadecimal.

Para una implementación directa en su sitio web, puede obtener el código CSS.

Para guardar el degradado como inspiración, simplemente descargue el archivo JPEG.

Degradados web

degradados web: Degradados web

Esta herramienta comienza mostrando la colección de 180 degradados web como una larga lista que puede recorrer. Una vez que desee ver más de un degradado, simplemente haga clic en su selección y el color se mostrará en toda la pantalla.

Cada gradiente tiene un nombre, por lo que su posible aplicación posterior es más concreta.

WebGradients está dirigido por itmeo, una empresa que proporciona múltiples herramientas digitales en línea. Su servicio de degradado, en este caso, es gratuito a menos que no desee descargar un archivo de Sketch o Photoshop.

Al igual que en uiGradients, también tiene tres posibilidades para guardar su nueva inspiración de gradiente encontrada aquí.

Para cada degradado, puede guardar un archivo PNG grande para usarlo como fondo para su propio diseño gráfico.

Para usar los colores exactos y el degradado en un software o código de diseño gráfico, puede copiar el Código de color hexadecimal u obtener la versión CSS del degradado.

coolHue

degradados web-coolHue

Esta colección de degradados ya se muestra cuando abre el sitio web por primera vez. Puedes elegir entre 60 degradados coloridos. Simplemente desplácese a través de seis baldosas en cada caso en una fila de esta variedad de degradado.

Desafortunadamente, no hay forma de mostrar el gradiente de tamaño completo.

La buena adición para coolHue es la animación cuando pasas el cursor sobre los mosaicos degradados, lo que te da una impresión tangible de ello.

Los degradados web te proporcionarán su atmósfera a través de los colores. Es por eso que no tienen nombres en esta herramienta. Por lo tanto, en la esquina inferior derecha, tiene más opciones para Sketch y Photoshop.

Al pasar el cursor sobre el degradado seleccionado, aparecen dos opciones más. Puede copiar el código CSS para una fácil implementación en su código o descargar un pequeño archivo PNG.

Si desea utilizar los colores exactos, puede copiar el Código de color hexadecimal desde debajo del degradado.

Espacio de color

espacio de color

Espacio de color le ofrece la opción de elegir y aplicar un color degradado en 10 direcciones diferentes. Para aplicar un color, puede elegir en el menú de colores que aparece, el mismo que encontraría en un software de edición de imágenes. También puede pegar un código de color hexadecimal del color para obtener los colores exactos que desea usar.

El degradado se aplica en el fondo a lo largo de toda la pantalla. Esto le da una muy buena sensación del estado de ánimo de los colores y lo motiva a elegir el color que considere que mejor se adapte al tema relevante que esté buscando.

Con Espacio de color también puede copiar la URL del degradado de color elegido. Esto hace que sea muy fácil compartir las opciones de color sin tener que guardar un archivo y luego enviarlo como archivo adjunto o enviar las especificaciones de lo que es el color. Solo pueden ver lo que estabas mirando haciendo clic en el enlace que has enviado y tendrán toda la información que necesitan, los códigos hexadecimales y el código CSS.

Sin embargo, si prefiere guardar un archivo de imagen, desafortunadamente este sitio web no le da esa opción.

Generador de gradientes CSS definitivo

degradados web - Generador de gradientes CSS definitivo

Ahora llegamos a las herramientas más complejas que en este caso, como ya dice su nombre, solo se usan para la integración en su código CSS.

La interfaz se divide en cuatro partes y recuerda a un software de diseño gráfico típico. Puede ajustar o crear ajustes preestablecidos, ver este resultado en una pequeña vista previa y echar un vistazo al código CSS completo.

El generador de gradientes CSS Definitivo es parte de la extensión de navegador ColorZilla. Su herramienta degradado ofrece posibilidades ilimitadas para crear degradados web.

Puede agregar tantos colores como desee, ajustar el tono y la saturación como lo conoce de su software de diseño gráfico, invertir el degradado y establecer los colores, la opacidad y la ubicación del degradado.

Aparte de eso, puede guardar su propio degradado creado en los ajustes preestablecidos, solo hay una forma de exportarlo con el código CSS o SASS.

Pero antes de esto, puede establecer el tamaño del degradado, cambiar la orientación a diferentes direcciones y elegir el formato de color de entre cinco opciones dadas.

¿Problemas a decidir?

uiGradients WebGradients coolHue Gradientify Gradients.io CSS Gradient Generator
Full-screen view + + +
Switch in full-screen view +
List view + + + + + +
Amount of gradients almost unlimited 180 60 45 24 unlimited
Sort gradients by colour
Named gradients + + + +
Rotate gradient (change orientation) + +
Change colour opacity +
Change colour location +
More than two colours + +
Change hue/saturation +
Reverse colours + +
Adding new gradient + +
Import image +
Import CSS code + +
Change export size +
Hex Color Code + + + + +
CSS code + + + + +
Chose colour format (CSS) +
JPEG file 1920 × 1080
PNG file 2400 × 2000 500 × 500

La mejor herramienta de degradados web siempre depende de su proyecto, el tiempo que tenga y el nivel de individualidad u otros requisitos de calidad.

La tabla anterior puede ayudarlo a decidir qué herramienta debe usar mejor para el resultado que desea obtener.

¿Recuerdas lo más importante?

No use demasiados colores-la mejor práctica de hoy en día es usar solo dos colores que tampoco sean demasiado diferentes.

Lo que también debe prestar atención es el diseño general de su gradiente, la forma en que lo aplica a su proyecto más adelante y cómo se adapta a su entorno.

uiGradients ofrece todas las características visuales importantes que se pueden ver en la mesa. Esta herramienta te hace imaginar el gradiente de tu proyecto de la mejor manera posible.

Si desea profundizar en la adaptación del degradado para un proyecto web de alta calidad, puede combinar uiGradients con el Generador de degradados CSS Definitivo importando el código CSS o la imagen descargada.

Ahora estás listo para hacerlo por tu cuenta. Si decides trabajar con Degradados, háznoslo saber en Twitter.

DISEÑO WEB PROFESIONAL

Aprender más acerca de nuestra firma en el curso.Elija el mejor horario para estudiar en LÍNEA o en la escuela.

la VISTA de CURSO

Deja una respuesta

Tu dirección de correo electrónico no será publicada.