Patrones de Diseño en Interfaces de Usuario para Viajes Solitarios

Contenido del curso

Conceptos básicos de prototipado

Ténicas para estructurar información

Prototipado de Baja Fidelidad

7
Prototipos rápidos para portales de viajes con herramientas colaborativas
12:39 min

Sistemas de Diseño

Prototipado de Mediana Fidelidad

Librerías Compartidas de Componentes

Prototipado de Alta Fidelidad

Entregables de Diseño

Cierre

21
Diseño Profesional de Prototipos: Del Problema a la Solución
02:27 min

Contenido Bonus

Mentoría expert

25
Diseño Estratégico: Innovación y Transformación Empresarial
44:47 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:07

Patrones de Diseño en Interfaces de Usuario para Viajes Solitarios

Curso de Diseño de Prototipos Móviles

Clase 4 de 25

Clase 4 / 25

Recursos

¿Por qué no es necesario reinventar la rueda en diseño?

En el mundo del diseño, a menudo nos encontramos con desafíos que ya han sido resueltos. La clave para avanzar rápidamente y de manera eficiente es no intentar inventar lo que ya ha sido creado. Esta técnica, conocida como la utilización de patrones de diseño, nos permite tomar soluciones ya probadas para problemas comunes, ahorrando tiempo y esfuerzo. Pero, ¿qué es exactamente un patrón de diseño?

¿Qué es un patrón de diseño?

Un patrón de diseño es una solución reconocida para un problema recurrente en el diseño de interfaces. Estos patrones han sido creados a partir de la experiencia y relación con los usuarios. Al usar estos patrones, aprovechamos el conocimiento existente sobre cómo los usuarios interactúan con interfaces específicas.

Por ejemplo, las listas de elementos son un patrón común que ha demostrado ser eficaz en la organización de información y mejora la comprensión y navegación del usuario. Solo necesitas añadir detalles como una flecha para indicar que hay más información sobre un elemento.

¿Cómo ayuda un patrón de diseño a los usuarios?

Los usuarios están familiarizados con ciertos tipos de interacciones, lo que les aporta comodidad y facilidad al utilizar aplicaciones.

Usar listas con flechas indica que hay más información disponible, mientras que agregar imágenes puede reforzar visualmente las diferencias entre elementos, como en una lista de usuarios.

¿Cuál es la ventaja de usar patrones de diseño en tu proyecto?

Aprovechar patrones de diseño conocidos no solo acelera el proceso de diseño, sino que también mejora la experiencia del usuario. Al no necesitar aprender nuevas formas de interacción, los usuarios pueden navegar por una aplicación de manera más intuitiva y eficiente. Además, el diseño puede centrarse en innovar en áreas que realmente requieren un enfoque único, en lugar de reinventar interacciones básicas y ya establecidas.

¿Por qué visitar plataformas similares a tu proyecto?

Examinar cómo resuelven problemas plataformas similares te brinda una perspectiva sobre los patrones que ya están siendo aceptados por los usuarios. Si estás diseñando un portal de viajes, como en el ejemplo del curso, sería útil revisar sitios como Booking.com o Despegar.com para ver cómo gestionan aspectos como perfiles de usuario o listas de destinos.

¿Qué recursos están disponibles para estudiar patrones de diseño?

En la web existen numerosos recursos que categorizan y ejemplifican patrones de diseño útiles para cualquier tipo de aplicación. Estos recursos permiten tener a disposición una variedad de soluciones a problemas conocidos, como crear pantallas de perfil, implementar filtros, o mostrar progresos. Tomar tiempo para estudiar estas soluciones puede ser invaluable para cualquier diseñador.

En resumen, mejor que intentar ser totalmente innovador en áreas ya exploradas, es más eficiente adaptarse a los patrones preexistentes, liberando tiempo y recursos para concentrarse en las partes únicas y verdaderamente innovadoras de un proyecto. No reinventar la rueda puede, en muchos casos, ser clave para la eficiencia y efectividad en el diseño.

Platzi Team

Hace 2 años

Importancia de los Patrones de Diseño en la Creación de Interfaces

No Reinventar la Rueda

En el diseño de interfaces, no es necesario reinventar la rueda. En lugar de eso, se recomienda hacer uso de patrones de diseño ya establecidos.

¿Qué es un Patrón de Diseño?

