No tienes acceso a esta clase

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

¿Qué es un componente?

9/23
Recursos

Los componentes forman parte de un todo, así como las velas de un pastel, el piso de los edificios o las partes de un motor cada una con su funcionalidad. Lo mismo pasa con las interfaces, vamos a construir diferentes elementos y herramientas para que los usuarios logren cumplir sus objetivos.

Todos los componentes tienen una entrada y una salida, el usuario realiza una acción y los elementos deben responder de alguna forma (feedback), esta es la forma de comunicamos con los usuarios, trabajamos haciendo conversaciones para informar que todo esta funcionando correctamente y qué pasos deben seguir a continuación. Este proceso de comunicación lo conocemos como interacción.

Partes de un componente:

  • Nombre (así evitamos diferentes definiciones y establecemos los objetivos y funciones de nuestros componentes)
  • Descripción y solución (en qué problema estamos trabajando y cómo deberíamos implementar estas soluciones)
  • Behavior (el comportamiento de nuestros componentes dentro del sistema)
  • States (las variaciones y distintos comportamientos que pueden tener nuestros componentes dependiendo de su contexto)

Aportes 74

Preguntas 11

Ordenar por:

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

En el diseño “antiguo” (el diseño gráfico) los afiches o las impresiones que construimos son estáticas, no tienen ningún tipo de interacción, pero todo esto cambia en el diseño digital, nuestra prioridad y nuestro trabajo más importante es comunicarnos con los usuarios para darles feedback sobre las acciones que están realizando, así también recibimos feedback por parte del los usuarios y podemos construir productos de máxima calidad.

Ctrl + Shift + L o Cmd + Shift +L para dark mode

Un componente forma parte de un todo. Un componente tiene una entrada y una salida. La entrada seria el punto donde el usuario empieza a utilizar el componente y la salida seria el feedback que da el componente en base a la acción del usuario. Ej: Tenemos un componente que tiene la funcionalidad de Buscar un usuario de nuestro sistema. La entrada es cuando se coloca los datos del usuario que queremos buscar y la salida es cuando el componente nos arroja resultado de la búsqueda.

La conversación entre el componente y el usuario (Entrada y salida) se llama interacción.Los componente deben tener:
* Nombre único
* Descripción (Que funcionalidad y que problema soluciona)
* Behavior: Es un comportamiento que tiene el componente dentro del sistema. (Un ejemplo puede ser, como es el comportamiento en mobile)
* States: Es como se ve el componente cuando se inicia la pagina (Prendido, apagado, desplegado, oculto, con datos por defecto, sin datos por defecto, etc)

Martín Coronel
Diseño UX/UI

Web: http://martincoronel.com/
Facebook: https://www.facebook.com/mcoronel01/
Behance: https://www.behance.net/martincoronel

No se menciona, pero para hacer el efecto de la imagen solo tienen que seleccionar la palabra y Ctrl/Command + E

Muy interesante esto de los componentes

¿Qué es un componente?:
.
Un componente forma parte de un todo. Por ejemplo una habitación de una casa. Fundamentalmente un componente tiene una entrada y una salida -> Feedback que se le da al usuario.
.
El feedback es una interacción entre persona y máquina. Es el “Yo quiero” que recibe por respuesta “vas bien o vas mal”.
.
Partes de un componente:
.

  • Nombre: Así establecemos una definición clara y a la vez le damos objetivos y funciones.
    .
  • Descripción: Es la solución que nos brinda el componente para un problema determinado.
    .
  • Behavior: Es el comportamiento que tiene un componente dentro del sistema.
    .
  • States: Son las variaciones que puede tener nuestro componente dependiendo del contexto.

Les dejo la presentación de Brad Frost en donde introduce el concepto de 'Atomic Design’
https://www.youtube.com/watch?v=W-h1FtNYim4

y esta es la herramienta que él mismo desarrolló para poder crear Design Systems efectivos
https://patternlab.io/

