El rediseño de gentoo.org, Parte 3: El renacimiento de un sitio1. Las nuevas páginas principales Hasta este momento www.gentoo.org esta mostrando una mejora muy marcada. En el último artículo, diseñé un nuevo sistema de documentación usando XML y XSLT, de modo que toda la documentación de nuestro sitio tiene muy buen aspecto y atiende a las necesidades de las personas que lo visitan. Sin embargo, el aspecto del sitio como un todo no ha cambiado; esto es debido a que realmente no he tocado el HTML que los usuarios ven cuando visitan nuestro sitio por primera vez. Nuestra página principal tiene el mismo aspecto que entonces. Bien, es el momento de que esto cambie. Como mencioné en el primer artículo, nuestra página principal está muy congestionada y no tenemos sitio para la expansión. Como puede ver, he empaquetado algo de contenido en la página. No puedo continuar apilando enlaces importantes y párrafos en la página principal -- ¡No hay nada de sitio! Afortunadamente para nosotros, la auténtica propiedad en la Web es absolutamente libre. Por eso, para solucionar el problema, dividí nuestra página principal (index.html) en algunas páginas categorizadas por materia (index-about.html, index-download.html, etc.) y creé un sistema de menús que permitiría al usuario cambiar fácilmente de una página de categoría a otra. La página que se carga por defecto cuando un usuario visita http://www.gentoo.org será la página de la categoría "Acerca de Gentoo Linux". Esta es una excelente opción ya que ofrece información general sobre el proyecto que será de interés a los que nos visitan por primera vez. Ahora, voy a esbozar los objetivos de este nuevo sistema de "páginas de categoría", así como algunos objetivos generales de diseño que puede aplicar a sus propios proyectos. Entonces, echaremos un vistazo a cómo el rediseño de las páginas de categoría cubre estos objetivos El nuevo sistema de páginas de categoría necesita ser modular. ¿Qué significa esto exactamente?. Bien, en este momento tengo las categorías "Acerca de Gentoo Linux" y "Descargar/Instalar" en mente, pero en el futuro puedo necesitar igualmente las categorías "Acerca del Equipo" o "Soporte". Tener la capacidad de añadir fácilmente nuevas categorías en el futuro requiere que los alojamientos sean colocados en su lugar durante la fase de diseño. Tengo que asegurarme de que hay espacio para enlaces a categorías adicionales en mi menú de navegación, y que la disposición de la página es lo bastante general para que pueda ser usada para presentar muchos tipos distintos de información. Entonces, añadir nuevas categorías será relativamente sencillo y seré capaz de evitar completamente el rediseño del sitio, eso si en unos pocos meses no me encuentro de nuevo que las cosas no encajan. Hay un segundo paso muy importante en el diseño modular -- el uso de XML y XSLT para separar la presentación del contenido. Si ha leído la parte 2 de esta serie, entonces cuanto menos le resultará familiar este tipo de diseño. Una vez tengo creada la plantilla XSL apropiada, puedo generar tantas páginas de categoría como quiera simplemente suministrando el XML apropiado, Y, al contrario que HTML, mi XML no contendrá ninguna información relacionada con la visualización; es contenido puro. Echaremos un vistazo a la implementación XML/XSLT de las páginas de categoría en el cuarto y último artículo de esta serie. Es también muy importante que la disposición de la nueva categoría tenga un aspecto atractivo. Recuerde, cuando un usuario teclea http://www.gentoo.org, la página de la categoría "Acerca de Gentoo Linux" aparecerá en primer lugar, por lo tanto quiero que sea una página atractiva. La palabra "atractiva" significa cosas distintas a personas distintas, este artículo presenta unas buenas pautas generales que estoy usando durante el diseño de la nueva página de categoría que se deberá servir para prácticamente cualquier sito Web. Para una disposición general de página, lo simple es lo mejor. Si va a organizar un puñado de información complicada, ¿Porqué no usa una tabla maestra para separar la página en varias regiones?. Esto también ayudará a asegurar que las distintas partes de la página estarán alineadas, lo que resulta en un limpio y atractivo diseño. Por ejemplo, el siguiente tipo de disposición de página no es generalmente muy atractivo:
Sin embargo, si la misma información es presentada usando una rejilla maestra común, el sitio empieza a mostrarse más limpio:
Y recuerde, cuánto más simple sea su disposición, más información sera capaz de empaquetar en la página sin molestar a sus invitados. Ahora, llegamos a la elección del color. Tengo que admitir que encuentro muy atractivo el texto verde brillante sobre un fondo azul oscuro. Pero admitámoslo -- independientemente de lo exótico e ingenioso que parezca, los fondos oscuros son una mala elección para las zonas con texto en un sitio Web. La gente espera ver texto oscuro sobre fondo claro y creo que deberíamos darles lo que quieren. Bien, debería aclarar mi postura. Usar texto claro sobre fondo oscuro es una elección horrorosa para presentar párrafos de información, pero puede ser bastante atractivo y funcional para su barra de menú o para una pequeña lista de enlaces. En otras palabras, el texto invertido puede indicar un gran énfasis, pero elija una combinación de colores tradicional para sus principales áreas de texto con contenido; me lo agradecerá más adelante. Esto también le ayudará a asegurarse de que su sitio tiene buen aspecto cuando se imprime. Aparte de la cuestión texto oscuro/fondo claro, no hay muchas reglas duras cuando hablamos del diseño de sitios Web. Si le gustan los colores oscuros, es perfectamente correcto hacer la parte superior en azul oscuro, por ejemplo. Ahora, interpréteme correctamente: Si hace toda la página en azul, oscuro, ha hecho algo malo. Si tiene una porción de la página (preferiblemente una porción de la página que no tenga mucho texto) en azul oscuro, estará realmente haciendo algo bueno, porque el azul oscuro contrasta muy bien con su área de texto blanca y añadirá algo de drama a su nuevo sitio. De hecho, gran parte de su página puede contener colores oscuros o saturados; de nuevo, asegúrese de que su contenido de texto principal es presentado de una forma tradicional. Quiero también asegurarme de que la página Web no está muy abarrotada o muy dispersa. Supongo que todos nosotros luchamos contra este reto: algunos de nosotros tenemos tendencia de empaquetar tanto la información en una página que se vuelve completamente ininteligible, mientras que otros incluyen márgenes tan grandes y espacios vacíos inútiles que los usuarios son forzados desplazarse hacia abajo varias páginas para encontrar la información que necesitan. Para las nuevas páginas de categorías, quiero usar márgenes mínimos -- lo suficiente para mantener las cosas legibles estaría bien, creo. Sólo usaré espacios vacíos en la página si las cosas se están poniendo realmente apretadas. Después de todo, el propósito final de estas páginas de categorías es resolver un problema de espacio y estaría bien, concentrar la mayor información posible en el menor espacio posible, mantener la legibilidad no compromete este proceso. Una gran densidad de información tiene otra ventaja: A los usuarios no les gusta desplazarse hacia abajo para encontrar la información que necesitan. Esto hace que la página sea significativamente más agradable de usar. (Si no me cree, diseñe un par de páginas prototipo y compruébelo usted mismo). El contenido sustituye al arte Trabajando en esta disposición del sitio, rápidamente aprendí que el rediseño de una página Web debía ser usado en primer lugar como una oportunidad de presentar el contenido (información que es útil para mis invitados) de una forma legible y significativa, en lugar de aprovechar esta ocasión para hacer un enunciado artístico o exudar grandes cantidades de -- mmm -- identidad corporativa. No sólo esos enunciados artísticos están necesariamente prohibidos, sino que si hago uno, daño la presentación de mi contenido, entonces no estoy haciendo ningún favor a mis invitados. De vez en cuando, es una buena idea echar marcha atrás y reconocer que la gente que visita nuestro sitio están buscando principalmente información en lugar de nuevos enfoques chiflados de diseño Web. Si esto es algo contra lo que lucha, puede sentirse tranquilo: Yo también estoy tentado a enfocar en la parte artística y dejar otras prioridades a un lado. Ahora que hemos cubierto algunos de mis objetivos de rediseño, echemos un vistazo a las nuevas páginas de categorías. Aquí está la nueva página que usted se encuentra cuando visita http://www.gentoo.org:
Tengo que decir que estoy realmente encantado con el rediseño y que realmente me gusta el aspecto del nuevo sitio. Dese cuenta de cómo las tablas son usadas para dividir la página en cuatro regiones: El área del logo en la parte superior izquierda, el área negra de menú, la barra gris de información y el área blanca de contenidos principales. También observe que el alineamiento limpio de estas cuatro regiones hacen el diseño simple pero atractivo. Ahora observe los colores. Como mencioné anteriormente, soy un gran fan de los sitios Web extremadamente oscuros. Sin embargo, ya que un sitio demasiado oscuro es algo malo, llegué a un compromiso: Las partes oscuras estarían limitadas a las partes superiores y el texto invertido sólo se usaría en la región de menú, en el logo y en el pequeño título para la caja flotante "Caracterísiticas de Gentoo Linux". Ya que estas partes de la página no son usadas para presentar grandes cantidades de texto, no voy a molestar a mis invitados. En lugar de esto, sirven como bonitos contrastes al área principal (blanca) de contenidos de texto. Aquí se muestra una captura de pantalla de la página de categoría "Descargar/Instalar":
Otra cosa que merece la pena comentar: Habrá observado probablemente que el "platillo volante" y el logo rojo "gentoo" son de mi sitio original. Decidí integrar estos gráficos en el nuevo diseño de forma que la nueva página principal index.html todavía fuera familiar a mis invitados regulares. Sin embargo, omití el "platillo volante" en el resto de las páginas salvo la principal para que cupiera más información en la pantalla. El logo rojo "gentoo" se mantuvo en cada página ya que ayuda a hacer el área de contenido blanca más atractiva visualmente y centra la atención en el título de la categoría. El menú de navegación y el título Como puede ver, el nombre de la página actual es resaltado en verde brillante en el menú de navegación gracias las hojas de estilos en cascada (o CSS) y el nombre de la página principal es repetido inmediatamente debajo del logo rojo "gentoo" en la página de contenidos principales. Aunque inicialmente pensé que esto no era necesario, encontré que simplemente resaltando la entrada en el menú de navegación de la página actual en verde no era suficiente para ofrecer a los usuarios una indicación de la página en la que se encontraban. A pesar del aspecto claro del nuevo sitio, estoy metiendo demasiada información en la página. Una ventaja de esto es que bajo las resoluciones, más altas, un visitante sólo necesitará desplazarse hacia abajo para terminar de leer el texto principal. Sin embargo, todos los enlaces deberían ser inmediatamente visibles y accesibles, no requiriendo ningún desplazamiento vertical por parte del usuario. Esto hace que el sitio como un todo sea más fácil de navegar -- una gran victoria para la usabilidad. Simplemente mirando en el sitio no da una idea de cómo se realizó el proceso de rediseño. Yo de hecho tuve varias faltas logísticas importantes al duranta el rediseño. Mi mayor error fue lanzar Xara inmediatamente en un intento de desarrollar el nuevo aspecto de las páginas de categorías. Una vez en Xara, malgasté un montón de tiempo enfocando casi exclusivamente en el dulce aspecto en lugar de la disposición de la página. Haciendo esto, puse el carro delante del caballo y terminé creando cerca de 20 prototipos de diseño que eventualmente tenía que descartar. Al final, estos prototipos no me sirvieron para nada porque no encajaban en la forma cómo se iban a presentar los contenidos. Finalmente recuperé los sentidos, abandoné Xara, lancé un editor de texto y escribí el texto puro que debía aparecer en la página. Una vez el contenido estaba escrito, desarrollé una disposición general de la página para presentar este texto al usuario -- sin combinaciones de color o aspecto dulce, aún. Entonces, y sólo entonces, volví a Xara y terminé el nuevo aspecto del sitio, desarrollando una combinación de colores y mejorando nuestro logo. En esta ocasión, el proceso de diseño gráfico fue más suave y relativamente rápido porque tenía un marco de trabajo previo (el texto y la disposición) para que dirigiera mis pasos. Sin esta estructura, podía haber empleado el resto de mi vida jugando con Xara, desarrollando miles de posibilidades de diseño ¿y sí? para el nuevo sitio. Cuando rediseñe su sitio, recuerde que el contenido está en primer lugar, la disposición en segundo y los adornos gráficos en un distante tercer puesto. Tomando este enfoque, acabará ahorrándose un montón de tiempo. Así que cometí algunos errores a lo largo del proceso de diseño, pero también hice un par de cosas correctamente y una de ellas fue permitir que los desarrolladores de Gentoo Linux revisaran y comentaran mi trabajo mientras éste progresaba. Como puede recordar de mi primer artículo, mi plan de acción identificaba a los desarrolladores como el público objetivo de mayor prioridad, por lo que animar a los desarrolladores existentes a involucrarse en el diseño era claramente una sabia decisión. Hacer esto fue fácil. Simplemente mantuve un cliente IRC corriendo y conectado a nuestro canal IRC como hacía yo normalmente, y cada vez que hacía cualquier progreso significativo, generaba una captura de pantalla .png del sitio actual y lo publicaba en nuestro servidor Web. Entonces todo el mundo en el canal podía echar un vistazo y comentar mi trabajo en tiempo real. Estos desarrolladores actuaban como mi barómetro, haciéndome saber qué diseños y colores eran los más populares y que tipos de disposiciones funcionaban mejor. Si el diseño del sitio llegaba a estar muy abarrotado o complicado, alguien me lo haría saber y yo ajustaría el HTML de manera adecuada. Cuando el diseño de las páginas de categorías estaba más acabado, comencé a crear tarballs del sitio HTML/imágenes de forma que los desarrolladores pudieran jugar con el código y hacer las correcciones necesarias. Así, el canal IRC permitió desarrollar el HTML de una forma realmente centrada en el usuario. Por último pero no menos importante, los desarrolladores de Gentoo Linux realmente me ayudaron a depurar el código HTML para que se renderizara de forma óptima en variedad de navegadores modernos. Bueno, eso es todo por ahora, Acompáñeme en mi próximo artículo en el que finalmente convierto el sitio completo a un sistema basado en XML/XSLT completamente modular. ¡Eso debería ofrecernos algo de entusiasmo así como una oportunidad de mirar a un montón de detalles jugosos del desarrollo XML detrás de la escena!
|
|