Un patrón de diseño es una solución probada y documentada a un problema recurrente en el diseño de interfaces. Estos patrones se basan en modelos mentales que los usuarios ya comprenden y con los que están familiarizados.

Beneficios del Uso de Patrones de Diseño

Facilitan la Comprensión del Usuario:
- Los patrones de diseño aprovechan el conocimiento previo de los usuarios. Por ejemplo, los usuarios ya saben que si ven un elemento ">", pueden hacer clic o "tap" para ver más detalles.
Aceleran el Proceso de Diseño:
- Al utilizar soluciones predefinidas, los diseñadores pueden ahorrar tiempo y esfuerzo, enfocándose en aspectos más innovadores y específicos de la aplicación.
Mejoran la Consistencia:
- Los patrones de diseño ayudan a mantener la consistencia en la interfaz, lo que mejora la experiencia del usuario y facilita la navegación.

Ejemplos de Patrones de Diseño Comunes

Listas con Indicadores de Expansión:
- Las listas acompañadas de elementos como ">" indican que se puede interactuar con ellas para ver más detalles.
Botones de Acción Flotante:
- Botones que permanecen visibles en la interfaz y permiten acciones rápidas y esenciales.
Barra de Navegación:
- Una barra situada en la parte superior o inferior de la pantalla para acceder rápidamente a las secciones principales de la aplicación.

Recursos para Patrones de Diseño

Pttrns.com:
- Un excelente recurso donde se pueden encontrar cientos de patrones de diseño para diferentes tipos de interfaces y aplicaciones.

Inspiración de la Competencia

Análisis de Aplicaciones Similares:
- Revisar aplicaciones o páginas web similares para tomar inspiración. Esto incluye observar las funcionalidades que ofrecen, los patrones de diseño que utilizan y los estilos visuales empleados.

Conclusión

El uso de patrones de diseño permite a los diseñadores crear interfaces intuitivas y eficientes, aprovechando soluciones ya conocidas y comprendidas por los usuarios. Esto no solo facilita el proceso de diseño, sino que también mejora significativamente la experiencia del usuario al interactuar con la aplicación. Al combinar estos patrones con la inspiración obtenida de aplicaciones similares, los diseñadores pueden crear productos innovadores y usables sin necesidad de reinventar soluciones para problemas ya resueltos.

Comentarios (33)33 comentarios

Mayra Guadalupe Aceves Higareda

Hace 6 años

No hay que reinventar la rueda, podemos hacer uso de los patrones de diseño.
Un patrón de diseño es una solución ya conocida a un problema ya conocido. Hay que hacer uso de los modelos mentales que ya tienen los usuarios, son cosas a las cuales ya están acostumbrados.
Por ejemplo, los usuarios ya están familiarizados con las listas. Saben que si la lista está acompañada con un elemento como ">", le pueden dar click o un "tap" para ver más detalles.
Existen cientos de patrones. Podemos encontrar algunos en
Podemos revisar aplicaciones o páginas similares (de la competencia) para tomar inspiración de las funcionalidades que tienen, los patrones de diseño que ocupan y los estilos.

Carlos Torres

Hace 5 años

Lastima que no sea gratis o a un precio accesible

Miguel Ángel Bolaños Quiñonez

@torresuranga, pero si trabajas en ello, o almenos se puede ahorrar y son $99 de por vida.

Eso si, si tu carrera va a ser basada en ello, pues si sirve bastante.

Carlos Andres Orozco Palacio

Con las acciones mas comunes con los usuarios, lo mejor es no pasarse de "Great Designer" y usar los patrones, donde podemos innovar mucho es en los flujos o user flows ahí podemos hacer mucha magia, usando los mismos patrones.

Pedro Isaac Aguilar

Totalmente de acuerdo. Hay áreas ya exploradas que no necesitan innovación porque son caminos conocidos que dan resultados de éxito... entonces, ¿Para que tomar un gran riesgo armando algo totalmente nuevo que la gente no está acostumbrada a emplear y que requiere cierta curva de aprendizaje de usabilidad?

Emmanuel García

Hace 7 años

Yo me guiare a partir de estas plataformas. Vamos ! 💪

Couchsurfing
Airbnb
Minube
Lonely Planet
Trip Woman

Súper!

Dani Landa

uxbrainy en Instagram esta muy bueno :) Hay varios diseñadores UI/UX subiendo tips y prototipos

Arles A. Pinzon Molina

