Cuando un diseñador gráfico se pasa a la web suele cometer algunos errores básicos por el desconocimiento sobre cómo funciona el nuevo soporte. El problema no es tanto en crear la página en Photoshop, software que dominan ampliamente, sino en pensar como se comportará esa página bajo diferentes condiciones.
En SitePoint han recopilado los 10 errores más frecuentes que cometen los novatos en diseño web que paso a comentar brevemente.
1. No considerar la ventana del navegador
Mientras los diseños en Photoshop tienen dimensiones fijas, el tamaño de la ventana del navegador es variable. Antes de transformar el diseño en HTML / CSS es necesario saber cómo se comportará la página cuando se visualizada en otro tamaño ¿Con qué rellenamos el fondo? ¿Hasta dónde continúan las texturas o imágenes? ¿Hasta qué punto achicamos el tamaño de una columna? El diseño no está completo hasta responder a esas preguntas.
2. Forzar anchos y altos fijos
Aunque lo deseable es diseñar teniendo el contenido muchas veces no es así. Los diseñadores estamos acostumbrados a usar el Lorem Ipsum para rellenar el texto y usamos imágenes de ejemplo que no serán las finales. Pero, ¿qué pasa si el título ocupa 2 o 3 líneas en lugar de una solo cómo la maqueta original? ¿Hasta dónde pueden crecer las categorías de un menú? ¿Alcanza el tamaño del botón para poner el texto final? En la web, los espacios son áreas de contenidos que deben tener cierta flexibilidad.
3. Hacer suposiciones sobre la experiencia del usuario
Tiempo atrás se discutía si convenía diseñar un sitio para 800×600 o 1024×768 pixeles. Hoy la cantidad de dispositivos y configuraciones son tan diversos que es muy difícil determinar bajo qué condiciones será visualizado un sitio web ¿Qué pasa en un monitor de 1920 × 1080 pixeles? ¿Cómo se ve en un dispositivo móvil? ¿Se pueden seleccionar fácilmente los enlaces en una pantalla táctil?
4. Diferencias de resolución
En gráfica se suele trabajar a 300 pixles por pulgadas (DPI) mientras que en mundo digital se utiliza 72 o como mucho 96 DPI. El resultado final no es el mismo.
5. No comprender cómo funciona la tipografía en la web
Hoy en día el manejo de la tipografía en la web ha mejorado bastante pero todavía tiene ciertas limitaciones. Por ejemplo, no es posible utilizar cualquier tipo de letra porque puede no estar disponible comercialmente para ser distribuida. Otras se ven perfectamente a escala pequeña con el suavizado de Photoshop pero son ilegibles en el navegador.
6. No considerar aspectos prácticos del desarrollo
Un ejemplo bastante claro: utilizar en el diseño una cabecera personalizada con fondos, transparencias y tipografías que solo pueden ser reproducidas mediante un gráfico. Se puede hacer si el sitio tiene 5 o 6 páginas, ¿pero qué pasa si son 50 o 500?
7. Olvidarse de los enlaces
Los manuales de usabilidad enseñan que los enlaces deben ser texto azul subrayado. No hay que ser tan restrictivos pero es cierto que por nada del mundo hay que subrayar algo que no sea un enlace. El hipertexto debe diferenciarse claramente del texto común.
8. Olvidarse de la interactividad
Los usuarios interactúan con los sitios web y realizan diferentes acciones sobre el contenido, ante lo cual suelen obtener una respuesta visual. Por ejemplo, un texto que adquiere un color más intenso al poner el mouse encima de él, secciones del menú que están activas y están remarcadas, elementos que en ciertas situaciones estarán deshabilitados ¿Cómo se mostrará esto? Photoshop nos permite crear un boceto estático pero hay que contemplar que los elementos tienen vida en la web.
9. Formulario poco accesibles
Los formularios web son un verdadero dolor de cabeza. Sin embargo, los usuarios más o menos se han acostumbrado a ciertos comportamientos. Saben que un radio button permite elegir solo una opción entre varias, mientras que los checkbox admiten selección múltiple. Las listas desplegables son buenas pero pierden toda la funcionalidad cuando incluyen más de 50 ítems. Los controles deslizantes al estilo iPhone son muy bonitos pero hay que asegurarse que también funcionen con HTML estándar.
10. Desconocimiento de las tecnologías
HTML, CSS, JavaScript, jQuery, Flash, CMS, PHP… No hay que ser un experto en cada tema pero sí al menos saber qué cosas permiten hacer y qué complejidad tiene desarrollarlas.
¿Qué otros errores agregarías a la lista? ¿Qué es lo peor que has hecho cuando comenzaste a diseñar sitios web?
Foto de PhotoXpress
