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 pttrns.com
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.
Conceptos básicos de prototipado
Qué aprenderás sobre diseño de prototipos móviles
Beneficios del Prototipado
Niveles de Fidelidad del Prototipado
Ténicas para estructurar información
Introducción a Patrones de Diseño
Introducción a UX Orientado a Objetos
Definición de Flujos de Tareas
Prototipado de Baja Fidelidad
Bocetado Rápido
Sistemas de Diseño
Principios de Atomic Design
Ventajas de Atomic Design
Prototipado de Mediana Fidelidad
Bocetado en Figma
Diseño de Wireframes (Mediana Fidelidad)
Librerías Compartidas de Componentes
Introducción a Componentes
Creación de Componentes
Detallado de Componentes
Estilos de Componentes
Librerías de Componentes Compartidas
Prototipado de Alta Fidelidad
Diseño de Mockups de Alta Fidelidad en Figma
Construcción de Prototipo Interactivo en Figma
Entregables de Diseño
Mejores prácticas de Entregables para Desarrollo usando Overflow y Zeplin
Exportación de Assets a Zeplin
Cierre
Cierre
Contenido Bonus
Tips básicos para prototipar una idea
Cómo hacer prototipos funcionales de Apps iOS o Android
Crea un prototipo interactivo de tu aplicación
Mentoría expert
Los 10 pecados del Product Designer
Create an account or log in
Keep learning for free! Join and start boosting your career
Resources
Why isn't it necessary to reinvent the wheel in design?
In the design world, we often encounter challenges that have already been solved. The key to moving forward quickly and efficiently is not to try to invent what has already been created. This technique, known as using design patterns, allows us to take proven solutions to common problems, saving time and effort. But what exactly is a design pattern?
What is a design pattern?
A design pattern is a recognized solution to a recurring problem in interface design. These patterns have been created based on the experience and relationship with users. By using these patterns, we leverage existing knowledge about how users interact with specific interfaces.
- For example, lists of items are a common pattern that has proven to be effective in organizing information and improving user comprehension and navigation. You only need to add details such as an arrow to indicate that there is more information about an element.
How does a design pattern help users?
Users are familiar with certain types of interactions, which brings them comfort and ease when using applications.
- Using lists with arrows indicates that more information is available, while adding images can visually reinforce the differences between elements, as in a list of users.
What is the advantage of using design patterns in your project?
Leveraging familiar design patterns not only speeds up the design process, but also improves the user experience. By not needing to learn new ways of interaction, users can navigate an application more intuitively and efficiently. In addition, design can focus on innovating in areas that truly require a unique approach, rather than reinventing basic, established interactions.
Why visit platforms similar to your project?
Examining how similar platforms solve problems gives you insight into patterns that are already being accepted by users. If you are designing a travel portal, as in the course example, it would be useful to review sites such as Booking.com or Despegar.com to see how they handle aspects such as user profiles or destination listings.
What resources are available for studying design patterns?
There are numerous resources on the web that categorize and exemplify design patterns useful for any type of application. These resources make available a variety of solutions to familiar problems, such as creating profile screens, implementing filters, or displaying progress. Taking the time to study these solutions can be invaluable to any designer.
In short, rather than trying to be totally innovative in areas already explored, it is more efficient to adapt to pre-existing patterns, freeing up time and resources to concentrate on the unique and truly innovative parts of a project. Not reinventing the wheel can, in many cases, be key to design efficiency and effectiveness.
Contributions 31
Questions 1
Sort by:
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.
Yo me guiare a partir de estas plataformas. Vamos ! 💪
- Couchsurfing
- Airbnb
- Minube
- Lonely Planet
- Trip Woman
uxbrainy en Instagram esta muy bueno 😃 Hay varios diseñadores UI/UX subiendo tips y prototipos
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.
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.
Se viene lo bueno, Patrones de diseño, un tema que sirve demasiado, aprovechen este tipo de clases
Flowmapp
Land-book
Screenlane
Son algunas paginas que uso para inspirarme, por supuesto, la comunidad de figma.
### 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
1. **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.
2. **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.
3. **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.
Estan super bien los patrones de diseño!
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.
Dato súper importante: Página pttrns.
No hay que reinventar la idea, podemos hacer uso de los patrones de diseño!
Excelente herramienta! muchas gracias por compartirla, es lo que estaba buscando!
Un patrón de diseño es una solución ya conocida a un problema ya conocido.
pttrns.com
Me ha parecido súper útil esta herramienta, muchas gracias! no la conocía!
Siempre es mucho más sencillo diseñar interfaces y experiencias cuando ya conocemos perfectamente las leyes de UI/UX.
Hay muchos sitios y lugares donde encontrar ideas bien estructuradas y con un buen diseño UI, solo queda dejar volar la imaginación y crear cosas maravillosas usando estructuras funcionales.
Hoy en día hay muchas herramientas para inspirarse.
En estas páginas pueden encontrar más inspiración:
https://www.niceverynice.com/components
https://nicelydone.club/patterns/
Curso de patrones de diseño:
https://platzi.com/cursos/patrones-componentes-diseno/
Curso de patrones malvados de diseño
https://platzi.com/cursos/darkpatterns-ux/
Que valiosa información lo de la pagina web.
Total, hay que inspirarse y en base en eso crear, pero siempre teniendo en cuenta el lema**_ falla rápido, falla barato_**
No vas a inventar el agua caliente. Las soluciones abundan en internet. para eso están los patrones de diseño.
Los usuarios visualmente están acostumbrados a ciertos patrones, de listas o elementos. Constituyen un lenguaje universal (como las estrellas para asignar niveles de calidad)
En conclusión, no es útil reinventar la rueda, relájate y busca soluciones (:
¿Qué diferencia hay con el benchmarking?
mujeres que viajan solas…
mi proximo tattoo
Tambien a complemento de la pagina pttrns existen dos mas super útiles
Want to see more contributions, questions and answers from the community?