Consigue un site atractivo

En esta entrega nos centramos en la parte más formal del trabajo. Una vez decidido cómo vamos a organizar los distintos elementos que conforman el contenido de nuestro website, debemos encontrar la manera de dotarlos de un impacto visual sugerente

Ricardo Barrera

Consigue un site atractivo

16 mayo 2008

Como la marca o el logotipo, el look and feel de la página web es un importante activo visual de la empresa u organización que lo adopta. Y como muchas cosas de estilo, puede gustar o no, pero sobre todo debe funcionar. Se piensa que un diseño agradable a la vista y fácil de navegar incide positivamente en el tráfico de la página, reduciéndose el índice de abandonos hasta en un 50%. Ésta es la diferencia entre estar en los favoritos de la gente o no.

Muchas veces lo habitual ha sido lanzarse a Internet sin pensar mucho en ello, simplemente porque había que estar, y cuanto antes. Entonces es normal que vayan saliendo errores de navegabilidad y confusión en la estructuración de los contenidos. Ello obliga a una constante revisión y testeo de las distintas secciones, y no sólo de las que concitan mayores visitas o que posean una importancia especial para el cliente.

El objetivo debe ser siempre dar un buen servicio al usuario y hacer simple e intuitiva la navegación por el sitio, todo ello bajo un ambiente gráfico agradable y sorprendente. Y para lograrlo, terminamos con las tres últimas fases del desarrollo web.

Truco 1

Diseño y maquetación

En esta tercera fase debemos definir la línea gráfica, estilística e informativa del site e incorporar todos los elementos iconográficos que tendrá. Incluso, según la naturaleza del proyecto, deberemos crear la imagen corporativa con la que una determinada marca tendrá presencia en la Web.

El diseñador debe tomar el prototipo definitivo validado en la fase previa y dotarlo del aspecto visual según las directrices fijadas por los clientes o por los requerimientos corporativos, en caso de que se trate del diseño del site de una compañía. En esta etapa deben resolverse todos los aspectos gráficos y de identidad del sitio.

La libertad creativa de quien sea responsable del diseño gráfico del website está limitada por su buen hacer y experiencia, por los objetivos planteados al comienzo del proyecto, por la viabilidad y utilidad de los recursos utilizados, por los estándares generales de usabilidad y accesibilidad, y por la necesidad de integrar el diseño a un conjunto más amplio de páginas con las que debería compartir la misma línea gráfica.

Algunas de las tareas concretas en esta fase son: definición de los colores básicos que tendrá el site; optimización de todas las imágenes para controlar el peso final de la página; diseñar o adaptar los iconos necesarios para representar la información; look and feel general (marcos redondeados o rectangulares, contraste entre espacios en blanco, diseño zen…).

Existen diferentes aplicaciones para realizar el grafismo de un sitio, desde sencillas herramientas de edición gráfica hasta robustas plataformas para realizar ilustraciones avanzadas. No obstante, en el día a día del desarrollo web la mayoría de diseñadores utilizan Freehand, Illustrator, Fireworks o Corel Draw.

Al maquetador (que debe saber, entre otras cosas XHTML, CSS, JS, ASP, edición gráfica básica, estándares W3C y accesibilidad) le corresponde traducir en HTML (HyperText Markup Language, lenguaje de marcas hipertextuales) los diseños aprobados previamente y organizar el site en función de todos los contenidos disponibles, como las secciones, la publicidad o las imágenes, y adaptarlos de manera óptima al espacio disponible.

Lo que era un simple texto en color azul dentro de los bocetos realizados en la fase de prototipado, a través de la maquetación cobra vida y se convierte en hipertexto, permitiendo la navegación de una sección a otra, o desde un determinado punto de la página a otro. Cuando el equipo de trabajo es reducido, el maquetador también debe asesorar y gestionar la parte técnica de todo el proyecto.

Truco 2

Desarrollo multidisciplinar

Ésta es quizás una de las fases más críticas del desarrollo web pues exige un alto grado de coordinación entre todos los miembros del equipo involucrados hasta el momento: jefe de proyecto, investigadores, arquitecto de información, diseñador de interacción, diseñador gráfico, maquetadores y programadores.

A los programadores o desarrolladores de software, sea cuál sea el lenguaje que estén utilizando, les corresponde proveer a los diseños de una estructura funcional lógica, que es lo que finalmente permite que el site funcione y responda a todas las peticiones realizadas por los usuarios.

Dependiendo del tipo de web que estén produciendo, el programador puede utilizar código existente o escribir uno nuevo según las especificaciones del cliente. Debe generar e implementar códigos y convertirlos en algoritmos ejecutables y comprensibles, tanto para los ordenadores como para los diferentes sistemas informáticos en donde se van a aplicar.

