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

1. Diseño para Internet

2. ¿Cómo era antes?

3. Yahoo.com

4. Microsoft.com

6. Proceso para diseñar
nuestra página web

7. LA INFORMACIÓN
Desarrollar 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.

8. LA INFORMACIÓN
Desarrollar 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.

11. LA ESTRUCTURA
Estructura 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.

12. PÁGINA DE
ATERRIZAJE

13. ¿Qué elementos debemos
usar para nuestra página web?

14. Imágenes
Imágenes de mejor resolución y gran tamaño,
que cubran incluso todo el fondo.

20. Botones y controles más grandes
Pensando 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.

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

28. Tomar en cuenta las tablas de programación

29. Eyetracking

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

31. Los usuarios se fijan en:
Parte superior izquierda de la pantalla
Zona superior de la misma
Progresivamente hacia abajo y hacia la
derecha.
Los usuarios se fijan más en los números
escritos con números que con texto
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.

32. Los usuarios se fijan en:
Parte superior izquierda de la pantalla
Zona superior de la misma
Progresivamente 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.

33. Los usuarios se fijan en:
Parte superior izquierda de la pantalla
Zona superior de la misma
Progresivamente 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.

34. Los usuarios se fijan en:
Parte superior izquierda de la pantalla
Zona superior de la misma
Progresivamente 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.

35. Los usuarios se fijan en:
Parte superior izquierda de la pantalla
Zona superior de la misma
Progresivamente 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.

36. Los usuarios se fijan en:
Parte superior izquierda de la pantalla
Zona superior de la misma
Progresivamente 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.

37. Los usuarios se fijan en:
Parte superior izquierda de la pantalla
Zona superior de la misma
Progresivamente 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.

38. Van a diseñar la página web
de su clientes individual
Ahora USTEDES