Usabilidad, consistencia y eficiencia

No tienes acceso a esta clase

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

Si ya tienes una cuenta,

Recursos

¿Por qué es importante la usabilidad en el diseño de productos digitales?

La usabilidad es un factor clave en el diseño de productos digitales que no solo afecta la estética, sino también la eficiencia y la efectividad de tus productos. Diseñar un producto digital no es un proceso sin costo, cada cambio, por pequeño que sea, implica tiempo y recursos. La usabilidad se refiere a cómo de fácil y eficiente es para un usuario cumplir con sus objetivos utilizando un producto o sistema. Imagina tener la capacidad de crear experiencias digitales satisfactorias y sin complicaciones. Esto no solo mejora la experiencia del usuario, sino también el rendimiento del producto en el mercado. Fortalecer tus habilidades en usabilidad puede ser la diferencia entre un producto exitoso y uno que no logre enganchar a su audiencia.

¿Cómo estimar tareas en diseño?

La estimación de tareas en diseño es un arte que requiere práctica y precisión. Se trata de prever el alcance de tareas para reducir errores y optimizar el tiempo. ¿Cómo se logra esto de manera efectiva?

Dividir tareas grandes: Si una tarea va de A a C, es preferible subdividirla en tareas más manejables, como de A a B y luego de B a C. Esto reduce el margen de error y facilita las pruebas y ajustes.
Determinación del alcance: Comprender exactamente lo que se necesita antes de comenzar ayuda a evitar intervenciones costosas en etapas avanzadas del proyecto.
Iteración rápida: Realizar entregas rápidas permite probar conceptos con los usuarios, recolectar feedback y realizar mejoras continuas.

¿Más personas significa menos tiempo?

Un error común es pensar que más personas en un proyecto significa que se completará más rápido. Sin embargo, la realidad es que con más integrantes, la comunicación y los procesos se vuelven más complejos. La eficiencia no siempre proviene del número de personas, sino de cómo se gestiona el equipo.

Primera directriz: En equipos pequeños, la comunicación es directa y sencilla. En equipos grandes, cada decisión requiere consensos extensos y mayor coordinación.
Impacto de los cambios: Incluso modificaciones menores como cambiar el color de un botón pueden requerir pruebas exhaustivas y coordinación, desde el equipo de diseño hasta ingeniería y control de calidad.
Pautas de organización: Tener un sistema sólido y definido en la estructura del equipo es esencial para el éxito y la eficiencia.

¿Cómo mantener la consistencia en el diseño?

La consistencia es vital para que los usuarios se familiaricen rápidamente con tus productos. Aquí es donde un sistema de diseño se vuelve crucial. Un sistema de diseño es un conjunto de elementos reutilizables que te ayuda a crear de manera coherente funcionalidades a nivel de producto.

No reinventar la rueda: Una vez diseñado un elemento que funciona, reutilízalo. Evita rediseñarlo de cero cada vez.
Guías visuales: Define guías tipográficas y paletas de colores claras para diferentes elementos del diseño como títulos, textos, botones o errores. Esto evita la proliferación de estilos y tamaños.
Diseño atómico: Esta metodología sugiere construir desde los componentes más pequeños como átomos para llegar a organismos y páginas completas, permitiendo flexibilidad y escalabilidad.

¿Qué son los design tokens?

Antes del nivel más pequeño del diseño, que son los átomos, se encuentran los design tokens. Estos son entidades con nombre que almacenan atributos de diseño visual y permiten mantener un sistema visual escalable.

Ejemplos de atributos: Tamaño, interlínea, tipografía, color (RGB o hexadecimal), y espaciado.
Ventajas: Al utilizar tokens en lugar de valores fijos en el código, logras consistencia en aplicaciones web y nativas, ya sea en iOS o Android.

Incorpora estas prácticas en tus proyectos de diseño para optimizar tu flujo de trabajo y garantizar productos usables, consistentes y eficaces. ¡No te detengas aquí! Continúa educándote en el fascinante mundo del diseño de productos digitales y descubre cómo puedes hacer la diferencia.