En esta fase del proyecto les corresponde a los ingenieros de sistemas, o a los propios programadores, realizar toda la gestión relativa al alojamiento del site, reservas de nombres y definición de extensiones, y la configuración con los respectivos servidores.

Truco 3

Plan de huellaje

Aunque no es una fase que intervenga directamente en el desarrollo de un sitio web, es importante programar un plan de huellas para marcar todas las páginas y poder hacer el respectivo seguimiento de audiencias desde el momento mismo en que el site esté disponible.

Esta medida sirve no solamente para controlar el índice de visitas que tiene nuestra web (o el tiempo de sesión de los visitantes, los navegadores únicos, las fuentes desde donde llegan las visitas, el funcionamiento de las distintas campañas externas, las referencias externas o la geolocalización de nuestros usuarios), sino también para identificar errores de navegación, como bugs del sistema o intermitencias de conexión en páginas críticas, como los formularios de registro o de pago on-line.

Aunque existen cientos de servicios disponibles en la Red para comenzar el «plan de huellaje» del site, es recomendable usar una aplicación robusta, que nos dé la garantía de que a medio plazo no demandaremos un servicio más completo y que cubra las necesidades tanto del webmaster como de los responsables de marketing.

Según el alcance de la plataforma y el paquete de funciones que incluya, los servicios para la medición de estadísticas pueden ser gratuitos o, por el contrario, exigir el pago de una licencia anual. Hay sencillas aplicaciones gratuitas que registran uno a uno el número de visitantes, a modo de contador, pero necesitamos, al menos si queremos tener control absoluto de las cifras de nuestra web, una herramienta fácil de utilizar y que a la vez nos proporcione toda la información que necesitamos de la forma más inmediata posible.

Truco 4

Servicios de estadísticas

Desde aquí recomendamos servicios de estadísticas como Google Analytics (www. google.com/analytics/es-ES), Nielsen/NetRatings (www.nielsennetpanel.com) y Omniture (www.web-analytics.es). El primero de ellos es la herramienta de monitorización más exitosa para saber quiénes y desde dónde visitan nuestra web. Ha sido desarrollada por Google y, aunque es gratuita, ofrece un completo catálogo de informes para que podamos saber con exactitud cómo funcionan las páginas de nuestro site y revisar a tiempo las tendencias de navegación de nuestros visitantes.

Nielsen y Omniture, por el contrario, exigen el pago de una licencia anual y por ello se han convertido en herramientas de medición usadas principalmente por compañías y empresas mediáticas con necesidades prominentes de auditoría web.

Y éstas son básicamente las cinco fases de todo proyecto de creación de un website. Esperamos que os sirvan de orientación si os disponéis a montar vuestra propia página web, elaborar un briefing para un amigo o intentar sacarse unas perrillas optando a algún concurso de diseño gráfico parcial, completo u operativo de algún website comercial.

Truco 5

Algo está cambiando en el diseño

Se ha avanzado mucho en el tema del diseño web. Para un diseñador de la vieja escuela es importante el momento en que decide trascender del diseño tradicional en tablas, bastante encorsetado, a la maquetación con hojas de estilo en cascada (CSS), siguiendo los estándares emitidos por el Consorcio W3C. Aunque a veces el cambio pueda resultar traumático, debido en parte al mal planteamiento del flujo de trabajo (la otra parte de culpa se lo llevan errores de navegadores que desbaratan cualquier diseño), la satisfacción es inmensa visto desde la otra orilla.

Otro tema importante es el del tamaño de pantalla. Se venía programando pensando en un tamaño único de resolución 800 x 600 ppp cuando, gracias a la bajada de precios de de las TFT, nos encontramos ahora con un mayor abanico de posibilidades, abandonando formatos de 14 y 15 pulgadas en favor de los más agradecidos de 19 y 21 a 1.280 x 1.024.

Así, hoy en día se pueden combinar diseños «líquidos», que, como el agua, se adaptan a la pantalla (cuanto más ancha sea, más espacio horizontal abarca ocupando todo lo ocupable), con diseños «elásticos», donde se acomoda al tamaño de letra (si se hace más grande o más pequeña, todo se hace a escala, sin descuadrar el diseño). Otro sistema que se está imponiendo es el de desarrollar «desde fuera hacia dentro», es decir, desde la interfaz hacia el código. También se pretende que el navegador haga de «sistema operativo».

Recursos en la Red

A continuación, os facilitamos una serie de direcciones donde encontraréis ideas y todo tipo de información para desarrollar una web de lo más impactante:

www.desink.com

https://gettingreal.37signals.com/

www.w3schools.com/css/default.asp

www.discapnet.es/web_accesible/wcag10/WAI-WEBCONTENT-19990505_es.html

www.itapizaco.edu.mx/paginas/JavaTut/froufe/parte14/cap14-18.html

www.conocimientosweb.net/dcmt/

www.cadius.org/