Diseño web: lista de verificación de buenas prácticas

Lista de verificación de buenas prácticas de diseño web pretende ser un checklist resumido de lo que un diseñador web debe perseguir.

Checklist de diseño web para enfocar proyectos

Estructura de la página

1. Atractiva para el usuario objetivo
2. Logo/cabecera consistente
3. Área de navegación consistente
4. Título de la página de carácter informativo, incluyendo nombre de la empresa
5. Área del pie de página – copyright, última revisión, email de contacto
6. Uso inteligente de los principios del diseño gráfico: repetición, contraste, proximidad, alineamiento
7. Displays sin Scroll horizontal (1024×768 y resoluciones mayores)
8. Equilibrio entre textos, gráficos y espacios blancos en cada página
9. Contraste entre texto y fondo de las páginas
10. La información repetida (cabecera y logo además de la navegación) no debe ocupar más de un cuarto o un tercio de la parte superior de la página a 1024×768
11. La página de inicio debe contener información relevante/interesante por encima de la línea de scroll
12. La página de inicio debe cargarse en menos de 6 segundos desde su petición

Compatibilidad con los navegadores.

1. Compatible con las versiones más populares de Internet Explorer (8+)
2. Compatible con las versiones más populares de Firefox (5+)
3. Compatible con las versiones más populares de Opera (10+)
4. Compatible con las versiones más populares de Safari (Mac y Windows)

Navegación en el diseño web.

1. Los enlaces de la navegación principal están claramente resaltados en todas las páginas de site de forma constante
2. La navegación es sencilla de utilizar
3. Si la navegación principal está construida mediante flash o imágenes entonces repetiremos de forma clara los enlaces en el pie de página y sólo con texto.
4. La navegación está ordenada como una lista UL (accesibilidad)
5. Las ayudas de navegación, sitemaps, breadcrums son utilizadas para mejorar la experiencia de la navegación
6. No hay enlaces rotos

Color y gráficos.

1. 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.
2. El color es utilizado de forma jerárquica
3. Los colores tienen buen contraste con los textos utilizados
4. El color utilizado en gráficas facilita la comprensión del sitio
5. La gráfica es optimizada para que los tiempos de carga sean adecuados
6. Cada imagen utilizada tiene una función clara
7. 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.
8. Las imágenes animadas no distraen la atención innecesariamente y no se repiten o lo hacen pocas veces

Multimedia.

1. Cada audio/vídeo/flash tiene una función clara
2. Cada audio/vídeo/flash aportaq claridad al contenido, nuca distracción
3. Se proporcionan subtítulos para cada archivo de audio o de vídeo utilizada (accesibilidad)
4. Los tiempos de descarga de archivos de audio o vídeo están optimizados
5. Los enlaces a descargas de plug-ins utilizados se proporcionan en la propia web

Presentación de contenidos en el diseño web.

1. Utilización de tipografías comunes en entornos web. No proliferación de multitud de tipos de letra distintos en una misma web.
2. 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 resumidos.
3. Utilización jerárquica y consistente de los atributos tipográficos
4. El contenido proporciona información relevante
5. El contenido es organizado de forma consitente
6. Mínimos clicks para llegar a cualquier contenido
7. Línea de tiempo: la fecha de la última revisión y/o copyright es correcta
8. El contenido no tiene información anticuada
9. El contenido está escrito de forma adecuada y sin errores ortográficos
10. El contenido proporciona enlaces de interés a otras webs
11. Evitar el recurrido “pincha aquí” en los hipervínculos

Funcionalidad.

1. Todos los enlaces internos funcionan
2. Todos los enlaces externos funcionan
3. Todos los formularios funcionan correctamente
4. No hay errores de javascript