38
Diseño para Interne

Diseño gráfico básico para páginas web

Embed Size (px)

DESCRIPTION

Clase básica de diseño gráfico para páginas web

Citation preview

Page 1: Diseño gráfico básico para páginas web

Diseño para Internet

Page 2: Diseño gráfico básico para páginas web

¿Cómo era antes?

Page 3: Diseño gráfico básico para páginas web

Yahoo.com

Page 4: Diseño gráfico básico para páginas web

Microsoft.com

Page 5: Diseño gráfico básico para páginas web
Page 6: Diseño gráfico básico para páginas web

Proceso para diseñarnuestra página web

Page 7: Diseño gráfico básico para páginas web

LA INFORMACIÓNDesarrollar el diseño visual de la información que se desea editar. Antes de trabajar sobre el computador se realice un boceto o prediseño sobre el papel. Esto facilitará tener un orden claro sobre el diseño.

Page 8: Diseño gráfico básico para páginas web

LA INFORMACIÓNDesarrollar el diseño visual de la información que se desea editar. Antes de trabajar sobre el computador se realice un boceto o prediseño sobre el papel. Esto facilitará tener un orden claro sobre el diseño.

Page 9: Diseño gráfico básico para páginas web
Page 10: Diseño gráfico básico para páginas web
Page 11: Diseño gráfico básico para páginas web

LA ESTRUCTURAEstructura y relación jerárquica de las páginas del sitio web.Una vez que se tiene el boceto se pasa a 'escribir' la página web.

Page 12: Diseño gráfico básico para páginas web

PÁGINA DE ATERRIZAJE

Page 13: Diseño gráfico básico para páginas web

¿Qué elementos debemosusar para nuestra página web?

Page 14: Diseño gráfico básico para páginas web

ImágenesImágenes de mejor resolución y gran tamaño,

que cubran incluso todo el fondo.

Page 15: Diseño gráfico básico para páginas web
Page 16: Diseño gráfico básico para páginas web
Page 17: Diseño gráfico básico para páginas web
Page 18: Diseño gráfico básico para páginas web
Page 19: Diseño gráfico básico para páginas web
Page 20: Diseño gráfico básico para páginas web

Botones y controles más grandesPensando en los dispositivos táctiles, la tendencia en menús, botones, cajas de introducción de texto y demás controles aumentan de tamaño para ser pulsados con el dedo además del puntero del ratón.

Page 21: Diseño gráfico básico para páginas web
Page 22: Diseño gráfico básico para páginas web
Page 23: Diseño gráfico básico para páginas web

Colores sólidos y suaves, esquinas redondeadas y sombras.Colores planos, influenciados por la simpleza visual y el minimalismo.Grandes cajas con un pequeño texto o icono. Se tiende al uso de tonos pastel, que resultan relajantes y el acompañamiento perfecto a las grandes imágenes.

Se tiende a crear espacios de contenido en capas con bordes redondeados, con sombras paralelas, fondos con cierto grado de transparencia, creando espacios flotantes.

Page 24: Diseño gráfico básico para páginas web
Page 25: Diseño gráfico básico para páginas web
Page 26: Diseño gráfico básico para páginas web
Page 27: Diseño gráfico básico para páginas web
Page 28: Diseño gráfico básico para páginas web

Tomar en cuenta las tablas de programación

Page 29: Diseño gráfico básico para páginas web

Eyetracking

Page 30: Diseño gráfico básico para páginas web

Es un proceso que permite evaluar el movimiento de los ojos de una persona en relación con su cabeza. En desarrollo web,

cuando se realizan pruebas de experiencia de usuario, este procedimiento ayuda a conocer el curso de su mirada a través de la pantalla.

Page 31: Diseño gráfico básico para páginas web

Los usuarios se fijan en:Parte superior izquierda de la pantallaZona superior de la mismaProgresivamente hacia abajo y hacia la derecha.Los usuarios se fijan más en los números escritos con números que con textoEl tamaño del texto influye en la conducta de los usuarios, de tal forma que el texto grande invita a escanear la página y el texto pequeño invita a leerlo.Los párrafos cortos son más adecuados que los largos.La publicidad situada en la parte superior izquierda es la que recibe mayor atención visual.Las imágenes con caras son las que atraen más fijación de la mirada.Los listados aumentan la atención visual del usuario.El espacio en blanco es nuestro amigo.