Muy bueno este capitulo. Me ayudó a entender varios conceptos!
Es interesante tener en claro la importancia del nombre. Ayuda mucho a la comunicación entre equipos. Sin importar si son programadores, diseñadores o de marketing. Hablando el mismo lenguaje, se agilizan los procesos.

Partes de un componente:

  • Nombre
  • Descripción (de la solución)
  • Behavior o Comportamiento
  • Estado (cómo nace o cómo se ve)

Componentes y el diseño atómico.

Me encanta como la clase, a pesar de ser algo compleja, se vuelve tan amena y se entiende muy bien. Muchas gracias, Rulótico ❤️

Un componente forma parte de un todo. Un componente tiene una entrada y una salida. La entrada seria el punto donde el usuario empieza a utilizar el componente y la salida seria el feedback que da el componente en base a la acción del usuario. Ej: Tenemos un componente que tiene la funcionalidad de Buscar un usuario de nuestro sistema. La entrada es cuando se coloca los datos del usuario que queremos buscar y la salida es cuando el componente nos arroja resultado de la búsqueda.

La conversación entre el componente y el usuario (Entrada y salida) se llama interacción.Los componente deben tener:

  • Nombre único
  • Descripción (Que funcionalidad y que problema soluciona)
  • Behavior: Es un comportamiento que tiene el componente dentro del sistema. (Un ejemplo puede ser, como es el comportamiento en mobile)
  • States: Es como se ve el componente cuando se inicia la pagina (Prendido, apagado, desplegado, oculto, con datos por defecto, sin datos por defecto, etc)

Que crack, justo terminé de ver está clase y me llegó la cena; Rulótico tiene poderes XD

Recomiendo que siempre lean la descripción de la clase, ayuda muchísimo.

Amé esta clase. Estoy trabajando en una empresa retail y todo es un desorden. Voy a guiarme mucho con esto. 😃

¿Qué partes debería tener un componente?

y dentro del behavior digamos que tengo un evento click en el navbar y esto extiende otro menu, esto seria un comportamiento del componente? estaria dentro deeste? o tendria que crear un nuevo componente para documentarlo?(mas que todo seria el menu desplegado del mismo topnavbar pero en version movil)

Así me quedo la documentación del componente:

Componente

ℹ️ Definición
Un componente es un bloque interactivo para crear una interfaz de usuario.

.
Un componente funciona como intermediario semántico que habilita a un usuario para llevar a cabo una acción.
.
La eficiencia de un componente expresará en un porcentaje de utilidad o experiencia de usuario.
.

✨ Concepto clave
La Experiencia de Usuario (UX) expresa el nivel de satisfacción sobre una actividad o flujo de una determinada actividad.

.

Elementos de un componente

.
Identificación

  • Nombre. Identificación y definición mediante la metodología BEM
  • Descripción. Objetivo que resuelve
  • Anatomía. Blue Print del componente que permite sus variantes visuales

.
Intención de uso

  • Jerarquía. Estructura como componente base o contenedor.
  • Comportamiento. Resultados físicos accionables.
  • Estados. Representando las variaciones bajo ciertos contextos.
  • Tema. Guía de representación visual.

No volveré a ver un componente de la misma manera

En el diseño “antiguo” (el diseño gráfico) los afiches o las impresiones que construimos son estáticas, no tienen ningún tipo de interacción, pero todo esto cambia en el diseño digital, nuestra prioridad y nuestro trabajo más importante es comunicarnos con los usuarios para darles feedback sobre las acciones que están realizando, así también recibimos feedback por parte del los usuarios y podemos construir productos de máxima calidad.

La gran diferencia entre los diseños de publicidad y los diseños de software es la Interacción. El diseño de artes para impresión o publicación digital son estáticas a diferencia de el diseño de los componentes de software. Este último tiene el principal objetivo de ayudar a la interacción antes que en la comunicación o decoración visual.

Gracias!

Veo que cambió el orden entre los últimos dos elementos (templates y páginas) no hay un orden específico el cual seguir?

y también veo al final otro título que dice Patrones, (login flow y conversion flow) me pueden aclarar a qué se refieren?