Aportes 23

Preguntas 1

Ordenar por:

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

Lara Ibarra Carballude

hace 2 años

Brian Ortiz

hace 2 años

Mis notas de clase:

Cuanto más pequeña sea la tarea, mejor se optimiza la tarea. Más gente no es igual a menos tiempo, se hace más compleja la comunicación.
No reinventes la rueda, usa los patrones que funcionan. La organización es básica para tener consistencia: colores (paletas), tipografía (jerarquías).
Los sistemas de diseño genera patrones para usar una y otra vez para hacer funcionalidades, un trabajo modular (diseño atómico).

Jesús Manuel Pastor Pacheco

hace 2 años

¡Excelente clase!
No conocía el paso de design tokens antes de atomic design, tiene mucho sentido.

Carla Andrea Torrejón

hace 2 años

Mis notas:Usabilidad, consistencia y eficiencia ### Productos digitales: * Construir productos digitales tiene un costo. * Tienen costos diferentes a los productos físicos. ### Tiempo y oportunidad: * Cuanto más pequeña sea la tarea, mejor se optimiza la tarea y menos errores tenemos. * Centrarnos en tareas más pequeñas y entregar más rápido, para que podamos probar, testear con usuarios, es una de las claves en el diseño de producto. * Más gente no es igual a menos tiempo, se hace más compleja la comunicación y se necesitan más procesos. ### Necesitamos ser eficientes: * Cada decisión de diseño tiene un impacto en cómo construimos productos. * No reinventes la rueda, si diseñas algo no vuelvas a rediseñarlo una y otra vez. (si encuentras algo que te funcione, utilízalo siempre en tu producto). ### Tipografía y colores: * La forma más básica de eficiencia para diseñadores y desarrolladores. * **La organización es básica**, tener un sistema sólido es muy importante, simplemente teniendo una buena guía tipográfica y una buena paleta de colores es un buen punto de partida para tener un sistema organizado. * Tomar la decisión una vez nos va a ayudar a ser consistentes y evitamos desiciones arbitrarias. ### Sistemas de diseño: * Permite establecer patrones y contar con una serie de elementos que se pueden y se deben reutilizar para crear funcionalidades, un trabajo modular (diseño atómico).

Retri Team

hace 2 años

Design Tokens: son entidades con nombre que almacenan atributos del diseño visual - tamaño , interlinea, tipografía, color, rgb, espaciado. Ayudan a mantener un sistema visual escalable y consistente. Los tokens nos permiten que la app sea coherente en web, ios o android.

Jorge Almanza

hace 2 años

Pedro Isaac Aguilar

hace 2 años

La organización es básica. La forma más básica de eficiencia para diseñadores y desarrolladores es comenzar teniendo una guía tipográfica y una paleta de colores como primer paso para después construir un Design System = Toma la decisión una vez, evita decisiones arbitrarias, crea consistencia y básate en el diseño atómico (construye de menos a más) y design tokens (atributos de diseño visual anteriores a los átomos, ejemplos: interlineado, tamaño, fuente tipográfica, modelo de color RGB o hexadecimal, valores hexadecimales de color, etc.).

Gaby Condori Ccaso

hace 9 meses

