Como Mejorar una Plantilla de un Sitio Web

 

pagina3Dprueba

Existen varias formas de desarrollar un sitio web, la forma mas utilizada por su versatilidad, reducción de costos y buena imagen es utilizando una plantilla además de que al implementar un administrador de contenido esto es prácticamente un requerimiento.

Una plantilla de un sitio web es una combinación de estilos CSS con un diseño fresco, amigable y muy atractiva, esta debe de cumplir con requerimientos esenciales de diseño como: Los colores, el estilo de los elementos que contiene, (texturas, relieves, distribución adecuada de los elementos: módulos, recuadros, listas. ) ademas que esta también debe portar una proporción conveniente de los elementos de nuestro sitio.

La plantilla es la primera impresión que se queda en el usuario de nuestro sitio y nos sirve para resaltar u optimizar la impresión del mensaje que queremos hacer llegar al usuario, en otras palabras le ayuda al usuario a tener un panorama mas claro del producto, servicio, información que usted ofrece.

Puntos Importantes Para la Implementación de Una Plantilla.

Una de las ventajas de adquirir una plantilla es que al obtenerla también visualizamos de mejor manera los espacios y con esto podemos fabricar un mapa mental de la distribución de nuestro contenido(Imágenes, texto) ya que esto nos ofrece por default la plantilla de nuestro sitio, además de que la compra o adquisición de una plantilla  siempre va a reforzar la estructura de nuestro sitio Web.

La decisión de adquirir una plantilla se debe basar en determinar cual es la mas adecuada para nuestro giro del negocio y entre la lista interminable de estas a elegir. Entonces considerando lo anterior, a la plantilla de nuestra elección debemos adecuar los colores de nuestra empresa, grupo o giro de negocio. Esto significa profundizar un poco mas en nuestra plantilla, entender Qué es lo que nos permite hacer?, y,  Cual es la imagen de nuestra empresa que queremos transmitir? puede ser una imagen corporativa, fresca, juvenil, sobria, dependiendo de estos objetivos .

La desventaja es que todas las plantillas muestran similitud entre ellas, sin embargo, para evitar esto es necesario hacer una adecuada customización de la plantilla para hacerla totalmente diferente a la original.

Veamos un ejemplo muy claro de una mala y buena implementación de una plantilla, los puntos que debe considerar son los siguientes:

PLANTILLA 1                                  PLANTILLA 2

{rokbox title=|PLANTILLA 1| size=|100% 100% | thumbsize=|200 307| thumb=|images/stories/plantilla1.1Chico.png|}images/stories/plantilla1.1.png{/rokbox}                             {rokbox title=|PLANTILLA 2| size=|100% 100% | thumbsize=|200 307| thumb=|images/stories/plantilla2.2Chica.png|}images/stories/plantilla2.1.png{/rokbox}

Menús Superiores (Top Menus)

Los Menús Superiores son las opciones que su empresa, negocio o grupo deportivo, dependiendo el giro, muestra a los usuarios, estos tienen un estilo predefinido por la plantilla, sin embargo, esto no lo es todo. A continuación mostramos dos ejemplos de la misma plantilla para que usted tenga una mejor percepción.

En la Plantilla 1.- Los menús tienen una imagen anticuada, la descripción es la siguiente:

  • Carece de conociemientos de aplicación de color y esto provoca una imagen anticuada no modernista.
  • No tiene estilo.
  • Se despliegan pero de manera rigida.
  • Tiene apariencia que el sitio se creó en años pasados y esta en remodelación.

En la Plantilla 2.- LosMenús superiores tienen un color fresco que hace armonía con los demás colores de la plantilla Web, estos a su vez reflejan modernidad, dinamismo y se demuestra que la dificultad de lograr una obra sencilla es aprobada.

Por ejemplo:

Plantilla 1

menuSup

menuSup2

Plantilla 2

menuSupN

menuSupN2

Colores

Los colores de la plantilla deben ser de acuerdo al giro de nuestra empresa, grupo o linea de negocio, ya que estos identifican nuestra identidad en cualquier momento  cualquier situación y a pesar de una actualización o rediseño, estos prevalecen.

