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

1. Lista de verificación de buenas prácticas de diseño

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ón
Compatibilidad 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. 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 rotos
Color 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. 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 web
Presentació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. 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