No tienes acceso a esta clase

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

Estilos de Componentes

15/26
Recursos

¿Cómo iniciar con prototipos de alta fidelidad en diseño de interfaces?

La transición hacia prototipos de alta fidelidad es crucial en el proceso de diseño de interfaces. Aquí es donde los diseñadores comienzan a aplicar decisiones de estilo detalladas. Esto involucra desde la elección de colores y tipografías hasta los detalles más finos que definirán la apariencia final de la interfaz. ¿Por qué es importante esta etapa? Porque estos prototipos son casi una representación final del producto, y facilitan la comunicación con los desarrolladores que convertirán el diseño en una aplicación funcional.

¿Cuál es el primer paso para tomar decisiones de estilo?

El primer paso es elegir los colores que definirán la identidad visual de tu proyecto. Estos colores tendrán un impacto profundo en el atractivo estético y la usabilidad de tu interfaz. Una buena práctica es comenzar a agrupar tus elementos de diseño en librerías, categorizando colores y estilos para un acceso sencillo y coherente.

  • Utiliza herramientas como el gotero para seleccionar colores específicos que representen la marca.
  • Crea estilos de color que puedas aplicar uniformemente a lo largo de tu proyecto para garantizar consistencia.
  • Trata de nombrar tus estilos de manera lógica, como "Verde Principal" para un color predominante.

¿Cómo gestionar iconos y vectores en un prototipo?

Los iconos y vectores juegan un papel vital en la navegación y la comunicación visual dentro de una interfaz. Es esencial que estos componentes también reflejen las decisiones de estilo, como los colores, para mantener una estética unificada.

  • Agrupa tus vectores para un acceso fácil y aplica estilos de color uniformemente.
  • Usa un enfoque consistente para modificar el grosor de los contornos o aplicar ciertos colores.
  • Asegúrate de que todos los elementos interactivos, como botones e íconos, sean fácilmente distinguibles y visiblemente uniformes.

¿Por qué es fundamental crear una librería de estilos?

Tener una librería de estilos es sumamente beneficioso. No solo simplifica la modificación y actualización de estilos en múltiples instancias, también agiliza la integración con el desarrollo.

  • Crea un documento separado para centralizar tus estilos de colores y tipografías.
  • Considera usar muestras visuales de tus paletas de colores y tamaños de tipografía, lo que facilitará el trabajo a los desarrolladores en etapas posteriores.
  • Nomina cada estilo de manera descriptiva para reconocerlos rápidamente, como "Título Excepción".

¿Cómo asegurar la consistencia en tipografías y colores?

Al crear estilos maestros, puedes garantizar que los cambios se reflejen de manera uniforme en toda la interfaz. Este proceso no solo es eficiente, sino que minimiza errores y asegura una experiencia visual coherente para el usuario.

  • Verifica los estilos antes de aplicarlos extensivamente; los errores pueden ser difíciles de deshacer una vez implementados.
  • Si usas Figma, revisa cómo aplica estilos ya que puede no respetar ciertos cambios automáticamente.
  • Aplica estilos maestros a todos los elementos pertinentes para una modificación generalizada con facilidad.

Con estos pasos claros y estrategias bien definidas, avanzarás en el camino hacia prototipos efectivos y funcionales. ¡Es tu turno de experimentar con estos procesos y ver cómo tu diseño cobra vida frente a tus ojos!

Aportes 25

Preguntas 2

Ordenar por:

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

Es muy útil seguir a la par el curso de Sistemas de diseño https://platzi.com/clases/1420-sistemas-diseno/15003-introduccion-y-presentacion/ para ir documentando lo que se está trabajando en el ejemplo del portal

Mi primer design system, aún queda bastante por practicar y mejorar pero que interesante poder haber empezado uno desde 0.

uff! me tomó más de lo que esperaba estas pantallas pero todo con practica mejora!!
Podrán ver que en la ultima pantalla ya quería terminar 😛





