CONSIDERACIONES DISEÑO WEB

CONSIDERACIONES DISEÑO WEB
Consideraciones Diseño Web
REFERENCIA
McINTIRE, PENNY. Técnicas innovadoras en Diseño Web. Anaya,
2009
Consideraciones Diseño Web
CONSIDERACIONES ESTÉTICAS
La "sobrecarga de información" de una página caótica,
desorganizada y demasiado llena provoca rechazo en los 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 de simplicidad, incluso aunque estén
llenas de información. Espacio positivo y negativo equilibrado.
Consideraciones Estéticas
Consideraciones Diseño Web
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 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 propiedades CSS max-width y min-width pueden resolver el
problema de áreas de contenido demasiado anchas o demasiado
estrechas dentro de un diseño líquido.
Consideraciones Estéticas
Consideraciones Diseño Web
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.
Consideraciones Estéticas
Consideraciones Diseño Web
Elementos para el diseño de la página
Líneas invisibles. Cuadrícula subyacente.
Consideraciones Estéticas
Conectar líneas con el esquema de la página.
Consideraciones Diseño Web
Elementos para el diseño de la página
Formas
•Ayudan estéticamente a componer y enriquecer diseños,
permiten integrar secciones.
Consideraciones Estéticas
Consideraciones Diseño Web
Elementos para el diseño de la página
Color
•Es la herramienta más poderosa para transmitir una
determinada atmósfera y personalidad al sitio web.
Consideraciones Estéticas
Consideraciones Diseño 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 realmente quiera utilizarla.
•Demasiado sereno = aburrido. El usuario puede abandonar.
•Excesivamente estimulante = visualmente caótico. El usuario
puede abandonar.
Consideraciones Estéticas
Consideraciones Diseño Web
Armonía visual
Cómo obtener armonía.
- Repetición de formas básicas.
- Alineación de elementos.
- Espacio libre, permite respirar.
- Orden, coherencia y organización.
Cómo obtener estimulación.
- Puntos de interés.
- Contrastes.
Consideraciones Estéticas
Consideraciones Diseño Web
Técnicas para conseguir armonía visual
•Limitar el número de elementos. Solo los imprescindibles.
•Repetir elementos, formas, tamaños, proporciones, colores,
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.
Consideraciones Estéticas
Consideraciones Diseño Web
Técnicas para conseguir armonía visual
•Sí se puede crear páginas diferentes (páginas de segundo
nivel) pero que no sean diametralmente opuestas a las plantillas
genéricas.
•Solo debemos variar la plantilla estándar si existe un motivo.
•Alinear elementos.
•Agrupar la información relacionada. Crear conexiones entre
elementos dispersos.
Consideraciones Estéticas
Consideraciones Diseño Web
Técnicas para conseguir armonía visual
•Utilizar el contraste para crear jerarquía visual. Cualquier
elemento que es diferente del resto, destaca. Puede ser sutil o
extremo.
Consideraciones Estéticas
Consideraciones Diseño Web
Técnicas para conseguir armonía visual
•Utilizar el contraste para crear jerarquía visual. Cualquier
elemento que es diferente del resto, destaca. Puede ser sutil o
extremo.
• Líneas. Finas, gruesas, invisibles.
• Formas. Redondeadas, angulosas.
• Tamaño. Grande, pequeño.
• Color. Cálidos, fríos. Blanco, negro.
• Textura. Liso, rugoso.
• Tipografía. Normal, Negrita.
• Enfoque. Nítido o enfocado.
• Espacio. Sobrecargado, vacío.
• Dirección. Horizontal, vertical.
• Estilo.
Consideraciones Estéticas
Consideraciones Diseño Web
Técnicas para conseguir armonía visual
No obstante, hay que ser
moderado al crear
contrastes.
Aumentar el número de
contrastes puede restar
importancia a otros puntos
focales.
Consideraciones Estéticas
Consideraciones Diseño Web
Técnicas para conseguir armonía visual
• Incluir espacios en blanco. Libres de contenido.
Consideraciones Estéticas
Consideraciones Diseño Web
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.
Consideraciones Estéticas
Consideraciones Diseño Web
Trabajar con el equilibrio visual.
• Resultados más dinámicos utilizando un equilibrio asimétrico.
• Aumentar el desequilibrio, puede generar un aumento de
tensión.
Consideraciones Estéticas
Consideraciones Diseño Web
Trabajar con el equilibrio visual.
• Usar conceptos básicos de composición para generar focos de
interés. Por ejemplo, rectángulo áureo (o teoría del tercio).
Consideraciones Estéticas
Consideraciones Diseño Web
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 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).
Consideraciones
Consideraciones Diseño Web
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 local (si fuese necesario por el volumen
de contenido).
•Pie de página.
Consideraciones
Consideraciones Diseño Web
Página de inicio.
•Punto de entrada. Portal.
•Debería ser una tabla de contenidos.
•Destacar los puntos más importantes.
•No solo índice, es bueno mostrar algo del contenido.
Consideraciones
Consideraciones Diseño Web
Metodología.
•Boceto del sitio.
•Diseño en editor de imágenes (Photoshop).
•Una vez aprobado el diseño se genera estructura (HTML).
Plantillas del sitio, estructura principal.
•Se asignan estilos (CSS) y se colocan las imágenes, fondos,
etc a las plantillas principales.
•Se incorpora el contenido.
Consideraciones