Definiciones Clave en Diseño Web

Colores seguros. El término web-safe colors 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

La maquetación web implica establecer qué elementos principales constituyen las páginas web y las zonas que los componen. Estos componentes clave son:

• Zona de navegación. Permite acceder a todos los contenidos del sitio web y aporta al usuario la sensación de saber dónde está. Debe disponer de dos elementos:

  1. Debe indicarse dónde se está en cada momento (ubicación actual).
  2. Ha de poder consultarse el índice de contenidos globales.

• Zona de contenido e interacción. Es la parte principal de un sitio web, el lugar donde se muestra el contenido. Incluye áreas de texto, cajas para que el usuario introduzca texto, imágenes, vídeos o cualquier otro elemento.

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 las interfaces web, si se quiere que estas recojan todos los requisitos necesarios, tales como:

1. Qué elementos va a tener.
2. Cuántas páginas.
3. Distribuir los elementos de las páginas.

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ágina, 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 hacer clic 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 él 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 del 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.

Al representar un mapa de navegación, este adquiere un aspecto similar al de un mapa conceptual. Ambos presentan elementos comunes, como el nodo raíz (la página inicial en los mapas de navegación). A partir de este nodo se segrega el resto de los elementos del sitio. Además, es posible que los elementos “hijos” estén relacionados entre sí, permitiendo pasar de una página web a otra del mismo sitio sin necesidad de regresar al inicio.

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 es 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 2⁸. A la hora de representar cada uno de los colores, se puede usar numeración decimal (0 a 255) o hexadecimal. En el sistema hexadecimal, 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.

2.3.2. Atributos del color

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 y, 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, por ende, 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 y Colores verdaderos (True Color)

El término colores seguros o web-safe colors se aplica a aquellos colores que se representan de la misma forma en cualquier navegador, dispositivo o sistema operativo.

Finalmente, se definen 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. Los tipos de elementos de diseño son:

• Elementos conceptuales
• Elementos visuales
• Elementos de relación
• 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 tienen 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 es el límite mínimo de la extensión, considerado sin longitud, anchura ni profundidad. Es una 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 como 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, y 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 características visuales que los definen: 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 tienen 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 son más grandes que otras. Pero, en cualquier caso, es físicamente medible.

Color

Todo lo que existe en la naturaleza tiene color. Las cosas que vemos no solo se diferencian entre sí por su forma y tamaño, sino también 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 características específicas de rugosidad, suavidad, aspereza u 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 compara.

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 perciba como más cercano el objeto que está más adelante que los demás. También podemos lograr la profundidad dentro del campo visual utilizando el contraste y la variación de tamaño en las formas.

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 delicados y finos sus rasgos).
• 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 del mismo. Un dibujo de los perfiles de dicho monumento es una representación estilizada del monumento, y un dibujo naif (ingenuo o simple) es un ejemplo de representación medio abstracta.

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ñado.

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

Conversión de Sistemas Numéricos (Decimal y Hexadecimal)

Conversión Decimal a Hexadecimal

Para pasar de decimal (0-15) a hexadecimal, se utiliza la división sucesiva. Ejemplo: dividir 7000/16. El resultado se lee de atrás hacia adelante y hay que convertirlo a hexadecimal (0-9, A-F).

Conversión Hexadecimal a Decimal

Para pasar de hexadecimal (0-9, A-F) a decimal, se utiliza la notación posicional: $Valor imes 16^n$. Por ejemplo: $Valor imes 16^4 + Valor imes 16^3 + Valor imes 16^2 + Valor imes 16^1$.

Nota sobre RGB: Para obtener el valor decimal de un par hexadecimal en RGB, se multiplica el primer valor por 16⁰ y el segundo valor por 16¹.

Etiquetas: diseño web, elementos de diseño, interfaz de usuario, maquetación web, sistema RGB, Teoría del color