Aquí tienes una traducción y explicación básica de cada uno de los componentes y cómo se utilizan en un sistema de diseño orientado a componentes: ### Átomos (Atoms) Los átomos son los bloques de construcción más básicos en un sistema de diseño. Incluyen elementos HTML simples como botones, etiquetas, campos de entrada, etc. **Ejemplo:** * Botón * Campo de entrada * Etiqueta ### Moléculas (Molecules) Las moléculas son combinaciones de átomos que trabajan juntas como una unidad. Pueden ser tan simples como un campo de entrada con una etiqueta o más complejas, dependiendo de la cantidad de átomos combinados. **Ejemplo:** * Campo de entrada con un botón de envío * Grupo de etiquetas de radio ### Organismos (Organisms) Los organismos son componentes relativamente complejos compuestos por moléculas y/o átomos. Pueden formar secciones completas de una interfaz, como un encabezado, un pie de página, o una tarjeta de producto. **Ejemplo:** * Encabezado con logo, barra de navegación y campo de búsqueda * Tarjeta de producto con imagen, título, descripción y botón ### Templates (Plantillas) Las plantillas son disposiciones de organismos y componentes que definen la estructura y el diseño de una página sin contener contenido real. Son esquemas que muestran cómo se dispondrán los componentes en la interfaz. **Ejemplo:** * Diseño de página de inicio * Esquema de página de producto ### Pages (Páginas) Las páginas son instancias concretas de plantillas que contienen contenido real. Representan lo que el usuario final verá y con lo que interactuará. **Ejemplo:** * Página de inicio de un sitio web con contenido real * Página de detalles de un producto específico Esta metodología ayuda a crear un sistema de diseño modular y escalable, facilitando la consistencia y reutilización de componentes en toda la aplicación o sitio web.

Ambar Gonzalez

hace un año

El Design System de Microsoft: Fluent <https://fluent2.microsoft.design>

Daniel Andriy Carrillo Marulanda

hace 2 años

Sistema de diseño: Nos permite establecer patrones y contar con una serie de elementos que se pueden reitilizar para crear funcionalidades

Carlos Ramos

hace 10 meses

**Clase 14 - Usabilidad, consistencia y eficiencia** * **¿Construir productos digitales tiene un costo?** * Sí, pero este es diferente al de un producto físico. * **¿Calcular el tiempo que nos llevará realizar una tarea de desarrollo/diseño es una de las cosas más difíciles?** * Sí. * **¿Qué podemos hacer para evitar errores a la hora de calcular el tiempo que llevará realizar una tarea de desarrollo/diseño y por qué?** * Dividir lo más que se pueda esta tarea en pequeños pasos. * Esto nos permitirá tener entregables que nos permitan testar nuestro trabajo de manera rápida. * **¿Tener más personas trabajando es igual a hacer el trabajo más rápido?** * No. * **¿Por qué tener más gente trabajando no nos ahorra tiempo?** * Porque esto hace que el proceso de comunicación con tanta gente sea engorroso, haciendo que tomar una decisión sea muy difícil. * **¿Tomar una pequeña decisión tiene un gran impacto en el trabajo de diseño/desarrollo?** * Sí. * **¿Qué se recomienda hacer para que seamos eficientes en el trabajo de diseño/desarrollo?** * No reinventar la rueda, es decir, si encontramos un patrón que nos sirve para trabajar, lo mejor es usarlo en vez de estar creando desde 0 en todo momento. * **¿Cuáles son los elementos básicos para tener una buena organización en diseño/desarrollo?** * Una guía tipográfica. * Paleta de colores definida. * Escala tipográfica. * **¿Qué son los sistemas de diseño?** * Es un sistema que nos permite definir patrones y contar con una serie de elementos que se pueden y deben reutilizarse para crear funcionalidades. * **¿Para qué nos sirve la modularidad de los sistemas de diseño?** * Esto nos permite crear una unidad mínima para llegar a componentes más complejos y poder trabajar de una forma lineal con el equipo de diseño/desarrollo. * **¿En qué están basados los sistemas de diseño?** * En el diseño atómico. * **¿Cuáles son los pasos por los que se debe pasar el diseño atómico?** * Átomos. * Moléculas. * Organismos * Templates (plantillas) * Páginas. * **¿Cuál es el nuevo paso que se está agregando al inicio del diseño atómico?** * Design tokens. * **¿Qué son los Design tokens?** * Son entidades con nombre que almacenan atributos de diseño visual, por ejemplo, tamaño, interlínea, tipografía, color o espaciado. * **¿Para qué nos sirven los Design tokens?** * Para mantener la coherencia visual en nuestro producto digital

Flavia Di Giorgio

hace 2 meses

