Atomic Design con Pattern Lab
6 likes1,133 views
Atomic Design es una filosofía de creación de productos tecnológicos basada en la creación de elementos complejos utilizando elementos más sencillos. Pattern Lab es una plataforma basada en esta filosofía para crear sitios web con un diseño consistente. En esta presentación, explico un poco como funciona cada uno.
![$ 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
-------------------------------------](https://image.slidesharecdn.com/atomicdesignconpatternlab-170128070157/85/Atomic-Design-con-Pattern-Lab-35-320.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](https://image.slidesharecdn.com/atomicdesignconpatternlab-170128070157/85/Atomic-Design-con-Pattern-Lab-50-320.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](https://image.slidesharecdn.com/atomicdesignconpatternlab-170128070157/85/Atomic-Design-con-Pattern-Lab-67-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (20)
Ad
Similar to Atomic Design con Pattern Lab (20)
Ad
More from Mauricio Angulo Sillas (9)
Recently uploaded (19)
Atomic Design con Pattern Lab
- 1. Mauricio Angulo S. Certified Sprintmaster & UX Architect [email protected] @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
- 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
- 18. Página de inicio Blog Artículo
- 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 -------------------------------------
- 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
- 73. Mauricio Angulo S. Certified Sprintmaster & UX Architect [email protected] @mauricioangulo www.tesseractspace.com ¡Gracias!