El honor de portar los colores de nuestra empresa no siempre debe influir para la propuesta total del diseño de nuestra plantilla, y mucho menos debemos abusar de cada espacio de la plantilla para incrustarlos, Además que, cada vez que colocamos los colores de lleno sobre la plantilla hacemos uso primitivista de estos y mas aún si los colocamos de fondo de nuestra plantilla Web.

Nota: Primitivismo se le llama a colocar un color sin mayor idea que solo rellenar un espacio, es decir, una mancha de color sin estilo.

Por ejemplo:

Encabezado(Header)

Plantilla 1

Área de encabezado

color1

Plantilla 2

Área de encabezado

colorN1

color3

colorN3

Menús Superiorescolor2

Menús Superiores

 colorN2

Estilo de encabezadocolor4

Estilo de Encabezado

 colorN4

Estilo de Módulo

 color5

Estilo de Módulo

 colorN5

Footer(Pié de Página)

color6

Footer(Pié de Página)

 colorN6

Los colores deben reflejar con sutileza la imagen de la empresa, estos deben ser con estilo, es decir transmitir la sensación de frescura, jovialidad, algunas veces divertidos, sobrios o serios, dependiendo del giro que esta tenga, ademas recordemos que la dificultad radica en la sencillez, es decir, saber encontrar los elementos adecuados y posteriormente provocar armonía entre ellos. Se escucha sencillo pero para el área de diseño esta es la parte mas complicada.

Apariencia Amigable

Este tema puede resultar un aspecto confuso con respecto a la funcioalidad del sitio, pero aclaro, aqui solo se intenta presentarle un panorama mas claro al lector sobre el diseño de la plantilla y los aspectos que esta involucra.

La Apariencia Amigable no debe presentar elementos agresivos, como:

  • Esquinas de los módulos no redondeadas.
  • Elementos superpuestos que se vean planos.
  • Estilos de sombras no adecuados y excesivos o insuficientes.
  • Una tipografía mal empleada trae como consecuencia rigidéz al ojo del usuario. 

Por ejemplo:

Plantilla 1

apariencia2

Plantilla 2

aparienciaN2

Apariencia1

aparienciaN1

Una Apariencia amigable posee un diseño fresco, jovial y de vanguardia, es decir:

  • Contiene elementos "Amigables" como módulos con esquinas redondeadas.
  • Sombras que proporcionan al usuario una visión de relieve y de diseño sobrio.
  • Elementos que no exageran la carga del color.
  • Una tipografía bien seleccionada tabién proporciona sencibilidad al ojo del usuario.

Ligas Que No Van A Ningún Lado

Este es un Factor Fatal, el mejor ejemplo para esta situación es que la plantilla hace analogía con un menú de un restaurante, en otras palabras las opciones que se proponen al comensal como al usuario deben existir, aquí cabe hacer la pregunta: Si pido un platillo que observo en el menú y no se encuentra como me siento?, El rechazo es inmediato.

Al igual que el comensal el usuario se siente defraudado y rechazará las demas opciones propuestas por el sitio.

Si un botón dice "Ver mas…", la liga debería transportarme al lugar que me propone llegar.

Por ejemplo:

Plantilla 1

liga1

Plantilla 2

ligaN1

Sí la plantilla proporciona botones que van hacia una sección especifica del sitio, estos deben ser aprovechados de tal manera que el destino siempre sea congruente con la leyenda del botón.

SlideShow no Diferenciado (Anticuado)

Un SlideShow que se mezcla con el contenido de la página no cumple su función ya que este debe estar diferenciado por el contraste que provoca el impacto ya sea de las imágenes que se presentan, los tamaños, los temas, características. El SlideShow no puede guardar similitud con los TopModul(Modulos superiores), ya que pude provocar el desacierto del usuario al pasarlo de largo como un simple elemento mas en el FrontPage(Página Principal).

Por ejemplo:

Plantilla 1

slide1

Plantilla 2

slideN1

 

