la web
DESCRIPTION
aspectos de diseño para un pagina webTRANSCRIPT
![Page 1: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/1.jpg)
La WEB desde la GráficaDiseñando para WEB
María Claudia Posadas (Maclau)_Director de ArteCamilo Iturra_Director GeneralWikot Technologies
![Page 2: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/2.jpg)
WEB=MEDIO
El público objetivo se convierte en un usuario, el cual no solo va a observar el diseño de un sitio si no que va a interactuar con el.
![Page 3: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/3.jpg)
CARACTERISTICAS DEL MEDIO• Comunicación Global• Conexiones Remotas y Tiempo de Carga• Variedad de usuarios (étnicas u culturales)• Usuarios expertos y novatos comparten el mismo espacio• Rápida evolución de las tecnologías• Puntos de entrada desconocidos• Fronteras difusas• Importancia de la primera impresión• La página como unidad• Variedad de plataformas• Posibilidad de desarrollo y mantenimiento descentralizado• Ausencia de estándares en general (estamos cambiando)
![Page 4: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/4.jpg)
LINEAMIENTOS GENERALES1. Hipertexto e Hipermedia2. Contenido3. Navegación4. Imágenes5. Fondos y colores6. Animación7. Mapas
![Page 5: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/5.jpg)
LINEAMIENTOS GENERALES1. Hipertexto e Hipermedia• Dividir la información en trozos asegurando que la estructura principal se coloque en primer lugar• No crear enlaces a páginas con poca información o información irrelevante• Establecer claras relaciones entre páginas enlazadas• Enlaces con etiquetas que indiquen el destino (no en los casos obvios)• Asegurar la simplicidad de navegación• Consistencia en forma y color• Es necesario ser cuidadosos para no caer en un Hipercaos: demasiados enlaces, cadenas de enlaces muy largas para ubicar información relevante, etc.
![Page 6: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/6.jpg)
LINEAMIENTOS GENERALES2. Contenido• Establecer un balance entre el contenido y la apariencia• Secuencia, agrupamiento y énfasis de la información• Uso apropiado de hiperenlaces y señales visuales con propósitos definidos• Los títulos deben ser descriptivos y el texto fácil de comprender• Los elementos relevantes al tope de la página• Considerar posición de los elementos en la pantalla, cantidad de información y de hiperenlaces, señales visuales, color, texto.
![Page 7: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/7.jpg)
LINEAMIENTOS GENERALES3. NavegaciónPara navegar exitosamente el usuario debe ser capaz de responder las siguientes preguntas:• ¿Dónde estoy?• ¿De dónde vengo?• ¿A dónde puedo ir?• ¿Qué puedo hacer aquí?• ¿Cómo llegué aquí?• ¿Cómo puedo ir allá?
![Page 8: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/8.jpg)
LINEAMIENTOS GENERALES3. NavegaciónCada página debe mostrar al usuario, de una forma consistente:• dónde se encuentra (títulos, encabezados o imágenes)• cómo puede avanzar (marcas de texto, enlaces, listas históricas, subtítulos)• qué puede hacer y cómo puede hacerlo (textos, imágenes, menús)
![Page 9: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/9.jpg)
LINEAMIENTOS GENERALES4. Imágenes• Mantener consistencia en el uso de imágenes dentro del sitio Web• Establecer el tamaño de las imágenes de acuerdo a su tiempo de carga
![Page 10: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/10.jpg)
LINEAMIENTOS GENERALES5. Fondos y colores• Debe existir suficiente contraste de colores con el texto• Limitar el número de colores en una página y en un sitio Web o usarlos consistentemente
![Page 11: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/11.jpg)
LINEAMIENTOS GENERALES6. Animación• Debe evitarse en páginas con mucho contenido• Se debe proveer una opción para detener el movimiento si este es muy largo
![Page 12: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/12.jpg)
LINEAMIENTOS GENERALES7. Mapas• Los mapas deben facilitar la navegación en el sitio Web.• En general se aplican los mismos lineamientos que en el caso de imágenes.
![Page 13: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/13.jpg)
LINEAMIENTO ≠ DOGMA
![Page 14: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/14.jpg)
DISEÑANDO SEGÚN LA OCASIÓN
Tipos de Site:
Contenido (informativo)E-CommercePromocional
...entre otros
![Page 15: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/15.jpg)
Contenido (informativo)
www.el-nacional.com www.bbcnews.com www.elpais.es
![Page 16: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/16.jpg)
Contenido (informativo)Contenido: Una buena escritura es el corazón de un sitio de contenido, pero el contenido debe estar muy claro y ser lo más directo para sus usuarios. La misma cantidad y distribución del texto que se utiliza en un impreso no funcionaría en la Web.Navegación: Debe ser intuitiva.Búsqueda: Debe ser efectiva.Estética: Se debe adaptar el diseño al estilo del contenido del sitio, sin opacar al mismo.Nuevas Tecnologías: La mayoría de los sitios de contenido deben ser accesibles el 90% de la audiencia, pero películas de FLASH y desarrollos por el estilo pueden ser utilizados a manera de experimentación ó siempre advirtiendo de su uso al usuario.
![Page 17: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/17.jpg)
![Page 18: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/18.jpg)
![Page 19: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/19.jpg)
![Page 20: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/20.jpg)
E-Commerce
www.amazon.com www.victoriassecret.com www.materialkit.com
![Page 21: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/21.jpg)
E-CommerceNavegación: Esencial sobretodo si el sitio ofrece gran variedad de productos.Búsqueda: ¡Importante!, Un buen diseñador de e-commerce debe entrar en la cabeza del usuario para así determinar como crear excelentes opciones de búsqueda para los potenciales compradores.Estética: El diseño debe mantenerse enfocado en el producto. Los elementos del sitio deben incluir herramientas de ayuda para que el usuario pueda acceder a cualquier producto dentro del sitio.Contenido: El texto debe ser reducido pero muy informativo.Nuevas Tecnologías: Deja estas herramientas para los programadores que desarrollan el backend.
![Page 22: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/22.jpg)
![Page 23: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/23.jpg)
![Page 24: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/24.jpg)
![Page 25: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/25.jpg)
Promocional
www.saintsandsoldiers.com www.startwars.com off line
![Page 26: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/26.jpg)
PromocionalEstética: Esencial, usa el diseño para crear una atmósfera que le indique al usuario sobre el contenido de sitio.Nuevas Tecnologías: Mientras mas pequeña y tecnológicamente sofisticada es el target de usuarios, mas arriesgado puede ser el diseño del sitio.Navegación: La navegación es importante en cualquier sitio, pero no es el enfoque de este.Contenido: El largo del contenido se encuentra entre el minimalismo del e-commerce y la verbosidad de las sitios de contenido. El diseño debe reflejar el tono del contenido del sitio.Búsqueda: Los sitio pequeños se pueden manejar muy bien con una buena navegación sin necesidad de usar funciones de búsqueda. La información siempre sea de fácil acceso.
![Page 27: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/27.jpg)
![Page 28: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/28.jpg)
![Page 29: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/29.jpg)
![Page 30: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/30.jpg)
USABILIDAD
“<programación>: La efectividad, eficiencia y satisfacción con la que los usuarios pueden realizar tareas en el ambiente particular de un producto. Alta usabilidad significa que un sistema es fácil de aprender y recordar, eficiente, visualmente placentero y divertido y fácil de recuperarse de los errores”.
![Page 31: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/31.jpg)
Jakob Nielsen's Alertbox, December 22, 2003:
Top Ten Errores del Diseño Web de 2003
1. Proposito de Sitio poco claro.Lenguaje vago o generico para describir el proposito del sitio.
2. Nuevos URLs para páginas archivadasArchivar páginas con un URL nuevo, causará molestias en usuarios y sites que enlazaan a esta información.
![Page 32: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/32.jpg)
Jakob Nielsen's Alertbox, December 22, 2003:
3. Contenido sin FechaSin fechas el usuario no podrá descifrar la vigencia del contenido.
4. Thumbnail de imágenes grandes, Fotos detalladasLos Thumbnails deben ser reconocibles a simple vista.
Foto de whitehouse.gov y muestra el presidente de Estado Unidos, el Secretario del Interior y el Director del Servicio Nacional de Parques caminando por las montañas de Santa Mónica.
Foto es de cnn.com, esta foto ilustra una historia sobre inundaciones. En esta imagen se puede ver de que se trata y en un tamaño de 65 x 49 pixels.
![Page 33: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/33.jpg)
Jakob Nielsen's Alertbox, December 22, 2003:Al usar fotos en la Web considera:
• Incluir pocas personas y objetos, en ambientes menos complejos que si fuese una foto para impresión• Utilice close-up con fondos limpios • Use encuadres relevantes al preparar thumbnails
5. Sobre detallar los textos Alternativos (ALT Text)Los textos Alternativos deben ser descriptivos de los que el usuario va a encontrar al hacer link.Los textos Alternativos deben ser descriptivos de los que el usuario va a encontrar al hacer click.
![Page 34: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/34.jpg)
Jakob Nielsen's Alertbox, December 22, 2003:
6. Sites sin información alternativa.Permitir la comparación y la selección es una de las mayores ventajas del Web. Muchos Site no lo ofrecen. Por ejemplo, ¿Por qué al buscar un pasaje de avión para un día X no se presentan de una vez alternativas tarifarias para otros días u horarios más económicos?
7. Listas de Items demasiado largas no pueden ser filtradas por atributos de interés.En muchos Site se presentan listas de Items demasiado largas que sólo se pueden ordenar por un criterio y no permiten el filtrado por atributos. Por ejemplo, todos los productos que pueden ser enviados antes de navidad.
![Page 35: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/35.jpg)
Jakob Nielsen's Alertbox, December 22, 2003:
8. Ordenamiento sólo por marca.La mayoría de los Site de E-commerce sólo permiten ordenar por marcas, pero no permiten realizar un orden por atributos como color, talla, etc.
9. No permitir una entrada de datos natural al usuario.En muchos Sites se obliga al usuario a introducir datos de forma restrictiva y no de la forma “humanamente” natural. Por ejemplo, se obliga a introducir el número de tarjeta de crédito separado en grupos de 4 con un guión entre cada grupo, en vez de permitir la escritura continua del número.
![Page 36: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/36.jpg)
Jakob Nielsen's Alertbox, December 22, 2003:
10. Páginas que enlazan a sí mismas.No se deben realizar enlaces a la misma página donde se encuentra el usuario ya que tiende a confundir la navegación.
![Page 37: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/37.jpg)
CONSIDERANDO ALGO MAS
1. Resolución de pantalla
![Page 38: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/38.jpg)
2. Tipos de imágenes
GIF (Graphics Interchange Format, Formato de intercambio de gráficos) fue creado por CompuServe con el objetivo de que fuese entendido por todo tipo de computadores. Sus Principales características son:
• Limitada a 256 colores, si usamos menos la imagen tendrá menor tamaño.• Compresión sin pérdidas.• Posibilidad de crear imágenes con entrelazado.• Transparencia.• Imágenes con movimiento.
![Page 39: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/39.jpg)
2. Tipos de imágenes
JPEG (Joint Photographic Experts Group) fue creado pensado especialmente para fotografías. Sus principales características son:
• Puede almacenar 16 millones de colores. El tamaño es independiente del número de colores usados.• Ofrece un algoritmo de compresión que reduce considerablemente el tamaño de las fotografías. Esta compresión produce pérdidas, es decir, la imagen sufre deterioro.
![Page 40: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/40.jpg)
VAMOS A LA PRACTICA
www.lost-axn.com
![Page 41: la web](https://reader035.vdocumento.com/reader035/viewer/2022070419/55cf8a8555034654898b603a/html5/thumbnails/41.jpg)
GRACIAS... ;)