Usabilidad, consistencia y eficiencia \*Producto digital \*Construir productos digitales tiene un costo Tienen estos diferentes a los productos físicos \*Tiempo y oportunidad \*Por que debería construir esto en lugar de aquello? \*Cuanto tiempo me llevara? +Centrarnos en tareas mas pequeñas es clave en el diseño del producto \*Mas gente necesita mas comunicaciones y mas proceso \*Necesitamos ser eficientes: \*Cada decisión de diseño tiene un impacto en como construimos productos \*No reinventes la rueda Diseña una vez las mismas cosas \*Tipografía y colores \*Tener un sistema solido \*La forma mas básica es eficiencia para diseñadores y desarrolladores \*Una paleta de colores definida Titulo-botones etc \*toma la decisión una vez Consistencia Evita decisiones arbitrarias Un sistema de diseño te permite establecer patrones y contar con una serie de elementos que se pueden y se deben reutilizar para crear funcionalidades La modalidad del sistema es lo que permite crear una unidad mínima hasta componentes muchísimo mas complejos y establece reglas que nos ayudan a trabajar a través de unos principios en equipo de forma lineal. Este proceso esta basado en : DISEÑO ATOMICO: DESDE ATOMOS, QUE FORMAN MOLECULAS, QUE FORMAN ORGANISMOS, QUE FORMAN TEMPLATES Y FORMAN PAGES. SE AÑADO UN PASO ANTERIOR DESIGNE TOQUES: SON ENTIDADES CON NOMBRES QUE ALMACENAN ATRIBUTOS DE DISEÑO VISUAL. Los mas comunes tamaño, interlinea, color, valor, espaciado. Lo vamos a usar en lugar de valores jarcodeados en nuestro código para mantener un sistema visual escaladle y consistente. Estos token nos permite que nuestra aplicación sea coherente tanto si estamos utilizando en app web o nativa en ido o androide

Carolina Gómez

hace un año

* Productos digitales: Construir productos digitales tiene un costo, tienen costos diferentes a los productos físicos. * Aunque sea diferente a un producto físico, cada pixel que movemos tiene un costo, por eso es importante como estimamos una tarea, el como hacemos algo, como nos organizamos, como particionamos nuestra tarea en pequeñas partes menos probabilidad de error tenemos. si tenemos que hacer una tarea que va de A a C, o si hacemos primero de A a B y luego de C a B, gestionar organizadamente el tiempo es una de las claves de el diseño de producto. * Tiempo y oportunidad: ¿Por que debería construir esto, en lugar de aquello? * ¿Cuánto tiempo me llevará? * Pensamos que MÁS GENTES ES IGUAL A MENOS TIEMPO, no siempre es asi, más gente se necesita más tiempo de comunicación y más procesos, al estar trabajando con 1, 2 o 3 diseñadores, o con 1, 2 o 3 desarrolladores es un trabajo complejo poder organizar tantas personas a la vez, se complican las cosas. * Necesitamos ser eficientes: Cada desición de diseño tiene un impacto en cómo construimos productos. * Cualquier cambio puede parecer muy sencillo pero cada cambio aunque sea pequeño requiere de un gran trabajo que conlleva mucho trabajo. * No reinventemos la rueda, tratemos de DISEÑAR UNA VEZ LAS MISMAS COSAS, y asi utilizaremos estos patrones varias veces. * Tipografía y colores: La forma más básica de eficiencia para diseñadores y desarrolladores. * Tener un sistema sólido es muy importante, con tener un sistema de tipografía definido desde el principio y una paleta de colores definida para todas las aplicaciones como botones, saber sus tamaños y que colores utilizo aterriza el proceso y nuestros sistemas de diseño. * Toma la decisión una vez: Consistencia y evitar decisiones arbitrarias. * Modularidad de el sistema nos da principios con los que podemos trabajar: * Design Tokers: Entidades con nombre que almacenas diseños de identidad visual, que son tamaño, interlínea, tipografía, color, espaciado. * Atomos - Atoms * Moléculas - Molecules * Organismos - Organinms * Templates * Pages

Godward Escobar Galvis

hace 18 días