El SlideShow es uno de los elementos fundamentales de nuestra plantilla, existen muchos tipos y estilos de este elemento, gran variedad en colores ,estilos y la función de este es presentar un panorama claro e incisivo sobre temas importantes de nuestro sitio, por ejemplo: Características, Ventajas de nuestro producto o servicio, promociones, avisos, noticias de gran impacto, etc. El SlideShow siempre debe estar diferenciado por el contraste de su función, es decir mientras los demas elementos permanecen estáticos este se desliza para darle dinamismo al sitio, pero como comentábamos antes, esto no es todo, no debemos pasar de largo los demas elementos de su entorno como: módulos, artículos principales, etc. recordemos que el contraste nos sirve para llamar la atención de nuestro diseño y un elemento de este tipo debe poseerlo o de lo contrario se ve afectado, opacado por los demas elementos y a su vez anticuado.

Por ejemplo:

 

Mala Implementación de Estilos

Una Plantilla sin estilo no tiene distinción alguna, esto provoca que la imagen corporativa que se le desea dar al usuario no sea la adecuada, no proyecta finalmente el mensaje que se quiere hacer llegar al usuario, y una mala implementación del estilo puede tener cho finalidad una apariencia bidimensional(plana), y carente de volumen y anticuada.

Por ejemplo:

Estilo de Área Superior

eslito1

Estilo de Área Superior

estiloN1

Estilo de Módulo

estilo2

Estilo de Módulo

estiloN2

Estilo de Calendario

estilo3

Estilo de Calendario

estiloN3

Estilo de Footer(Pié de Página)

estilo4

Estilo de Footer(Pié de Página)

estiloN4

Los estilos son el toque detallista que hace la distinción de nuestro sitio respecto a los demás, este puede ir desde una pequeña sombra hasta un bisel muy sutil en uno de los módulos por mencionar algunos detalles.

Utilización Adecuada de los Módulos

Para utilizar correctamente los módulos se requiere de conocimientos técnicos y sutileza en el diseño, ya que el desconocimiento puede provocar un decremento en la calidad del diseño de la plantilla y devolviendo una respuesta negativa del usuario.

Por ejemplo:

Plantilla 1

modulo2

modulo1

Plantilla 2

moduloN2

moduloN1

Además existen herramientas que a veces nos ofrece la plantilla además de encontrarlas con facilidad con los distribuidores autorizados.

La correcta implementación de los elementos optimiza el punto de atracción e incitación del usuario, es decir, se logra la preferencia del incondicional del usuario.

En el siguiente ejemplo se muestra la utilización correcta de un modulo que nos proporciona el efecto Pop-Up de una imagen con un diseño sutil, y de buen gusto.

Elementos mal posicionados e inconsistentes

El posicionamiento adecuado no es mas que la percepción o visualización de los elementos respecto a los espacios para utilizar, no debemos dejar elementos encima de otros o desviados de su posición adecuada. 

La proporción que se guarda forma la armonía entre los elementos.

Por ejemplo:

Plantilla 1

acomodo3

Plantilla 2

acomodoN3

acomodo1

acomodoN1

acomodo2

acomodoN2

Los elementos posionados correctamente no desvía la atención del usuario, no lo distrae al usuario del mensaje que se le pretende brindar.

Lenguaje

El lenguaje del testo de la plantilla es un cambio que debemos realizar al adquirir una plantilla, pues la mayoria de las ocasiones esta presenta un lenguaje extranjero predeterminado.

Si no se hace este cambio el resultado puede observarse de la siguiente manera.

Por ejemplo:

Plantilla 1

Captura_de_pantalla_2012-01-31_a_las_17.29.23

Plantilla 2

Captura_de_pantalla_2012-01-31_a_las_17.29.41

Si el cambio es realizado le brinda al usuario una consistencia coherente del texto y esto ayuda a que toda la población de usuarios puedan leer con facilidad nuestro contenido y sin causar distinciones.

Conclusión

Mejorar la plantilla siempre debe consistir en la optimización de los elementos que la componen en armonía y organización con nuestro contenido, para que finalmente el mensaje llegue al usuario de manera adecuada y no exista ningún tipo de interrupción en su camino, recuerde que la primera imagen nunca se olvida y el tener una mala imagen en la web es equivalente a tener un local comercial u oficina desorganizada y sucia.

El mejoramiento de la plantilla así como el análisis profundo de nuestro sitio siempre debe ir de la mano de un profesional que ponga a su disposición una gama de opciones de calidad optima. Existen diferentes empresas especializadas que le ayudarán a que su Sitio Web obtenga las metas propuestas.