parece un trabajo super tedioso, pero resulta sr divertido y muy practico a la hora de armar todo

Veo que menciona en múltiples ocasiones el curso de UI de Platzi, pero ese curso es solo de fundamentos y no abarca detalles como distancias entre elementos y cosas más minuciosas. Estaría bien un curso de UI pero que sea avanzado, no solo de fundamentos.

Un plugin interesante para crear temas desde Figma
https://www.figma.com/c/plugin/731176732337510831/Themer

Este curso me sirvio mas a entender figma que el propio curso de figma basico

Mi librería de estilos:

Tipografía

Paleta de colores

Es muy bueno para elegir paletas de colores https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

![](https://static.platzi.com/media/user_upload/Inicio-a0f5017e-5319-4d41-90de-1779e631b28e.jpg) ![](https://static.platzi.com/media/user_upload/Resultados-bbadf47d-8362-4dee-b288-5bf9201f2b98.jpg) ![](https://static.platzi.com/media/user_upload/Frame%205-4ffa60d7-03fd-47d3-bd65-077e4a12dde4.jpg) ![](https://static.platzi.com/media/user_upload/Organismos-57b59791-471f-4aae-9819-f84bdb091a41.jpg) ![](https://static.platzi.com/media/user_upload/Moleculas-ac709841-ea31-46a3-b83e-fde6f6dcd16c.jpg) ![](https://static.platzi.com/media/user_upload/Atomos-acdc7cd1-3dc9-4928-864c-022afccdfd1f.jpg) ![](https://static.platzi.com/media/user_upload/Estilos-e3448116-bde6-4132-868e-078471953378.jpg)
![](https://static.platzi.com/media/user_upload/Inicio-3359edcf-6f62-4e89-98e0-1522685a62fc.jpg)
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202023-11-14%20194313-b204fc5f-d2f7-4c04-86eb-6ec32e596d34.jpg)

Puedo recomendar este kit para tomar como ejemplo para proyectos más grandes:
https://www.figma.com/community/file/1035203688168086460

La razón de crear frames con estilos de componentes al lado de nuestras interfaces dentro del mismo archivo Figma es ligar las características visuales de esos componentes maestros para que al hacerles alguna modificación a los átomos, ese cambio se refleje automáticamente en todas las interfaces (frames) donde esté ese elemento (instancias).

Darle estilo al prototipo de alta fidelidad con los colores de los iconos

He notado que el profesor va agregando gradualmente el atomic desing, estilos, componentes, etc…pero en la práctica, considero que antes de empezar a diseñar lo que se desea, es mucho más práctico crear esa estructura y tomarse el tiempo para tomar ciertas decisiones de acuerdo a lo que se habla con el cliente, con el grupo de trabajo y teniendo en cuenta los estilos propios de diseñador. Sí, esto lleva un poco más de tiempo, pero el resultado al final es mucho más gratificante, facilita los procesos y da una claridad de lo que se quiere hacer. Y si bien es cierto que se pueden presentar cambios, tener algo definido desde un principio, siempre y cuando se puedan establecer estas cosas, es mejor método que hacerlo gradualmente.

por cierto! después de esta practica creo que ayudaría mucho hacer la filtración de átomos, moléculas y organismos por pantallas, no tener el X de frames, que en el mismo frame hacer un | separador | para tener todo más organizado por que puedes usar el mismo átomo varias veces pero con diferentes tamaños o texturas 💡

Object Oriented Styles :sw

Para la selección de colores conviene crear un moodboard

Este es mi avance del proyecto, hasta ahora solo he avanzado 2 pantallas pero traté de usar la metodología de Atomic design y algunos tips de los que nos platicó Misaello para crear componentes aunque me resulta complicado redimensionarlos.
Para alguien que inició trabajando pensando en pantallas y no en crear elementos es algo complicado dejar ese hábito.