3.2 Diseñar para Impactar

Created time

Apr 26, 2023 07:24 PM

slug

magic

author

No te quedes solo en hacer 🧙‍♀️

Aprender a crear cosas online es una habilidad que te va a servir bocha, pero si también aprendés a influir en cómo la gente usa lo que hacés, ahí sí que la rompés. Y eso es justamente lo que podés hacer con un buen diseño.

Antes de avanzar mucho en el prototipo de tu idea, es importante que entiendas algunos principios básicos de diseño que podés aplicar para llegar a mejor puerto. Segui leyendo!

Es más que hacer que se vea bien ✨

Si te ponés a leer sobre diseño, no terminás más. No necesitás saber o aplicar todo, menos en esta etapa de desarrollo del producto.

En resumen, el diseño se trata de ayudar a la gente a sentir, entender o hacer algo.

Vamos a enfocarnos en unos pocos fundamentos que pueden mejorar la experiencia del usuario:

— El diseño UI organiza colores, texto e imágenes. “lo que el usuario ve”

— El diseño UX optimiza todas las interacciones. “lo que el usuario hace”

Qué pasa si no me preocupo por el diseño UX 👀

Muchos emprendedores (incluyendonos) hemos sido culpables de crear productos funcionales, pero no usables. Con esto queremos decir que el producto funciona, pero los usuarios no saben cómo usarlo...

Si no aplicás diseño UX, podes llegar a tener funcionalidades y contenido. Pero su valor depende completamente de lo bien que puedan ser usados y entendidos.

Cómo pensar como un diseñador UX 👩‍🎨

El diseño se trata de hacer preguntas primero y luego tomar decisiones. Para que tu diseño tenga impacto, no lo trates como algo posterior a la construccion. No es una capa de pintura.

Hacete preguntas como estas mientras construís:

¿Otras personas pueden usar esto fácilmente?

¿Estoy comunicando su valor con claridad?

¿Cómo se sentirán los usuarios después de usar esto?

Pensar como un diseñador UX es ponerse en los zapatos del usuario. Siempre. En todo momento.

Algunos buenos ejemplos de MVPs 🙌

Aunque estos famosos MVPs no eran nada “wow”, los conceptos de diseño básicos con los que los asociamos hoy en día ya estaban presentes.

✅ Ya tenía mucho espacio en blanco

✅ La barra de búsqueda era el centro de atención

✅ La función de votación era el centro de atención

✅ No estaba desordenado ni sobrecargado

Conceptos básicos de diseño 💫

Cuadrículas y alineación ⚡️

Nuestros cerebros pueden entender las cosas más rápido si estan alineadas.

Los elementos de la página generalmente se alinean y se relacionan de alguna manera: izquierda, derecha, centrado, etc. No te adhieras rígidamente a una alineación para todo en una página; andá variando un poco para generar interés.

Relacioná los bordes y el eje de los elementos con algo más cercano. De esa manera, parece que tienen una estructura, y no que flotan.

Ayudate con una cuadrícula de columnas para guiar el espaciado. Pero, no trates las cuadrículas como limites estrictos.

Para textos largos, usá alineación a la izquierda.

Jerarquía visual ⚡️

Si todo es importante, nada es importante.

La jerarquía guía visualmente a los usuarios para encontrar o hacer cosas, sin necesidad de instrucciones.

Los elementos más importantes deben ser más grandes, más llamativos o de un color diferente.

Agrupá elementos relacionados - mismo estilo visual o ubicados juntos con espacio alrededor.

Usá como mínimo 3 niveles distintos de tipografía - encabezados, subtítulos y cuerpo.

Preguntate, ¿dónde va la mirada del usuario? ¿a dónde irá después? Y así.

Consistencia y patrón ⚡️

Si todo es diferente y especial, los usuarios no van a saber dónde buscar.

Cuando hay consistencia, es más fácil detectar algo inconsistente - y prestar atención a ello.

Usá patrones de diseño conocidos de otras aplicaciones, estilos regulares para tus elementos de UI y diseños de página.

Apuntá a un 80% de consistencia / 20% de singularidad en todo lo que diseñás.

Espaciado ⚡️

A veces llamado "espacio en blanco", el espacio vacío es una herramienta de diseño muy poderosa. ¿Por qué?

- reduce el desorden, aumentando la claridad y el enfoque.

- muestra cómo se agrupan o relacionan las cosas individuales.

- crea regularidad en el diseño.

Nuestros ojos necesitan espacios para entender los límites y la separación, para navegar.

Los elementos importantes de la página se notarán más si hay espacio alrededor de ellos.

Agregá espaciado alrededor de grupos de elementos, para que sea claro que están relacionados.

Aumentá el espacio alrededor de puntos importantes para centrar la atención.

Prestá atención al espaciado entre líneas de texto. Debería ser del 130-150% del tamaño de la fuente para que sea cómodo de leer.

Accesibilidad ⚡️

Asegurate de que tu texto tenga un contraste fuerte con el fondo.

No te confíes en el color para transmitir información. Usalo sólo para resaltar.

Los usuarios no deberían tener que hacer “hover” para encontrar algo importante en tu diseño.

Los links y los botones deben tener un texto que describa el destino o la acción (no alcanza con poner "Haga clic aquí").

Los campos de formulario deben tener bordes fuertes y etiquetas arriba/al lado de ellos, no adentro.

Cada pequeña cosa que puedas hacer ayuda a alguien (y a Google le gusta cuando lo hacés).

Mobile ⚡️

Acostumbrate a crear un modelo de diseño del tamaño de un celular además del de escritorio.

Verificá los tamaños de fuente en móviles. El texto demasiado pequeño es uno de los errores más comunes en móviles.

Asegurate de que los botones sean lo suficientemente grandes para hacer click fácilmente.

Poné los títulos de las páginas encima de la imagen principal en móviles, no al revés..

Glosario de Diseño 📚

Estos son algunos términos típicos que vas a encontrar cuando trabajás con diseño...

Diseño centrado en el usuario 👉 Considerar al usuario en cada etapa del proceso de diseño.

Cuadrícula 👉 Un conjunto de pautas para ayudar con el diseño - generalmente solo columnas a través del ancho de una página.

Alineación 👉 El principio de alinear texto o elementos en una página.

Espacio en blanco 👉 También conocido como espacio vacío, es el espacio que se deja entre y alrededor de los elementos de diseño.

Asequibilidad 👉 Las propiedades de un elemento que hacen posible una acción del usuario.

Espaciado de línea 👉 El espacio y la distancia entre líneas de texto.

Tipografía 👉 El arte de hacer que el texto sea legible, fácil de leer y atractivo.

UI y UX 👉 UI son principalmente los elementos visuales, UX es la calidad de la experiencia. Sí, se superponen.

Usabilidad 👉 Optimizar un diseño para permitir que los usuarios hagan lo que necesitan de manera efectiva y eficiente.

Wireframe 👉 Una guía rápida creada para representar la estructura esqueleto de un diseño previsto, enfocado en la posición y volumen del contenido, no en los estilos reales.

Baja fidelidad 👉 Un nivel de diseño que es muy bajo en detalles y estilos, típicamente en la etapa de planificación..

🆘

El diseño no es lo tuyo? Agendá una call y te ayudamos!