Tema 1

Diseño de Interfaces Web C.F.G.S. Técnico Superior en Desarrollo de Aplicaciones Web

TEMA 1Planificació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 visualUna 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ícilExisten 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.Capas Div 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.

http://sindromededaw.com	28
http://www.sindromededaw.com	25

Tema 1

by yren69 on Oct 02, 2012

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 53

Statistics

Tema 1 Presentation Transcript