El tiempo suele ser un bien escaso. La gran ventaja del diseño web es que hay muchas tareas repetitivas que pueden simplificarse y automatizarse de múltiples formas. Smashing Magazine ha publicado una recopilación de 50 recursos a través de los cuales podemos ahorrar tiempo entre los que podemos encontrar repositorios de varios insumos habituales en diseño web, herramientas para hacer cálculos y textos de referencia que siempre viene bien tener a mano.
Diseño Web
Los 10 errores más frecuentes de los diseñadores web principiantes
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
Mi tesis sobre diseño web
«El Departamento de Ciencias de la Comunicación en Red: Análisis y propuestas para el desarrollo de un sitio web» es el título de mi tesis de licenciatura en la carrera de Ciencias de la Comunicación que estoy recuperando del olvido gracias a que una limpieza despositó en mis manos el CD con los archivos originales.
La web cambió mucho desde que realicé la tesis donde la dificultad básica consistía en encontrar algo de bibliografía donde las propuestas de diseño web no fuesen solo una cuestión técnica. Recuerdo fundamentalmente dos libros que vinieron a mi auxilio y me ayudaron mucho: Producción y diseño gráfico para la World Wide Web de Antonio Fernández-Cocca y Usabilidad, Diseño de Sitios Web de Jacob Nielsen.
Mucho ha cambiado en la web desde entonces. Los blogs prácticamente no existían, las redes sociales no habían nacido y el diseño web estaba limitado enormemente por la secuela de la «guerra de navegadores» donde cada quien intentó imponer su estándar. Evidentemente, mucha de la bibliografía ha sido superada pero, sin embargo, creo que el trabajo todavía puede tener algún valor por la propuesta metodológica de análisis y la identificación de las etapas del proceso de diseño web.
El texto está bajo licencia Creative Commons Reconocimiento-No comercial 2.5 de Argentina que, en pocas palabras, permite el uso libre del texto siempre que se atribuya la autoría correctamente (enlace al PDF original y no republicarlo en otro sitio) y se utilice sin fines comerciales.
Anticipando Internet Explorer 9
Interfaz renovada y minimalista, respecto por los estándares web y un riguroso proceso de testeo. Microsoft parece estar trabajando para Internet Explorer 9 no se convierta en la nueva pesadilla de los diseñadores web. Luego de 15 años de Internet Explorer, parece que Microsoft ha tomado nota de sus principales fallos y se ha volcado dedicidamente en favor de los estándares web.
Hace unos días se ha filtrado un video que muestra la nueva interfaz de usuario de Internet Explorer. El minimalismo recuerda mucho a Chrome la principal diferencia es que la pestaña de ventanas se colocan a la derecha de la barra de direcciones. Los botones también se han reducido al mínimo y quedan solo dos que permiten ir hacia atrás o adelante. El resto de las opciones parecen estar en una serie de iconos que agrupan diferentes posibilidades de configuración.
Uno de los aspectos que más llama la atención en el video es su desempeño en un test bastante popular como Acid3 donde obtiene una puntuación de 95 sobre 100, por encima de la versión actual de Firefox que llega al 94% ¿Qué significa esto? Probablemente, que el lanzamiento de Internet Explorer 9 no necesite revisar nuestras páginas si están diseñados de acuerdo con los estándares.
Además de los estándares, Internet Exporer 9 apuesta decididamente por HTML5 y la página de Test Drive que lanzó Microsoft contiene muchos ejemplos sobre diferentes implementaciones de las nuevas etiquetas que tiene el lenguaje. Otra buena noticia: tambien hay soporte para CSS3 y los nuevos selectores avanzados que permiten afectar el diseño de un segmento de la página de modo mucho más específico.
Además, hay una extensa documentación y existe la posibilidad de descargar una Preview de IE9 para ir viendo cómo se comporta el navegador en cuanto a nuevas implementaciones y velocidad, una aspecto cada vez más importante con la gran cantidad de aplicaciones web y su creciente comlejidad.
Diseño web para iPad
A medida que los dispositivos táctiles avanzan las formas de navegar e interactuar se van transformando. En Xperience Consulting presentan 
10 recomendaciones para diseñar una web para un iPad con una serie de cuestiones a tener en cuenta cuando creamos sitios web para este dispositivo. Más allá de algunas lo técnico es interesante analizar los principios que hay detrás en el diseño interactivo. Se me ocurren algunos:
- Reducción de los sistemas simbólicos: El mouse y el puntero son dispositivos que median nuestra interacción con la información. Por más que nos resulten familiares, en cierta forma, suplantan nuestro cuerpo y ‘tocamos’ los elementos con un puntero digital que responde al movimiento que realizamos sobre el objeto mouse. Tocar con la mano es mucho más directo, por cual la propensión a desplazarnos es mayor. El iPad ni siquiera tiene barra de scroll (otro elementos simbólico), simplemente nos movemos con nuestros dedos. También la tentación de hacer zoom es mayor, como si quisiéramos acercar el elemento que visualizamos.
- Aumento de la impresición: Los dedos son mucho más torpes que el delicado ángulo del puntero del mouse. Por lo tanto, necesitamos un margen de error mayor y lograr que el área sensible de un objeto tenga como mínimo el tamaño de la yema de un dedo. Grupos de enlaces amontonados, botones apretados o iconos pegados son una invitación al error.
- Maleabilidad: Mientras que los monitores son elementos estables, los dispositivos manuales pueden ser sujetados de muchas formas y en situaciones diversas. Apple entendió perfectamente esto e incluyó en el iPhone y iPad sensores de orientación para saber si el dispositivo está sujetado a lo largo o a su ancho. El diseño tiene que verse bien en ambas situaciones.
- Cautividad: Apple impone sus criterios y establecer lo que se puede hacer o no en sus dipositivos. Hay que renunciar a Flash y usar los codecs de videos que Apple decida incluir. Probablemente la competencia sea bastante más flexible pero por el momento quien marca la pauta y establece el estándar del sector -como ocurría hace algún tiempo con Microsoft- es la firma de Steve Jobs.
Actualización 10/09/2010: Slides con la presentación de Xperience Consulting
Gracias Irene por el enlace 😉
¿Algo más a tener en cuenta? ¿Agregarías o quitarías algo de esta lista?
Foto por Jared Earle con licencia Creative Commons.