Colores Seguros y Verdaderos: Conceptos y Elementos de Diseño

Colores seguros

Web-safecolors, se aplica a colores que se representan de la misma forma en cualquier navegador; de esta forma todos los usuarios tendrán la misma experiencia cromática.

Colores verdaderos

(true-color). Sistema de representación de colores que puede reproducir el total de colores que el ojo humano es capaz de percibir.

Mapa conceptual

Esquema de ideas que sirve de herramienta para organizar de manera gráfica y simplificada los conceptos y enunciados, a fin de reforzar un conocimiento.

2.1. Componentes de una interfaz web

Maquetación web; esto es, establecer qué elementos principales constituyen las páginas web y las zonas que los componen:

Zona de navegación

Se puede acceder a todos los contenidos del sitio web y aportar al usuario la sensación de saber dónde está. Debe disponer de dos elementos: debe indicarse dónde se está en cada momento y ha de poder consultarse el índice de contenidos globales.

Zona de contenido e interacción

Parte principal de un sitio web; lugar donde se muestra el contenido. Las áreas de texto, las cajas que el usuario introduzca texto, imágenes, vídeos o cualquier otro.

2.2. Maquetación web

Es el proceso de diseño y creación de un sitio web. Se ocupa de la estructura del sitio, la disposición de los elementos y la forma en que se presenta el contenido. Es importante disponer de un prototipo o diseño previo para el caso de las interfaces web, si se quiere que éstas recojan todos los requisitos necesarios.

2.2.1. Elementos de una página web:

Algunas de estas secciones son la zona de navegación, la cabecera o los pies de páginas, entre otras.

A) Cabecera o header:

Es la parte superior de una página web que los usuarios ven cuando visitan un sitio web. Cumple dos funciones: facilitar la navegación para los usuarios y proporcionar información relevante sobre la identidad del sitio web.

B) Sistemas de navegación:

Se sitúa justo debajo de la cabecera, pero es común encontrarlo también en la parte izquierda de las páginas. Al pinchar sobre cada uno de los nombres, se accede a la página del sitio deseada.

C) Pie de página o footer

Se sitúa bajo el cuerpo; en ella suele aparecer toda la información importante como créditos, la licencia, formularios de contacto, etc.

D) Cuerpo

Parte central de la web, donde aparece la información que se quiere ofrecer al usuario. Se sitúa debajo de la cabecera y del menú de navegación. Es recomendable que todos los elementos mantengan un diseño uniforme y similar.

2.2.2. Mapa de navegación:

Los mapas de navegación proporcionan una representación esquemática de la estructura de sitio web, mostrando sus secciones y páginas, y las relaciones entre ellas. Se crea una especie de índice de contenidos a través del cual los usuarios pueden localizar más rápidamente lo que buscan.

2.3. El color

El ojo humano solo es capaz de percibir los denominados colores aditivos, y, a través de su combinación, le es posible obtener el resto de los colores. Los colores aditivos son el rojo (R), el verde (G) y el azul (B).

2.3.1. Sistema RGB

Un ordenador será capaz de obtener la representación de todos los colores utilizando el sistema RGB, o lo que es lo mismo, el sistema red-green-blue. Al combinarlos, dará lugar a toda la paleta de colores conocida. Para representar cada color se utilizan 8 bits para codificar cada uno de los colores aditivos. La escala monocromática de un color tendrá 256 valores, producto de 28. A la hora de representar cada uno de los colores, se puede con numeración decimal (0 a 255) como el hexadecimal, donde cada uno de los dígitos se codifica con 8 bits binarios, que, agrupados en bloques de 4 bits, devuelve el valor correspondiente en hexadecimal.

A) Matiz

Atributo que permite distinguir un color de otro. Los tres matices primarios son los colores aditivos: verde, rojo y azul; el resto de los colores se obtienen mezclando estos tres. El matiz permite definir dos colores como complementarios cuando uno está frente al otro en el círculo cromático.

B) Saturación

Este atributo define la intensidad de un color. Puede relacionarse con el ancho de banda de luz que se está visualizando, por lo tanto, queda condicionado por el nivel de gris presente en un color. Cuanto mayor sea el nivel de gris, menos saturado será un color, y será menos intenso.

C) Brillo

Atributo que define la cantidad de luz de un color. Representa lo oscuro (si se le añade negro) o claro (si se le añade blanco) que es un color respecto de su patrón, es decir, respecto del color puro sin modificar el brillo.

2.3.3. Colores seguros:

El término colores seguros o web-safecolors se aplica a aquellos colores que se representan de la misma forma en cualquier navegador, dispositivo o sistema operativo. Finalmente, se va a definir en qué consisten los colores verdaderos o true color. En la actualidad existen 16 777 216 combinaciones diferentes, producto de los 256 valores que puede tomar cada uno de los colores del sistema RGB. Para codificar cada uno de ellos son necesarios 8 bits, por lo tanto, para poder visualizar todos los colores posibles es necesario un sistema de 24 bits, donde cada píxel de color queda representado por 3 bytes.

2.4. Elementos de diseño:El lenguaje visual que se utiliza es la base de un buen diseño. Tipos: elementos conceptuales, elementos visuales, elementos de relación y elementos prácticos.

2.4.1. Elementos conceptuales:

punto, línea, plano y volumen Los elementos conceptuales son aquellos que no son visibles, es decir, que no tiene existencia física. Estos se interrelacionan entre sí generando nuevas figuras más complejas y significativas.

