Fundamentos del Diseño Digital: Pantallas y Color

2/20
Recursos
Transcripción

¿Cómo afecta el diseño digital el hecho de trabajar con pantallas?

El diseño digital ofrece un universo de posibilidades, pero también introduce retos únicos que debe enfrentar cualquier profesional. A diferencia del diseño en papel, trabajar para plataformas digitales requiere una comprensión de las limitaciones inherentes a las pantallas. No solo varían en tamaño y forma, sino también en cómo interactúan con condiciones externas como la luz ambiental y el estado anímico del usuario. Estas variables pueden influir significativamente en la experiencia de usuario. Así que, antes de sumergirse en el diseño digital, es crucial comprender cómo afectan las pantallas el proceso creativo.

¿Qué es un pixel y por qué es importante?

El pixel es la unidad gráfica digital más pequeña que existe. Cada imagen que vemos en pantalla está compuesta por millones de estos pequeños puntos, y entender su funcionamiento es esencial para cualquier diseñador gráfico. Los pixels trabajan en conjunto a través de una matriz para presentar la información visual en las pantallas. Cada pixel emite luz utilizando una combinación de tres colores primarios: rojo, verde y azul (RGB). Este conocimiento permite a los diseñadores manipular colores y brillos para lograr los efectos visuales deseados.

¿Qué es la resolución de pantalla?

Hablamos de resolución para describir la cantidad de pixels que una pantalla puede mostrar. Estos se expresan generalmente como ancho x alto, por ejemplo, 1440 x 990. Esta definición actúa como coordenadas que le indican a la computadora cómo utilizar los pixels para representar cierta información. La resolución puede cambiar drásticamente la percepción de un diseño, ya que el mismo objeto puede variar en tamaño dependiendo de cuántos pixels se utilicen para representarlo.

¿Cómo influyen la densidad de pixels y el color en el diseño?

La densidad de pixels o PPI/DPI (pixels por pulgada) es un factor crucial al representar imágenes en dispositivos de pantallas de alta densidad, como teléfonos iPhone. Estas pantallas utilizan más pixels para mostrar la misma cantidad de información, lo que resulta en una imagen más nítida. Esta conversión automática que efectúan los sistemas operativos modernos significa que los diseñadores no siempre necesitan preocuparse por este aspecto técnico, ya que el software ajusta automáticamente las imágenes a la resolución del sistema.

¿Cómo se manipula el color en el diseño digital?

En el mundo digital, el manejo del color es fundamental y algo diferente a lo que aprendimos en los libros de arte tradicional. Aquí, los colores primarios son rojo, verde y azul. En lugar de ser sustractivos, como en los medios impresos, en los medios digitales son aditivos. Al mezclar estos tres colores en sus valores máximos, se obtiene blanco, y no negro, como sucede en el sustractivo. Esto plantea un enfoque completamente distinto al crear paletas de color efectivas en el diseño digital.

¿Qué son los espacios de color?

Los espacios de color como sRGB son fundamentales para asegurar que el color que se diseña es el mismo que el usuario verá en su dispositivo. Los espacios de color son conjuntos específicos de colores que pueden ser reproducidos por un dispositivo. Aunque nuestros ojos pueden ver una variación infinita de colores, las pantallas están limitadas a ciertos conjuntos. Comprender y trabajar dentro de los espacios de color es vital para mantener la consistencia en el diseño gráfico digital.

¿Cómo optimizar el diseño digital?

Para optimizar el diseño digital, es crucial conocer las limitaciones y capacidades del hardware y el software. Use herramientas de diseño que respeten la resolución del dispositivo, aplique teorías de color basadas en el modelo RGB, y asegúrese de trabajar siempre en el espacio de color adecuado para el medio en el que su diseño será visualizado. Además, aunque los sistemas pueden escalar imágenes automáticamente, mantener la alta calidad y definición desde el inicio puede marcar una gran diferencia en el resultado final.

El mundo digital es vasto y está lleno de posibilidades. Equiparse con el conocimiento necesario sobre pixels, resolución, color y espacios de color permite a cualquier diseñador aprovechar al máximo este apasionante campo. Sigamos aprendiendo y explorando este dinamismo que nos ofrece el siglo XXI.

