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 .   ...
1.1 Elementos de diseño: Percepción visual   ¿Que interfaz web ofrecer?   La primera impresión será visual (forma, tamañ...
1.1 Elementos de diseño: Percepción visualUna vez asimilada la información:   Se determinará el área de diseño, espacio p...
1.2 Fundamento de la composición.   Composición Gráfica: Ordenar todos los elementos de    nuestro diseño para impactar v...
1.2 Fundamento de la composición.  Existen otros factores relacionados con la disposición de los  elementos para conseguir...
1.2 Fundamento de la composición.1.2.2 La Tensión Compositiva.  Opuesto al equilibrio, tiene como finalidad dirigir la  mi...
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, ver...
1.3 Color, Tipografía, Iconos   1.3.1 ColorElegir una combinación apropiada es una tarea muy difícilExisten Software que ...
1.3 Color, Tipografía, Iconos   1.3.2 Fuente.    Conjunto de caracteres con un estilo o modelo gráfico    determinado.   ...
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 ...
1.4 Componentes de una Interfaz   1.4.2 Sistemas de Navegación.    Permite la navegación por las diferentes secciones y  ...
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,...
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    pa...
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. ...
1.5 Lenguajes de Marcas   HTML (lenguaje de marcas hipertexto)    Lenguaje que codifica un documento que será    interpre...
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...
Próxima SlideShare
Cargando en…5
×

Tema 1

370 visualizaciones

Publicado el

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

Publicado en: Educación
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
370
En SlideShare
0
De insertados
0
Número de insertados
54
Acciones
Compartido
0
Descargas
2
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

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.

×