Un completo curso de diseño gráfico, ilustración, diseño web y tipografía.

Acerca de esta web

(Ver también las notas adicionales de la nueva versión «The making of».)

Para analizar algunas de las decisiones que se deben tomar para construir un sitio web, nada mejor que fijarnos en estas mismas páginas. Pensamos que constituyen un buen ejemplo de algunos principios generales del diseño para la web. No sólo comentaremos las cosas que funcionan, sino que también hacemos algunas reflexiones sobre lo que podría haberse hecho de otra manera. Algunos comentarios son generales de esta versión y la original en catalán, otros son específicos de ésta.

Objetivos.

¿Por qué tener una presencia en la red? Si no tenemos un motivo claro y fácilmente explicable, difícilmente se puede crear una web capaz de ofrecer algo interesante a los visitantes. En el caso de Vigital, queríamos crear una serie de páginas útiles para aprender todo lo relacionado con el mundo del diseño digital, y aportar algo a la escasa oferta existente en la red (incluso en el mundo editorial) de materiales de referencia sobre diseño gráfico, para la web y tipografía. La versión original, en catalán, más que aportar algo, de hecho, llenaba el vacío absoluto que había: no faltan recursos en inglés; en castellano, algunas cosas se pueden encontrar; pero en catalán no había nada de nada. Por otra parte, teníamos otros dos objetivos muy claros:

Pretendíamos crear una web de promoción personal, incluyendo un formulario para la contratación de servicios de ilustración y diseño.

Aprender el manejo de nuevos programas y técnicas (¡y disfrutar con ello!); este objetivo, aunque intrascendente para el público, es muy interesante para los creadores... preparar ilustraciones, diseñar las páginas... es una actividad divertida y apasionante.

Planificación.

Antes de hacer nada, pensamos mucho sobre qué debería ofrecer el proyecto Vigital. Llenamos un puñado de papeles con listas de temas a tratar, intentando agruparlos en secciones bien definidas. En esta fase, el mejor útil de trabajo es el lápiz y el papel. Cuando tenemos un borrador razonablemente completo, pasamos al ordenador y perfilamos las partes de la red. Una forma muy útil de crear las secciones y subsecciones es emplear un procesador de textos, y emplear los estilos para definir los Títulos y Subtítulos, es decir, las Páginas y los Apartados. (en Word, los estilos aparecen en forma de menú desplegable en la parte superior, pudiendo elegir entre Título 1, Título 2...) Una vez creado el listado de páginas y sus apartados, si vamos a Ver | Mapa del Documento, aparecerá la estructura que hemos decidido para la red; si elegimos Insertar | Índice y Tablas | Tabla de contenidos... podremos disponer ya de una tabla de contenidos general y lista para imprimir. Esta tabla de contenidos no sólo sirve como referencia para anotar qué partes están listas y qué partes no, añadir comentarios, etc. , sino que al final también sirven para pegar en cada página un índice de los contenidos de ésta.

Una vez preparado el mapa del documento de esta manera ya disponemos de un punto de partida para escribir el texto de los artículos (o pegarlo desde otros documentos si ya tenemos partes escritas, textos escritos en otros ordenadores o artículos que nos envían diferentes autores.)

Modularidad y estructura.

El título de la web, Vigital, lo hemos copiado de un término acuñado por un diseñador gráfico africano, y es una contracción de "artes visuales con medios digitales". Vigital iba a ser un manual online sobre diseño digital, con unas secciones claramente definidas, y con una estructura que permitiera crecer, añadir nuevas subecciones y artículos.

Una manera de asegurarnos que la web pueda crecer sin problemas es planificar bien su estructura, y hacerla modular: una serie de secciones independientes (si bien con todos los enlaces necesarios entre ellas) y con posibilidad de incorporar nuevas secciones desde la página inicial. Así no resulta difícil incorporarlas, ya que sólo debe crearse un enlace a la nueva sección en la portada; posteriormente, pueden añadirse enlaces desde las otras secciones y artículos. La web original la creamos en plan Frankenstein -en distintos ordenadores, con muchos programas diferentes, y a lo largo de un extenso periodo de tiempo, poco a poco-; tenía el problema de no haber utilizado un programa capaz de manejar plantillas y aplicarlas a páginas ya hechas (cosa que sí hacen, por ejemplo, Dreamweaver o Fusion.)  Esta segunda versión se ha creado íntegramente en Netobjects Fusion, un programa mucho más flexible que permite actualizar instantáneamente toda la web retocando sólo algunos elementos maestros que aparecen en todas las páginas, de modo que no nos hemos sentido condicionados a la hora de diseñar la estructura. La flexibilidad que este programa nos proporciona nos permitirá hacer cambios de diseño o de estructura sin que supongan apenas trabajo.

 

