Mauricio Angulo S.Certified Sprintmaster & UX Architect

mauricio@tesseractspace.com@mauricioangulo

www.tesseractspace.com

Atomic Design conPattern Lab

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.

Experiencia de Usuario

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

“El diseño es demasiado importante para dejárselo a los diseñadores”

- Raymond Loewy

Desarrollo

DiseñoNegocio

Consistencia en el diseño

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

http://atomicdesign.bradfrost.com/

Página de inicio Blog Artículo

http://patternlab.io

http://patternlab.io/download.html

nodejs.org gulpjs.com

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

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

<button class=”button”>Enviar</button>

source/_patterns/global/button.mustache

https://mustache.github.io

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

/* * YOUR STYLES HERE */ button { padding: 15px; color: white;

text-transform: uppercase; border-radius: 7px; background-color: #333333; }

source/css/style.css

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

$ 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

$ npm install starterkit-mustache-demo

$ gulp patternlab:loadstarterkit --kit=starterkit-mustache-demo

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

{{> organisms-header }}<main role="main">

{{# hero }} {{> molecules-block-hero }} {{/ hero}}

<div class="l"> {{> organisms-tout-list }} </div>

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

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

https://patternlab.io/docs/

https://patternlab.io/resources.html

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

Mauricio Angulo S.Certified Sprintmaster & UX Architect

mauricio@tesseractspace.com@mauricioangulo

www.tesseractspace.com

¡Gracias!