Diseño de Interfaces Web

C.F.G.S. Técnico Superior en Desarrollo de Aplicaciones Web

TEMA 1

Planificación de Interfaces Web

Introducción: Sitio Web: Conjunto de páginas web agrupadas bajo un

dominio y que comparten una dirección común . Característica común Home o Homepage. Desde el punto de vista del diseñador, una web site

debe de ser homogénea y consistente. La finalidad es comunicar algo bien sea comercial o

informativo. Debe de se atractivo y funcional independientemente de

la información.

1.1 Elementos de diseño: Percepción visual ¿Que interfaz web ofrecer?

La primera impresión será visual (forma, tamaño, ubicación, color, tipografía, etc.)

El diseñador debe buscar un equilibrio entre los elementos que constituyen la interfaz, un sentido gráfico de su diseño.

El exceso de elemento puede producir distracción “ruido” en el mensaje.

1.1 Elementos de diseño: Percepción visual

Una vez asimilada la información:

Se determinará el área de diseño, espacio para la composición gráfica.

Composición gráfica “elementos” adecuados con lo que se quiere comunicar.

1.2 Fundamento de la composición. Composición Gráfica: Ordenar todos los elementos de

nuestro diseño para impactar visualmente al público receptor.

Existen una serie de pautas para la composición relacionadas con la percepción: Componentes psicosomáticos del sistema nervioso: Vista,

Recoge información visual, que será interpretada dándole un significado gráfico definido.

Componente de tipo cultural:Influye en la interpretación desde un punto de vista cultural y educacional.

Experiencias compartidas con el entorno:Conceptos arraigados que se utilizarán como patrones con los que interpretar y dotar de significado la realidad.

1.2 Fundamento de la composición.Existen otros factores relacionados con la disposición de los

elementos para conseguir una disposición adecuada.

1.2.1 El Equilibrio Visual Equilibrio Formal: Basado en la bisimetría. Centro óptico.

Refleja estabilidad y calma, asegurando una distribución armónica.

Equilibrio Informal: Prescinde de la simetría, el equilibrio se consigue contrastando los pesos visuales, armonizando visualmente dentro de una asimetría intencionada.

- Las formas pequeñas tienen menor peso que las grandes

- Si la forma no es regular, su peso aumenta.

- Los colores luminosos e intensos tienen mayor peso.

- La posición también afectará en el equilibrio

1.2 Fundamento de la composición.1.2.2 La Tensión Compositiva.

Opuesto al equilibrio, tiene como finalidad dirigir la mirada y conseguir fijar la atención del observador.

Técnica Sugestiva: Dirige la atención a un punto determinado utilizando elementos de apoyo.

Técnica Rítmica: Tendencia innata del ojo humano a completar secuencias de elementos.

1.3 Color, Tipografía, Iconos 1.3.1 Color.

Los colores se formarán por la combinación de los tres básicos: rojo, verde y azul. Almacenado en Hex.

#FF0000 – Rojo. #00FF00 – Verde. #0000FF – Azul.

Características del color:

Matiz o tono: Unión de varios colores mezclados con proporción.Saturación: Color puro, no mezclado ni con blanco ni con negro. En

ausencia de estos tendrá mayor intensidad.Luminosidad: brillo que se añadirá sumando o mezclado blanco o negro

respectivamente.

1.3 Color, Tipografía, Iconos

1.3.1 ColorElegir una combinación apropiada es una tarea muy difícil

Existen Software que nos permitirá crear combinaciones armoniosas y placenteras.

ColorPix Color Schemer Online Whats Its Color

1.3 Color, Tipografía, Iconos 1.3.2 Fuente.

Conjunto de caracteres con un estilo o modelo gráfico determinado.Las fuentes disponibles en cada S.O. pueden ser diferentes, se recomienda usar:- Sans Serif (Verdana, Arial y Helvetica) para mostrar texto en pantallas.- Serif ( Times New Romans, Courier, C. New) si el texto se puede imprimir.No es aconsejable usar más de 3 fuentes distintas.

1.3 Color, Tipografía, Iconos

1.3.2 Fuente.

1.3 Color, Tipografía, Iconos

1.3.3 Iconos.Imágenes gráficas metáforas de las acciones que se pueden hacer.

1.4 Componentes de una InterfazPartes que forman un sitio web

1.4 Componentes de una Interfaz 1.4.1 Cabecera.

Identificará el sitio web representado mediante un logotipo y el nombre del sitio.

Ubicada en la parte superior con la misma anchura de la página.

1.4 Componentes de una Interfaz 1.4.2 Sistemas de Navegación.

Permite la navegación por las diferentes secciones y páginas que componen el sitio web. Se presentan como menús.

Tipos: Arbol, Cortinillas, Pestañas y “estás aquí”

1.4 Componentes de una Interfaz 1.4.3 El cuerpo de la página.

Es donde se presenta toda la información de la página, se utiliza el 50 / 80 %.

Por lo general llevará un título en tamaño de letra superior o un color distinto.

1.4 Componentes de una Interfaz 1.4.4 El Pie de Página.

Situado bajo el cuerpo de la página, se suele utilizar para enlaces a servicios particulares de la web (contratar publicidad, contacto, condiciones de uso…)

1.4 Componentes de una Interfaz 1.4.5 Los Espacios en Blanco.

Serán las zonas en las que no hay elementos gráficos. Su objetivo principal será compensar el peso visual, crear márgenes o separaciones y marcar los límites de la estructura de composición, haciendo la interfaz, equilibrada y limpia.

1.5 Lenguajes de Marcas HTML (lenguaje de marcas hipertexto)

Lenguaje que codifica un documento que será interpretado por el navegador. HTML 1.0 Solo mostraba texto con estilo. HTML 2.0 Aporta compatibilidad (W3C) y etiquetas

para la inserción de imágenes, tablas ,formularios. HTML 3.0 Incorpora etiquetas procedentes de

empresas como Nestcape y Microsoft. HTML 4.0 Incorpora CSS, scripts, agilidad en

formularios, Java. HTML 5.0 WHATWG integra el diseño e inclusión de

elementos multimedia.

1.5 Lenguajes de Marcas

Evolución de la WEB.

1.6 Maquetación Web.Distribución de los elementos en el espacio disponible.

Objetivo: diferenciar contenido de diseño.

CapasDiv o layout, son bloques HTML que incluirán imágenes, texto y otras capas. Pudiéndose anidar y posicionar dinámicamente. Necesitan de CSS.

Marcos

Frames, en HTML como <frameset> dividen la web en partes y dentro de ellas se incluirá otra página web.