(by Moisés Martínez Gutiérrez)

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

2. TEMA 1
Planificación de Interfaces Web

3. 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.

4. 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.

5. 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.

6. 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.

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

8. 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.

9. 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.

10. 1.3 Color, Tipografía, Iconos
 1.3.1 Color
Elegir 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

11. 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.

12. 1.3 Color, Tipografía, Iconos
 1.3.2 Fuente.

13. 1.3 Color, Tipografía, Iconos
 1.3.3 Iconos.
Imágenes gráficas metáforas de las acciones que se
pueden hacer.

14. 1.4 Componentes de una Interfaz
Partes que forman un sitio web

15. 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.

16. 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í”

17. 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.

18. 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…)

19. 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.

20. 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.

21. 1.5 Lenguajes de Marcas
 Evolución de la WEB.

22. 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.