Un error que he visto últimamente en la comunidad no-code es que muchos creadores empiezan sus proyectos de Webflow desde cero.
No digo que sea algo malo; empezar desde cero te permite crear un sitio totalmente único con elementos personalizados. Sin embargo, cuando se trata de velocidad y eficiencia, las plantillas son la mejor opción.
Las plantillas de Webflow han redefinido nuestra forma de diseñar y desarrollar sitios web. Incluyen componentes predefinidos que son fáciles de ajustar y editar según tus necesidades, lo que te permite invertir muy poco tiempo y energía en tu sitio para que puedas centrarte en otras prioridades.
Aquí te explico a fondo cómo las plantillas pueden acelerar tu proceso de diseño e impulsar tu negocio. También te guiaré paso a paso para crear un sitio web totalmente personalizado y optimizado para SEO utilizando una plantilla como base.
El problema del diseño a medida
No me malinterpretes. El diseño a medida es fantástico, y en Flow Ninja hacemos muchos proyectos personalizados. Pero si tienes una idea nueva y quieres probar el mercado rápidamente, un lienzo en blanco puede imponer un poco. De repente, empiezan a surgir todas estas preguntas en tu cabeza:
- ¿Qué kit de wireframes debería usar?
- ¿Dónde encuentro el kit de wireframes?
- ¿Cómo escribo el contenido sin tener un diseño?
- ¿Dónde puedo encontrar inspiración?
- ¿Es esta una buena tipografía? ¿Cómo se verá en la web?
- ¿Están bien los márgenes y los rellenos?
- ¿Funcionará este diseño en dispositivos móviles?
- ¿Debería pensar también en el diseño móvil?
Y la lista sigue y sigue...
Responder a estas preguntas es bastante sencillo si eres diseñador profesional y no trabajas bajo plazos ajustados. Sin embargo, si diseñas como pasatiempo o proyecto paralelo —o si el diseño no es tu función principal—, encontrar las respuestas adecuadas puede parecer una eternidad.
Lo peor es ver cómo tus competidores lanzan nuevas funciones y actualizan sus diseños mientras tú sigues trabajando en tu producto mínimo viable (MVP).
Llega al mercado más rápido con las plantillas de Webflow
¿Y si no tuvieras que responder a todas esas preguntas? ¿Qué pasaría si pudieras centrarte solo en las funciones principales de tu negocio y aun así lograr que tu sitio se vea profesional, confiable y, por qué no, atractivo?
Cuando inicias un proyecto usando una plantilla de Webflow, tienes a tu disposición un conjunto de componentes predefinidos. Es como tener el mejor kit de wireframes del mundo. Todo lo que quieres incluir en tu diseño ya está desarrollado y es muy fácil de editar.
Y lo mejor: si eliges una plantilla que se ajuste a tus necesidades, probablemente ya incluya todas las secciones y funciones que tu negocio requiere para salir al aire. Así, sabrás exactamente qué iconos comprar (o diseñar), qué imágenes buscar y cuánto texto necesitas redactar.
Ya no tienes que preocuparte por el desarrollo web. Puedes centrarte en tu negocio.
Cómo usamos las plantillas en Flow Ninja
En Flow Ninja, seguimos un proceso específico cuando queremos lanzar el proyecto de un cliente lo más rápido posible usando una plantilla como base. He resumido nuestro proceso a continuación como una guía rápida para la próxima vez que construyas un sitio en Webflow a partir de una plantilla.
Mapa del sitio
Empieza usando herramientas como FigJam para diseñar el mapa de tu sitio web. Este paso es fundamental para que todo funcione bien. Normalmente intentamos que el mapa sea lo más sencillo posible (MVP), pero si estás migrando desde WordPress u otra plataforma, probablemente debas migrar todas las páginas.
Recomendamos usar un código de colores para cada página, como en el ejemplo de arriba. Así es como lo hacemos:
- Asigna un color a las páginas principales — en el ejemplo de arriba, las páginas son amarillas.
- Asigna otro color a las páginas de prioridad P2 — arriba, usamos el verde.
- Asigna un color a las colecciones del CMS — arriba, son azules.
Una vez que tengas una visión general del sitio en un mapa como el de arriba, será mucho más fácil planificarlo y reducirás la carga de trabajo. Además, podrás identificar fácilmente dónde usar el CMS de Webflow para convertir páginas en plantillas, lo que facilitará el desarrollo posterior. Si tienes los plazos muy ajustados, puedes eliminar las páginas menos importantes para acelerar el lanzamiento (y retomarlas más adelante).
Si quieres ir un paso más allá, puedes detallar las secciones individuales que quieres añadir a cada página. Esto te preparará para el siguiente paso y hará que sea más fácil encontrar la plantilla adecuada.
Encontrar tu plantilla
Primero, ve al marketplace de plantillas de Webflow. Al empezar la búsqueda, te recomiendo filtrar por categoría, ya que hay más de 15 opciones. Además, las plantillas suelen estar diseñadas pensando en una categoría específica, y cada una incluye secciones adaptadas a esas necesidades.
Alternativamente, puedes usar un kit de interfaz (UI Kit). Estos también incluyen todas las secciones y componentes necesarios para construir tu sitio web.
Solicitar un archivo de Figma
Si tienes mucha prisa, siempre puedes empezar a construir tu sitio directamente en Webflow. Sin embargo, recomendamos empezar con una herramienta de diseño de interfaces como Figma —o similar— para que tus clases y estilos en Webflow no se desordenen mientras pruebas posibles soluciones para el sitio.
Dependiendo del vendedor, al comprar una plantilla de Webflow, deberías poder solicitar un archivo de Figma y recibirlo en un plazo de 24 horas tras la compra. Si decides comprar una de las plantillas de FlowNinja, recibirás un archivo de Figma gratuito tras enviarnos tu comprobante de compra del marketplace de Webflow.
Para ir sobre seguro, siempre puedes contactar con el vendedor antes de comprar la plantilla para preguntar si ofrecen el archivo de Figma tras la compra.
Diseñar el esquema del sitio en Figma y redactar el contenido
Una vez que tengas listo el mapa del sitio, empieza a curiosear por la plantilla para ver qué componentes puedes aprovechar. En solo unas horas, tendrás un boceto de cada página con sus respectivos elementos.
Esto te vendrá de perlas cuando te pongas a redactar el contenido. En lugar de darle mil vueltas a los títulos para que encajen, la plantilla te marcará la longitud exacta que necesitas.
Si cuentas con un redactor en el equipo, lo ideal es pasarle el boceto de Figma y que escriba el texto en Google Docs. Pero si te toca hacerlo todo a ti, puedes escribir directamente sobre el diseño.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
Personaliza tu plantilla
Aquí viene lo divertido.
Como Figma permite modificar componentes globales, puedes empezar a experimentar con los estilos. Probar diferentes fuentes, paletas de colores o estilos de imagen es pan comido, y no tendrás que preocuparte por romper nada ni por tener que restaurar la plantilla.
Te recomendamos ajustar estos estilos para darle tu toque personal a la plantilla:
- Tipografías
- Colores
- Diseño de botones
- Iconos
- Imágenes
Con solo cambiar estos detalles, tendrás un sitio web único que no parecerá una simple copia de la plantilla original.
Aplica estilos globales en Webflow
Cuando ya tengas el texto definitivo, los estilos, las imágenes, los iconos y los colores en Figma, y estés contento con el resultado, es hora de ponerse manos a la obra en Webflow.
Una de las cosas que hace que Webflow destaque sobre el resto es que TODAS sus plantillas incluyen guías de estilo globales. Vamos a enseñarte el ejemplo de Flow Starter, que viene integrado en todas nuestras plantillas.
- Cambia la fuente del cuerpo de texto
- Cambia la fuente de todos los títulos
- Dale estilo al texto enriquecido
- Cambia la fuente de todos los párrafos
- Cambia el estilo y la fuente de todas las listas
- Cambia el estilo y la fuente de todos los enlaces
- Aplica los nuevos colores globales
- Actualiza los estilos de los botones
Puedes encontrar la mayoría de los tutoriales sobre estos elementos en la Webflow University.
Crea todas las páginas, aplica el texto, las imágenes y los iconos
Ya casi terminamos. Después de crear los estilos globales, la plantilla debería lucir personalizada.
Ahora es momento de replicar todo lo que tienes en Figma, insertar el texto adecuado en todas las páginas y componentes, y añadir las imágenes e iconos en el Diseñador de Webflow.
Cambia los títulos SEO, las descripciones, las imágenes OG, los textos alternativos y el favicon
Al ofrecer soporte a más de mil clientes de nuestras plantillas, hemos notado que la mayoría olvida este paso crucial para finalizar su sitio web.
Para que esta plantilla sea totalmente tuya, tendrás que reemplazar el título SEO, la descripción y la imagen OG predeterminados. Esto es fundamental, ya que no querrás compartir tu sitio y que la gente vea algo que indique que es una plantilla.
Recomendamos usar un patrón sencillo de “Nombre de página — Nombre de la empresa” para el título de la página y mantener las descripciones SEO entre 50 y 160 caracteres.
Otras cosas a tener en cuenta incluyen la imagen OG, que debe ser exactamente de 1200x630 píxeles; el favicon, que debe tener una relación de aspecto 2:2; y escribir textos alternativos adecuados para todas las imágenes que hayas subido. Puedes encontrar un tutorial muy bueno aquí.
¡Publica tu sitio!
Tu sitio ya está listo para recibir visitas. Dependiendo del tamaño del sitio y de tu habilidad, todo el proceso puede llevar desde un día hasta un par de semanas. Una cosa es segura: tu proyecto no se alargará durante seis meses o más.
En resumen...
Las plantillas de Webflow son una herramienta poderosa. Una vez que comprendes los principios básicos, mejorarás tu proceso de diseño al saltarte gran parte de las etapas de planificación, manteniendo al mismo tiempo un control creativo total. Esperamos que nuestra breve introducción a las plantillas y cómo las usamos te haya inspirado a crear un nuevo sitio con una plantilla de Webflow.
¿Quién es Flow Ninja?
Con más de 50 clientes satisfechos y más de 1000 usuarios de nuestras plantillas, hemos trabajado con una gran variedad de empresas, desde pequeñas firmas hasta grandes corporaciones. Los miembros de nuestro equipo siempre están listos para una nueva aventura, usando las herramientas de Webflow como nuestra arma preferida.
Si tienes alguna pregunta, no dudes en enviarnos un ticket de soporte. Durante el próximo mes, lo haremos gratuito para todos, no solo para quienes compraron nuestras plantillas.
Si quieres que te ayudemos con una construcción totalmente personalizada o crear un sitio desde cero, no dudes en ponerte en contacto con nosotros aquí.
