Modelo de color para Web

La mayoría de los dispositivos que se usan con una computadora como el monitor y escáner, usan el modelo RGB (modelo de reflexión o aditivo), excepto los que manejan tintas, como las impresoras, que suelen usar el modelo CMYK (modelo sustractivo).

RGB:

RGB son las siglas en inglés de Red, Green, Blue, que significa rojo, verde y azul.

Las imágenes en Internet usan éste modelo de color basado en los colores primarios de la luz que al mezclarse, representan el espectro visible por el humano.

Fidelidad:

El modelo de color RGB no define por sí mismo con exactitud qué rojo, verde o azul, por lo que los mismos valores RGB pueden parecer distintos en diferentes monitores en cualquier dispositivo que use éste modelo.

Resolución de una imagen para Web

La resolución de una imagen es una forma de indicar cuánto detalle puede observarse en ella, a mayor resolución, mayor detalle o calidad visual.

La resolución de las imágenes en mapa de bits es descrita con 2 números, el primero indica la cantidad de columnas de píxeles (px) y la segunda la cantidad de filas de píxeles.

Por ejemplo: indicar que una imagen es de 800 x 600 px, señala que cuenta con 800 pixeles a lo ancho y 600 a lo alto.

Megapixeles

Aunque una forma de válida de comunicar la resolución de una imagen digital es expresando el total de pixeles de la imagen, usualmente como  el múltiplo correspondiente a millón o mega-,  multiplicando la cantidad de columnas de pixeles en una imagen por la cantidad de filas.

Nombrar la resolución en megapixeles (Mpx) es una convención más usual en el ámbito de la fotografía, no así en diseño Web.

Formatos de archivo de imagen para Web

Las extensiones de imágenes para Web mas comunes son:

Imágenes en mapa de bits:

Tanto JPEG*, PNG y GIF son formatos para imágenes en mapa de bits o ráster (del inglés raster image). La imagen se representa mediante una cuadrícula de píxeles y no pueden ser aumentadas de tamaño sin que pierdan calidad, resultando en un imágenes que frecuentemente se llaman pixeleadas, pixelizadas o pixelosas.

* Aunque existen 3 variantes del estándar JPEG que comprimen la imagen sin pérdida de resolución: JPEG2000, JPEG-LS y Lossless JPEG, su uso no es generalizado.

En cambio SVG es un formato de imágenes vectorial, éste tipo de imágenes, al no estar conformadas por pixeles, se caracterizan por su capacidad de ser redimensionadas a cualquier tamaño sin que pierdan calidad.

Peso visual y equilibrio

En cualquier imagen, el peso visual es una fuerza óptica que crea en el espectador, una especie de tensión indefinible, pero que es capaz de percibir, ya que el cerebro necesita ver imágenes equilibradas.

Para quien ha crecido dentro de la cultura occidental, en toda composición, los elementos son percibidos de la siguiente forma:

  • Aquellos que se sitúan en la parte derecha, poseen mayor peso visual y transmiten una sensación de avance.
  • En cambio los que se encuentran en la parte izquierda, proporcionan una sensación de ligereza y/o retroceso.
  • En la parte superior de un documento, un elemento posee mayor ligereza visual.
  • Mientras que los elementos que se colocan en la parte inferior, transmiten mayor peso visual.

El peso visual es identificado por ser en sí el elemento, que mas capta la atención en la composición.

Equilibrio.

Los elementos de una composición pueden ser imaginados comos pesos de una balanza; la composición se encuentra en equilibrio cuando los pesos de los distintos elementos que la forman se compensan entre sí.

Composición

Composición es la distribución armoniosa y equilibrada de todos los elementos visuales que conforman un diseño.

Los elementos pueden ser tanto imágenes, como espacios en blanco, bloques de color, etc.

Es recomendable se busque un peso igualado que logre el equilibrio visual entre los elementos, así como la simplificación del mensaje que el diseño busca transmitir.

 

Bibliografía: Fundamentos del diseño por Wucius Wong.

Ley de Agrupamiento

Principio de la simplicidad.

Este mecanismo permite reducir posibles ambigüedades, buscando siempre la forma más simple o la más consistente.

El cerebro prefiere las formas integradas, completas y estables, éste principio nos permite ver los elementos como unidades significativas y coherentes.

Ley de agrupamiento o Ley de la pregnancia.

La Ley de Agrupamiento o Pregnancia o ley de la buena forma es una de las leyes de la percepción descubiertas por la Gestalt.

Como refinamientos de ésta la Ley, los psicólogos de la Gestalt desarrollaron las siguientes:

  • Varias formas de agrupamiento pueden establecerse por:
    • Ley de la Proximidad: Los elementos más cercanos a una figura, se interpretan como pertenecientes a ella.
    • Ley de Semejanza o similitud: Los estímulos similares tienden a percibirse como grupos, los elementos parecidos son percibidos como partes de una misma forma.
    • Ley de Simetría: Los elementos semejantes separados por un eje simétrico se agrupan conformando una unidad o totalidad reconocible.
    • Ley de Comunidad o principio de Dirección Común: Los elementos que parecen construir un patrón o un flujo en la misma dirección son percibidos como un único elemento.

Ley de figura y fondo

Ley de figura y fondo es una de las leyes de la percepción o Leyes de la Gestalt que enuncia principalmente:

  • Es imposible percibir dos figuras (reversibilidad) simultáneamente.
  • La percepción se realiza en recortes:
  • Se le denomina figura a la zona en la que se está centrando la atención y fondo a aquellas que quedan en un plano secundario.
  • Nunca existe figura sin fondo, aunque éste consista en un espacio en blanco o vacío.

La ley de contraste es otra de éstas leyes que trata sobre la relación entre el fondo y la forma.

 

Leyes de la Gestalt

Leyes de la Gestalt sobre la percepción

Las leyes de la percepción o leyes de la Gestalt, fueron descubiertas y enunciadas por los psicólogos de la Gestalt: Max Wertheimer, Wolfgang Köhler y Kurt Koffka, quienes observaron que el cerebro organiza las percepciones como totalidades (Gestalts en alemán).

Sus principios se estructuran básicamente en dos leyes:

Navegador con Herramientas de desarrollador Web

Un navegador con la extensión Web developer o Desarrollador Web, te permitirá revisar y probar el Estilo (CSS) y HTML de una página Web.

Revisión y pruebas de estilo (CSS) y HTML

Mozilla Firefox

Firefox es un navegador Web libre y de código abierto para Windows, Mac, Linux y ya cuenta con la Herramienta Desarrollador Web integrada para probar cambios en el CSS y HTML en la página que visitas.

* Firefox viene preinstalado en muchas de las distros. de Linux.