Las portadas de la versión original (arriba) y de ésta son algo diferentes, pero tienen en común algunos elementos, como los iconos al estilo de Neville Brody para Macromedia, y los colores del Logotipo.

La página inicial es esencialmente gráfica; el signifido de los iconos o ilustraciones abstractas se revela con un efecto de mouseover. Los iconos son algo en común con la otra versión, aunque el diseño de ambas páginas es bastante diferente, y se ha preparado un nuevo logo e identificadores de las secciones.

Las cuatro secciones (nivel 2 de la web) contienen un sumario y enlazan con los principales artículos. El diseño de estas páginas es similar en ambas versiones; lo único que cambia aquí es la ilustración y la cabecera.

El siguiente nivel (3) son los artículos. Éstos pueden tener, a su vez, varias partes o tratar varios temas relacionados (nivel 4) A estos artículos dentro de cada sección (nivel 3-4) se accede a partir de las barras de navegación superior (temas principales) o con los enlaces de la columna que aparece a la derecha o dentro del cuerpo del artículo.

Cuestiones de diseño.

El diseño general de las páginas es sobrio. La información es fácil de localizar y de una forma previsible; en cada nueva página sabemos dónde encontrar los elementos de navegación. Esto es imprescindible para un material que pretenda cumplir una función didáctica. No queremos hacer alarde de imaginación o de facultades para el diseño, simplemente crear una estructura de navegación intuitiva y fácil.

El mapa de navegación de la parte superior simplemente utiliza las iniciales de las cuatro secciones (B,D,W,T) y se indica dónde estamos coloreando la letra correspondiente y emborronando el resto. Para que las diferentes páginas tengan un aspecto consistente hemos utilizado las plantillas (MasterBorders) que Netobjects Fusion maneja con tanta sencillez, asegurándonos de que las ayudas a la navegación estén presentes en todas las páginas.

Sitestyle

Con Netobjects Fusion el aspecto de toda la web se puede controlar con sólo asignar gráficos para que el programa construya todos los elementos de navegación.

Si decidimos rediseñar las páginas, será extremadamente fácil con nuestro editor de web, Netobjects Fusion. Este programa crea automáticamente toda la estructura de navegación y todos los gráficos necesarios, incluídos los efectos de mouseover, a partir de una colección de gráficos de base (son suficientes tres: uno para el enlace normal; otro para el momento en que pasa el ratón por encima; otro para la sección actual.) Con estos ingredientes, ¡Fusion crea por sí mismo los centenares de gráficos necesarios para la web! Evidentemente, no nos hubiéramos planteado hacer la web de esta manera sin disponer de este extraordinario programa. Lo mejor del caso, es que cambiando sólo estos tres gráficos, y eligiendo otro tipo de letra, Fusion puede cambiar todo el aspecto de la web en un instante.

cambios globales fáciles...También hemos utilizado una imagen de fondo para dar un aspecto algo distintivo. Se trata simplemente de un rectángulo que se va repitiendo en vertical; el área del artículo queda contenida en un espacio blanco, sin ocuparlo del todo. A la derecha, aparece un espacio con una sutil cuadrícula isométrica que se ve en mayor o menor extensión según la resolución de pantalla que tengamos. Cambiando sólo esta imagen de fondo, el gráfico del logo y el gráfico del mapa de imagen, podríamos cambiar el aspecto general de todas las páginas en un momento.

El tratamiento tipográfico en estas páginas no es tan refinado como en la versión original, puesto que aquí no hemos utilizado hojas de estilo en cascada. ¿Por qué motivo, si realmente creemos que las CSS son algo fantástico? Básicamente, porque la comodidad que ofrece Fusion para diseñar las páginas lo hace innecesario, y, francamente, porque la versión que tenemos no maneja CSS con soltura.

Utilización de gráficos.

Los gráficos incluídos no son sólo decorativos, sino que refuerzan el mensaje del texto, amplian la información y ofrecen nuevos puntos de vista. Cierto es, pero, que hemos añadido algunas ilustraciones en plan más frívolo: teniendo un ilustrador en casa que lo hace gratis, así cualquiera :-) Después de haber sido bastante conservadores en el diseño de las páginas, en aras de la claridad expositiva y la facilidad de uso, con los gráficos hemos tenido más oportunidad de usar el color, las formas y la tipografía. También nos sirve de elemento distintivo: al pasar de una página a otra, esperamos ver nuevos juegos de colores y formas...