Gracias.

El componente es el medio de interacción entre el usuario y el sistema

Muy buena Explicacion!!! genial!!

buena clase!!!

  • Los componentes forman parte de un todo

  • Todos los componentes tienen una entrada y una salida

  • Realiza un proceso de comunicación llamado interacción

Porque no nos pasan el link con toda la documentacion armadita ?

gracias

Components

Components are the reusable building blocks of our design system. Each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences.
https://atlassian.design/components/

Tambien pueden usar Zeroheight para documentar sus design systems. <https://zeroheight.com/>
Los componentes forman parte de un todo, así como las velas de un pastel, el piso de los edificios o las partes de un motor cada una con su funcionalidad. Lo mismo pasa con las interfaces, vamos a construir diferentes elementos y herramientas para que los usuarios logren cumplir sus objetivos. Todos los componentes tienen una entrada y una salida, el usuario realiza una acción y los elementos deben responder de alguna forma *(feedback)*, esta es la forma de comunicamos con los usuarios, trabajamos haciendo conversaciones para informar que todo esta funcionando correctamente y qué pasos deben seguir a continuación. Este proceso de comunicación lo conocemos como **interacción**. Partes de un componente: * Nombre *(así evitamos diferentes definiciones y establecemos los objetivos y funciones de nuestros componentes)* * Descripción y solución *(en qué problema estamos trabajando y cómo deberíamos implementar estas soluciones)* * *Behavior* *(el comportamiento de nuestros componentes dentro del sistema)* * States *(las variaciones y distintos comportamientos que pueden tener nuestros componentes dependiendo de su contexto)*

Un componente, en términos simples, es como una pieza clave en la construcción de algo más grande, similar a las velas en un pastel o las partes de un motor. En el contexto de interfaces digitales, los componentes son herramientas que creamos para que los usuarios logren sus objetivos.
Cada componente tiene una entrada (la acción del usuario) y una salida (la respuesta o feedback del componente). Es como una conversación: el usuario toma una acción, y el componente responde. Para entender y manejar estos componentes, necesitamos conocer su nombre, su descripción y solución (para qué sirve y cómo soluciona un problema), su comportamiento en el sistema, y las diferentes variaciones que puede tener según el contexto. Así, al construir interfaces, estamos ensamblando estas piezas, asegurándonos de que se comuniquen de manera efectiva para que los usuarios logren lo que desean.

Este archivo y organización es increible en documentar cada componente/seccion definitivamente lo usare en mi proyecto

Importante que el diseño este relacionado directamente con la interacción ❤️

09. ¿Qué es un componente?

  • Un componente forman parte de un todo
  • Un componente forman parte de un motor y cumplen un objetivo
  • Un componente tiene una entrada y salida.
  • A diferente de una molécula, tiene una función de entrada y salida
  • El usuario interactúa con el componente
  • Componente
    • Documentar cada átomo, moléculas y organismos
    • Nombre propio
    • Descripción (Solución/problema)
    • Comportamiento (su forma de operar o como interactúa / adapta)
    • Prototipo (embed de figma)
    • Estados (Cómo se ve en diferentes estados)

Está bueno el curso, aunque en el diseño gráfico si existe interacción, por un lado pueden existir diseños complejos que interactúan con la arquitectura o elementos, o el diseño de simbología que ayuda a comunicar una acción o behaviour a las personas que estén en la calle pueden ser conductores, peatones, etc.

Para dar nombres a los componentes hay que recordarnos de las Nomenclaturas de Programación.

Nomenclaturas de programación: camelCase, PascalCase, snake_case

Las nomenclaturas son formas de llamar a elementos, sentencias o acciones más específicas. En programación tenemos diferentes formas que a veces son aplicadas como “reglas” sobre las cuales llevamos uniformidad en el código y un estándar de trabajo especialmente dentro de equipos de desarrollo de software.

camelCase o CamelCase

Es una práctica de escritura que consiste en la unión de dos o más palabras sin espacios entre ellas, pero las diferencian una letra mayúscula inicial a partir de la segunda palabra, por ejemplo: miNombreEs.