Page 32: Diseño gráfico básico para páginas web

Los usuarios se fijan en:Parte superior izquierda de la pantallaZona superior de la mismaProgresivamente hacia abajo y hacia la derecha.El tamaño del texto influye en la conducta de los usuarios, de tal forma que el texto grande invita a escanear la página y el texto pequeño invita a leerlo.Los párrafos cortos son más adecuados que los largos.La publicidad situada en la parte superior izquierda es la que recibe mayor atención visual.Las imágenes con caras son las que atraen más fijación de la mirada.Los listados aumentan la atención visual del usuario.El espacio en blanco es nuestro amigo.

Page 33: Diseño gráfico básico para páginas web

Los usuarios se fijan en:Parte superior izquierda de la pantallaZona superior de la mismaProgresivamente hacia abajo y hacia la derecha.El tamaño del texto influye en la conducta de los usuarios, de tal forma que el texto grande invita a escanear la página y el texto pequeño invita a leerlo.Los párrafos cortos son más adecuados que los largos.La publicidad situada en la parte superior izquierda es la que recibe mayor atención visual.Las imágenes con caras son las que atraen más fijación de la mirada.Los listados aumentan la atención visual del usuario.El espacio en blanco es nuestro amigo.

Page 34: Diseño gráfico básico para páginas web

Los usuarios se fijan en:Parte superior izquierda de la pantallaZona superior de la mismaProgresivamente hacia abajo y hacia la derecha.El tamaño del texto influye en la conducta de los usuarios, de tal forma que el texto grande invita a escanear la página y el texto pequeño invita a leerlo.Los párrafos cortos son más adecuados que los largos.La publicidad situada en la parte superior izquierda es la que recibe mayor atención visual.Las imágenes con caras son las que atraen más fijación de la mirada.Los listados aumentan la atención visual del usuario.El espacio en blanco es nuestro amigo.

Page 35: Diseño gráfico básico para páginas web

Los usuarios se fijan en:Parte superior izquierda de la pantallaZona superior de la mismaProgresivamente hacia abajo y hacia la derecha.El tamaño del texto influye en la conducta de los usuarios, de tal forma que el texto grande invita a escanear la página y el texto pequeño invita a leerlo.Los párrafos cortos son más adecuados que los largos.La publicidad situada en la parte superior izquierda es la que recibe mayor atención visual.Las imágenes con caras son las que atraen más fijación de la mirada.Los listados aumentan la atención visual del usuario.El espacio en blanco es nuestro amigo.

Page 36: Diseño gráfico básico para páginas web

Los usuarios se fijan en:Parte superior izquierda de la pantallaZona superior de la mismaProgresivamente hacia abajo y hacia la derecha.El tamaño del texto influye en la conducta de los usuarios, de tal forma que el texto grande invita a escanear la página y el texto pequeño invita a leerlo.Los párrafos cortos son más adecuados que los largos.La publicidad situada en la parte superior izquierda es la que recibe mayor atención visual.Las imágenes con caras son las que atraen más fijación de la mirada.Los listados aumentan la atención visual del usuario.El espacio en blanco es nuestro amigo.

Page 37: Diseño gráfico básico para páginas web

Los usuarios se fijan en:Parte superior izquierda de la pantallaZona superior de la mismaProgresivamente hacia abajo y hacia la derecha.El tamaño del texto influye en la conducta de los usuarios, de tal forma que el texto grande invita a escanear la página y el texto pequeño invita a leerlo.Los párrafos cortos son más adecuados que los largos.La publicidad situada en la parte superior izquierda es la que recibe mayor atención visual.Las imágenes con caras son las que atraen más fijación de la mirada.Los listados aumentan la atención visual del usuario.El espacio en blanco es nuestro amigo.

Page 38: Diseño gráfico básico para páginas web

Van a diseñar la página webde su clientes individual

Ahora USTEDES