Una introducción a la creación de sistemas de diseño personalizados utilizando Atomic Design con PatternLab, con ejemplos.

1. Mauricio Angulo S.
Senior UX Engineer
mauricio@tesseractspace.com
@mauricioangulo
www.tesseractspace.com/blog
Sistemas de Diseño con
Atomic Design y Pattern Lab

2. Consistencia en el diseño

3. ● Reduce la fricción y la curva de aprendizaje del usuario
primerizo
● Aprovecha la tendencia natural de los humanos de encontrar
patrones
● Es crítica para la construcción de una marca
● Ayuda a los usuarios a reconocer sus productos favoritos
● Refuerza las experiencias positivas
Una buena consistencia en diseño:

4. HTML
CSS
JavaScript
Swift
Java
Papel
JPG / PNG
PSD /PDF
PPT
MPG4
Sketch /
InVision

5. www.material.io

7. https://developer.apple.com/design/

9. http://fluent.microsoft.com

11. https://airbnb.design/building-a-visual-language/

12. http://atomicdesign.bradfrost.com/

18. Página de inicio Blog Artículo

20. Plantillas + Data

22. https://airbnb.design/building-a-visual-language/

30. http://patternlab.io

31. http://patternlab.io

34. <button class=”button”>Enviar</button>
source/_patterns/global/button.mustache

37. https://mustache.github.io

38. {
"key": "value",
"key2": "use this for variables you want to load globally",
"title": "Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu.",
"btnText": "Da clic aquí",
"img": {
"avatar": {
"src": "http://placeimg.com/100/100/people",
"alt": "Avatar"
},
"square": {
"src": "http://placeimg.com/300/300/nature",
"alt": "Square"
},
"rectangle": {
"src": "http://placeimg.com/400/300/tech",
"alt": "Rectangle"
},
"landscape-4x3": {
"src": "http://placeimg.com/400/300/tech",
"alt": "4x3 Image"
},
"landscape-16x9": {
"src": "http://placeimg.com/640/360/tech",
"alt": "16x9 Image"
source/_data/data.json

41. /*
* YOUR STYLES HERE
*/
button {
padding: 15px;
color: white;
text-transform: uppercase;
border-radius: 7px;
background-color: #333333;
}
source/css/style.css

43. ---
title: Botón
---
Este es el botón principal para *llamada a la acción* en una página. No
debería haber **más de uno de estos botones en una página** para ayudar
al usuario.
source/_patterns/global/button.md

45. http://demo.patternlab.io

47. <img src="{{ imgHero.src }}"
alt="{{ imgHero.alt }}"
class="{{ styleModifier }}" />

49. <a href="{{ url }}" class="c-block-hero">
{{> atoms-hero:c-block-hero__img }}
<h2 class="c-block-hero__headline">{{ headline.medium
}}</h2>
</a><!-- end c-block--hero-->

51. <header class="c-header" role="banner">
{{> molecules-logo-link }}
<div class="c-header__controls">
<a href="#nav" class="nav-toggle nav-toggle-menu icon-menu">
<span class="is-vishidden">Menu</span></a>
<a href="#search-form" class="nav-toggle nav-toggle-search icon-
search">
<span class="is-vishidden">Search</span></a>
{{> molecules-primary-nav }}
{{> molecules-search }}
</div><!-- end c-header__controls -->
</header><!-- end c-header -->

55. {{> organisms-header }}
<main role="main">
{{# hero }}
{{> molecules-block-hero }}
{{/ hero}}
<div class="l">
{{> organisms-tout-list }}
</div>
<div class="l l--two-col">
<div class="l-main">
{{# latestPosts }}
{{> organisms-
section-media-list }}
{{/ latestPosts }}
</div><!--end .l-main-->
<div class="l-sidebar">
{{# featuredPeople }}
{{> organisms-
section-media-list }}
{{/ featuredPeople }}
</div><!--end .l-sidebar-->
</div><!--end l--two-col-->

57. {
"title" : "Home Page",
"bodyClass": "home",
"emergency" : false,
"imgHero" : {
"src": "../../images/sample/hero-forest.jpg",
"alt": "Forest"
},
"headline" : {
"medium" : "Track your hikes. Challenge your friends. Get out there and start exploring."
},
"toutList" : [
{
"url": "link.pages-blog-detail",
"headline": {
"short" : "Best winter hikes around the world"
},
"imgLandscape" : {
"src": "../../images/sample/tout-winter-hiker.jpg",
"alt": "Hiker with back pack walking in snow"
}
},
{
"url": "link.pages-login",
"headline": {
source/_patterns/04-pages/00-homepage.json

58. {{> templates-homepage }}

62. https://patternlab.io/docs/

63. https://patternlab.io/resources.html

64. http://atomicdesign.bradfrost.com/table-of-contents/

65. Más sobre Sistemas de Diseño
Introducción a Sistemas de Diseño:
Google’s Material Design:
Apple’s Human Interface Design Guidelines:
Microsoft’s Fluent Design System:
tesseractspace.com/blog/sistemas-de-diseno/
tesseractspace.com/blog/sistema-de-diseno-material-design/
tesseractspace.com/blog/human-interface-guidelines-de-apple/
tesseractspace.com/blog/fluent-design-system/
>
>
>
>
Atomic Design:
tesseractspace.com/blog/sistemas-de-diseno-con-atomic-design/
>

66. Mauricio Angulo S.
Senior UX Engineer
mauricio@tesseractspace.com
@mauricioangulo
www.tesseractspace.com/blog
¡Gracias!