-Punto:

Es el resultado del primer encuentro de la punta de un lápiz con el papel, la tela u otro material.El punto límite mínimo de la extensión que se considera sin longitud,anchura ni profundidad. Señal de dimensiones pequeñas,ordinariamente circular,que,por contraste de color o de relieve,es perceptible en una superficie)Es concebido en la imaginación pequeño y redondo.Un punto indica posición,no tiene largo ni ancho ni ocupa una zona del espacio. Es el principio y fin de una línea y es donde dos líneas se encuentran o cruzan.El recorrido de puntos se convierte en una línea.

-La línea;

La línea no es visible por sí sola en la naturaleza. Es el resultado del movimiento de un punto que se desplaza por una superficie. La línea tiene largo pero no ancho,tiene posición y dirección. Está limitada por dos puntos siendo la distancia más pequeña entre ambos. El recorrido de una línea en movimiento se convierte en un plano.

-Plano

es el resultado del movimiento de una línea que se desplaza en una dirección distinta a la suya.Un plano tiene largo y ancho,pero no grosor,tiene posición y dirección,es la porción de superficie limitada por una línea cerrada. Define los límites extremos de un volumen(espacio ocupado por un cuerpo).

-Volumen:

es el resultado del movimiento de un plano que se desplaza en una dirección distinta a la suya.Tiene una posición en el espacio y está limitado por planos. En un diseño bidimensional,el volumen es ilusorio (engañoso,irreal,ficticio)

2.4.2. Elementos visuales: forma, medida, color y textura

Estos elementos presentan unas características visuales que los caracterizan, que son la forma, la medida, el color y la textura

-Forma:

Identificamos lo que percibimos porque lo que vemos posee una forma (configuración externa de algo). Una forma se define como un área que se destaca del espacio que la rodea debido a un límite definido explícita o implícitamente.

-Medidas;

Todas las formas tiene un volumen o una dimensión.El tamaño de las formas se puede establecer de forma relativa,por comparación de unas con otras,pudiendo decir así que unas formas más grandes que otras.Pero,en cualquier caso,es físicamente medible.

2.4.2Elementos visuales parte2 :Color:

Todo lo que existe en la naturaleza tiene color.Las cosas que vemos no solo se diferencian entre si por su forma y tamaño sino tambien por su colorido.El color y,el contraste de color en particular,se utiliza también para llamar la atención sobre una parte determinada de la imagen.

-Textura:

Es la característica visual o táctil de todas las superficies.El material con el que se hacen los objetos aporta a su superficie una textura determinada.Con unas determinadas características de rugosidad,suavidad,aspereza ,homogeneidad.

2.4.3. Elementos de relación: dirección, posición, espacio y gravedad

Los elementos de relación son aquellos que definen las características de ubicación e interrelación de las formas entre sí.

Dirección:

La dirección de una forma depende de su relación con el observador,con el marco que la contiene o con otras formas cercanas de las cuales se comparan.

Posición:

La posición de una forma es juzgada por su relación respecto al cuadro que la contiene o a la estructura global del diseño.

Espacio;

Las formas por muy pequeñas que sean,ocupan un espacio. Así,el espacio puede estar ocupado o vacío. Se puede utilizar la perspectiva. Para organizar y sugerir el espacio creando la ilusión de profundidad.Se pueden superponer objetos de modo que el observador percibe como más cercano el objeto que está más adelante que los demás.También podemos lograr la profundidad dentro de el campo visual utilizando el contraste y la variación de tamaño en las formas.

D) Gravedad

Esta propiedad permite proporcionar la sensación de gravedad a través de atributos como la pesadez o la liviandad, la estabilidad o la inestabilidad, etc., de las formas.

2.4.4. Elementos prácticos: representación, significado y función

Los elementos prácticos se centran en el contenido y el alcance de un diseño. Son interpretados por la mente, de tal manera que permiten atribuir características y significados a las formas.

A)Representación;

Una forma es representativa cuando se deriva de la naturaleza o del mundo hecho por el ser humano. La representación puede ser realista,estilizada(interpretar convencionalmente la forma de un objeto,haciendo más delicado y finos sus rasgos) o medio abstracta(que no pretende representar seres o cosas concretas y atiende solo a elementos de forma,color,estructura,proporción,etc).Una fotografía de un monumento es una representación realista de el mismo. Un dibujo de los perfiles de dicho monumento es una representación estilizada del monumento y un dibujo naif

B) Significado

Es la imagen conceptual que se refleja en nuestra mente cuando el diseño transporta un mensaje visual. Cada receptor del mensaje le dará una interpretación,un significado distinto,según sean sus conocimientos y experiencias previas.

C) Función:

Se trata del propósito para el cual sirve el diseño. Puesto que todo diseño nace como solución a una necesidad, la función toma relevancia cuando el diseño cumple el propósito para el que ha sido diseñada

Función:La imagen colocada en un lugar adecuado cumple la función de mantener el ambiente oscuro para poder trabajar.

Decimal 0-15 pasar a hexa dividir 7000/16 va de atrás alante y hay que convertir a hexa.

Hexadecimal 0-9 A-F para pasar a decimal posi valor*16(4)*valor* 16(3)*valor* 16(2) *valor* 16(1).

RGB coges y multiplicas valor *16(0)valor*16(1)