Este nombre está dado porque forman con las letras mayúsculas iniciales la estructura de un camello que sube cuando hay un inicio de palabra y baja durante su definición.

PascalCase

Es similar a camelCase con una variación bastante simple: desde la primera letra de la frase se inicia con mayúscula cada palabra, sin embargo se mantiene la práctica de no tener espacios entre palabras y cada palabra siempre empieza con su primera letra mayúscula. Por ejemplo: MiNombreEs.

snake_case

La nomenclatura “serpiente” es definida de esta forma porque siempre la usamos sobre el piso, esto quiere decir que las letras siempre las minúsculas y las diferentes palabras que compongan el nombre o la definición que se desea dar están separadas por un guion bajo de esta forma: mi_nombre_es.

Nota extra: Hay que recordar que CSS también tiene arquitecturas como BEM. Los cuáles pueden trabajar en conjunto con Atomic Design u otros paradigmas. Les dejo un artículo interesante que encontré en el tema.
https://www.lullabot.com/articles/bem-atomic-design-a-css-architecture-worth-loving

Componentes reutilizables se basan en átomos.

Me encanta la actitud que tiene Rulótico para explicarte todo!!!

  • En el diseño gráfico, estático (y ya antiguo para el siglo XXI), no había realmente interacción entre los impresos y los consumidores o potenciales clientes, simplemente se imprimía algún elemento estático y quedaba a la vista sin generar una comunicación interactiva o de ida y vuelta.

  • En el diseño digital, interactivo y dinámico, ayudado por las nuevas tecnologías basadas en internet, se genera un constante flujo de información y comunicación interactiva, donde los usuarios experimentan los productos digitales y dan su feedback al respecto, permitiendo la continua iteración de los mismos.

¿Qué es un componente?

Un componente forma parte de un todo

Un componente tiene una entrada y una salida (feedback)

Feedback:

Es una conversación entre persona y máquina. El componente te dice que puedes y no hacer y el usuario lo hace

¿Qué debería tener un componente?

  • Nombre
  • Descripción / solución
  • Behavior (comportamiento que tiene un componente dentro del sistema)
  • States

No tengo acceso al Notion 😦

Sugerencia al final del video aceptada: cafe a las 5:55am

Al igual que otros componentes de la interfaz de usuario, los componentes de diseño definen las propiedades de diseño de la interfaz del juego. El sistema de interfaz de usuario incluye cuatro componentes de diseño para organizar los elementos: Columna de diseñode Fila de diseñode Cuadrícula de diseño, y Celda de diseño. También puede anidar componentes de diseño.

Temas

LayoutColumn
LayoutRow
LayoutGrid
LayoutCell
LayoutFitter
Componentes de diseño de anidación

7. Componentes

Forma parte de un todo:

Partes primordiales de un componente: Tiene una entrada y una salida.

El feedback es una conversación entre el componente y el usuario:

Esto se le llama interacción:

Un componente debe tener:

  1. Un nombre: Para que sea identificable por todos.
  2. Descripción/solución: Qué objetivo o problema estamos solucionando.
  3. Behavior: Es el comportamiento que tiene en el sistema.
  4. States: Cómo nace el componente, cómo se ve, (prendido, apagado, estado navideño).

Un componente forma parte de un todo, como el piso de un edificio, un componente tiene una entrada y una salida. Una entrada es algo que lo afecta o modifica y la salida es el feedback que da hacia el usuario, el feedback es que se arrastra o sucede algo.

Feedback es una interaccion entre el usuario y la maquina

Comunicación entre componente y usuario se llama interacción.

Muy buena clase, bastante útil.

Como se batalla con eso del nombre para cada cosa. Es verdad que en muchos equipos luego cada quien le llama a las cosas como les acomoda más llamarles.

Excelente clase.

Buena explicación

Deberìan actualizar el notion para ver el que el tiene

