Consideraciones Diseño Web

CONSIDERACIONES DISEÑO WEB
Consideraciones Diseño Web
REFERENCIA
McINTIRE, PENNY. Técnicas innovadoras en Diseño Web. Anaya,
2009
Diseño en general = aspectos estéticos.
Diseño web = aspectos estéticos + aspectos técnicos.
No podemos diseñar una página atractiva sin comprender primero

las limitaciones técnicas del medio.
Introducción
CONSIDERACIONES TÉCNICAS
El correcto funcionamiento de una página web depende
- Velocidad del ordenador
- Velocidad del servidor
- Resoluciones de pantalla
- Capacidad del navegador
Consideraciones Técnicas
Tamaño de archivos
- Nuestro grado de libertad en la elección del tamaño de archivo

d
depended de
d nuestrot público
úbli y su capacidad id d de
d su tecnología.
t l í
- Limitar al máximo su peso.
- CSS y JavaScript en ficheros aparte > reutilizar
- Reutilizar archivos gráficos, video, etc...
- No usar elementos innecesarios.
- Usar imágenes
g a tamaño real,, no reducir imágenes
g en HTML.
- Fondos de repetición.
- Minimizar el nº de botones únicos (mejor un botón único).
- Uso de Sprites
Sprites.
Tamaño de monitor y resolución de pantalla
- Existen dimensiones estandar de resolución de pantalla (800x600,

1280x1024 etc
1280x1024, etc...))
- Recordar que no toda la pantalla es superficie útil (barra

h
heramientas,
i t iiconos, b
barra scroll,
ll etc...)
t )
- Resoluciones bajas (800x600) elementos de mayor tamaño que

resoluciones altas (1600x1200)
- En monitores g
grandes se visualizará los elementos a mayor
y
tamaño que en monitores pequeños.
- Resoluciones bajas + Monitores grandes

> los pixeles son fácilmente visibles
visibles.
- Resoluciones altas + Monitores pequeños
> los elementos pueden ser tan pequeños que resultan ilegibles.
- Contemplar la existencia de nuevos soportes (netbook, ipad,

móviles etc...)
móviles, etc )
- A la hora de decidir, existen estadísticas, pero no siempre pueden

coincidir
i idi con nuestro
t público
úbli objetivo.
bj ti
Tamaño horizontal y vertical de página
- Las barras de desplazamiento horizontal, no son bien acogidas.
- Tamaño vertical. Preferible páginas largas que descargar varias

páginas siguientes. Cuando un usuario se encuentra con un botón
siguiente,
i i t se plantea
l t sii continuar
ti o no. H
Hay más
á probabilidad
b bilid d d
de
retener a un usuario con páginas largas.
Elementos técnicos de diseño.

- Mismo resultado se puede obtener por diferentes procedimientos
(t bl
(tablas, di
divs, etc...).
t ) C Considerar
id té
técnicamente
i t cuall es ell mejor
j
método, JavaScript, CSS.
CONSIDERACIONES ESTÉTICAS
La "sobrecarga de información" de una página caótica,

desorganizada y demasiado llena provoca rechazo en los usuarios
usuarios.
Tanto, que es probable que abandone la página antes de tener que
vérselas con la gimnasia mental que les supondría desentrañarla.
Cuando una cosa requiere una inversión grande de tiempo, o lo

parece, es poco probable que se utilice.
Por el contrario, las páginas bien organizadas, con espacios vacíos

necesarios,, dan impresión
p de simplicidad,
p , incluso aunque
q estén
llenas de información.
Consideraciones Estéticas
Llenar la pantalla
Cuando nuestra página o sección de página se enfrenta a

resoluciones mayores o menores al que fué diseñado.
Diseño sólido (ancho fijo)

• Centrar divide p
por 2.
• Control de como se verá la página.
Diseño líquido (ancho variable)

•La página se expande-contrae para rellenar el espacio disponible.
•Menos predecibles
•Las
Las propiedades CSS mamax-width
idth y min
min-width
idth p
pueden
eden resol
resolver
er el
problema de áreas de contenido demasiado anchas o demasiado
estrechas dentro de un diseño líquido.
Elementos para el diseño de la página
Líneas
•Permiten dividir, conectar, decorar, organizar y encerrar

elementos.
•Los bordes suelen ser decorativos, aunque si los colocamos en

