Descripción

 
Diseño Atómico (Atomic Design) es una filosofía de diseño que se utiliza para asegurar la consistencia en el diseño de sitios web muy grandes,en los que trabajan equipos grandes o distribuidos de personas o para sitios que se actualizan con muchísima frecuencia. Atomic Design se basa en la reutilización acumulativa de elementos modulares sencillos de diseño para crear estructuras de información cada vez más complejas. El Diseño Atómico ayuda a que el diseño interactivo pueda adaptarse rápidamente a múltiples dispositivos y es compatible con procesos de diseño centrado en el usuario, ya que se puede implementar desde las etapas tempranas de diseño usando sketches y prototipos.

Pattern Lab es un framework de trabajo opensource que utiliza los principios de Atomic Design para creación de sitios web, integrando diseño, código de front-end y contenido en una sola herramienta. Este g enerador está creado con el principio de “Mobile First” (Primero Móvil) con opciones para ajustar el tamaño de las páginas y de agregar comentarios a las secciones del sitio y a los bloques de construcción a nivel de código. Pattern Lab está disponible en dos versiones: una en PHP y otra para NodeJS, compatibles con Gulp y Grunt.

El taller tiene una duración de 1 sesión de 8 horas. En este curso los participantes conocerán a detalle la metodología de Atomic Design, conocerán a fondo el framework de PatternLab para instalarlo y crear con él un sitio web desde cero desde sus elementos más simples hasta plantillas y páginas completas, así como técnicas para ligado de contenido de fuentes externas con Mustache. Los participantes tendrán acceso al material audiovisual e interactivo, recursos adicionales, ejercicios y resolución de un caso práctico por medio de validación con usuarios de manera cuantitativa.

El curso está dirigido a profesionales de diseño o programación de páginas y sitios web involucrados en la definición, construcción, administración o mantenimiento de productos digitales.

Pre-requisitos:
Conocimiento de HTML, CSS y Javascript a nivel básico.
Experiencia creando páginas web estáticas con HTML/CSS/Javascript.
Deseado: conocimiento básico de NodeJS y Gulp.
Deseado: conocimiento básico de Git / Github.
 

Temario

1. Introducción a Atomic Design
• Diseño de sistemas de diseño.
• Metodología de Atomic Design.
• Átomos, Moléculas, Organismos, Plantillas y Páginas.
• El flujo de trabajo atómico.
2. Fundamentos de PatternLab
• El sistema PatternLab.
• Ecosistema, requerimientos e instalación.
• Configuración y generación de PatternLab.
• Comandos de consola de PatternLab.
• Inicialización de PatternLab.
3. Trabajando con patrones
• Introducción a la organización de patrones.
• Agregando nuevos patrones.
• Anidación de patrones.
• Ligado de patrones.
• Documentación de patrones.
• Gestión de recursos de patrones.
• Encabezados y pies de página.
• Pseudo-patrones.
• Parámetros de patrones.
• Estados de los patrones.
• Ocultando patrones.
• Cómo agregar anotaciones.
4. Integración con datos
• Introducción a la gestión de datos en PatternLab.
• Fundamentos de JSON y Mustache.
• Uso de datos específicos de patrones.
• Creación de listas dinámicas.
5. Generación de sitios web
• Renderizado de patrones.
• Browsersync para revisión de sitios.
6. Características avanzadas
• Edición de opciones de configuración de PatternLab.
• Cómo exportar patrones y kits de diseño.
• Atajos de teclado en PatternLab.
• Variables GET de entorno.

Formas de Pago

• Tarjeta de Crédito
• Transferencia o Deposito
• Cheque

Ex-alumnos y Grupos

15% de descuento a ex-alumnos y grupos mínimo 4 participantes, no acumulable con otras promociones.

Nota Importante

Los cursos son en formato BYOL (Bring Your Own Laptop).