Sé que puede ser bastante tentadora la opción de usar plantillas para tu sitio web, seguramente ya habrás visto una que otra pantilla (o template) por ahí que se ve bastante profesional y además es gratis o de un costo bajísimo.
Estas plantillas son bastante populares en todas las plataformas para construir sitios web, ya sea Wix, Squarespace, Webflow, o cualquiera que sea la plataforma de tu preferencia, todas tienen plantillas. Y es justamente su gancho de venta, cuando vemos una plantilla muy profesional, creemos que nuestro sitio quedará igual de profesional solamente cambiando textos, imágenes y colores.
Utilizar una plantilla sin duda puede acortar mucho el tiempo de desarrollo de un sitio web. Pero muy probablemente el resultado final esté muy alejado de nuestras expectativas, el sitio web no cumplirá con sus objetivos y terminará siendo una fallida página más en este cochino mar que llamamos Internet.
Acá te cuento 3 razones por las cuáles usar plantillas en tu sitio web puede ser contraproducente, así como algunos consejos para lograr construir una página web exitosa sin necesidad de utilizarlas.
Todas estas plantillas estrambóticas con las que nos cruzamos en la web fueron diseñadas por diseñadores web profesionales. Gente que lleva años involucrada en diseño web y que tienen ciertas capacidades para construir sitios visualmente atractivos y profesionales.
Estas personas saben perfectamente cómo utilizar correctamente elementos de diseño como tipografías, colores, imágenes, íconos y demás. Si tu marca o negocio coincide perfectamente con los elementos de diseño que tiene una plantilla, entonces no tendrás problema en dejarla como está y cambiar sólo textos, pero es un poco improbable que esto sea cierto.
Estas plantillas se venden como si fueran altamente personalizables, pero en la misma personalización está su debilidad. Tomemos como ejemplo esta plantilla de Wix.
Visualmente está increíble, se ve muy profesional y las ilustraciones están extremadamente llamativas. Si te gustan las ilustraciones puedes dejarlas tal cual, al final Wix las ofrece para su libre uso en sus clientes. Sin embargo, si quisieras cambiarlas comenzarías a meter ilustraciones o imágenes que no hacen “match” con el resto del sitio.
Necesitarías cambiarlas todas creando tus propias ilustraciones, o si cambias alguna sólo con una ilustración que no encaje, el sitio perdería la armonía visual y la consistencia. Tenemos secciones más adelante como esta:
Esta ilustración hace “match” con la de arriba y con todas las demás que te encuentras a lo largo del sitio.
Para que la plantilla de Wix siga siendo visualmente atractiva, necesitas mantener todas las ilustraciones, o sustituirlas todas con algo que esté alineado con tu marca y el contenido de la plantilla.
Por otro lado, toda la paleta de colores utilizada en la plantilla está alineada con los colores utilizados en las ilustraciones. Así que incluso si decides mantener las mismas ilustraciones, si cambias la paleta de colores a la de tu marca, también se perdería la línea visual de todo el sitio.
Por ejemplo, el color amarillo del footer, y otras secciones, es el mismo color amarillo que se usa en algunas de las ilustraciones. Al cambiar ese amarillo y mantenerlo en las ilustraciones, va a romper un poco la línea visual. Son detalles que probablemente no son tan obvios, pero son esos detalles que cuando no están nos hace pensar: ‘como que le falta algo pero no sé qué es’.
En pocas palabras, si quieres utilizar esa plantilla y mantener el mismo grado de atractivo visual, tendrás que trabajar muchísimo en la personalización del mismo. Y después de tanta personalización, no se parecerá nada a la plantilla prometida que te llamó la atención en un inicio.
Para este ejemplo vamos a utilizar algunas plantillas de Webflow. Personalmente las plantillas de Webflow son las que me parecen más llamativas, llenas de animaciones muy lindas y estructuras limpias.
Sin embargo, tampoco se escapan de ser plantillas. Al igual que el caso anterior de Wix, las de Webflow (aunque en realidad todas las plataformas) también tienen el mismo problema. La personalización del diseño visual es un dolor de cabeza.
Pero este punto está más relacionado con la arquitectura o la estructura de las secciones en la plantilla. Tomemos esta plantilla como ejemplo.
Visualmente está muy atractiva al igual que todas, las animaciones impecables y lo que tú quieras. Sin embargo, todo el contenido y cada uno de los elementos están hechos para que hagan “match” con el diseño de todo el sitio.
Tomemos la sección de la tabla de precios:
Es una de las secciones que más me gustaron, tienen un efecto muy lindo al momento hacer scroll a lo largo de la sección de precios. El “pero” que le pondría es que esta sección de pricing, o tabla de precios, está pensada para un negocio que tiene 4 “planes” diferentes.
En caso de que tu negocio tuviera sólo dos planes de precios, comenzaría a romper un poco la armonía del cómo estaba pensado el sitio. O si de plano no tienes planes, esta sección ni te serviría y la quitarías de tu sitio o la meterías nada más por meterla.
Lo mismo sucede con esta otra plantilla en Webflow. Tenemos una sección en donde se muestran los servicios de la compañía en el home, y se encuentra un layout o estructura ideal para 4 servicios:
Esta sección está muy bonita, y está hecha para poder mostrar 4 servicios. Si tienes más, o menos, esta sección perdería el atractivo visual con el contenido que fue planeado originalmente (4 servicios).
Estos son solamente 2 ejemplos, pero si vas con detenimiento analizando cada una de las secciones de cualquier plantillas, te darás cuenta que están hechas con una estructura planeada para algo específico.
El gran problema de esto es que comienzas a adecuar tu marca a la estructura de la plantilla y no al revés.
El contenido es clave, y sabemos bien que el contenido audiovisual, como imágenes o videos, pueden tener un impacto enorme en nuestro sitio web. Por otro lado, también tenemos el contenido en texto. Absolutamente todo el contenido en nuestro sitio web, sin importar el formato, es el que mantiene a nuestros visitantes en el sitio o los convierte en clientes.
Las plantillas meten todo tu contenido en un molde. Como te dan un diseño y una estructura ya predefinida, como lo vimos en los dos puntos anteriores, te limitas a hacer encajar tu contenido en ese diseño predefinido.
No todo en el sitio web es diseño, las plantillas cumplen con ese cometido pero de ninguna manera ayudan con el contenido. Tenemos que tener claro que el contenido tiene forma y fondo, las plantillas cumplen con la forma y nosotros somos responsables del fondo. Y el fondo nunca tiene que adecuarse a la forma.
Estas plantillas pueden orillarnos a llenarlas con el contenido que nos parezca adecuado o que encaje con el diseño, y no el contenido que cumpla nuestros objetivos.
Por ejemplo. Las plantillas están llenas de “lorem ipsum” o texto dummie, y aunque parezca raro, la cantidad de texto también hace que se vean bien. Incluso teniendo textos más largos o cortos que los que vienen por defecto pueden afectar el diseño.
En este ejemplo, el texto dummie está utilizando perfectamente 3 renglones en cada una de las tarjetas. En el momento que comenzamos a modificar el texto, comienzan a haber tarjetas con 2 renglones, 1 renglón, 5 renglones o lo que sea.
Esa diferencia de texto puede hacer que el diseño comience a verse un poco disparejo y comencemos a redactar nuestro contenido para que todo sea de la misma cantidad de líneas. Y hacer esto, es bueno para el diseño pero imperdonable para el mensaje que se quiere dar.
Este ejemplo sólo es hablando de texto, pero lo mismo pasa con imágenes o videos. Metemos imágenes sin sentido porque el template tenía una imagen en cierto punto y cosas por el estilo. Comenzamos a destruir nuestro contenido en nombre del diseño, entonces nuestro sitio será como una persona guapa pero sin inteligencia.
A resumidas cuentas, todas las plantillas, y de cualquier plataforma, están pensadas para un contenido en específico. Cierta imagen visual en cuanto a elementos gráficos, cierto formato y cantidad de contenido. Al momento de personalizarlas, es muy fácil romper con esa identidad visual para la que fueron diseñadas.
No digo que sea imposible lograr hacer buenos sitios con estas plantillas. El punto es que tenemos que estar conscientes que usarlas va más allá de sustituir textos e imágenes. He visto personas que por saber cómo instalar y ‘personalizar’ plantillas deciden abrir una agencia de ‘diseño web’ pero terminan haciendo diseños feos con contenido poco efectivo.
Usar plantillas para tu sitio web puede ser una buena opción en 3 posible circunstancias:
Estas son algunas de las razones por las que me parecería una buena idea utilizar una plantilla.
Si queremos hacer diseño web de la forma correcta hay demasiado trabajo que tenemos que hacer. Hay muchos temas de diseño y desarrollo que hay que conocer, no puedo listarlos todos en un sólo artículo pero si tuviera que elegir los más importantes para lograr un buen diseño de sitio sin la necesidad de plantillas serían:
El primer paso siempre es determinar qué es lo que vas a mostrar, o comunicar, con el contenido de tu sitio web. Cuál es el objetivo de todo el sitio y qué contenido vas a utilizar para lograrlo. Acá te comparto un artículo que te puede ayudar con esta visión.
Decide cuál es el formato que sería más relevante para tu audiencia. Aunque independientemente del formato que decidas utilizar, el contenido en texto es extremadamente esencial para el sitio web.
Antes de lanzarte a hacer un diseño para la página web, redacta los textos y mensajes que quisieras comunicar por medio de ella. Las habilidades de copywriting son esenciales para que los visitantes del sitio te conozcan o tomen alguna decisión en concreto, te comparto un artículo al respecto.
Decide cuál es el contenido o la información que tendría que ir en tu página principal y qué otro contenido iría en otras páginas del sitio. También elige las palabras correctas con las que vas a comunicarte con tus visitantes.
De esta forma tendrás una mejor idea de la estructura y las secciones que debería tener tu sitio web.
Una vez que ya tienes establecido tu contenido, hay que buscar qué estructuras y diseños se adecúan a nuestro contenido.
En este punto podemos navegar en sitios web que nos gusten y ver las estructuras de sus páginas web. No se trata de inventar la rueda, ningún sitio web tiene “una estructura o diseño único”.
Por ejemplo, si de acuerdo a tu negocio, ofrecerás 4 diferentes planes de precios, busca algún sitio web que tenga una tablas de precio con 4 planes. Este diseño de Slack me parece interesante:
Puedes replicar esa misma estructura para la tuya si se adecua con tu contenido. Serían 4 columnas, con un header, una descripción comercial, seguido del precio, un call to action y terminar con características del plan.
Toma inspiración de tantos sitios web como quieras, incluso de las mismas plantillas para tomar ideas de qué estructuras y diseños van acorde al contenido que estableciste en el paso anterios.
Si el sitio web es para una marca ya prestablecida y tiene un propio manual de marca o algo por el estilo, pues ya no tienes que hacer este punto.
Pero si necesitas armar una imagen visual para que esté alineado con la marca y muestre consistencia en tu sitios web, necesitas conocer algo sobre elementos de diseño. Hay varios, pero en el caso de diseño web los más importantes son: tipografía, color, imagen e iconografía.
No necesitamos tener muchos conocimientos para lograr un buen resultado en nuestra línea visual. Sólo tenemos que tener clara la consistencia, y en general un buen gusto por lo que se ve bien y profesional.
Establece la tipografía que va a usar tu sitio web, lo más fácil es elegir solamente 2 tipografías o fuentes. Una para los encabezados, o títulos, y otra para el cuerpo, o body, de todos los textos que vayas a utilizar en tu sitio web. Date una vuelta por Google Fonts, las fuentes son gratis y las puedes usar sin problema. Sí, algunas fuentes no son gratis y te puedes meter en problemas si las usas sin pagar.
Define tu paleta de colores. Este tema puede ser complejo si nos queremos meter con cuestiones de psicología del color y cosas estrambóticas. La forma sencilla es utilizar herramientas como Happy Hues o Coolors para establecer tu paleta de colores sin tanta complicación.
Toma un paquete de íconos, ilustraciones e imágenes que sean consistentes y estén alineados con tu marca. Tienes que utilizar estos elementos de forma consistente. Por ejemplo, en Iconscout puedes adquirir íconos e ilustraciones que se ven increíbles. Utiliza ilustraciones que sean similares entre ellas, que sean del mismo ‘pack’ de ilustraciones e íconos para mantenerte consistente.
Este es uno de los huecos más grandes de la creación de sitios web. Muchos comienzan a hacer el sitio sin antes tener un mapa y diseño en el qué basarse. Si no haces esto, hace sentido utilizar una plantilla, simplemente instalas tu plantilla y te pones a cambiar textos e imágenes sin rumbo aunque termines haciendo una porquería de página.
Crea un diseño en alguna aplicación como Figma o Adobe XD. Son herramientas fáciles de utilizar y no necesitas mucho conocimiento para hacer un buen trabajo aunque sea básico. También, su versión gratuita es más que suficiente para hacer el proyecto que necesitas.
Para esta etapa ya habrás pasado por los pasos anteriores. Por lo que necesitas es tomar el contenido establecido, trata de replicar los diseños que te inspiraron, y hazlos encajar con la línea visual de tu marca. Es un proceso bastante entretenido. Por supuesto toma tiempo, pero es bastante satisfactorio si realmente te gustan todos estos temas de diseño y desarrollo web.
Antes de hacer tu diseño en Figma o Adobe XD, realiza un wireframe de tu sitio. Que es como un garabato simplemente para definir la estructura y contenido del sitio. Lo puede hacer incluso a papel, se ven algo así:
Todas las aplicaciones para crear sitios web tienen esta función. Por lo general tenemos miedo a utilizar esta función de ‘empezar desde 0’ porque es un lienzo en blanco y simplemente no sabemos cómo llenarlo. Pero con todos los pasos previos realizados este lienzo en blanco se vuelve en nuestro mejor amigo.
No importa si utilizas Wix, Squarespace, Webflow, o lo que sea. Todos estos constructores tienen esa opción de empezar a construir desde cero. Puedes utilizar herramientas como Nicepage que tiene como estos bloques predefinidos que encajan con los diseños que seguramente habrás usado en tu wireframe.
O si tienes conocimientos de programación puedes hacerlo directamente en código pero creo que esto ya sería demasiado tiempo y esfuerzo.
Estos pasos los estoy haciendo sonar bastante simples, pero la realidad es que sí exigen su tiempo y dedicación. Pero todo ese tiempo invertido vale totalmente la pena, tener la capacidad de hacer buenos sitios web sin plantillas es una habilidad que paga buenos dividendos.
En lugar de utilizar plantillas y perder tiempo personalizándolas, invirtamos el tiempo en el proceso que nos va a dar mejores resultados. Invertir tiempo no es lo mismo que perder tiempo.
Si llegaste hasta este punto estoy muy agradecido por tu tiempo y espero que esta información te haya servido de alguna manera. Siempre puedes ayudarnos compartiendo el artículo o dando clic en alguno de los anuncios que aparecen en el blog.