una sección pueden servir para limitar y organizar.
•Pueden ser visibles o invisibles. Las líneas invisibles son el

componente principal de las cuadrículas.
Líneas invisibles. Cuadrícula subyacente. Conectar líneas con el esquema de la página.
Formas
•Ayudan estéticamente a componer y enriquecer diseños,
permiten integrar secciones.
Color
•Es la herramienta más poderosa para transmitir una determinada
atmósfera y personalidad al sitio web.
Armonía visual
•Equilibrio y serenidad para dar la sensación de que la página

es fácil de utilizar y lo bastante estimulante como para que el
usuario
i realmente
l t quiera
i utilizarla.
tili l
•Demasiado sereno > aburrido. El usuario puede abandonar.
•Excesivamente estimulante > visualmente caótico. El usuario

puede abandonar.
p
Armonía visual
Obtener armonía.
- Repetición de formas básicas.
- Alineación de elementos.
- Espacio libre, permite respirar.
- Orden, coherencia y organización.
Obtener estimulación.
- Puntos de interés.
- Contrastes
Contrastes.
Técnicas para conseguir armonía visual
•Limitar el número de elementos. Solo los imprescindibles.
•Repetir
R ti elementos,
l t fformas, tamaños,
t ñ proporciones,
i colores,
l
tipografías, etc...
•Dar sensación de continuidad y conectar secciones "ecos

visuales". No suma de elementos separados.
•Repetir el mismo esquema estándar de página en todo el

sitio. Una vez que el usuario ha creado un esquema visual, no
destrozarlo cambiando elementos del sitio.
•Sí se puede crear páginas diferentes (páginas de segundo

nivel) pero que no sean diametralmente opuestas a las plantillas
genéricas.
éi
•Solo debemos variar la plantilla estándar si existe un motivo.
•Alinear elementos.
•Agrupar la información relacionada. Crear conexiones entre

elementos dispersos.
•Utilizar el contraste para crear jerarquía visual. Cualquier

elemento que es diferente del resto, destaca. Puede ser sutil o
extremo.
t
•Utilizar el contraste para crear jerarquía visual. Cualquier

elemento que es diferente del resto, destaca. Puede ser sutil o
extremo.
t
• Líneas. Finas, gruesas, invisibles.
• Formas. Redondeadas, angulosas.
• Tamaño.
Tamaño Grande
Grande, pequeño
pequeño.
• Color. Cálidos, fríos. Blanco, negro.
• Textura. Liso, rugoso.
• Tipografía.
Tipografía Normal,
Normal Negrita
Negrita.
• Enfoque. Nítido o enfocado.
• Espacio. Sobrecargado, vacío.
• Dirección.
Dirección Horizontal
Horizontal, vertical
vertical.
• Estilo.
No obstante, hay que ser

moderado al crear
contrastes.
Aumentar el número de
contrastes puede restar
importancia a otros puntos
focales
focales.
• Incluir espacios en blanco. Libres de contenido.
Trabajar con el equilibrio visual.
• El equilibrio predeterminado es el equilibrio simétrico

(2 elementos similares a ambos lados de un eje) = aburrido.
•Dentro de un equilibrio simétrico, la variedad de los elementos

puede provocar cierto "alivio" visual.
• Resultados más dinámicos utilizando un equilibrio asimétrico.
• Aumentar
A t ell desequilibrio,
d ilib i puede
d generar un aumento
t dde
tensión.
• Usar conceptos básicos de composición para generar focos de

interés. Por ejemplo, rectángulo áureo (o teoría del tercio).
Colocar elementos de la página.
Existen ciertas convenciones de diseño.

Navegación Superior-Izquierda.
• Área superior-izquierda = área segura de visualización.
• Lectura occidental.
• Si rompemos
p con ciertas convenciones debemos
compensarlo haciendo nuevas propuestas muy destacadas
para suplir su ubicación no habitual.
• Área superior izquierda, es el área más importante.

Debería ser visible la información antes de usar la barra de
deslizamiento vertical (similar prensa escrita)
escrita).
Consideraciones
Elementos de página obligatorios.
•Logo o identificador. A veces no se llega por la puerta principal,

