Present 1

Desarrollo de proyectos WEB
Diseño
De
present
aciónPARTE 1
Diseño WEB
Extraído de:
Ray, K y Amy, S. (1998). Diseño interactivo. España, Anaya Multimedia.
Adaptado por Gabriel Francés

seño WEB Diseño
de
Si no te puedes imaginar
algo, tampoco lo puedes
hacer; pero todo lo que
puedas imaginar es real
“
”
Alexander Calder
Para comenzar

seño WEB Diseño
de
¿Qué veremos en
esta presentación?
¿Qué es el D. Presentación?
Tareas del D.Presentación
El diseño de presentación
suele ser vista como una de las
etapas más atractivas del
proceso de creacicón de un sitio
web. Es muy tentador comenzar
por esta fase, pero como
veremos en las siguinetes
láminas todas las tareas del
diseño de presentación se
fundamentas en las etapas
anteriores.

Implica
el trabajo de
definir el estilo de
los diferentes
elementos que se
presentarán al
usuario en la
pantalla.
La
presentación
es el estilo y
diseño de los
elementos en
pantalla
seño WEB Diseño
de
Introducción

Sepa
cuando
romper las
reglas
Tome
consejos
Hágalo
simple
Hágalo
consistente
seño WEB Diseño
de
Algunas reglas Básicas

Definir el estiloDefinir el estilo
visualvisualDistribuirDistribuir
Los elementosLos elementos
a presentara presentar
Crear los elementosCrear los elementos
estructuralesestructurales
de cada pantalla:de cada pantalla:
fondos,fondos,
ventanas yventanas y
paneles, etc.paneles, etc.
Crear losCrear los
elementoselementos
de controlde control
(botones)(botones)Crear el prototipoCrear el prototipo
Tareas del Diseño de presentación
Diseño
de
seño WEB

Definir el estiloDefinir el estilo
visualvisual
Diseño
de
seño WEB
Un colegio tendrá
unos colores que lo
identifiquen, un
escudo, un tipo de
tipográfica, igualmete
lo tiene una banda de
rock, un museo o una
marca.
Toda institución, así como
persona, tienen su estilo y
personalidad, de lo cual se
desprende el estilo visual
que usted seleccionarápara su sitio. No hacerlo es
ir en contra de la identidad
de su cliente.

Una familia de pantallas se demonina a un grupo de éstas que
han sido diseñadas siguiendo un patron común. En otras palabras
hay elemntos que claramente pueden asociarse entre ellas.
Diseñe lasDiseñe las
pantallaspantallas
que utilizaráque utilizará
Diseño
de
seño WEB
Partiendo del punto
anterior cree una
familia de pantallas
compuesta por cada
uno de los capítulos o
temas presentes en el
diseño de información.

Diseñe lasDiseñe las
pantallaspantallas
que utilizaráque utilizará
Diseño
de
seño WEB
Una familia de pantallas se
demonina a un grupo de éstas
que han sido diseñadas
siguiendo un patron común. En
otras palabras hay elementos
que claramente pueden
asociarse entre ellas.
ejemplo

de cada pantalla:de cada pantalla:
fondos,fondos,
ventanas yventanas y
paneles, etc.paneles, etc.
Diseño
de
seño WEB
En función de las necesidades de su
diseño de interacción, y del estilo de su
sitio identifique cada uno de los
elementos necesarios para desarrollar
su página.
Es muy importante desglozar el
archivo de diseño y discriminar
cuales de los objetos presentes
deberán utilizarse como imáges,
texto, o con combinaciones de
estos.

Diseño
de
seño WEB
Cuando el diseñador gráfico
entrega su trabajo, suele dar un
archivo de imagen, no un
documento “HTML”. Con ese
docuemnto trabajará el web
master.
El web master tendrá que picarlo o
desglosar de modo tal que luzca en web
tal cual como fue creado, además de
luchar con la presición de la colocación
de los objetos dentro del docuemnto
HTML
deberá hacer usos de todos sus
conocimientos técnicos para que
tambien el archivo se descargue
eficientemente.

Diseño
de
seño WEB
Por ejemplo, tomemos el
siguinte boceto de pantalla, haz
click sobre cada uno de los
objetos y veraz que tipo de
documento es.

Cuando tenga que utilizar este recurso trate en lo posible de transformar su
imagen en un archivo GIF, que sólo utilice los colores presentes en la
imagen. Mientras menos colores menos pesada será la imagen
estructuralesestructurales Título de la página esta en
formato de imagen, para así
preservar el tamaño de la
tipografía, color y tipo.

Trate de logar la mayor definición del objeto, sobre todo cuando este debe
colocarse a un tamaño muy pequeño, mientras más reducimos un archivo de
imagen de tamaño más definición perdemos
estructuralesestructurales Archivo de imagen con el
logo de la institución, no
reemplazable por otro tipo de
archivo.

Texto dentro del documento,
utilice una tipografía de uso
común para así logar que su
página se descargue de la
mejor forma en los equipos
de sus usuarios. Archivo de imagen.

Barra de navegación
por los contenidos,
botones elaborados
con imagen de
sistitución.
Cuando trabajamos con imágenes de
sustitución hay que crear dos imáges
por cada botón, uno para el botón en
reposo y otro para el botón cuando el
mouse está encima “Sobre”.
> On TV > On TV
botón en reposo Botón “sobre”

Crear el prototipoCrear el prototipo
Diseño
de
seño WEB
Esta tarea deberá intergar todos
los elementos y hacerlos lucir
fantásticamente. Su trabajo
deberá engranar todo tan
perfectamente como para
mantener a su cliente y
diseñador muy agusto con los
resultados.

Diseño
de
seño WEB
Lo que sigue es presentar su
maqueta o prototipo a su cliente;
pero tal vez esta no sea una tan
gratificante, y preparese para
ello. Lo más factible es que
salgan ajustes de última hora, o
tal vez a su cliente se le ocurra
cambiar algun detalle, etc.
Creanme eso ocurre.

Diseño
de
seño WEB
Lo mejor es escuchar las
observaciones, evaluar
su factibilidad, y revisar
si estuvieron previstas
en las demás etapas del
proyecto
“
”

Diseño
de
seño WEB
Tenga presente que un
sitio web nunca esta
culminado, siempre es
susectible a cambios y
actualizaciones
“
”

Present 1

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a Present 1

Similar a Present 1 (20)

Último

Último (20)

Present 1