Fundamentos del Diseño Digital: Pantallas y Color

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.

Concreto y preciso

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.

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.

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.

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.

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) 1. Cuanto 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