¿CUÁNTO DISEÑO ES MUCHO DISEÑO?.

Consejos (no reglas) para crear webs hermosas y funcionales:

Un producto funcional tiene diseño funcional.

En términos estéticos, lo que hace a un buen diseño web. No es tener íconos personalizdos, ilustraciones, animaciones e interacciones en cada sección del sitio o producto. Aunque esto pueda ayudar.

Sino seguir o trasgredir los principios del diseño. Ser accesible y funcional.

Tener bien claro el tono de voz y propósito del producto o servicio. Así como el público objetivo.

El mensaje y concepto deben ser comunicados eficientemente. Los elementos del diseño deben ser creados/curados con especial atención.

No sobrepienses. Así como no deberíamos comenzar a escribir código sin haber resuelto o siquiera analizado el problema. No debes empezar a diseñar sin haber investigado.

¿Qué hace a un sitio web bueno?

Algunos de los principios del diseño aplicados a web:

Contraste

El contraste se define como la relación y diferencia entre los puntos más claros y más oscuros de una imagen. Manejado correctamente, es una manera sencilla de generar interés.

Puedes considerar el contraste entre los elementos, colores, formas y conceptos de un diseño. Además del color.

Es importante el contraste entre los elementos y el texto. Para asegurar la accesibilidad y legibilidad.

Te dejo una herramienta para revisar el contraste: WebAIM

El tamaño importa

Tranquil@, hablo del texto.

Énfasis

Parecido al contraste. Hacer énfasis en los elementos importantes de tu sitio web te puede ayudar a guiar al usuario a través del contenido.

Un "call to action" o "llamado a la acción" se representa normalmente por una frase corta, link o botón. "Reserva", "Compra Ahora", "Revisa mi Portafolio", "Subsríbete Aquí" u otra acción que deseamos que el usuario tenga.

Podemos hacerle énfasis a una sección completa, a una parte del texto o a cualquier elemento para darle importancia.

El color no importa

Con esto no digo que la paleta full dark mode, hex#000000 y hex#ffffff, mata retinas-3000 te vaya a servir para todos tus proyectos.

Te recomiendo pensar en valores antes de color. Toma una paleta de color que ya tengas y conviértela en escala de grises. ¿Si hay suficiente contraste entre cada color?.

También puedes comenzar con tonalidades de gris e ir agregando matiz y saturación para crear tu paleta.

te dejo una herramienta para probar tu paleta de colores en un sitio web en vivo: Realtime Colors


Epílogo

Reid Hoffman, co-fundador de LinkedIn dijo que "Si no te avergüenza la primera versión de tu producto, lanzaste muy tarde".

Tenemos que permitirnos ser principiantes. Cometer errores. Ser feos. Tener código de spaghetti. Aprender desde cero y reaprender humildemente.

Estoy muy emocionado por compartir este ensayo. Como principiante en desarrollo web.

Espero que te haya divertido. 🎉

Hecho con 💜 por Gonzz