Guías de Estilo para la web

by Diego Cueva

Guía: National Cáncer

Institute ( NCI)
 Guía: National Cáncer Institute
Capítulos:
1) Proceso de diseño y 10) Links
evaluación 11) Apariencia del texto
2) Optimizar la experiencia del 12) Listas
usuario 13) Widgets
3) Accesibilidad 14) Gráficos, imágenes y
4) Hardware y Software multimedia
5) La página principal 15) Contenido de la pág
6) Distribución de la pág. web 16) Organización del
7) Navegación contenido
8) Scrolling y paging 17) Búsqueda
9) Títulos y cabeceras 18) Test de Usabilidad
Cap. 1: Proceso de diseño y evaluación

Establecer cuál es el fin del sitio web: En este caso en

un sitio para dar información a las personas sobre la
IDER “César Vallejo”, en especial para las que
quieran integrarse. No es un sitio en el cual el
usuario pueda empezar a registrarse en ella.

Establecer requerimientos de
usuario: Casos de uso
…

Diseño paralelo
Cap. 2: Optimizar la experiencia del usuario

Presencia de FAQs

Permitir imprimir el
contenido
Cap. 3: Accesibilidad

Permite el uso de
software de ayuda
(programa que lee el
contenido de la pág para
el usuario)
Cap. 4: Hardware y Software
Permitir el uso de
varios navegadores

Velocidad de
navegación mínima
 Cap. 5: La página principal

•Presentación de la
página
•Contenido limitado
•Buena 1ra impresión
 …

Todas las páginas

tienen un link a la
pág. principal
Cap. 6: Distribución de la pág. web
75 – 100 caracteres
por línea

Buena densidad,
con espacios en
blanco

Niveles de
importancia
 Cap. 7: Navegación

Menú de
navegación a la
izquierda

Etiquetas
descriptivas de
destino
 …

Feedback:
Coloración

Feedback:
Dirección URL
Cap. 8: Scrolling y Paging

Scrolls para
continuar leyendo

Scrolls verticales,
nunca horizontales

No deben ser muy

grandes
Cap. 9: Títulos y Cabeceras

Cabeceras dentro
de la página

Título de ventana
Cap. 10: Links

Links cambian de
colore si han sido
visitados

Se usa el texto, no la
imágen

Nombres de los links

Vínculos externos indican

la dirección URL
Cap. 11: Apariencia del Texto

•Texto que contrasta

•Uso apropiado de
mayúsculas
•Fuentes conocidas (Arial)
•Tamaño 13
 Cap. 12:Listas

Introducción de la lista

Lista cuenta desde 1

Se capitaliza la 1ra letra

Elemento más importantes
va primero
Cap. 13: Widgets

Valores por defecto

Campos grandes

Etiquetar las zonas de

ingreso

Etiquetar los botones

 Cap. 14: Gráficos, imágenes y multimedia
Logo de la institución

Imágenes individuales
para que cargue más
rápido

Fondo simple
Cap. 15: Contenido de la pág.

•Palabras simples para

que las entienda el
visitante
•Párrafos de no más de 6
oraciones
•Mayúsculas para nombres
propios
…

Explicar lo que significan

las siglas
 Cap. 16: Organización del contenido
Buena organización

Mostrar sólo la
información necesaria

Agrupar elementos
relacionados
Cap. 17: Búsqueda

Se puede usar mayúsculas

o minúsculas

El buscador es usable, da
resultados
 Cap. 18: Test te Usabilidad
Usando probadores o “testers”
(test de usabilidad de usuario)

Grabar la interacción

Recoger los aspectos a

mejorar
…
Con los datos conseguidos, corregir y mejorar el sitio web.
Esto se puede realizar varias veces

1ra versión 2da versión

Fin