Hoy es un día especial. Como sabrás no soy de subir posteos los Miércoles pero a partir de ahora voy a dedicarle un espacio a mitad de semana para este tipo de notas. ¿Que te vas a encontrar estos días? Técnicas y buenas prácticas para el diseño de experiencia de usuario.
"No, pará pará pará (Así como Fantino)... te estás haciéndo un re bardo, mejor dibujate primero lo que queres programar".
Y esas palabras me definieron el rumbo. Eso era lo que tenía que hacer y era lo que QUERÍA hacer. Ahí fue cuando me enamoré del sketching.
Y acá cuando cuento esto es dónde muchos me dicen "Pasa que vos sos bueno dibujando, Nico" Y nooo! Eso es un mito. Si queres representar una idea o queres decir algo no hace falta ser un artista gráfico o un ilustrador. Basta con tener ganas de querer comunicar algo... a menos que tengas que dibujar "La dignidad".
Nah... fuera de joda, es cuestión de animarse, probar y no tener miedo a que el dibujo no esté bien hecho. Estamos discutiendo ideas y mejoras, no técnicas en el dibujo. Es como que no quieras hablar por miedo a no usar bien el el pretérico pluscuamperfecto.
Cuando algo esta visualmente entendible, está entendible por todos y de la misma manera. Acordate de los modelos mentales de los que hablé en el post UX para programadores. Un ejemplo claro:
Bien dentro de este tipo de comunicación podemos encontrar varias instancias de dibujo.
Mockup
Es un a representación estática de un diseño en calidad media o alta. Reafirma la estructura de la información y permite evaluar el diseño visual final con colores e imágenes acabadas. Muchos suelen poner en esta instancia el texto final y otros usan el famoso "Lorem ipsum". Yo ya empiezo a definir el contenido real en el wireframe. Ambas formas son válidas, lo que no te permito es el "Lorem ipsum".
Si en este texto logré convencerte para que al menos empieces a intentar expresar tus ideas con dibujos, me quedo más que conforme. Realmente es una técnica interesante para aplicar y no requiere ser un ilustrador para hacerlo.
Ah casi me olvido...
Te dejo los links de las aplicaciones que suelen usarse para hacer wireframe digitales, mockups y prototipos. Suelen tener un período de prueba o una cantidad limitada de projectos gratuitos para empezar a hacer.
https://moqups.com/
https://www.axure.com/
https://balsamiq.com/
https://www.invisionapp.com/plans#
Si sos diseñador gráfico probablemente uses el pack adobe. Si es así dejame decirte que podes utilizar el Adobe XD (Adobe Experience Design) del Adobe Creative Cloud.
Yo uso moqups con una cuenta premium. Me gusta porque viene con componentes e íconos propios de Android y de iOS.
Espero que te haya gustado este post y no te olvides de seguirme en mis otras redes sociales para más contenido UX.
www.facebook.com/NicolasModestoUXD/ En Facebook
https://twitter.com/Soy_NM En twitter
www.linkedin.com/in/nicolas-modesto-uxd En linkedin
Una dibujo vale más que mil palabras.
Cuando empecé a estudiar ingeniería en informática y me topé con la primer materia de programación se me hacía muy dificil programar sin tener hecho un diagrama como guía. Lo mismo me pasó cuando intenté programar aplicaciones de escritorio. De hecho mi compañero de ese momento, que es un crack programando, notó que yo no estaba cazando un fulbo', entonces me paró y me dijo:"No, pará pará pará (Así como Fantino)... te estás haciéndo un re bardo, mejor dibujate primero lo que queres programar".
Y esas palabras me definieron el rumbo. Eso era lo que tenía que hacer y era lo que QUERÍA hacer. Ahí fue cuando me enamoré del sketching.
¿Más claro? Te hago un dibujo.
En el equipo de UX es la técnica que más utilizamos. Desde explicarles ideas nuevas en la interfaz a los desarrolladores hasta presentarles avances a nuestros clientes. En serio, podemos dibujar lo que sea.Y acá cuando cuento esto es dónde muchos me dicen "Pasa que vos sos bueno dibujando, Nico" Y nooo! Eso es un mito. Si queres representar una idea o queres decir algo no hace falta ser un artista gráfico o un ilustrador. Basta con tener ganas de querer comunicar algo... a menos que tengas que dibujar "La dignidad".
 |
