atomic design con pattern lab
TRANSCRIPT
![Page 1: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/1.jpg)
Mauricio Angulo S.Certified Sprintmaster & UX Architect
[email protected]@mauricioangulo
www.tesseractspace.com
Atomic Design conPattern Lab
![Page 2: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/2.jpg)
Trabajo en Tesseract Space, una empresa mexicana como consultor en experiencia de usuario y sprintmaster.
Colaboro en el grupo de Google Experts y en la iniciativa de Microsoft Regional Director como mentor en usabilidad y desarrollo de software.
En 2014 fundé UX Nights, una comunidad sobre experiencia de usuario. También soy escritor, ponente internacional y formador técnico en LinkedIn Education.
> www.about.me/mauricioangulo
Mauricio Angulo S.
![Page 3: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/3.jpg)
Experiencia de Usuario
“Sentimientos, emociones y percepciones de una persona sobre un sistema o tecnología.”
![Page 4: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/4.jpg)
“El diseño es demasiado importante para dejárselo a los diseñadores”
- Raymond Loewy
![Page 5: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/5.jpg)
Desarrollo
DiseñoNegocio
![Page 6: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/6.jpg)
Consistencia en el diseño
![Page 7: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/7.jpg)
Una buena consistencia en software:
● Reduce la fricción y la curva de aprendizaje
● Aprovecha nuestra tendencia natural 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
Google | Proprietary & Confidential
![Page 8: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/8.jpg)
![Page 9: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/9.jpg)
![Page 10: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/10.jpg)
![Page 11: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/11.jpg)
http://atomicdesign.bradfrost.com/
![Page 12: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/12.jpg)
![Page 13: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/13.jpg)
![Page 14: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/14.jpg)
![Page 15: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/15.jpg)
![Page 16: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/16.jpg)
![Page 17: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/17.jpg)
![Page 18: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/18.jpg)
Página de inicio Blog Artículo
![Page 19: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/19.jpg)
![Page 20: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/20.jpg)
![Page 21: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/21.jpg)
![Page 22: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/22.jpg)
![Page 23: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/23.jpg)
![Page 24: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/24.jpg)
![Page 25: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/25.jpg)
![Page 26: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/26.jpg)
![Page 27: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/27.jpg)
![Page 28: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/28.jpg)
![Page 29: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/29.jpg)
![Page 30: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/30.jpg)
![Page 31: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/31.jpg)
http://patternlab.io
![Page 32: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/32.jpg)
http://patternlab.io/download.html
![Page 33: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/33.jpg)
nodejs.org gulpjs.com
![Page 34: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/34.jpg)
https://github.com/pattern-lab/edition-node-gulp
![Page 35: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/35.jpg)
$ gulp --versionCLI version 1.2.2Local version 4.0.0-alpha.2
$ git clone https://github.com/pattern-lab/edition-node-gulp.git
$ cd edition-node-gulp$ npm install
$ gulp patternlab:serve[BS] Access URLs: ------------------------------------- Local: http://localhost:3000 External: http://192.168.1.70:3000 ------------------------------------- UI: http://localhost:3001 UI External: http://192.168.1.70:3001 -------------------------------------
![Page 36: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/36.jpg)
![Page 37: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/37.jpg)
![Page 38: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/38.jpg)
![Page 39: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/39.jpg)
<button class=”button”>Enviar</button>
source/_patterns/global/button.mustache
![Page 40: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/40.jpg)
![Page 41: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/41.jpg)
![Page 42: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/42.jpg)
https://mustache.github.io
![Page 43: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/43.jpg)
{ "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" } }, "headline": {
source/_data/data.json
![Page 44: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/44.jpg)
![Page 45: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/45.jpg)
![Page 46: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/46.jpg)
/* * YOUR STYLES HERE */ button { padding: 15px; color: white;
text-transform: uppercase; border-radius: 7px; background-color: #333333; }
source/css/style.css
![Page 47: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/47.jpg)
![Page 48: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/48.jpg)
---title: Button---This is the main button for *call-to-action* in a page. There should be **no more that one of this buttons on a page** to improve user engagement.
source/_patterns/global/button.md
![Page 49: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/49.jpg)
![Page 50: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/50.jpg)
$ gulp patternlab:help
Loading engines from the edition or test directory...
mustache: good to go
====[ Pattern Lab / Node - v2.7.2 ]====
patternlab:build > Compiles the patterns and frontend, outputting to config.paths.public
Patternlab:version > Return the version of patternlab-node you have installed
patternlab:loadstarterkit > NOTE: In most cases, `npm install starterkit-name` will precede this call. > example (gulp): `gulp patternlab:loadstarterkit --kit=starterkit-mustache-demo
![Page 51: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/51.jpg)
$ npm install starterkit-mustache-demo
$ gulp patternlab:loadstarterkit --kit=starterkit-mustache-demo
![Page 52: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/52.jpg)
![Page 53: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/53.jpg)
![Page 54: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/54.jpg)
![Page 55: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/55.jpg)
![Page 56: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/56.jpg)
![Page 57: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/57.jpg)
<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 -->
![Page 58: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/58.jpg)
![Page 59: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/59.jpg)
![Page 60: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/60.jpg)
{{> organisms-header }}<main role="main">
{{# hero }} {{> molecules-block-hero }} {{/ hero}}
<div class="l"> {{> organisms-tout-list }} </div>
![Page 61: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/61.jpg)
![Page 62: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/62.jpg)
![Page 63: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/63.jpg)
{"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": {
"short" : "Sign in to view your dashboard"},
source/_patterns/04-pages/00-homepage.json
![Page 64: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/64.jpg)
![Page 65: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/65.jpg)
![Page 66: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/66.jpg)
![Page 67: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/67.jpg)
{ "comments" : [ { "el": "header[role=banner]", "title" : "Masthead", "comment": "The main header of the site doesn't take up too much screen real estate in order to keep the focus on the core content. It's using a linear CSS gradient instead of a background image to give greater design flexibility and reduce HTTP requests." }, { "el": ".c-logo-link", "title" : "Logo", "comment": "The logo image is an SVG file, which ensures that the logo displays crisply even on high resolution displays. A PNG fallback is provided for browsers that don't support SVG images.</p><p>Further reading: <a href=\"http://bradfrostweb.com/blog/mobile/hi-res-optimization/\">Optimizing Web Experiences for High Resolution Screens</a></p>" }, { "el": "#nav", "title" : "Navigation", "comment": "<p>Navigation for adaptive web experiences can be tricky. Top navigations are typical on desktop sites, but mobile screen sizes don't give us the luxury of space. We're dealing with this situation by creating a simple menu anchor that toggles the main navigation on small screens. This is just one method. <a href=\"http://bagcheck.com/\">Bagcheck</a> and <a href=\"http://contentsmagazine.com/\">Contents Magazine</a> add an anchor in the header that jumps users to the navigation which is placed in the footer. This solution works well because it doesn't require any Javascript in order to work. Other methods exist too. For example, <a href=\"http://m.espn.com\">ESPN's mobile navigation</a> overlays the main content of the page.</p><p>The nav is only hidden when a certain
source/_annotations/annotations.js
![Page 68: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/68.jpg)
![Page 69: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/69.jpg)
![Page 70: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/70.jpg)
https://patternlab.io/docs/
![Page 72: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/72.jpg)
http://atomicdesign.bradfrost.com/table-of-contents/
![Page 73: Atomic Design con Pattern Lab](https://reader031.vdocuments.us/reader031/viewer/2022021503/5899a2751a28ab30688b5501/html5/thumbnails/73.jpg)
Mauricio Angulo S.Certified Sprintmaster & UX Architect
[email protected]@mauricioangulo
www.tesseractspace.com
¡Gracias!