También pueden ser métricas para ver en dónde se atoran o en dónde se llegan a perder, así evaluar su funcionalidad e iterar para mejorar el diseño 😄

Excelente explicación de los componentes.

Les comparto mis apuntes hasta el momento. Los puse publicos para que el que guste acceder lo haga sin problema. [Aqui]

⚡Pueden ver todas las notas de la clase en este Notion, además le agregué recursos extras, espero les guste.

✔También escribí el siguiente tutorial 8 atajados de teclado para ser un máster en Notion.

Yo trabajo en el area de desarrollo, eh realizado varias pagina pero el diseñador solo me pasa el diseño web y mobil y ya, yo debo implemetar los eventos o los estados de los componentes, genial esta clase y que util para los diseñadores y uno para conocer

El behaviour de un componente no debería ser rígido sino contextual (según el contexto). Programación orientada a Aspectos.

Acabaré estudiando matemáticas para ser un buen diseñador. Pero para ser un diseñador sobreasaliente estudiaré teología:

Principios teológicos cos sientan las bases de las leyes del universo de las que de forma procedural emergen de forma sucesiva átomos, moléculas, organismos, templates, páginas y marketplaces que constituyen el entorno donde tienen lugar las stories.

“Forma parte de un todo”. No lo podrías decir mejor. Porque, al crear cada componente, tienes que pensar en su función, interacción, experiencia, CTA, objetivo, sicología del color, conversión, etc. Les recomiendo complementar con cursos de marketing, escritura…etc. Un “pequeño” botón, puede generarte mucho en tu sitio, app…etc.

Notion: - ¿Cómo dividir el Sistema? - Documentación de un componente

¿Profile page no sería parte de la páginas en lugar de estar indicada como template?

No se olviden de darle un nombre que se pueda utilizar tanto en documentación como en programación para que puedan tener un diseño mucho más ordenado y funcional. 😃

Un componente es parte de un todo.
Por ejemplo.
Una tecla de tu teclado es un componente
Ya que la tecla tiene 1 función especial y junto a todas las demás hacen un teclado.

ne memes, este prof es muy cool

La lectura recomendada requiere acceso

Un componente forma parte de un todo. En un motor, cada pieza forma parte de el y cada pieza tiene una función. Pasa lo mismo con las interfaces que cada diseño tiene herramientas que ayudaran al usuario.

¿Cuales son las partes de un componente?

  • Entrada:

    Es algo que le afecta y lo modifica como el usuario.

  • Salida:

    Es el feedback que da al usuario.

Actualmente una persona disena un componente, se programa y el usuario da feedback a los disenares y programadores.

Unas de las partes que debe de tener un componente:

  • Nombre: Este debe de dar a entender que es o como se usa.
  • Descripción: Aquí ira la solución al problema al cual le damos a esta misma.
  • Behavior: Es el comportamiento que tiene un componente dentro del sistema.
  • States: Las variaciones y distintos comportamientos que pueden tener nuestros componentes dependiendo de su contexto

El link de platzi hacia el workspace de Notion tiene un problema. Tal vez el link que se compartió es privado.

Apuntes de la clase:
Un componente forma parte de un todo y tiene una función. Un componente tiene una entrada y una salida. La entrada es algo que lo afecta y la salida es el feedback para el usuario.

El Feedback es una conversación entre persona y máquina. A esta conversación se le llama interacción.

Los componentes deben tener un nombre. Después debe tener una descripción. Siguiente, debe tener behavior (cómo se comportará dentro del sistema). Luego tenemos los estados(cómo se ve).

La descripción es importante para que quede claro a qué nos referimos, ya que cada persona puede darle una definición diferente dependiendo del departamento en el que estén.

Recomendación: escribir el nombre en inglés y con guión bajo. Así sirve tanto para documentar como para programar.

Espero que pronto saquen un curso de Notion 😃

El feedback es una interacción entre persona y maquina, el componente te dice puedes o no puedes, se hace o no se hace mientras que el usuario sigue intentando, esto es interacción.

Creo que entendi mas lo del componente con el ejemplo del motor

Gran clase!