Nah... fuera de joda, es cuestión de animarse, probar y no tener miedo a que el dibujo no esté bien hecho. Estamos discutiendo ideas y mejoras, no técnicas en el dibujo. Es como que no quieras hablar por miedo a no usar bien el el pretérico pluscuamperfecto.
Cuando algo esta visualmente entendible, está entendible por todos y de la misma manera. Acordate de los modelos mentales de los que hablé en el post UX para programadores. Un ejemplo claro:
 |
| Si les DIGO gato, el equipo puede pensar distintos tipos de gatos. |
 |
| Pero si les DIBUJO un gato, el equipo va a pensar en el gato que les dibujé y no en otro. |
Bien dentro de este tipo de comunicación podemos encontrar varias instancias de dibujo.
Sketch
Son bosquejos estático y de baja calidad. Es para tomar como guía general y reproducir una idea o concepto. No hace falta ser detallista, solo claro para que la idea se entienda. Generalmente se hace en lápiz y papel... o lapicera. |
| Ejemplo de sketching de una app para tablet hecho por mí. |
Wireframe
Es una representación estática y de baja calidad. En este tipo de dibujos se define los principales grupos de contenido, la estructura de la información, la descripción y visualización básica del usuario. Es una etapa en donde no queremos poner a prueba el diseño ni los colores pero SI QUE SE ENTIENDA el contenido. Las funcionalidades básicas como links a otras partes de la misma página se empiezan a colocar en este tipo de diseños. |
| Ejemplo de un Wireframe de la misma app que el sketch de arriba. |
Mockup
Es un a representación estática de un diseño en calidad media o alta. Reafirma la estructura de la información y permite evaluar el diseño visual final con colores e imágenes acabadas. Muchos suelen poner en esta instancia el texto final y otros usan el famoso "Lorem ipsum". Yo ya empiezo a definir el contenido real en el wireframe. Ambas formas son válidas, lo que no te permito es el "Lorem ipsum".
 |
| Mockup de una app mobile diseñado por mí. |
Prototipo
Es la representación navegable del producto final y la calidad puede variar entre media y alta. El prototipo es la simulación a la experiencia donde el usuario experimenta con la página como si estuviese en su casa, oficina o el lugar que vaya a usar este sitio o aplicación mobile. |
| Prototipo de la misma app del ejemplo anterior. PD: Ya corregí el problema de la fuente blanca sobre fondo amarillo :) |
Si en este texto logré convencerte para que al menos empieces a intentar expresar tus ideas con dibujos, me quedo más que conforme. Realmente es una técnica interesante para aplicar y no requiere ser un ilustrador para hacerlo.
Ah casi me olvido...
Te dejo los links de las aplicaciones que suelen usarse para hacer wireframe digitales, mockups y prototipos. Suelen tener un período de prueba o una cantidad limitada de projectos gratuitos para empezar a hacer.
https://moqups.com/
https://www.axure.com/
https://balsamiq.com/
https://www.invisionapp.com/plans#
Si sos diseñador gráfico probablemente uses el pack adobe. Si es así dejame decirte que podes utilizar el Adobe XD (Adobe Experience Design) del Adobe Creative Cloud.
Yo uso moqups con una cuenta premium. Me gusta porque viene con componentes e íconos propios de Android y de iOS.
Espero que te haya gustado este post y no te olvides de seguirme en mis otras redes sociales para más contenido UX.
www.facebook.com/NicolasModestoUXD/ En Facebook
https://twitter.com/Soy_NM En twitter
www.linkedin.com/in/nicolas-modesto-uxd En linkedin
Comentarios
Publicar un comentario