Diseño Visual Luis Carlos Aceves G

Objetivos El punto inicial de contacto con cualquier usuario Transmitir la identidad e imagen visual de la organización Permitir una coherencia y estilo en todas las páginas del portal Crear una primera experiencia positiva y agradable para el usuario (look & feel)

El punto inicial de contacto con cualquier usuario

Transmitir la identidad e imagen visual de la organización

Permitir una coherencia y estilo en todas las páginas del portal

Crear una primera experiencia positiva y agradable para el usuario (look & feel)

Características generales Es la forma en que ciertos aspectos importantes de un sitio son presentados , no solo son aspectos estéticos Los aspectos visuales deben garantizar que cualquier usuario comprenda la oferta del sitio El uso de hojas de estilo (Cascade Style Sheets) se presenta como una alternativa para asegurar un diseño estandarizado

Es la forma en que ciertos aspectos importantes de un sitio son presentados , no solo son aspectos estéticos

Los aspectos visuales deben garantizar que cualquier usuario comprenda la oferta del sitio

El uso de hojas de estilo (Cascade Style Sheets) se presenta como una alternativa para asegurar un diseño estandarizado

Homepage – Página de inicio Transmitir la identidad Responder inmediatamente qué hace la organización responsable del sitio Aspectos a cuidar: La primera impresión Resolución y formato

Transmitir la identidad

Responder inmediatamente qué hace la organización responsable del sitio

Aspectos a cuidar:

La primera impresión

Resolución y formato

Manejo de sistema visual y retícula de las páginas Un sistema visual es: una forma para mantener la consistencia en el manejo de elementos gráficos en todas las páginas algo que asegura la estandarización en la presentación y ubicación de contenido, secciones y funcionalidades

Un sistema visual es:

una forma para mantener la consistencia en el manejo de elementos gráficos en todas las páginas

algo que asegura la estandarización en la presentación y ubicación de contenido, secciones y funcionalidades

Manejo de sistema visual y retícula de las páginas La retícula de las páginas ( page layout ) es: la estructura visual en que la información será presentada en las páginas una representación gráfica de las secciones y jerarquías

La retícula de las páginas ( page layout ) es:

la estructura visual en que la información será presentada en las páginas

una representación gráfica de las secciones y jerarquías

Elementos multimedia Animaciones, audio y videos permiten crear un sitio más dinámico Ayudan a comunicar de una forma alternativa cierta información , facilitando su entendimiento Aspectos a cuidar: Información sobre los elementos multimedia Control sobre el uso de contenido multimedia

Animaciones, audio y videos permiten crear un sitio más dinámico

Ayudan a comunicar de una forma alternativa cierta información , facilitando su entendimiento

Aspectos a cuidar:

Información sobre los elementos multimedia

Control sobre el uso de contenido multimedia

Manejo de imágenes A diferencia de las imágenes impresas, las imágenes utilizadas en la web son fáciles de integrar Las imágenes animadas pueden hacer más lenta la descarga de la página No incluir textos como parte de la imagen pues no será accesible

A diferencia de las imágenes impresas, las imágenes utilizadas en la web son fáciles de integrar

Las imágenes animadas pueden hacer más lenta la descarga de la página

No incluir textos como parte de la imagen pues no será accesible

Manejo de imágenes Deben cumplir con alguno de los siguientes propósitos: proveer información establecer algún contexto facilitar el aprendizaje proporcionar alguna indicación establecer alguna identidad mejorar el look and feel

Deben cumplir con alguno de los siguientes propósitos:

proveer información

establecer algún contexto

facilitar el aprendizaje

proporcionar alguna indicación

establecer alguna identidad

mejorar el look and feel

Manejo de imágenes Aspectos a cuidar: Uso de imágenes con intención Iconografía Imágenes de acciones universales Texto descriptivo a través de atributo ALT Tamaño y formato de las imágenes Thumbnails

Aspectos a cuidar:

Uso de imágenes con intención

Iconografía

Imágenes de acciones universales

Texto descriptivo a través de atributo ALT

Tamaño y formato de las imágenes

Thumbnails

Estándares de diseño web Estándares de estructura : se refieren a la correcta construcción de páginas web • Estándares de presentación : están relacionados con los lineamientos de formato y diseño visual • Estándares de comportamiento : están relacionados con lo que se desea que haga la página de forma dinámica

Estándares de estructura :

se refieren a la correcta construcción de páginas web

• Estándares de presentación :

están relacionados con los lineamientos de formato y diseño visual

• Estándares de comportamiento :

están relacionados con lo que se desea que haga la página de forma dinámica

Manejo de enlaces Elementos para identificar dónde debe hacer clic para llegar a determinada información o servicio Tipos: Embebidos Estructurales Asociativos Los enlaces deben ser descriptivos para que los usuarios tengan claro qué ocurrirá al hacer clic La presentación de los enlaces puede ser definida en los CSS

Elementos para identificar dónde debe hacer clic para llegar a determinada información o servicio

Tipos:

Embebidos

Estructurales

Asociativos

Los enlaces deben ser descriptivos para que los usuarios tengan claro qué ocurrirá al hacer clic

La presentación de los enlaces puede ser definida en los CSS

Manejo de enlaces Aspectos a cuidar: La cantidad de enlaces a presentar Hacer obvio lo que es sensible a un clic (uso de color, subrayado, uso de viñetas o el diseño de botón) Diferenciar las ligas visitadas y las no visitadas Texto descriptivo para los enlaces

Aspectos a cuidar:

La cantidad de enlaces a presentar

Hacer obvio lo que es sensible a un clic (uso de color, subrayado, uso de viñetas o el diseño de botón)

Diferenciar las ligas visitadas y las no visitadas

Texto descriptivo para los enlaces

Tipografía y texto Medios impresos: Entre 10 y 12 puntos de resolución, en color oscuro y con un fondo claro Web: No depende completamente del diseñador Es difícil leer en la web La definición de tipografías se puede hacer en los CSS

Medios impresos:

Entre 10 y 12 puntos de resolución, en color oscuro y con un fondo claro

Web:

No depende completamente del diseñador

Es difícil leer en la web

La definición de tipografías se puede hacer en los CSS

Tipografía y texto Aspectos a cuidar: Tipografías “sin serif” Al menos de 10 puntos Entre más angosta sea la columna de lectura será más legible Es muy útil contar con viñetas, textos resaltados y párrafos cortos para no saturar al usuario Crear una versión para impresión

Aspectos a cuidar:

Tipografías “sin serif”

Al menos de 10 puntos

Entre más angosta sea la columna de lectura será más legible

Es muy útil contar con viñetas, textos resaltados y párrafos cortos para no saturar al usuario

Crear una versión para impresión

Color Más que componente decorativo ayudan a resaltar elementos que tengan relevancia en el sitio Debe ser estéticamente agradable a los ojos y el contraste entre ellos debe ser claro para dar jerarquía a los elementos

Más que componente decorativo ayudan a resaltar elementos que tengan relevancia en el sitio

Debe ser estéticamente agradable a los ojos y el contraste entre ellos debe ser claro para dar jerarquía a los elementos

Color Aspectos a cuidar: Manejo en el contraste en textos para ayudar a la legibilidad Fondo oscuro, la letra debe ser clara y viceversa Evitar: Textos en gris Marcas de agua Texturas bajo textos

Aspectos a cuidar:

Manejo en el contraste en textos para ayudar a la legibilidad

Fondo oscuro, la letra debe ser clara y viceversa

Evitar:

Textos en gris

Marcas de agua

Texturas bajo textos