Los patrones de diseño son algo súper importante. Como Misael señala, es la forma de no "re-inventar la rueda" cuando tenemos que solucionar problemas. No hacen nuestro trabajo menos creativo, sino que enfocan nuestros esfuerzos hacia las cosas que sí requieren creatividad.

La página de Pttrns.com puede servir muchísimo para adaptar patrones de diseño a nuestras aplicaciones.

Eliseo Ávila

Nasser Emil Issa Tavares

NO TE PREOCUPES CON COPIAR PATRONES DE DISEÑO DE PAGINAS SIMILARES. Reamente reinventar la rueda no es útil porque estarías desaprovechando el modelo mental que tienen los usuarios respecto a cómo funcionan las cosas. Pttrns es una pagina que te ayuda a buscar patrones de diseño comunes.

Yakko Miguel Olivo Nájera

Se viene lo bueno, Patrones de diseño, un tema que sirve demasiado, aprovechen este tipo de clases

Gracias!

Carlos Espinoza

Hace 3 años

Flowmapp Land-book Screenlane

Son algunas paginas que uso para inspirarme, por supuesto, la comunidad de figma.

Daniel Carmona

Estan super bien los patrones de diseño!

Cuauhtémoc Moctezuma Zúñiga

En esta página podrán encontrar screenshots de muchas aplicaciones que ya existen en el mercado. Muy buena para aprender sus patrones según al user que va enfocada nuestra app.

https://mobbin.design/

Muchas gracias!

Dato súper importante: Página pttrns.

Jenffry José Bencomo Hernandez

No hay que reinventar la idea, podemos hacer uso de los patrones de diseño!

Florencia Agha Zadeh Dehdeh

Excelente herramienta! muchas gracias por compartirla, es lo que estaba buscando!

Maylith Ángulo Angulo

Un patrón de diseño es una solución ya conocida a un problema ya conocido.

MARIA TERESA PANIAGUA RIVERA

Hace un año

Gracias

Blackhost SAS

Hace 4 años

La pagina de Pttrns es paga?

Pedro García

https://www.pttrns.com/ es de pago, pero te dan tres días de prueba. Después estos son los precios

Marlon Brandon Paul Alvarez Can

Si, es de paga, pero, puedes tener 3 días de prueba.

Roxana Natalino

pttrns.com

Conceptos básicos de prototipado

Diseño de Prototipos: Del Boceto a la Alta Fidelidad

Prototipos: Beneficios y Estrategias en el Desarrollo de Productos

Prototipos de Baja, Media y Alta Fidelidad: Ventajas y Desventajas

Ténicas para estructurar información

Patrones de Diseño en Interfaces de Usuario para Viajes Solitarios

Metodología OUX: Diseño Digital Orientado a Objetos

Diseño de Flujos de Tarea para Portales de Viajes

Prototipado de Baja Fidelidad

Prototipos rápidos para portales de viajes con herramientas colaborativas

Sistemas de Diseño

Ventajas del Sistema de Diseño Atomic Design

Identificación de Componentes en Sistemas de Diseño Digital

Prototipado de Mediana Fidelidad

Diseño de Interfaces con Figma: Jerarquía y Componentes Básicos

Diseño Web con Grid de 12 Columnas: Creación y Optimización

Librerías Compartidas de Componentes

Diseño de Interfaces con Figma: Creación de Componentes Maestros

Creación y Gestión de Componentes en Diseño UI

Componentes Detallados y Funcionales con Responsabilidad

Estilos y Componentes en Prototipos de Alta Fidelidad

Creación de Librerías Compartidas en Diseño de Interfaces

Prototipado de Alta Fidelidad

Creación de Prototipos de Alta Fidelidad con Componentes Compartidos

Creación de Prototipos Interactivos para Pruebas de Usabilidad

Entregables de Diseño

Guía de Estilo Dinámica para Diseñadores en Figma

Exportación de Diseños en Figma a Zeplin para Desarrollo Web

Cierre

Diseño Profesional de Prototipos: Del Problema a la Solución

Contenido Bonus

Prototipado Rápido y Eficaz con Lápiz y Papel

Prototipos con Origami Studio para iOS y Android

Creación de prototipos interactivos con Flinto

Mentoría expert

Diseño Estratégico: Innovación y Transformación Empresarial

Patrones de Diseño en Interfaces de Usuario para Viajes Solitarios