Define la homepage de tu web desde un template de Joomla

Última actualización el Martes, 01 de Marzo de 2011 16:42 Escrito por Soledad Duarte Viernes, 09 de Julio de 2010 17:34

El método más rápido, económico, eficiente, y compatible de desarrollo visual de los sitios web es partiendo de templates prediseñados. La clave para lograr un buen desarrollo web bajo esta modalidad es: 1) Elegir el template ideal para su diseño, y 2) Hacer un buen prototipado de la homepage.

A continuación te indicamos lo que debes considerar para definir la homepage de tu sitio web, pero no creando un prototipo desde cero, sino utilizando el formato y configuración espacial de un diseño existente (template), en el cual decidirás qué elementos de información e interacción vas a incluir y cómo será su disposición o jerarquía.

El primer paso entonces es elegir el template ideal para el diseño de tu web

Cuando en el proceso de elegir adviertas "este es el template que quiero", debes tener en cuenta lo siguiente:

Cada template tiene en su homepage (en el demo del autor) una cantidad X de módulos o elementos que no siempre se corresponden a las necesidades de tu propio sitio web. Las demos de los templates vienen demasiado "cargados" porque deben verse atractivos, pero todos los módulos redundantes o innecesarios para tu web, pueden despublicarse o suprimirse.
Estudia bien la estructura del template y la disposición de sus elementos (la configuración espacial), puesto que este es el aspecto más rígido del diseño sobre templates.
Las relaciones espaciales para los elementos gráficos es el punto más crítico. Por ejemplo es importante observar el ancho/alto de la imagen de cabecera, las dimensiones del logotipo de ejemplo (ancho y alto). Todo esto para ver si tus propios elementos respetan (o pueden adecuarse) esas relaciones de espacio (ancho y alto, separación entre los elementos, etc)
Cuando analices un template, la idea no es ver "que puedes poner" aquí o allá para "rellenar" espacios o utilizar elementos/módulos activos en el template. Centrate en las necesidades reales de la homepage de tu sitio web y jamás inventes información de "relleno" con el propósito de usar todo lo que trae el template en su demo

El segundo paso es prototipar la homepage partiendo del template elegido

En la siguiente imagen analizamos el template Fotografik. Partimos desde una simple captura de pantalla de la homepage del demo de ese template

La captura de pantalla puede hacerse con un simple "print screen" de la pantalla del navegador donde cargas el demo del template, y luego llevando esa captura a un editor gráfico (Photoshop, Fireworks, etc)

A continuación editamos esa captura de pantalla y le incluimos referencias para delimitar las zonas de módulos activos, para medir la altura y anchura de los elementos gráficos incluidos en el template (imagen de cabecera, logotipo, etc), y para asignarle un uso posible a cada bloque de contenido o interacción (maincontent o módulo)

Si fuésemos un paso más allá (cosa que aquí no haremos ahora), podemos hacer un fotomontage con los propios elementos del sitio web (textos, imágenes, logotipo, etc) para ver cómo sería el resultado de la personalización del template, luego de haberlo implementado en el diseño del sitio web.

Referencias del template anterior:

Color rojo: Qué módulo está activo
Color verde: medidas de imágenes
Color amarillo: el uso que tiene en el demo, qué información ya puede ir en el módulo

Lo importante aquí es identificar cuáles módulos queres usar y para qué, básicamente para la homepage, no tanto para las páginas internas porque estas heredan las propiedades y estilos de la homepage.

Medir el tamaño de las imágenes del template

La siguiente imagen es una captura de pantalla del template Fivelist, donde utilizando la regla de Fireworks hemos medido y marcado las dimensiones de las fotografías publicadas en el template.