Aportes 52

Preguntas 5

Ordenar por:

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

Resumen da la clase:

Las pantallas son límitaciones (no se controla el tamaño de la pantalla que utilizará el usuario, ni el entorno, situación en la que el usuario va a interartuar, sonido, luz, emociones) con las que nos vamos a encontrar en el mundo digital.

El pixel es la unidad grafica digital más pequeña, la cual se constituye por un punto. Cada pixel emite una luz combinando el rojo, verde y azul.

Pantallas:

  • Relación de aspecto: habla sobre cuantos pixeles de ancho vs pixeles de alto se muestran.

  • Resolucion: es la cantidad de pixeles que se pueden mostrar en los dispositivos en cuanto al ancho y alto de la pantalla.

  • Densidad de pixels: Cuantos pixeles utiliza una pantalla para representar la informació se llaman Dots per inch/ puntos por pulgada (Dpi) o Pixels per inch/ pixel por pulgadas (Ppi).

Color:

  • Teoría básica del color:

·CMYK: Cian, magenta y amarillo, si se mezclan se consigue el resto de los colores en el espectro. Cuando se mezcla se quita luz. Los colores son sustrativos (quitan)

·RGB (en el diseño digital): Si se mezcla el rojo, azul y verde se consiguen colores y proporciones diferentes. Cuanto más se mezcla más luz se consigue. Los colores son aditivos (agregan)

Cuando se detalla un color se habla de la cantidad de rojo, azul y verde hay en un color.

Los colores tienen valores que varian desde el 0 al 255. Esta información se puede almacenar en la unidad de información más pequeña en una computadora, que el bite.

Espacio de color: Es el conjunto especifico de colores que se pueden manipular en una pantalla determinada. Nos ayuda a trabajar con las mismas limitaciones de la pantalla.

Les dejo mis apuntes de la clase, ojala les sirvan! 😄

El pixel es la unidad mas pequeña de una gran en la que la imagen se compone porque cada pixel individualemnte muestra un color único, siendo así que entre todos juntos pueden recrear lo que vemos en las pantallas.

Las pantallas trabajan emitiendo luz en una combinación de tres colores: rojo, verde y azúl (RGB) siendo estos los colores primarios de emisión de luz, a diferencia de los impresos que trabajan reflejando (o restando) luz, sin impresos en cuatricromía, usando cian, magenta, amarillo y negro (CMYK).

La resolución de una pantalla se refiere a la cantidad de pixeles que tiene esta para mostrar las imágenes (entre más pixeles por pulgada, mayor la resolución). A diferencia de esta, la relación de aspecto hace referencia a las proporciones del ancho y alto de la pantalla (o piezas gráficas o videos) siendo 16:9 (16 pixeles horizontales por cada 9 pixeles verticales) la que de momento es más popular

ahora ya logré comprender de mejor manera lo que se me explicó en su momento en el colegio. Saludos!

