Bootcamp UX - Contenido

Explore

Diseño de interfaces

Elementos de una interfaz

Patrones de diseño

Recordarás de las heuristicas de Nielsen sobre la usabilidad que hay que evitar hacerle las cosas difíciles al usuario, el evitar que el usuario deba de alguna manera pasar mucho tiempo descubriendo como usar algúna funcionalidad, o recordando datos que le pedimos, o navegando infinitamente hasta llegar al cotenido que desea.

Pues muchas de estas tareas ya se han simplificado en las interfaces con el tiempo y se han adoptado como patrones de interfaces a seguir, porque son ampliamente usado en diferentes industrias y asi evitamos que el usuario deba decifrar cada interfaz que se presente en internet.

Imaginate como sería la vida de un usuario si todas las interfaces que diseñaramos se vieran radicalmente diferentes entre si, que el término botón no signifique nada para ellos porque no lo han visto repetitivamente en las apps, o que la barra de navegación no parezca ni se use de manera similar en ningúna parte. Sería un dolor de estómago.

Para evitar que lleguemos a enloquecer como usuarios, es que existen estos patrones de interfaces bien definidos.

⁠

Loading…⁠

⁠

Elementos

Te compartimos una lista de los patrones de diseño más comunmente usados en la industria. Si quieres conocer que otros existen puedes revisar este

repositorio de patrones de diseño.⁠

⁠

También puedes darte un clavado a la libreria de componentes de (

Bootstrap⁠

Matrial design⁠

) desarrolladores para conocer los diferentes componentes que existen y ya están estadarizados del lado de desarrollo.

Listas

⁠

https://www.justinmind.com/blog/list-ui-design/⁠

⁠

Cards

⁠

https://uxdesign.cc/its-all-in-the-cards-ux-ui-card-design-44cf9e31d988⁠

⁠

https://www.smashingmagazine.com/2016/10/designing-card-based-user-interfaces/⁠

⁠

https://www.nngroup.com/articles/cards-component/⁠

Botones

⁠

https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112⁠

⁠

https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7⁠

⁠

https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4⁠

⁠

https://www.justinmind.com/blog/button-design-websites-mobile-apps/⁠

⁠

https://semantic-ui.com/elements/button.html⁠

Formularios

⁠

https://www.ventureharbour.com/form-design-best-practices/⁠

Tablas

⁠

https://www.uifrommars.com/guia-completa-diseno-tablas-ui/⁠

⁠

Video sobre formulario

⁠

El libro usado como referencia para el video lo encuentras:

⁠

Web Form Design .pdf

16.8 MB

⁠

Referencias adicionales

⁠

https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html⁠

⁠

https://blog.tubikstudio.com/anatomy-of-web-page/⁠

⁠

https://raidboxes.io/es/blog/webdesign-development/ui-patterns/⁠

⁠

Visita este enlace y conoce más ejemplos sobre este tema⁠

⁠

Ayúdanos a seguir mejorando nuestro contenido🤩

Puedes dejarnos tu comentarios

aquí⁠

⁠