Diseño - freeCodeCamp.org

¿Qué es Glassmorphism? Crea este nuevo efecto de diseño utilizando solamente HTML y CSS

GM Fuster — Tue, 01 Jun 2021 13:00:00 +0000

El Glassmorphism es una nueva tendencia muy popular en la actualidad. La verás mucho en sitios web como Dribbble, e incluso compañías grandes como Apple y Microsoft la usan.

Deja que te muestre esta nueva tendencia del glassmorphism. Después de la tendencia neumorphism del año pasado, que tenía un estilo controvertido con poca accesibilidad, esta tendencia parece mucho más prometedora.

¿Qué es glassmorphism?

Básicamente, el concepto principal de esta tendencia es un fondo semitransparente, con una sombra y borde sublimes.

Pero también se añade un difuminado al fondo para que lo que queda detrás del fondo se “transforme” elegantemente dentro del mismo elemento. ¿Tiene sentido?

Aquí va un ejemplo:

Este es un ejemplo real de glassmorphism en acción, que también puedes ver en el sitio web ui.glass (es una librería futura de CSS UI).

El efecto difuminado que he mencionado antes es lo que se ve detrás del código a la derecha de la imagen superior. ¿Ves cómo se transforma en fondo pero al mismo tiempo se mantiene legible y agradable a la vista?

Ese es el efecto que quiero enseñarte a crear en este tutorial. Veremos como aplicarlo usando solamente HTML y CSS.

Primeros pasos

Todo lo que necesitas para este tutorial es un navegador y un editor de código, porque solamente vamos a usar HTML y CSS.

El elemento final que vamos a construir será como esto:

Ejemplo de Glassmorphism

Primero lo primero, vamos a crear un fichero básico de HTML con el siguiente código:




  
  
  
  Glassmorphism Effect

No me gusta mucho la fuente de letra por defecto, así que vamos a usar algo más bonito de Google Fonts. Me gusta mucho la fuente Inter, así que vamos a incluirla en nuestro proyecto dentro de la etiqueta head :

Google Fonts

Ahora, vamos a añadir algunos estilos básicos a nuestra etiqueta body y también vamos a crear un fondo usando colores vivos y gradientes:

body {
  padding: 4.5rem;
  margin: 0;
  background: #edc0bf;
  background: linear-gradient(90deg, #edc0bf 0,#c4caef 58%);
  font-family: 'Inter', sans-serif;
}

¡Perfecto! Ahora que tenemos el código y estilos básicos, vamos a crear un elemento tarjeta (card) dentro de la etiqueta body :


    Glassmorphism is awesome
    A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.
    Read more

El contenido dentro de la tarjeta (card) no importa – Puedes añadir botones extra, iconos, y otros elementos.

Antes de aplicar el efecto glassmorphism a la tarjeta, vamos a aplicar algunos espacios y estilos a la tipografía añadiendo el siguiente CSS:

.card {
  width: 400px;
  height: auto;
  padding: 2rem;
  border-radius: 1rem;
}

.card-title {
  margin-top: 0;
  margin-bottom: .5rem;
  font-size: 1.2rem;
}

p, a {
  font-size: 1rem;
}

a {
  color: #4d4ae8;
  text-decoration: none;
}

¡Excelente trabajo! Lo siguiente es enseñarte como aplicar el efecto especial.

Como aplicar el efecto glassmorphism usando CSS

Todo lo que necesitas hacer es aplicar un color de fondo semitransparente y aplicar un difuminado usando la propiedad backdrop-filter . Añade los siguientes estilos al elemento .card usando CSS:

.card {
	/* other styles */
	background: rgba(255, 255, 255, .7);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

Glassmorphism using CSS

Ahora ya hemos aplicado con éxito el estilo glassmorphism a la tarjeta (card) – ¿Pero dónde está el efecto?

Todavía necesitamos algo detrás de la tarjeta, como una forma o una imagen, para poder verlo en acción.

Ejemplo sin la forma

Añadamos una forma utilizando un elemento img justo detrás del comienzo de la etiqueta body :

Y apliquemos el siguiente estilo CSS al elemento .shape para posicionarlo en la página correctamente:

.shape {
  position: absolute;
  width: 150px;
  top: .5rem;
  left: .5rem;
}

Ahora deberías ver el efecto completo de la nueva tendencia de diseño glassmorphism. ¡Enhorabuena!

Ejemplo de Glassmorphism

Puedes ver esto en codepen para tomar el código y estilos de esta guía directamente.

Compatibilidad con navegadores

Una de las mayores desventajas del glassmorphism es que la propiedad backdrop-filter no es compatible con Internet Explorer 11, y por defecto está desactivada en Firefox.

Browser support for backdrop-filter

De todos modos, de acuerdo al sitio web caniuse.com , más del 88.2% de los navegadores en el mundo son compatibles con este estilo. Si Firefox decide activar esta propiedad por defecto, y a medida que el uso de navegadores más antiguos (como IE 11) disminuya, creo que en los próximos años glassmorphism será utilizado a una escala mucho mayor .

Hasta entonces, puedes usarlo en tus proyectos personales, o simplemente pasarlo bien creando páginas con esta estupenda tendencia de diseño.

Conclusión

Espero que este tutorial te haya ayudado a aprender más sobre esta nueva tendencia.

Si quieres explorar más, me gustaría mostrarte un proyecto en el que he estado trabajando con un amigo.

Se llama Glassmorphism UI, y será una librería CSS UI gratis y open source basada en esta nueva tendencia. Apúntate con tu correo electrónico para recibir actualizaciones sobre su progreso y ser uno de los primeros en saber cuando se lanza.

La librería estará disponible vía NPM, pero también en GitHub con licencia MIT.

Traducido del artículo de Zoltán Szőgyényi - What is Glassmorphism? Create This New Design Effect Using Only HTML and CSS

¿Qué es Diseño Digital y por qué es Importante? Trabajos de Diseñador UX + UI + Web Explicados

Israel Palma — Thu, 28 Jan 2021 13:00:00 +0000

He construido y diseñado aplicaciones y sitios web y también ayudado a escalar productos en compañías pequeñas y grandes, sea desde el tamaño de mis propios emprendimientos (startups) hasta compañías de la talla de Google.

He aprendido sobre las mejores prácticas de diseño digital a través de una mezcla prueba y error, ciclos de desarrollo, lanzamientos exitosos, productos fallidos, retroalimentación de los usuarios y las inevitables iteraciones que han seguido a estos eventos.

Aquí quiero transmitir y compartir lo que he aprendido.

Mis experiencias podrían permitirte mejorar tu comprensión de cómo funciona el diseño digital y el rol del diseñador en la conceptualización de productos.

Por medio de estas lecciones serás capaz de introducir productos al mercado en una manera más rápida y eficiente, y brindar un mejor servicio a tus usuarios.

¿Qué es Diseño Digital y por qué es Importante?

La definición formal de diseño de productos digitales es; un método de diseño iterativo, empleado de manera formal para la resolución de un problema práctico. Lo cual suena complicado, ¿Verdad?

No tiene por qué serlo.

Expresado en un lenguaje más sencillo, podemos decir que el diseñador de productos digitales descubre un problema existente, propone la mejor solución posible utilizando una mezcla de tecnologías y lo introduce al mercado.

El diseño digital es considerado un subconjunto del diseño de productos, pues trata completamente acerca de la creación de los mismos, solo que a través del uso de software.

Las habilidades que estás aprendiendo y desarrollando en freeCodeCamp te ayudarán a pensar estratégica y tecnológicamente para la resolución de problemas. Lo cual está ampliamente relacionado con la práctica del diseño digital.

Para modo de implementar diseños digitales necesitarás identificar oportunidades y conocer los deseos de tus usuarios, consumidores o clientes.

El Diseño Digital y el Mundo Real.

El diseño digital se centra en los usuarios.

La obsesión con el usuario, comienza literalmente con el usuario, y se lleva a cabo en reversa.

Si eres nuevo en el diseño digital hay algunos pasos tácticos que puedes tomar para aprender lo que los usuarios valoran y cómo puedes aprovechar una mezcla de UI, UX y la mentalidad de diseñador para resolver problemas tangibles.

¿Qué Problema estás Resolviendo?

En primer lugar, trabaja arduamente en ganar y conservar la confianza del usuario, entendiendo que problema deben solucionar tu producto y diseño. Responde las siguientes preguntas: ¿Por qué existe este producto? ¿Cómo será utilizado?

El diseño digital bien elaborado puede tener un profundo impacto en los usuarios.

Crear experiencias de usuario intuitivas y simples puede ayudarlos a entender mejor cómo funciona tu producto.

Un amigo mío trabajo en el desarrollo de la experiencia de lectura del iPad. Una historia que él comparte conmigo, es como los diseñadores digitales hicieron que "pasar la página" en los libros digitales sea una experiencia que no requiere esfuerzo.

La acción de deslizar la página con el dedo, como se hace en un libro real de papel, evidencia cómo el trabajo de diseño, UX y UI pueden crear experiencias de usuario realmente exquisitas.

La próxima vez que pases la página en tu iPad, piensa en porque la experiencia se siente simple y natural. El diseño digital bien llevado a cabo, es mágico.

Innova y Simplifica

En segundo lugar, los diseñadores digitales buscan y requieren de la innovación , la invención y siempre encontrar formas de simplificar.

Así como es necesario enfocarte en tus clientes o usuarios, necesitas estar consciente de tu entorno, buscar nuevas ideas en todas partes, y no debes limitarte a la mentalidad de "no se inventó aquí".

Al diseñar sitios web, por ejemplo, es importante hacer algunas cosas realmente bien. Aprendí esto al construir y optimizar mi más reciente creación, Work From Home Adviser, que ayuda a las personas a trabajar desde casa de forma remota.

Uno de mis mentores me aconsejó:

“Conoce qué es lo que sabes hacer bien y como lo puedes hacer mejor. Si diseñas tu website, sabes que el tiempo es valioso y cada segundo adicional que tus usuarios pasen en tu página, mejor. Un fuerte diseño puede rasurar la latencia excesiva de las páginas de tu sitio y aumentar la eficiencia del entorno del servidor y eso es algo por lo que vale la pena trabajar.”

Fíjate que este consejo es específico (ej. diseña buscando velocidad) pero también es de criterio amplio (mejora la experiencia de tus usuarios en la mejor forma posible).

Cuando pienses en diseño digital, toma tiempo para entender profundamente que palancas puedes jalar y como estas resultarán en mejores experiencias y resultados para tus usuarios.

La Experimentación es Clave

En tercer lugar, experimenta.

El diseño digital a diferencia del diseño de cosas físicas, puede ser mejorado rápidamente a través de sprints y despliegues del código. El software es ajustable.

Al empezar por tus usuarios y trabajar hacia atrás buscando simplificar e iterando constantemente, puedes asegurar que tu diseño eventualmente logre satisfacer tus expectativas. Si no has llegado a ese punto continúa intentándolo.

A continuación un experimento mental que me gusta hacer con mis amigos:

Piensa en la última vez que compraste un boleto de avión en línea. ¿Cuántos pasos tomó navegar desde la página de destino hasta la confirmación de la página de pago?

¿Por qué crees que las aerolíneas hacen que los usuarios pasen por este proceso de pago? ¿Cómo podrías mejorar y simplificar el proceso?

Una grandiosa forma de mejorar tus habilidades de diseño digital es practicar en la página de otro diseñador. Y ver si la puedes mejorar.

Los diseñadores ven ser grandiosos como un punto de inicio, no el final. Mediante la iteración y experimentación, un diseñador digital puede tomar cosas que funcionan bien (o mal) y mejorarlas en maneras novedosas y sorprendentes.

Si eres nuevo en el ámbito del diseño digital, lo anterior debería emocionarte.

Ejemplos de Diseño Digital Bien Hecho y Como Ayuda a los Usuarios.

Quiero concluir con ejemplos de diseño digital bien realizado. Les proveo de ejemplos e imágenes, y les explico por qué el diseño es intuitivo, simple y relevante.

Si quieres desarrollar tus habilidades en este campo, invierte el tiempo no solo en pensar cómo puedes mejorar los sitios de otras personas y por qué. Si no también aprende de los líderes de la industria.

Ejemplo #1

Elemental Labs brinda un gráfico increíblemente intuitivo para ayudar a sus usuarios a entender la diferencia entre su producto y el producto de un competidor. Sin leer nada más, puedes intuitivamente entender que su producto es mercadeado como más claro, puro y simple.

El contraste entre colores ayuda al ojo a entender visualmente el mensaje y es un ejemplo de un gran diseño digital.

También, observa como los gramos (una unidad de medida común) es reemplazada con miligramos. Esto hace que el usuario sienta que el producto de la competencia contiene más azúcar (29,000 miligramos de azúcar se siente como mucho).

Ejemplo #2

Woven es un divertido calendario que facilita las encuestas de grupo. He utilizado una variedad de herramientas de software para coordinar grupos y siempre es algo complicado.

Observa cuán limpios son el infográfico y la llamada a la acción. Sin pensar mucho acerca del producto puedes entender claramente cómo funciona y por qué te beneficiará: simplemente encuesta a las personas y elige qué fecha es mejor para el grupo.

Me encantan los productos que combinan diseño atractivo, UX, UI y son increíblemente fáciles de navegar.

Ejemplo #3

Para quienes quieren un ejemplo de diseño del mundo real, un favorito muy particular es LFA Machines.

Su grupo de productos es complicado, ofrecen ambos; máquinas semiautomáticas y automáticas para embotellar o empacar cápsulas. Para mucha gente esta tecnología es abstracta, pues no han visto este tipo de máquinas en persona.

Así que ¿Qué es lo que hace el sitio? Ofrece un video que se reproduce automáticamente cuando visitas el sitio para que puedas ver como funciona el dispositivo y los beneficios que brinda. Este diseño digital reúne simplicidad, claridad y una obsesión por la satisfacción del cliente. Todo en uno.

Ejemplo #4

Aquí un ejemplo final.

Si quieres iniciar un podcast podrías experimentar con diferentes tipos de software para podcast. Una opción que combina simplicidad, facilidad de uso y un estándar de diseño genial es Buzz Sprout.

Cuando un usuario visita su sitio por primera vez es invitado mediante atractivos tutoriales, guías y consejos a aprender acerca de cómo crear un podcast.

Estos radio-botones lo dicen todo: hacen el proceso de selección muy amigable y aceleran el proceso de creación de podcasts. En solo un botón el diseño reúne una fuerte estética y gran facilidad de uso.

Traducido del artículo de Adam Naor - What is Digital Design and Why Does It Matter? UX + UI + Web Designer Jobs Explained

15 Portafolios de Desarrolladores Web para inspirarte

Arturo Maltos — Tue, 01 Dec 2020 13:00:00 +0000

Una de las cosas más difíciles de hacer para un nuevo desarrollador es armar un portafolio en línea.

¿Qué debo decir?
¿Qué debería incluir?
¿Qué debo dejar de lado?

Pero no tiene por qué ser así.

Si estás atascado, echa un vistazo a estas 15 muestras de portafolios de desarrolladores web para inspirarte. (Y si quieres más orientación para construir tu portafolio, mira aquí).