Productos digitales: Cada intervención que nosotros hacemos como diseñador y cada movimiento hasta un simple pixel tiene su costo Tiempo y oportunidad: Centrarnos en tareas más pequeñas para entregar más rápido para poder probar y textear con usuarios es una de las claves en el diseño de producto Más gente necesita más comunicación más procesos más dirección sí si se utilizan más personas las tareas se multiplican por 10 Necesitamos ser más eficientes: Cada decisión de Diseño tiene un impacto en cómo construimos nuestros productos No reinventes la rueda...Diseña una vez la misma cosa, Tipografía y colores: simplemente es un buen punto de partida para tener el sistema organizado Toma la decisión una vez: Esto nos ayuda a ser más consistentes y evitar decisiones arbitrarias Los sistemas de Diseño: Nos permite establecer patrones y contar con una serie de elementos que se pueden usar y utilizar para generar diversas funcionalidades la modularidad del sistema nos permite crear desde la unidad mínima hasta elementos más complejos y establece reglas que nos ayudan a trabajar en principios y trabajar en equipo de una manera mas coherente Este sistema está basado en lo que entendemos como diseño atómico los átomos forman moléculas, las moléculas forman organismos, los organismos conforman templates y los templates forman páginas Aunque últimamente se añadió un paso anterior que se define como los Design Tokens los cuales almacenan atributos de diseño visual los más comunes, tamaño, interlínea, tipografías o fuentes, el color, espaciado etc. de manera que podemos mantener un sistema visual muy consistente.

jop media

hace 3 meses

![](https://static.platzi.com/media/user_upload/Disen_o_sin_ti_tulo__44_-77912b0f-e6db-4b54-aed8-a0f55c0ff305.jpg)

Mauro Nava

hace un año

Hardcodeado: Valor fijo en el código o en un sistema. Este valor no es variable, siempre es el mismo para todas las entidades y objetos.

Josué Ramírez Hernández

hace un año

# **Usabilidad, consistencia y eficiencia** ### Productos digitales Construir productos digitales implica un costo, aunque este costo es diferente al de los productos físicos. El tiempo y la oportunidad son factores clave en la toma de decisiones durante el proceso de desarrollo. ### **Tiempo y Oportunidad** Es crucial preguntarse "¿Por qué debería construir esto en lugar de aquello?" y evaluar cuánto tiempo llevará cada opción. Más personas involucradas no garantizan menos tiempo; de hecho, más personas pueden requerir más comunicación y procesos. ### **Eficiencia** La eficiencia es fundamental en el diseño y desarrollo de productos digitales. Cada decisión de diseño impacta en cómo construimos los productos y, por lo tanto, en su usabilidad y consistencia. ### **No Reinventes la Rueda** Es importante no reinventar la rueda al diseñar productos digitales. Aprovechar sistemas de diseño existentes, mejores prácticas y estándares de la industria puede ahorrar tiempo y esfuerzo. ### **Tipografía y Colores** La tipografía y los colores son elementos esenciales en el diseño de productos digitales. Utilizar un sistema de diseño coherente para la tipografía y los colores puede mejorar la eficiencia tanto para diseñadores como para desarrolladores. ### **Sistema de Diseño** Un sistema de diseño es un conjunto de componentes, reglas y directrices que garantizan la coherencia y la eficiencia en el diseño y desarrollo de productos digitales. Ayuda a mantener la consistencia visual y funcional en todo el producto. ### **Diseño Atómico** El diseño atómico es un enfoque de diseño que descompone las interfaces en elementos más pequeños y reutilizables, llamados átomos. Estos átomos se combinan para formar componentes, que a su vez se combinan para crear interfaces completas. Este enfoque promueve la consistencia y la eficiencia en el diseño de productos digitales.

José David Albarrán

hace un año

### Los design Tokens Son entidades con nombre que almacenan atributos con diseño visual. Los más comunes pueden ser desde el tamaño, interlínea, tipografía, el color: ya sea el valor rbg o hexadecimal, o el espaciado.

Alma Buyoli

hace un año

Yo he utilizado Atomic Design en los proyectos que he colaborado.