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