Aprende a crear archivos prediseñados usando la metodología Atomic Design para interfaces de aplicaciones y sitios web que agilizarán tu flujo de trabajo
La regla principal de las aplicaciones es hacer la vida más sencilla a sus usuarios, sin embargo, crear una desde cero puede ser un proceso realmente complicado. Por eso, los UI Kits, conjuntos de elementos listos para usarse en el diseño de interfaces, son un recurso realmente útil.
En este curso, aprenderás a crear UI Kits para aplicaciones y sitios web en Sketch de la mano del diseñador Migue, alias El Nodos. Además, verás cómo actualizarlos para reutilizarlos en proyectos futuros y agilizar todavía más tu flujo de trabajo. Haz realidad interfaces impactantes y crea experiencias inolvidables de manera rápida y sencilla.
¿Qué aprenderás en este curso online?
17 lecciones & 21 recursos adicionales
Qué haremos durante el curso
2 minutos, 25 segundos
¿Qué es un UI Kit?
7 minutos, 52 segundos
Patrones de UI y componentes en Sketch
4 minutos, 57 segundos
Atomic Design
11 minutos, 18 segundos
El proyecto
10 minutos, 16 segundos
Colores, Fuente y Grid
20 minutos, 13 segundos
¿Qué incluye este curso?
Comenzarás conociendo a tu profesor y cómo ha sido su camino a través de su carrera profesional. También, te explicará el proyecto en el que trabajarás a lo largo del curso.
A continuación, descubrirás qué es un UI Kit y qué lo diferencia de un sistema de diseño. Verás los patrones de diseño de interfaz y aprenderás a organizar tus archivos según la metodología que utiliza Migue.
Revisarás el proyecto en el que te basarás para crear tu UI Kit y analizarás los componentes a crear. Luego, definirás tu guía de estilo fijándote en los colores, la fuente, los grids (cuadrícula) y el set de iconos.
Pasarás a la acción creando primero los átomos, luego combinarás algunos de ellos para crear las moléculas y, por último, crearás algunas pantallas con todos estos componentes.
En la última unidad, Migue te enseñará a utilizar tu UI Kit en Sketch como librería y cómo mantenerlo actualizado, agregando nuevos componentes a medida que sea necesario.
Software y herramientas recomendados para este curso
¿Cuál es el proyecto del curso?
Crearás un UI Kit que te permitirá agilizar tu trabajo a la hora de crear pantallas para tu aplicación. Durante el curso, se trabajará a partir de una app de música.
¿A quién está dirigido este curso online?
A diseñadores que quieran introducirse en el mundo del diseño de interfaz, diseñadores UI, diseñadores de interacción juniors y a todos los interesados en el diseño de aplicaciones o que estén involucrados en el diseño de productos digitales.
Requisitos y materiales
Para realizar este curso, se requieren conocimientos básicos de Sketch.
En cuanto a materiales, necesitarás una computadora con macOS Mojave o superior y tener instalada la última versión de Sketch (se puede descargar la versión de prueba en su página web). Tener una Wacom es un plus, pero no es indispensable.
Opiniones
- hace 1 año
El curso es una base para iniciar a trabajar con la metodología Atomic Design.
- hace 3 años
La neta no era lo que esperaba, pensé que el UI Kits te ayudaba a crear el diseño de la aplicación, pero ya lo tenia creado y solo agrupo los componentes, y también no me gusto el estilo en como hablaba, parecía que le faltaba el aire para pronunciar palabras, disculpen mi critica pero así lo percibí
- hace 4 años
Increible curso
- hace 4 años
Muy completo
- hace 4 años
El curso me ha parecido super claro y completo. El profesor da muchos detalles y es super dinamico para todo lo que explica en tan poco tiempo. Super recomendable.
Actualmente, está enfocado en crear patrones y sistemas de diseño escalables. Además, es el co-fundador de la comunidad SketchMX, donde organizan meetups de manera regular para la comunidad de diseño de producto, en los que participan diseñadores, desarrolladores, ux writers, product designer y cualquiera que le interese el diseño de productos digitales.
Contenidos
- U1
Introducción
- Presentación
- Influencias
- Qué haremos durante el curso
- U2
Conceptos y setup de Sketch
- ¿Qué es un UI Kit?
- Patrones de UI y componentes en Sketch
- Atomic Design
- U3
Estableciendo las bases de nuestro UI Kit con Sketch
- El proyecto
- Colores, Fuente y Grid
- Colores, Fuente y Grid 2
- Icon Set
- U4
A crear componentes atómicos en Sketch
- Creando componentes: Átomos
- Creando componentes: Átomos 2
- Creando componentes: Moléculas
- Construyendo pantallas con Átomos y Moléculas
- U5
Librerías en Sketch
- UI Kit como librería en Sketch
- Agregar nuevos componentes a nuestro UI Kit
- Presenta tu UI Kit
- PF
Proyecto final
- Creación de UI Kits con Sketch
Qué esperar de un curso de Domestika
Aprende a tu ritmo
Disfruta aprendiendo desde casa, sin horarios y a tu ritmo. Tú decides cuándo seguir con cada unidad.
Aprende de los mejores profesionales
Aprende los métodos y técnicas más útiles con los mejores profesionales del sector creativo.
Conoce a profesores expertos
Cada profesor te transmitirá sus conocimientos con pasión, ofreciéndote explicaciones claras y una perspectiva profesional en cada lección.
Certificados
PLUSSi eres Plus, obtén un certificado personalizado y firmado por tu profesor. Compártelo en tu porfolio, en las redes sociales o donde quieras.
Ponte en primera fila
La alta calidad de los vídeos permitirá que no te pierdas ni un solo detalle. Gracias al acceso ilimitado, podrás ver las lecciones todas las veces que necesites para perfeccionar tus habilidades.
Comparte conocimientos e ideas
Pregunta, pide opinión y ofrece soluciones. Comparte tu experiencia de aprendizaje con otros estudiantes de la comunidad tan apasionados por la creatividad como tú.
Conecta con una comunidad creativa global
Esta comunidad cuenta con millones de usuarios de todo el mundo, personas curiosas y con ganas de explorar y expresar su creatividad.
Realiza cursos profesionalmente producidos
Domestika selecciona cuidadosamente los profesores y produce cada curso internamente para garantizar una experiencia de aprendizaje online excelente.
Preguntas frecuentes
Aprenderás a crear, organizar y documentar sistemas de diseño visual, UI Kits y componentes reutilizables en Sketch, aplicando metodologías como Atomic Design y patrones Material Design para aplicaciones móviles y web.
Este curso es de nivel intermedio, por lo que es recomendable tener conocimientos básicos en diseño gráfico digital o experiencia previa con herramientas como Sketch o Figma.
Necesitas una computadora con Sketch instalado (solo Mac), acceso a internet y conocimientos básicos de diseño. Se recomienda familiaridad con interfaces digitales y nociones de usabilidad.
Atomic Design se aplica dividiendo componentes en átomos, moléculas y organismos, permitiendo crear interfaces modulares, escalables y fáciles de mantener en Sketch.
Sí, el curso te guía paso a paso para crear, organizar y reutilizar un UI Kit en Sketch, centralizando componentes, estilos y elementos visuales para aplicaciones móviles o web.
Sí, aprenderás a crear, documentar y gestionar sistemas de diseño visual, incluyendo guías de estilo, paletas de colores, tipografías y componentes.
Sí, el curso te muestra cómo verificar el contraste de color entre fondo y texto, aplicando principios de accesibilidad para mejorar la legibilidad y experiencia de usuario.