Por nuestros cerebros han pasado toneladas de código HTML y CSS, por eso sabemos cómo hacerlo bien. Maquetamos cumpliedo con los estándares, asegurando una perfecta separación entre el contenido y su aspecto visual. Utilizamos código semántico para asegurar accesibilidad y SEO.
También te asesoramos a la hora de modificar tus creaciones gráficas para mejorar la navegabilidad, el acceso fácil a la información y la usabilidad de tu site.
El medio web tiene ciertas restricciones en comparación con las aplicaciones de diseño gráfico, por eso no siempre podemos clavar el diseño al pixel, pero casi =)
Algunas recomendaciones sobre diseño web:
Fuentes
La cantidad de fuentes estándar que se pueden usar es limitada, esta es una de las grandes ventajas del flash con respecto al XHTML plano. Aunque se pueden sustituir los textos por imágenes incluso de una manera dinámica usando sIFR o flir, no es un práctica recomendable y en ningún caso es una buena idea utilizar estas herramientas para todos los textos de una página web.
Se asume que los banners, logotipos, botones o títulos serán imágenes o películas flash con la fuente que el diseñador desee, para todo lo demás, éstas son las principales fuentes disponibles:
Arial, Helvetica, Arial Black, Comic Sans, Georgia, Impact, Lucida Console, Monaco, Lucida Sans Unicode, Lucida Grande, Palatino Linotype, Book Antiqua, Tahoma, Geneva, Times New Roman, Trebuchet MS, Verdana.
No hay mucho donde elegir, ¿verdad?
Tamaño del diseño
Otro aspecto importante a tener en cuenta es la resolución de pantalla para la que queremos diseñar, además de las barras y menús de los navegadores.
En W3Schools mantienen una sección de estadísticas de uso de navegadores y resoluciones. Las estadísticas no son de una gran fiabilidad ya que el tipo de usuario que acude a cada página puede varíar bastante según el contexto. Por ejemplo, las estadísticas de uso de msn.com reflejarán un alto porcentaje de Internet Explorer y las apple.com de Safari.
En el caso de W3Schools es un sitio frecuentado por profesionales del disñeo web y, en nuestra opinión, refleja unas estadísticas de uso superiores para Firefox.
Tras analizar las estadisticas, la conclusión es que el tamaño mayoritario es de 1024x768 píxeles y que, eliminando el espacio ocupado por la barras del navegador, nos deja un espacio útil de trabajo de unos 1000x670 píxeles. Todo esto es una mera especulación ya que cada usuario dispone de unas barras personalizads y la ventana del navegador no siempre está maximizada.
Por otro lado los tamaños máximos para ancho y alto pueden perder importancia si pensamos en diseños flexibles, fluidos, de tamaño variable o como prefieras llamarlos.
En todo caso si estas pensando que tu página web se vea completa en la mayoría de las pantallas y sin barras de desplazamiento ni diseños fluidos, tu área de trabajo es de 1000x670 píxeles.
Formatos aceptados
Aceptamos cualquier formato profesional PSD, Freehand, Illustrator etc. Nos solemos adaptar fácilmente a los materiales que nos entregan pero nuestra preferencia es:
- Un archivo separado para cada pantalla.
- 72ppp RGB.
- Un documento auxiliar, en PDF si es posible, con capturas de cada una de las pantallas y explicaciones de las funciones y animaciones "no evidentes".
Interfaz de usuario
Al diseñar también hay que pensar en el aspecto funcional de la página. Aunque puede resultar una obviedad, a menudo ocurren "cambios de última hora" porque ni al diseñador ni a ninguna de las personas que formaron parte del proceso de creación se le ocurrió que el usuario podía necesitar un cuadro de búsqueda.
Existen multitud de elementos de interfaz de usuario que hacen las páginas más usables, y por tanto, que los usuarios encuentren mejor la información en tu página y deseen pasar más tiempo en ella: listas ordenables, cuadros de búsqueda, tags, tag cloud, paginadores de listados, slideshows...
Humildemente el mejor consejo que podemos dar en diseño de interfaces de usuario (UI design) es usar referencias: encontrar páginas existentes que reúnan funciones similares a las que estamos buscando y fijarse en las soluciones que han aplicado.
Animaciones
Las animaciones pueden ser útiles y mejorar la experiencia de usuario según en qué contexto, o superfluas y molestas según en que otros. Como norma general podríamos decir:
- Los usuarios quieren acceder a la información lo más rápidamente posible y no ver la misma animación repetida 30 veces cada que hacen click en algún sitio. Las tres primeras veces queda muy bien, las siguientes tres no tiene importancia y a partir de la sexta se convierte sutilmente en un incordio.
- El movimiento en pantalla capta nuestra atención permanentemente y cuesta concentrarse en la lectura.