**Cuando ** queremos representar un color en el diseño digital existen dos formas de anotarlo:

  • RGB ( cual son los Valores de Rojo , Verde y Azul) , se obtiene mediante la suma luminica de cada color)
  • Hexadecimal ( Valores individuales de cada color existente comprendido entre los valores 0-256

Muy interesante la clase, siempre se aprende algo nuevo

Diseñar en papel no es lo mismo que diseñar para pantallas.

.
Como diseñadores no podemos controlar el tamaño de la pantalla ni el entorno en que el usuario usará nuestro producto.
.
Aquí es donde el pixel aparece.
.
El pixel es la unidad gráfica digital más pequeña. Está constituida por un punto. Toda imagen es representada por pixeles.
Cada pixel emite una luz usando una combinación de los tres colores primarios rojo, azul y verde.
.
Respecto a las pantallas, la relación de aspecto se refiere a cuántos pixeles de ancho mostramos contra cuántos pixeles de alto. Por ejemplo, 16:9.
La resolución es qué cantidad de pixels pueden ser mostrados en cada dispostivo. Comúnmente hablamos de ancho y de alto, por ejemplo 1440 x 990.
La identidad de pixels significa cuantos de estos usa una pantalla para representar la información. Generalmente lo llamamos DPI (Dots Per Inch) o PPI (Pixels Per Inch).
.
Las pantallas de alta densidad de pixeles escalan la información para usar más pixels representando la misma información haciéndolo parecer más nítido. Por ejemplo el iPhone o cualquier dispositivo con pantalla retina usa el doble de pixels para representar la misma información.
.
En el mundo digital los colores primarios son el rojo, azul y verde. Y al mezclarlos en diferentes proporciones podemos conseguir diferentes colores. En este caso no son substractivos (como en el mundo real) sino aditivos. Esto significa que cuánto más sumamos, más luz consiguen. Si mezclamos todo el rojo, todo el azul y todo el verde lo que conseguimos es un blanco.
.
Cada pixel emite luz utilizando una combinación de los tres colores primarios.
Por ejemplo, si le damos un valor de cero a cada color, estos no tienen ningún tipo de luz consiguiendo un negro.
.
Los valores van desde 0 a 255. Hablamos de 256 valores distintos (el 0 también cuenta). Ya que esa información es toda la que se puede almacenar en la unidad de información más pequeña que existe en una computadora, el byte.
Tenemos dos formas de anotarlo:

  1. RGB donde indicamos un valor para cada color (Red, Green or Blue).
  2. Hex o Hexadecimal es el sistema de numeración posicional que tiene como base de 16 en vez de base 10.
    .
    Finalmente, cuando hablamos de espacios de color, se trata del conjunto específico de colores que se pueden manipular en una pantalla determinada. En diseño digital normalmente se utiliza el espacio de color lsrgb.

Introdución al mundo digital

“Diseñar en papel no es lo mismo que diseñar en pantallas”

Las pantallas son una limitación, hay muchas cosas de las que no tenemos control: el tamaño de la pantalla del espectador, el entorno y situación del espectador, la luces, sonidos., etc…

Los pixeles son una unidad gráfica, normalmente se representan como un punto y hacen parte de las pantallas de nuestro día a día, gracias a lo pixeles estás leyendo este comentario, o viendo/escuchando esta clase

Los pixeles emiten luz utilizando los 3 colores primarios; Rojo, Verde y Azul (RGB - Red Green Blue)

Pantallas:

  • Relación de especto: Es la relación de aspecto, el tamaño de las imagenes, cuantos pixeles de ancho mostramos vs los pixeles de alto, gracias a esto podemos tener imagenes Horizontales (16:9), Verticales (9:16), Cuadradas (4:4), etc…
  • Resolución: Es la cantidad de pixeles que se pueden mostrar en un dispositivo.
  • Densidad de Pixels (DPI’s): La cantidad de pixeles que utiliza una pantalla para representar la información, normalmente cuando se tiene una imagen o forma de alta resolución es gracias a que se tiene una alta densidad de pixeles, esto es clave para ver las pantallas con más nitidez/claridad.

Color:

  • Teoría Básica del color: Los colores principales son el Cían Magenta y Amarillo, con ellos podemos generar el resto de colores, PERO, cuando combinamos estos colores perdemos claridad, por eso si combinamos los 3 colores tenemos como resultado el Negro

    En Cambio con las pantallas eso cambia (de hecho TODO cambia) Los colores principales pasan a ser el Rojo, Verde y Azul y entre más mezclamos, más luz conseguimos, si mezclamos los 3, recibiremos un blanco.

    El nombre/codigo de estos colores se crea en base a la cantidad de Rojo, Verde y Azul que tenga. Por ejemplo R:255 sería un rojo puro, en cambio R:0 Sería negro. 255 es el valor máximo porque es la información se puede almacenar en la unidad de nformación más pequeña en una computadora, el bite.

    En disñeo tenemos 2 formas de nombrar/dar el codigo de un color, RGB (La del ejemplo anterior) y Hex (Hexadecímal)

  • Espacios de color: un conjunto especificos de colores que se pueden manipular en una pantalla determinada, las pantallas no tienen la capacidad de mostrar los colores a la perfección, así que hay que tener cuidado ya que muchas veces los colores que ves en tu pantalla no son necesariamente los que se verán en otra.

No entendía el numero 256. Tuve que buscarlo y entendí que es el numero mas grande que se que puede expresar con un byte.

Pixel: Unidad grafica digital más pequeña, represntada por un punto.

¡Qué clase tan buena! Explica teoría, pero entiendes muy fácil con los ejemplos.
Ten en cuenta:
Las pantallas tienen límites.
Diseñar en papel es muy diferente que diseñar para digital o en pantallas: influyen factores como la interacción, la luz, inclusive el estado de animo.

El diseño debe ser funcional porque su propósito principal es resolver problemas y comunicar efectivamente la función de un producto. A diferencia del arte, que se centra en la autoexpresión y la interpretación subjetiva, el diseño busca ser útil y accesible. Un buen diseño no solo es estético, sino que también debe ser comprensible y fácil de usar, cumpliendo con las necesidades del usuario. Por lo tanto, la funcionalidad es esencial para que el diseño cumpla su objetivo de mejorar la experiencia del usuario.

Concreto y preciso

**Pantallas** * **Resolución**: Es el número de píxeles que componen la imagen en pantalla. Se expresa en términos de ancho por alto (por ejemplo, 1920x1080 píxeles, conocido como Full HD) * **Densidad de Píxeles (PPI)**: Es el número de píxeles por pulgada. Cuanto mayor sea el PPI, más nítida será la imagen, especialmente en pantallas más pequeñas como las de teléfonos. * La **relación de aspecto** (o **aspect ratio**, en inglés) es la proporción entre el **ancho** y el **alto** de una pantalla o imagen. Se expresa como dos números separados por dos puntos (por ejemplo, 16:9), donde el primer número indica el ancho y el segundo el alto. No representa dimensiones físicas en unidades como centímetros o pulgadas, sino una relación entre estos dos valores. **Pixel** Un píxel (del inglés **“pixel”**, abreviatura de **“picture element”**) es la unidad más pequeña de una imagen digital. Cada píxel representa un solo punto en la imagen y, en conjunto, muchos píxeles forman la imagen completa que ves en una pantalla o dispositivo. * Cada píxel tiene un color específico, que se representa mediante combinaciones de valores para los canales de color rojo, verde y azul (RGB) * La cantidad de píxeles que componen una imagen determina su resolución. * Un píxel no tiene un tamaño físico fijo. Su tamaño varía dependiendo de la resolución de la pantalla y del dispositivo en el que se visualiza. **Espacios de color** * **RGB (Red, Green, Blue)** * **Modelo Aditivo**: Este modelo se utiliza principalmente en pantallas, como monitores, televisores, cámaras digitales y dispositivos móviles. Se llama “aditivo” porque los colores se crean al **sumar** luz de diferentes longitudes de onda. * Los **colores hexadecimales** son una manera de representar colores en formato digital, especialmente en el diseño web y la programación. **Cómo funcionan los valores hexadecimales:** * **#FF0000**: Rojo puro. FF (255 en decimal) indica que el valor del rojo está al máximo, mientras que el verde y el azul están en 0. * **#00FF00**: Verde puro. 00 en rojo y azul, pero el verde está al máximo. * **#0000FF**: Azul puro. 00 en rojo y verde, con el azul en su valor más alto. * **CMYK (Cyan, Magenta, Yellow, Key/Black)** * **Modelo Sustractivo**: Este modelo se utiliza en la impresión. Se llama “sustractivo” porque los colores se crean al **restar** luz reflejada por la tinta o el pigmento sobre una superficie, como el papel. ![](https://static.platzi.com/media/user_upload/image-4684856b-fb2e-4f27-9396-1ffc2add3d75.jpg)
**Puntos importantes de la clase:** 1. **Limitaciones en el diseño digital**: * Las pantallas varían en tamaño y resolución. * Las condiciones de uso del usuario pueden influir en la interacción con el diseño. 2. **Píxel**: * Unidad gráfica más pequeña en el mundo digital. * Usa una combinación de los colores primarios RGB (rojo, verde, azul). 3. **Relación de aspecto y resolución**: * Relación de aspecto: proporción entre ancho y alto (ej: 16:9). * Resolución: cantidad de píxeles que una pantalla puede mostrar. 4. **Densidad de píxeles (PPI)**: * PPI mide cuántos píxeles se utilizan por pulgada. * Pantallas de alta densidad, como las "retina", muestran más píxeles por pulgada para una mejor calidad. 5. **Color en el diseño digital**: * Colores primarios en digital: RGB (rojo, verde, azul). * Los colores se comportan de manera aditiva en pantallas: mezclando RGB se obtiene más luz. 6. **Representación de colores**: * RGB y hexadecimal son las formas comunes de representar colores. * Valores de color RGB van del 0 al 255. 7. **Espacio de color**: * Conjunto específico de colores que una pantalla puede mostrar. * En diseño digital se utiliza el espacio de color sRGB.

Clase 2 - Introducción al mundo digital


Repaso de la clase


¿Diseñar para papel es igual que diseñar para pantallas?

  • No.

¿Las pantallas son limitaciones que tenemos en el mundo digital?

  • Sí.

¿Por qué las pantallas son una limitación del mundo digital?

  • Porque no somos capaces de controlar:
    • El tamaño de la pantalla en el que vamos a diseñar.
    • El entorno en que el usuario se encuentra interactuando con el producto.
    • Condiciones de luz.
    • El sonido.
    • Estado anímico del usuario.
    • Grado de necesidad que tiene el usuario.

¿Qué es un Pixel?

  • Es la unidad gráfica digital más pequeña y está constituida por un punto.

¿Todas las imágenes son representadas con píxeles?

  • Sí.

¿Existe una relación con la cantidad de píxeles dependiendo del uso?

  • Sí.

¿Qué usan las pantallas para representar la información?

  • Un array de píxeles.

¿Qué usan los píxeles para emitir luz?

  • La combinación de los 3 colores primarios que se usan en diseño digital.

¿Cuáles son los colores primarios que se usan en diseño digital?

  • Rojo.
  • Verde.
  • Azul.

¿Qué aspectos debemos de tener en cuenta en las pantallas y el mundo digital?

  • La relación de aspecto.
  • Resolución.
  • Densidad de pixels.

¿Qué significa la relación de aspecto en las pantallas?

  • Esto significa la cantidad de cuántos píxeles mostramos de ancho versus cuántos píxeles mostramos de alto.

¿Qué significa la resolución en las pantallas?

  • La cantidad de píxeles que podemos mostrar en cada dispositivo.

¿Cuál es la proporción estándar que hay en la resolución de las pantallas?

  • 1440 X 990.

¿Qué significa la densidad de píxeles en las pantallas?

  • Representa la cantidad de píxeles que usa la pantalla para representar la información.

¿Cuáles son las medidas que usamos para medir la densidad de píxeles en una pantalla?

  • DPI = Puntos por pulgada.
  • PPI = Píxeles por pulgada.

¿Qué hacen los sistemas operativos que funcionan con pantallas de alta densidad de píxeles con la representación de información y por qué?

  • Escalan la información para usar más píxeles para mostrar la misma información. Esto lo hacen para mostrar mejor la información en la pantalla.

¿Con cuál resolución trabajan las herramientas de diseño?

  • Con la misma resolución del sistema.

¿Qué aspectos debemos de tener en cuenta sobre el color y el mundo digital?

  • La teoría del color.
  • Los espacios de color.

¿Cuáles son los colores primarios en el ojo humano?

  • Cyan.
  • Magenta.
  • Amarillo.

¿Cómo podemos obtener todos los colores del espectro usando los colores básicos?

  • Mezclandolos.

¿Qué pasa si mezclamos los 3 colores primarios del ojo humano?

  • Opacamos la luz.

¿Cuál es la semejanza entre los colores primarios del ojo humano y los colores primarios que usamos en el mundo digital?

  • La única semejanza que tienen es que si mezclamos los colores en diferentes proporciones podemos obtener otros colores.

¿Qué pasa si mezclamos los 3 colores primarios del mundo digital?

  • Aumentamos la luz.

¿Cuál es el rango que tienen asignados los colores del mundo digital?

  • El valor que tienen estos colores va desde el 0 hasta el 255.

¿Cuántos valores puede tener un color del mundo digital?

¿Por qué los valores de los colores primarios del mundo digital van del 0 al 255?

  • Porque esta es la cantidad de información que podemos almacenar en un byte.

¿De qué formas podemos representar un color en el mundo digital?

  • Usando el modelo RGB.
  • Hexadecimal.

¿Qué es el sistema hexadecimal?

  • Es el sistema de numeración posicional que funciona en base 16.

¿Qué representan los espacios de color en el mundo digital?

  • El conjunto específico de colores que se pueden manipular en una pantalla determinada.

¿Entre las pantallas y nuestros ojos, cuál de los dos es capaz de percibir más colores?

  • Nuestros ojos.

¿La construcción de la pantalla afecta el color que ven los usuarios?

  • Sí.

¿Para qué nos sirven los espacios de color?

  • Para trabajar con las limitaciones que tienen las pantallas.

¿Qué modelo de color se usa en el diseño digital?

  • sRGB.
DPI: Puntos por pulgada PPI: Pixels por pulgada

Comparación básica de una imagen regular y una retina en valores de pixels.

Muy buena explicación! Todo claro y preciso

algo me dice que aprendere demasiado en este curso ❤️

Densidad de píxeles (pixel density)

  • Se refiere a la cantidad de píxeles por unidad de área en un dispositivo de imagen electrónico como una pantalla de computadora, teléfono inteligente o televisión.
  • Cuanto mayor sea la densidad de píxeles, mejor será la calidad de la imagen. La densidad de píxeles también se conoce como PPI (píxeles por pulgada) o PPCM (píxeles por centímetro).
  • Los dispositivos de mayor densidad de píxeles tienen más píxeles por pulgada que los de menor densidad. Esto significa que los elementos de interfaz de usuario del mismo tamaño en píxeles aparecerán más grandes en pantallas de baja densidad.
  • Una mayor densidad de píxeles significa que hay más píxeles por cada pulgada cuadrada de la pantalla, lo que lleva a una mejor definición y detalles más finos en la imagen.

Excelente clase! … Explica muy bien cada uno de los conceptos visuales del mundo digital, que son la base para comprender y trabajar en este entorno.

Solo diré que es una de las mejores clases de color que tomé en mi vida, llevo diseñando y desarrollando desde hace 8 años y nunca me había detenido a pensar en cosas que explicaste aquí, las doy por hecho como trabajar con px, con colores hexadecimales.. jamás me pregunté el por qué. Pero acabas de responder a todo eso. Muchas gracias!
La clase se centró en la introducción al diseño digital, destacando las diferencias entre diseñar en papel y para pantallas. Se explicó qué es un pixel, su relación con la resolución y cómo los colores se representan en el diseño digital utilizando el modelo RGB. Se abordaron conceptos como la relación de aspecto, la identidad de pixels (DPI/PPI) y los espacios de color, especialmente el sRGB. La importancia de comprender las limitaciones de las pantallas y cómo estas afectan la experiencia del usuario también fue clave.
*Podéis creer que apenas me entero de la razón de ser del 0-255...*
Excelente clase profesor, la verdad estoy me había preguntado mucho tiempo porque había trabajado en diseño gráfico pero soy diseño de interiores y hacia que se vea lindo el diseño pero nunca llegaba a entender como funcionaba esto, y está clase me ha aclarado todas mis dudas, muchas gracias ✨
Diseñar en papel no es lo mismo que diseñar para las pantallas :D
* Excelente resumen
sRGB de qué manera se aplica o que lo hace diferente? qué es la "s"? gracias 😊?
Un píxel es un punto en una imagen o vídeo, mientras que un bit representa el color o el nivel de oscuridad de dicho punto. Cada píxel se representa mediante un número de bits, y la cantidad de bits por píxel determina la profundidad de color de la imagen, es decir, la cantidad de colores que puede mostrar: 1 bit por píxel: Representa 2 valores por píxel, encendido y apagado, es decir, blanco y negro. 4 bits por píxel: Representa 16 colores en la tabla de colores. 8 bits por píxel: Representa 256 niveles tonales (0-255). 24 bits por píxel: Representa un color, con 8 bits para rojo, 8 bits para verde y 8 bits para azul. Las imágenes formadas por píxeles se llaman mapas de bits o imágenes rasterizadas. Cuanto mayor sea el número de píxeles por imagen, mayor será su calidad. Encontré de forma resumida y desglosada para complementar de mejor manera :) espero les sirva
Cómo que colores básicos son cyan magenta y amarillo? Desde niño nos enseñan amarillo azul y rojo
Que clase tan espectacular porque la magia esta en lo basico para mi Sebastian Garcia a mis 26 años siendo Director de marketing y estrategia de Verifik.co estar comenzando a aprender UX y UI me encanta descubrí algo que me gusta mucho .

