Interactividad en Internet' Ideas y procedimientos

1
Imagen y diseño gráfico Diseño de Webs con
Photoshop

• Interactividad en Internet. Ideas y
  procedimientos
• Curso de postgrado
• 10 de noviembre de 2001
• Pere Freixa y Font

2
Photoshop como herramienta de diseño
.Visualización global de las pantallas del
Web - Definición del contenido visual en la
pantalla - Coherencia de las distintas
pantallas - Definición de un libro de estilo
del proyecto . Realización de las partes
gráficas individuales del Web
3
Photoshop como herramienta de diseño 2
.Documentación Previa - Guión de los
contenidos y de la estructura - Opciones
definitivas de navegación . Consideraciones
- Definición del usuario básico -
Caracterización técnica del proyecto. Medidas,
software y peso
4
Photoshop como herramienta de diseño 3
.Trabajo paralelo al que se realiza en la
programación - Se pueden establecer pautas de
diseño desde los dos programas - Hay que
establecer un sistema de ordenación de archivos y
de la información . Directorios de
trabajo . Documentos de codificación o libro de
estilo .
5
Croquis visual 1
.Abrimos el documento Base_navegadores.psd para
empezar a incorporar en él los elementos
definidos en el guión .El documento incorpora
varias capas con los navegadores más habituales,
en una pantalla de 800x600 píxeles. .
Incorporamos la información entre la capa de
fondo y las capas con los navegadores
6
Croquis visual 2
7
Croquis visual 3
.Los textos y el material definido en el guión se
incorpora en capas distintas al documento de
photoshop. Cada texto que pueda tener un
tratamiento distinto debe estar en una capa
independiente . Incorporamos también primeras
imágenes que nos den dimensión del peso visual
que queremos que tenga la pantalla
8
Primera propuesta de Página principal
9
Primeras conclusiones
. Esta primera propuesta permite dar una
definición de los elementos más importantes del
guión - Codificación del color en función del
apartado en el que estemos - Definición de los
botones básicos de navegación - Tamaño y
posición de los gráficos en las tablas de
HTML - Plantear las pautas visuales de
funcionamiento de los botones - Estado activo,
inactivo, activado .
10
Primera propuesta de opción museos
11
Opción museos 2
.Todas las capas que contenían información del
frame 1 las hemos ajuntado en una sola, que
nombramos frame1. . Entre el fondo y estas
capas, hemos entrado la información del guión. En
este caso, las fotos en miniatura de cada museo y
el texto correspondiente
12
Primera propuesta de opción rutas
13
Opción rutas 2
. Al igual que en la opción Museos, hemos
incorporado la información propia de la opción
Rutas entre el fondo y las capas superiores de
los navegadores y el frame 1. . En la
realización de este primer diseño aparece un
problema de guión Cómo accedemos a las
distintas rutas? Hemos añadido una barra para
poder seleccionar a qué ruta queremos
acceder. Qué supone este cambio a nivel de
guión?
14
Creación de una matriz
15
Creación de una matriz 2
. Para ajustar los elementos que hemos ido
diseñando y poder generar un primer libro de
estilo, juntamos en un mismo documento cada una
de las opciones que, previamente, habremos
acoplado en una sola capa . En una capa
superior, empezamos a trazar líneas de ajuste que
nos permitan establecer qué elementos pueden
reajustarse y en que posiciones pueden estar .
Este ajuste se realiza con todas las pantallas
importantes diseñadas
16
Creación de un libro de estilo

• . Frame superior
• tamaño del frame 120 píxeles verticales todo el
  ancho de la página
• Color de fondo FFCC33
• Tamaño máximo de banner publicitario 468 x 60 (
  común a muchos sitios de internet)
• Tamaño del Logotipo 200 x 100
• Botones de idiomas 75 x 20 píxeles, cada uno con
  tres estados
• Activo, inactivo y activado
• La nomenclatura será el nombre del idioma con
  las terminaciones _a.jpg, _b.jpg, _c.jpg.
  Ejemplo catala_a.jpg, catala_b.jpg, catala_c.jpg

17
Creación de un libro de estilo 2
. Botones idiomas Activos Activados Inactivos
. Botones opciones - Tienen dos opciones
activo y activado
18
Conclusiones
. Diseño como trabajo paralelo a la programación.
Trabajo en equipo . Definición de pautas de
estilo, matrices y diseño de las partes
individuales . Buscar la optimización en el
diseño de los elementos. Controlar el tamaño y el
peso de las imágenes . Diseñadas las pantallas
principales, con el libro de estilo, cualquier
otro diseñador debería poder incorporarse al
proyecto