Conceptos básicos de prototipado

1

Diseño de Prototipos: De Boceto a Alta Fidelidad

2

Prototipado Ágil: Beneficios para Equipos de Desarrollo

3

Prototipos: Baja, Media y Alta Fidelidad en el Diseño UX/UI

Ténicas para estructurar información

4

Patrones de Diseño UI/UX para Proyectos Rápidos

5

Estructuración de Sistemas UX con Objetos Reales

6

Diseño de Flujos de Tarea para Portales de Viajes

Prototipado de Baja Fidelidad

7

Prototipado rápido con InVision para portales de viajes

Sistemas de Diseño

8

Ventajas de Atomic Design en Prototipos de Interfaces

9

Identificación de Patrones en Atomic Design

Prototipado de Mediana Fidelidad

10

Diseño de Interfaces con Figma: Creación de Componentes Básicos

11

Grid de 12 Columnas: Diseño Web con Bootstrap en Figma

Librerías Compartidas de Componentes

12

Creación de Componentes Maestros en Figma para UI

13

Creación de Componentes en Diseño de Interfaz

14

Componentes Reactivos: Gestión y Anidación Eficiente

15

Estilos de Componentes en Figma: Colores y Tipografías

16

Creación de Librerías de Componentes en Figma

Prototipado de Alta Fidelidad

17

Creación de prototipos de alta fidelidad con componentes reutilizables

18

Conexión de pantallas en prototipos interactivos

Entregables de Diseño

19

Entrega de Diseños con Figma y Zeppelin para Desarrolladores

20

Exportación de Diseños de Figma a Zeppelin para Desarrolladores

Cierre

21

Diseño de Prototipos con Figma y UX Oriented Objects

Contenido Bonus

22

Prototipado Eficaz: Claves para Crear y Probar Ideas Rápidamente

23

Prototipado de Apps con Origami Studio y Sketch en Mac

24

Prototipos interactivos con Flinto: Diseño y Animaciones Básicas

Mentoría expert

25

Análisis de Usabilidad en Productos Físicos y Digitales

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Creación de Componentes Maestros en Figma para UI

12/26
Recursos

¿Cómo podemos mejorar nuestro diseño con atención al detalle?

En el diseño, los pequeños detalles pueden marcar una gran diferencia. Con las herramientas adecuadas y un poco de atención, podemos perfeccionar los widgets y hacer que se destaquen realmente. Un ejemplo práctico es la evolución de una barra de búsqueda. Puede parecer simple, pero con la atención a los detalles, como los iconos y las esquinas redondeadas, podemos transformar su aspecto para que luzca más fino y profesional.

¿Cuál es la esencia del prototipo en diseño UI?

La esencia de un prototipo bien diseñado es la velocidad y la eficiencia en la generación de soluciones. Utilizando las habilidades adquiridas en cursos, como el de diseño de interfaces de usuario en Platzi, puedes mejorar tus prototipos rápidamente. Estos cursos te enseñan a repetir elementos y optimizar tu tiempo al crear diseños coherentes y eficaces.

¿Cómo puedes mejorar tu flujo de trabajo en diseño?

Para movernos rápido en nuestro flujo de trabajo de diseño, existen numerosos recursos en línea. Sitios web que ofrecen iconos y vectores gratuitos pueden acelerar significativamente el proceso. Una buena práctica es descargar los vectores necesarios, extraerlos, y organizarlos en tu programa de diseño. Herramientas como Figma facilitan este proceso e incluso permite organizar los elementos agrupándolos adecuadamente para evitar desorden.

  • Descargar iconos desde recursos en línea: Busca iconos en formato vectorial que puedes descargar de forma gratuita.
  • Organizar iconos en Figma: Agrupa y desagrupa para mantener un orden eficaz en tu área de trabajo.
  • Asignar nombres a iconos y capas: Renombrar cada elemento facilita la identificación y edición futura.

¿Cómo lograr un diseño efectivo?

Un diseño eficaz no solo se ve bien, sino que también está bien organizado. La atención a distancias, jerarquías y tamaños es crucial. Por ejemplo, al presionar la tecla “Alt” en Figma, puedes ver las distancias entre elementos, lo que te permite alinear todo de manera precisa y mantener un diseño ordenado. Es buena práctica trabajar con números cerrados para mantener consistencia.

¿Cuáles son las mejores prácticas para prototipar?

Para crear un prototipo efectivo, dedica tiempo a los detalles iniciales ya que esto se reflejará en la calidad de todo el diseño. Al dominar las distancias y componentes maestros, puedes asegurarte de que tu diseño no solo sea atractivo sino también funcional y fácil de usar.

  • Atención a las distancias: Ayuda a mantener la coherencia visual y a organizar los elementos de manera efectiva.
  • Crear componentes maestros: Asegúrate de que todo esté bien diseñado desde el principio para reutilizarlo en el futuro.

¿Por qué es importante tomarse un respiro al diseñar?

Después de trabajar en un diseño detallado, es importante tomar un respiro. El trabajo detallado y minucioso requiere concentración, y un descanso puede ayudarte a ver mejoras o errores que pasaron desapercibidos. Prepararse adecuadamente antes de pasar a la creación de componentes maestros ayudará a duplicar estos elementos eficazmente en todo el diseño. ¡Esto será clave en tu camino hacia la maestría en diseño UI!

Aportes 19

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

The noun project es otra plataforma de recurso para descargar iconos gratis https://thenounproject.com/

En estas direcciones pueden se pueden encontrar más iconos, son de libre uso y de más fácil implementación para los desarrolladores.

https://fontawesome.com/icons?from=io
https://material.io/resources/icons/?style=baseline

Fontawesome es muy superior a Flaticon.

Actualmente Google fonts lanzó un feature en su web de UI Icons, y está genial!

Les recomiendo MUCHO el curso de diseño de interfaces de Rulótico que está indexado en la escuela de Product Design
https://platzi.com/clases/diseno-interfaz/

Hola chicos, les comparto un paquete de iconos “Google’s Material Icons”.
https://www.figma.com/resources/assets/material-icons-outline/

Son los básicos y tienen bastantes iconos genéricos útiles. Me ahorro bastante tiempo en vez buscar uno por uno.

Este articulo esta muy interesante, es sobre Mejores Prácticas del Diseño UI y sus Errores Más Comunes

https://www.toptal.com/designers/ui/mejores-practicas-del-diseno-ui-y-sus-errores-mas-comunes

Flaticon solo te deja descargar 10 iconos por día, si estás en el plan gratuito. 😛

Ahora figma te presenta un apartado en la barra superior que se llama Resources donde puedes seleccionar la columna de plugins y ahí buscar Iconify el cual te permite buscar cualquier ícono y lo mejor que podrás obtener su presentación de diferentes colecciones. Este plugin facilita el añadir e importar un icono a tu diseño en figma, sin buscar en otros lados.

Importante: si usan Flaticon tengan en cuenta utilizar el mismo estilo de los iconos 😄

Ahora FIGMA cuenta con la función de auto layout que vaya que hace más fáciles las cosas

https://icon-icons.com/es/
encontré una plataforma donde me deja descargar en SVG gratis !

También pueden instalar el plugin Iconify en Figma, y les genera variedad de iconos libres de uso.

La diferencia esta en los detalles!

A veces para obtener iconos particulares de manera gratuita una buena idea es pasar a illustrator, utilizar la herramienta de trace sobre un png o jpg y refinar el vector.

de que curso de UI habla?

Gracias por la información.

Gracias por el aporte…