256 es el valor más alto que se puede representar con 8 bits en binario.

Y la unidad de información mas pequeña no es el byte, es el bit

El tema del RGB es que es más sencillo controlar cuanto brillo se le sube a un led, que controlar cuanto se le quita, porque estarían funcionando con la premisa de que los leds siempre estarían encendidos usado CMY, y con RGB funciona con la premisa de que siempre están apagados.

En si, es más fácil controlas miles de leds que encender, a miles que hay que apagar.

![]()![](https://static.platzi.com/media/user_upload/Imagen1-fe56b575-7052-483d-a1e8-566c6eb24ad4.jpg)
Excelente!
Como ahora entiendo muchas cosas que he estado utilizando en toda mi vida de desarrollador: este asunto de Cyan Magenta Yellow, de donde sale el concepto RGB, y que es esto de los espectros de luz. Esto es fascinante.
No controlamos el ambiente del usuario. Por ejemplo, la iluminación
RGB y hexadecimal son utilizados para representar color en digital. El Pixel es utilizado en una pantalla para representar la información y por lo general en este caso son DPIs puntos por pulgada, o PPIs,  la mayoría de los sistemas operativos que funciona con pantallas de alta alta densidad de pixeles escala,  la información para usar más pixeles para presentar la misma información haciéndolo parecer mucho más nítido de lo que todo lo que vemos por ejemplo los iPhone o cualquier dispositivo retina lo que es que utiliza el doble de pixeles para mostrar a mostrar la misma cantidad de información.

Resumen de Introducción al mundo digital

  • Una limitación que se encuentra en el mundo digital son las pantallas, ya que no podemos controlar el tamaño de la pantalla (para el que vamos a diseñar), el entorno (momento en el que el usuario va a interactuar sobre el producto, condiciones de luz, estado anímico, etc.)

  • Aquí aparece el pixel:

El pixel es considerado la unidad gráfica visual más pequeña, la cuál está constituida por un punto. Cada pixel emite un luz conformada por 3 colores primarios (rojo, verde y azul).

Pantallas

  • Relación de aspecto: Hace referencia a los pixeles de acho vs los pixeles de largo que mostramos.

  • Resolución: Es la cantidad de pixeles que pueden ser mostrados en cada dispositivo. por ejemplo; 1440 x 990 (resolución estándar).

  • Densidad de pixels: Cuantos pixels utiliza una pantalla para representar determinada información. Esto por lo general se representa por DPI (Puntos por pulgada) o PPI (Pixels por pulgada).

Color

  • Teoría básica del color

    • Colores básicos en la vida real: Son cian, magenta y amarillo. Al mezclar estos colores podemos conseguir el resto de colores del espectro.

    Cuando más mezclamos los colores menos luz conseguimos.

    • Colores básicos en lo digital: Son rojo, azul y verde. Al ser mezclados podemos conseguir el resto de colores del espectro.

    Cuando más mezclamos estos colores más luz conseguimos.

    ¿Porqué los valores van de 0 a 255?

    Hay en total 256, ya que el 0 también cuenta y esa cantidad de información se va a almacenar en un byte (unidad de información más pequeña), por ello va de 0 a 255.

    ¿Cómo se representan los colores en diseño digital?

    Existen 2 tipos

    • RGB
    • Hex
  • Espacios de color

    • Concepto: Conjunto determinado de colores que se puede manipular en determinada pantalla.
Muy interesante lo de la diferencia de los colores digitales y los colores impresos. Una pregunta que haria, es ¿Que pasó con aquellos de que los colores provienen del amarillo, el azul, el rojo?. Desde cuando esta esta teoría del CYM
![](https://static.platzi.com/media/user_upload/image-f410b21f-2c77-408d-b1b2-aa01aceacfb6.jpg)
Subtema: Teoría del color.   ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202023-09-24%20202414-8af8a05c-c5e3-495b-bc82-4c13a578db80.jpg)![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202023-09-24%20202422-7cef3817-4383-422d-a1b3-32e3fcff2ed9.jpg)
Les comparto mis apuntes. Pixel ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202023-09-24%20195922-e35f0703-1000-47cf-b0f3-bc70232e6407.jpg)

