Mauricio Angulo is a certified sprintmaster and UX architect at Tesseract Space, focusing on user experience and software development. He founded UX Nights in 2014 and is involved with Google Experts and Microsoft as a mentor. The document discusses principles of atomic design, software consistency, and various web development resources.

1. Mauricio Angulo S.
Certified Sprintmaster & UX Architect
mauricio@tesseractspace.com
@mauricioangulo
www.tesseractspace.com
Atomic Design con
Pattern Lab

2. 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.

3. Experiencia de Usuario
“Sentimientos, emociones y
percepciones de una persona sobre
un sistema o tecnología.”

4. “El diseño es demasiado
importante para dejárselo a
los diseñadores”
- Raymond Loewy

5. Desarrollo
DiseñoNegocio

6. Consistencia en el diseño

7. 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

11. http://atomicdesign.bradfrost.com/

18. Página de inicio Blog Artículo

31. http://patternlab.io

32. http://patternlab.io/download.html

33. nodejs.org gulpjs.com

34. https://github.com/pattern-lab/edition-node-gulp

35. $ gulp --version
CLI version 1.2.2
Local 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
-------------------------------------

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

42. https://mustache.github.io

43. {
"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

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

48. ---
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

50. $ 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

51. $ npm install starterkit-mustache-demo
$ gulp patternlab:loadstarterkit --kit=starterkit-mustache-demo

57. <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 -->

60. {{> organisms-header }}
<main role="main">
{{# hero }} {{> molecules-block-hero }} {{/ hero}}
<div class="l">
{{> organisms-tout-list }}
</div>

63. {
"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

67. {
"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

70. https://patternlab.io/docs/

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

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

73. Mauricio Angulo S.
Certified Sprintmaster & UX Architect
mauricio@tesseractspace.com
@mauricioangulo
www.tesseractspace.com
¡Gracias!