Lista verificacion diseño web

443 views
352 views

Published on

Lista de verificación de diseño web. Un rápido directorio de verificaciones para un diseño saludable y efectivo!

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
443
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Lista verificacion diseño web

  1. 1. Lista de verificación de buenas prácticas de diseño
  2. 2. Estructura de la página• Atractiva para el usuario objetivo• Logo/cabecera consistente• Área de navegación consistente• Título de la página de carácter informativo, incluyendo nombre de la empresa• Área del pie de página – copyright, última revisión, email de contacto• Uso inteligente de los principios del diseño gráfico: repetición, contraste, proximi- dad, alineamiento• Displays sin Scroll horizontal (1024×768 y resoluciones mayores)• Equilibrio entre textos, gráficos y espacios blancos en cada página• Contraste entre texto y fondo de las páginas• La información repetida (cabecera y logo además de la navegación) no debe ocu- par más de un cuarto o un tercio de la parte superior de la página a 1024×768• La página de inicio debe contener información relevante/interesante por encima de la línea de scroll• La página de inicio debe cargarse en menos de 6 segundos desde su peticiónCompatibilidad con los navegadores• Compatible con las versiones más populares de Internet Explorer (8+)• Compatible con las versiones más populares de Firefox (5+)• Compatible con las versiones más populares de Opera (10+)• Compatible con las versiones más populares de Safari (Mac y Windows) Lista de verificación de buenas prácticas de diseño 2
  3. 3. Navegación• Los enlaces de la navegación principal están claramente resaltados en todas las pági- nas de site de forma constante• La navegación es sencilla de utilizar• Si la navegación principal está construida mediante flash o imágenes entonces repe- tiremos de forma clara los enlaces en el pie de página y sólo con texto.• La navegación está ordenada como una lista UL (accesibilidad)• Las ayudas de navegación, sitemaps, breadcrums son utilizadas para mejorar la ex- periencia de la navegación• No hay enlaces rotosColor y gráficos• Utilización de colores bien diferenciados entre fondos y textos, limitando el número de colores a 3 ó 4 además de los colores neutrales que se quieran utilizar.• El color es utilizado de forma jerárquica• Los colores tienen buen contraste con los textos utilizados• El color utilizado en gráficas facilita la comprensión del sitio• La gráfica es optimizada para que los tiempos de carga sean adecuados• Cada imagen utilizada tiene una función clara• Los tags de las imágenes utilizan el atributo alt para facilitar un texto alternativo a la imagen en el caso que el navegador o User Agent no soporte imágenes.• Las imágenes animadas no distraen la atención innecesariamente y no se repiten o lo hacen pocas veces Lista de verificación de buenas prácticas de diseño 3
  4. 4. Multimedia• Cada audio/vídeo/flash tiene una función clara• Cada audio/vídeo/flash aportaq claridad al contenido, nuca distracción• Se proporcionan subtítulos para cada archivo de audio o de vídeo utilizada (accesibilidad)• Los tiempos de descarga de archivos de audio o vídeo están optimizados• Los enlaces a descargas de plug-ins utilizados se proporcionan en la propia webPresentación de contenidos• Utilización de tipografías comunes en entornos web. No proliferación de multitud de tipos de letra distintos en una misma web.• Utilización de técnicas de escritura HTML: encabezamientos, bullets… Utilización de espacios blancos que ayuden a la comprensión, sentencias cortas en párrafos resu- midos.• Utilización jerárquica y consistente de los atributos tipográficos• El contenido proporciona información relevante• El contenido es organizado de forma consitente• Mínimos clicks para llegar a cualquier contenido• Línea de tiempo: la fecha de la última revisión y/o copyright es correcta• El contenido no tiene información anticuada• El contenido está escrito de forma adecuada y sin errores ortográficos• El contenido proporciona enlaces de interés a otras webs• Evitar el recurrido “pincha aquí” en los hipervínculos Lista de verificación de buenas prácticas de diseño 4
  5. 5. Funcionalidad• Todos los enlaces internos funcionan• Todos los enlaces externos funcionan• Todos los formularios funcionan correctamente• No hay errores de javascript Lista de verificación de buenas prácticas de diseño 5

×