Gracias

Me entusiasma mucho saber un poco mas sobre principios heuristicos eso mejoraria mucho mi visión como diseñador de experiencia

Muchas gracias profe Emilio. emocionada se seguir aprendiendo.😃

Diseñar para el mundo digital significa enfrentarse a diversas limitaciones y escenarios adversos que no podemos controlar.

.
Diseñar un producto digital es trabajar con pixels (Un pixel es la unidad gráfica digital mas pequeña que existe, cada imagen esta constituida por un array de pixels)
.

🖥️ Pantallas

Relación de aspecto: La relación de aspecto en una pantalla es la proporción entre su ancho y su altura. Se calcula dividiendo el largo entre la altura de la imagen visible en pantalla, y se expresa normalmente como X:Y . Por ejemplo, una relación de aspecto de 16:9 significa que por cada 16 píxeles en la resolución horizontal habrá 9 píxeles en la resolución vertical.

Resolución: Es la cantidad de píxeles que puede ser representada en cada dispositivo.

Densidad de Pixels: La densidad de píxeles es un dato que se calcula en función de la resolución y el tamaño de la pantalla de un dispositivo electrónico, y nos permite conocer el número de píxeles que es capaz de mostrar en una pulgada. Se mide en píxeles por pulgada (ppp) aunque también se expresa como ppi (pixels per inch) 1Cuanto mayor sea este elemento, mayor nitidez tendrá la pantalla
.
Platzi tiene un Curso de Uso y Manejo del Color que explica a profundidad teoría del color.

