63 lines
3.3 KiB
Markdown
63 lines
3.3 KiB
Markdown
---
|
|
title: Pattern Libraries
|
|
localeTitle: Bibliotecas de patrones
|
|
---
|
|
## Bibliotecas de patrones
|
|
|
|
Una biblioteca de patrones es una colección de elementos de diseño de interfaz de usuario reutilizable. Dado que estos elementos de la interfaz se reutilizan varias veces en una página web, aplicaciones web o aplicación de software, imponen estructura a través de la consistencia. Esto hace que el sitio o la aplicación sea más fácil de usar.
|
|
|
|
Unos elementos de la interfaz común que se encuentra en una biblioteca de patrones son:
|
|
|
|
* Menús
|
|
* Botones
|
|
* Diseños de página
|
|
* Animaciones de interfaz de usuario
|
|
* Formas
|
|
|
|
### Beneficios de las bibliotecas de patrones
|
|
|
|
Paul Boag, de su blog [Boagworld.com](https://boagworld.com/design/pattern-library/) , explica las razones principales para crear una biblioteca de patrones:
|
|
|
|
1. "Una biblioteca de patrones asegura una interfaz de usuario consistente".
|
|
2. "Una biblioteca de patrones facilita la reutilización".
|
|
3. "Una biblioteca de patrones facilita el mantenimiento".
|
|
|
|
### Bibliotecas de patrones vs. Sistemas de diseño vs. Guías de estilo
|
|
|
|
Es fácil confundir bibliotecas de patrones con los sistemas de diseño y guías de estilo. Este [artículo de Zack Rutherford para UXPin](https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/) aclara la diferencia entre los tres:
|
|
|
|
> • **Diseño del sistema** - el conjunto completo de estándares de diseño, documentación y principios, junto con el kit de herramientas de interfaz de usuario (patrones y componentes de código) para alcanzar esos estándares.
|
|
>
|
|
> • **Patrón Biblioteca** - Una subclase en el diseño del sistema, esto es el conjunto de patrones de diseño para su uso a través de una empresa.
|
|
>
|
|
> • **Manual de estilo** - Otra subclase en el sistema de diseño, esta documentación estática describe el sistema de diseño en sí mismo: cómo los productos deben verse y sentirse, casos de uso de patrones de interfaz de usuario, escalas tipográficas correctas, etc.
|
|
|
|
#### Más información:
|
|
|
|
##### Ejemplos de la biblioteca de patrones
|
|
|
|
[Chimpancé](https://ux.mailchimp.com/patterns)
|
|
|
|
[Lenguaje de diseño de IBM](https://www.ibm.com/design/language/resources)
|
|
|
|
[Microsoft](https://developer.microsoft.com/en-us/windows/desktop/design)
|
|
|
|
[Diseño de materiales de Google](https://material.io/guidelines/)
|
|
|
|
[Patrones UI](http://ui-patterns.com/patterns)
|
|
|
|
[Patrones móviles](http://www.mobile-patterns.com/)
|
|
|
|
[BBC GEL](http://www.bbc.co.uk/gel/guidelines/category/design-patterns)
|
|
|
|
##### Artículos
|
|
|
|
["Bibliotecas de patrones" por Natasha Hockey para Prototypr.io](https://blog.prototypr.io/pattern-libraries-5d627c5c65b4)
|
|
|
|
["Bibliotecas de patrones: qué son y por qué la necesita" por Meghan Lazier para Designlab](http://trydesignlab.com/blog/pattern-libraries-what-they-are-and-why-you-need-o/)
|
|
|
|
["Creación de un patrón Biblioteca" por Rebecca Sorensen para Sumo Lógica](https://medium.com/sumo-logic-ux/creating-a-pattern-library-18cce0f901b4)
|
|
|
|
["Introducción a bibliotecas de motivos" por Anna Debenham de A List Apart](http://alistapart.com/blog/post/getting-started-with-pattern-libraries)
|
|
|
|
["Llevando la biblioteca de patrones al siguiente nivel" por Vitaly Friedman para Smashing Magazine](https://www.smashingmagazine.com/taking-pattern-libraries-next-level/) |