el usuario debe saber dónde está.
•Identificación de página o título.
•Sistema de navegación principal.
•Sistema de navegación
g local ((si fuese necesario p
por el volumen
de contenido).
•Pie
Pie de página.
Consideraciones
Página de inicio.
•Punto de entrada. Portal.
•Debería
D b í ser una ttabla
bl dde contenidos.
t id
•Destacar los puntos más importantes.
•No solo índice, es bueno mostrar algo del contenido.
Consideraciones
Metodología.
•Boceto del sitio.
•Diseño
Di ñ en editor
dit d de iimágenes
á (Ph
(Photoshop).
t h )
•Una vez aprobado el diseño se genera estructura (HTML).

Plantillas del sitio, estructura principal.
•Se asignan
g estilos ((CSS)) y se colocan las imágenes,
g fondos,
etc a las plantillas principales.
•Se
Se incorpora el contenido.
Consideraciones

Consideraciones Diseño Web

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Consideraciones Diseño Web

Cargado por

Copyright:

Formatos disponibles

CONSIDERACIONES DISEÑO WEB

Consideraciones Diseño Web

Diseño en general = aspectos estéticos.

Diseño web = aspectos estéticos + aspectos técnicos.

No podemos diseñar una página atractiva sin comprender primero

El correcto funcionamiento de una página web depende

- Velocidad del ordenador

- Velocidad del servidor

- Capacidad del navegador

- Nuestro grado de libertad en la elección del tamaño de archivo

Tamaño de monitor y resolución de pantalla

- Existen dimensiones estandar de resolución de pantalla (800x600,

- Recordar que no toda la pantalla es superficie útil (barra

- Resoluciones bajas (800x600) elementos de mayor tamaño que

Tamaño de monitor y resolución de pantalla

Tamaño de monitor y resolución de pantalla

Tamaño de monitor y resolución de pantalla

- Resoluciones bajas + Monitores grandes

Tamaño de monitor y resolución de pantalla

- Contemplar la existencia de nuevos soportes (netbook, ipad,

- A la hora de decidir, existen estadísticas, pero no siempre pueden

Tamaño horizontal y vertical de página

- Las barras de desplazamiento horizontal, no son bien acogidas.

- Tamaño vertical. Preferible páginas largas que descargar varias

Elementos técnicos de diseño.

La "sobrecarga de información" de una página caótica,

Cuando una cosa requiere una inversión grande de tiempo, o lo

Por el contrario, las páginas bien organizadas, con espacios vacíos

Cuando nuestra página o sección de página se enfrenta a

Diseño sólido (ancho fijo)

Diseño líquido (ancho variable)

Elementos para el diseño de la página

•Permiten dividir, conectar, decorar, organizar y encerrar

•Los bordes suelen ser decorativos, aunque si los colocamos en

•Pueden ser visibles o invisibles. Las líneas invisibles son el

Elementos para el diseño de la página

Líneas invisibles. Cuadrícula subyacente. Conectar líneas con el esquema de la página.

Elementos para el diseño de la página

Elementos para el diseño de la página

•Equilibrio y serenidad para dar la sensación de que la página

•Demasiado sereno > aburrido. El usuario puede abandonar.

•Excesivamente estimulante > visualmente caótico. El usuario

Técnicas para conseguir armonía visual

•Limitar el número de elementos. Solo los imprescindibles.

•Dar sensación de continuidad y conectar secciones "ecos

•Repetir el mismo esquema estándar de página en todo el

Técnicas para conseguir armonía visual

•Sí se puede crear páginas diferentes (páginas de segundo

•Solo debemos variar la plantilla estándar si existe un motivo.

•Agrupar la información relacionada. Crear conexiones entre

Técnicas para conseguir armonía visual

•Utilizar el contraste para crear jerarquía visual. Cualquier

Técnicas para conseguir armonía visual

•Utilizar el contraste para crear jerarquía visual. Cualquier

Técnicas para conseguir armonía visual

No obstante, hay que ser

Técnicas para conseguir armonía visual

• Incluir espacios en blanco. Libres de contenido.

Trabajar con el equilibrio visual.

• El equilibrio predeterminado es el equilibrio simétrico

•Dentro de un equilibrio simétrico, la variedad de los elementos

Trabajar con el equilibrio visual.

• Resultados más dinámicos utilizando un equilibrio asimétrico.

Trabajar con el equilibrio visual.