La resolución de pantallas y monitores es la cantidad de píxeles que componen una imagen, la cual determina la calidad de la misma. Cuanto mayor sea la resolución, mayor cantidad de píxeles tendrá la imagen, lo que se traduce en una imagen más nítida y de mejor calidad. Esto se aplica tanto para los monitores de computadoras como para los televisores, dispositivos móviles, tabletas, etc. Las principales resoluciones HD son: Full HD (1.920 x 1.080 píxeles) y 4K (3.840 x 2.160 píxeles).

La relación de aspecto es una medida que describe la proporción entre el ancho y el alto de una pantalla de televisión, computadora o dispositivo móvil. El término se refiere a la relación entre la longitud de la diagonal de la pantalla y su ancho. Por ejemplo, una pantalla de 16:9 tiene una relación de aspecto de 16:9, lo que significa que el ancho es 1,78 veces mayor que la altura. Esta relación de aspecto se denomina también “formato panorámico” o “widescreen”, ya que es un formato más ancho que los formatos de pantalla estándar. Algunos de los formatos de pantalla más comunes son 4:3, 16:9, 16:10, 21:9 y 9:16.

El espacio de color es la gama de colores que puede representar tu ordenador, es una lista estandar de colores codificados. Cuando tu cámara captura una imagen, en la tarjeta, lo que está grabando son datos que más tarde el programa de tu ordenador tiene que «traducir» o descodificar y lo hace dentro de la gama de colores de la que dispone, que es mucho más limitada que la gama de colores que existen en la realidad.

  • SRGB para digital
    Este es el espacio de color más común en los monitores. Es que el que utilizan la mayoría de cámaras por defecto para mostrar sus imágenes.También es el que más se recomienda utilizar cuando las fotos no se vayan a imprimir. Es decir, que si tu idea es mostrar esa foto en cualquier tipo de pantalla, utiliza este espacio de color sin dudar.

  • ADOBE RGB para impresiones profesionales

  • CMYK para periódicos y revistas

  • PROPHOTO RGB para los más perfeccionistas

Si quieren leer más al respecto, les comparto este link