Tema 1

374 views

Published on

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

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
374
On SlideShare
0
From Embeds
0
Number of Embeds
54
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tema 1

  1. 1. Diseño de Interfaces Web C.F.G.S. Técnico Superior en Desarrollo de Aplicaciones Web
  2. 2. TEMA 1Planificación de Interfaces Web
  3. 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. 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. 5. 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.
  6. 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. 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. 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. 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. 10. 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
  11. 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. 12. 1.3 Color, Tipografía, Iconos 1.3.2 Fuente.
  13. 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. 14. 1.4 Componentes de una InterfazPartes que forman un sitio web
  15. 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. 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. 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. 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. 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. 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. 21. 1.5 Lenguajes de Marcas Evolución de la WEB.
  22. 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.

×