Empezar con el diseño web no tiene por qué ser un quebradero de cabeza. Webflow hace que crear un diseño visualmente atractivo sea pan comido, incluso si no tienes ni idea de programación. Te guiaremos paso a paso para que tengas una web impecable en un abrir y cerrar de ojos.
Empezar con el diseño web no tiene por qué ser una experiencia abrumadora. Webflow hace que crear un diseño visualmente atractivo sea pan comido, incluso si no sabes programar.
Te guiaremos paso a paso para que crees una web impecable en solo 3 horas o menos.
Únete al club
Con nuestra cuenta Starter gratuita, obtienes un montón de ventajas. Elige una de nuestras plantillas gratuitas totalmente personalizables y tendrás a tu alcance una gran variedad de fuentes geniales, interacciones dinámicas y un sistema de gestión de contenidos sencillo pero potente.
También ofrecemos facturación a clientes, para que puedas cobrarles automáticamente por el alojamiento y el mantenimiento, e incluso añadir un pequeño margen de beneficio. Tanto si eres freelance como si trabajas en una agencia, queremos darte las herramientas para que el diseño web sea más rápido, fácil y divertido.
Anímate y regístrate para obtener una cuenta gratuita y te enseñaremos lo fácil que es diseñar una página web usando nuestra interfaz.
Empieza por el contenido
Necesitas saber qué contenido irá en cada página y el orden en que se organizará. Esto hará que el diseño de tu web sea más eficiente y evitará tener que reestructurar todo más adelante. Si los textos no están terminados, al menos ten claro cuál será el punto principal de cada sección y escribe unas cuantas frases para desarrollarlo. Y lo más importante: asegúrate de tener una idea realista de cuánto contenido escrito y gráfico necesitará cada sección. No hay nada más frustrante que tener que reestructurar una página porque el contenido y el diseño no encajan.
Haz el SEO desde el principio
Si vas a crear una web desde cero, esta es la oportunidad perfecta para clavar el SEO. Terminarás con una web flamante, repleta de las palabras y frases que harán que aparezca ante las personas que necesitan verla.
Sí, hay mucha gente a la que puedes pagar para que optimice tu contenido o te prepare una lista de palabras clave y frases para incluir en tus textos. Estos servicios pueden ser caros. Además, pueden dar lugar a términos y frases que no siempre vienen al caso o que quedan forzados al intentar encajarlos en el contenido.
Si conoces a tu público y haces tu propia investigación, puedes optimizar el contenido tú mismo. Escribir con un tono que tu audiencia entienda no solo ayudará al SEO, sino que hará que tu texto sea más relevante. Procura sonar como una persona, no como un autómata que suelta palabras clave.
Así que investiga. ¿Qué palabras y frases usa la gente para buscar temas relacionados con tu sitio? ¿Qué preguntas escribirían en un buscador para encontrar tu web como respuesta? Echar un vistazo a la competencia o a sitios web similares es una buena forma de empezar a familiarizarse con el vocabulario de un tema o interés concreto.
Ten en cuenta que el lenguaje de tu audiencia será muy específico según su estilo de vida, sus perspectivas y sus experiencias. Los surfistas hablan de surf de forma distinta a la gente de a pie, y si no te tomas el tiempo de entender cómo hablan, tu audiencia se dará cuenta.
Tener estas palabras clave y frases bajo la manga te ayudará a escribir meta títulos, meta descripciones y los encabezados H1 y H2 que dirán a los rastreadores web de qué trata tu sitio y ayudarán a mejorar su posicionamiento.
La optimización SEO desde el principio no solo mejorará tu contenido, sino que también dará forma a su organización. Añadir el SEO a posteriori puede cambiar el flujo de información, lo que podría alterar drásticamente el diseño en el que tanto has trabajado.
Echa un vistazo a “SEO y Webflow: la guía esencial” para profundizar en el tema.
Por dónde empezar: ¿plantilla o lienzo en blanco?
Aunque no tengas mucha experiencia en diseño web, podrás crear un sitio sólido en solo unas horas. Si necesitas un empujoncito inicial, las plantillas son tu mejor opción. Te ofrecen una estructura básica sobre la cual construir tu sitio. Además, Webflow facilita la personalización de cada elemento a medida que diseñas.
Las plantillas también son una forma fantástica de aprender cómo funciona el diseño web. Ver la estructura y cómo encajan y funcionan los distintos elementos te dará una comprensión más profunda, no solo de tu sitio web, sino de las mejores prácticas de diseño en general.
Incluso puedes usar una plantilla diseñada para un propósito distinto al que buscas. Puedes desmontarla y moldearla para que se ajuste a tus propias necesidades de diseño.
Elegir una plantilla para arrancar el proceso de diseño
Para este proyecto, vamos a diseñar el sitio web de un restaurante. Webflow ofrece una gran variedad de plantillas gratuitas, así como un montón de plantillas premium. Al echar un vistazo a las gratuitas, no vi ninguna hecha específicamente para restaurantes. Pero no te preocupes.
¿Qué es esta genial plantilla de portafolio llamada Versus entre las gratuitas? Parece una plantilla básica y estupenda que incluye CMS.
Pero es una plantilla de portafolio pensada para un diseñador.
Aunque, pensándolo bien, ¿no es un chef un poco como un diseñador? En lugar de organizar píxeles, combina ingredientes y compone platos. Podemos usar esta plantilla de portafolio para lucir las creaciones culinarias de un restaurante.
Una vez que hayas iniciado sesión en tu cuenta, ve a tu panel de control y haz clic en Crear nuevo sitio web. Filtra para mostrar las plantillas gratuitas y selecciona Versus. Luego, haz clic en el botón azul Crear sitio web en la parte superior derecha de la página.
¡Y ya tienes vía libre!
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
Familiarizándote con la interfaz de Webflow
Así que ya tenemos nuestra plantilla lista para empezar.
Antes de meternos de lleno en el diseño, vamos a familiarizarnos con un par de funciones principales de la interfaz de Webflow.
Haz clic en el símbolo + en la parte superior izquierda de la pantalla para abrir el panel Añadir. Contiene todos los bloques de construcción de tu sitio, desde elementos estructurales como secciones hasta elementos de contenido como encabezados. Siéntete libre de bajar y echar un vistazo a todos los elementos con los que puedes trabajar.
Mientras nos familiarizamos con la interfaz, veamos cómo está organizada la página actual. Mueve el cursor a la parte superior derecha de la pantalla y abre la pestaña Navegador. Ya veremos las otras pestañas más adelante, pero primero es importante entender cómo estructura las cosas Webflow.
Al abrir el Navegador, vemos todos los elementos que componen el sitio web y cómo están organizados.
En la parte superior está el Body, un elemento predeterminado en todos los sitios de Webflow. Es súper útil para añadir estilos que aparecerán en todo tu sitio, como la fuente predeterminada. Debajo verás dos elementos estructurales —Hero y Section— y luego el Footer.
Ese cubo verde junto al elemento Footer significa que es un Símbolo: un elemento de diseño que puedes añadir a tu sitio con solo un clic. Cada instancia de ese Símbolo está vinculada, por lo que cualquier cambio que hagas en una se actualizará automáticamente en todas las demás. Súper práctico.
Añadir contenido a la plantilla
Sabemos que tienes un montón de contenido increíble listo para usar, así que empecemos por lo primero que verán los visitantes: la sección hero.
Vamos a deshacernos de la imagen hero y a empezar con la nuestra. Porque toda gran historia empieza con un héroe, ¿verdad?
Haz clic en la sección hero (ya sea en el lienzo o en el Navegador) para seleccionarla. Verás un borde azul a su alrededor. También verás en la parte inferior izquierda de la pantalla una guía que te indica dónde estás en la página. Haz clic en el icono del pincel en la parte superior derecha para abrir la pestaña Estilo, donde puedes controlar el diseño y la apariencia de los objetos en tu proyecto.
Vamos a cambiar esa imagen de fondo por algo un poco más apetitoso para nuestro sitio de restaurante.
Desplázate hacia abajo hasta la sección Fondo y haz doble clic en fe4a5cbf.jpg en la sección Imagen y degradado. Luego puedes subir una imagen desde tu ordenador o elegir una del Gestor de activos (la pestaña del extremo derecho). Por ahora, el Gestor de activos está lleno de las fotos del diseñador de la plantilla, así que subamos una nuestra.
En este caso, vamos a subir una imagen de una pizza. Asegúrate de que la opción HiDPI esté marcada si usas fotos de alta resolución para garantizar que se vean correctamente.
Una vez que la imagen se suba, verás que aparece en tu diseño. Ahora mismo la imagen es demasiado grande. Y ese degradado no va a quedar bien con la imagen de la pizza. Vamos a arreglarlo.
Para ajustar la imagen, cambia el ancho a Cubrir (Cover) en la sección Tamaño.
Queremos mantener un ligero degradado, porque sin él, nuestra imagen es demasiado brillante y distrae. Vamos a cambiar los puntos de control de nuestro degradado arrastrando los manejadores en el espectro que aparece en la parte inferior de la interfaz de degradados.
¡Muy bien, esto va tomando forma!
Actualizar el contenido de texto
Bien, ahora tenemos que empezar a añadir nuestro propio texto. Empecemos por el H1.
Haz clic en el H1 “We build beautiful web and mobile apps.” y podrás escribir directamente en el cuadro. Yo elegí: “De la granja a la mesa, para ti”.
Para mejorar el SEO y presentar mejor nuestro restaurante, añadamos otra sección de texto debajo del H1. Para ello, simplemente inserta un nuevo bloque div bajo el encabezado principal para contener el texto. (Aunque sientas la tentación de arrastrar un elemento de párrafo, colocar el contenido dentro de un elemento estructural te da mucho más control).
Consejo profesional para colocar elementos
Mientras colocas elementos, es buena idea tener abierto el Navegador para asegurarte de que el bloque div quede exactamente donde quieres.
Ahora abre de nuevo el panel Añadir. Toma el bloque div y arrástralo entre el H1 y el botón. Verás aparecer una línea azul entre ambos elementos. También notarás en el Navegador que el nuevo bloque div se encuentra ahora entre el encabezado principal y el botón.
Ya podemos seleccionar este nuevo bloque div. Haz doble clic y escribe el texto directamente o pégalo desde tu editor.
Ya tenemos el texto en su lugar, pero se ve un poco pequeño, así que vamos a crear una clase nueva para darle estilo.
Creación de nuevos estilos
Vamos a crear un estilo para este texto seleccionado, así que haz clic sobre él.
Ahora ve a la pestaña Estilo y haz clic en el signo + para añadir uno nuevo. Vamos a llamar a este estilo Hero Content.
Vamos a aumentar el tamaño de la fuente de 14px a 19px. Al hacerlo, las letras se ven muy juntas. Abre las opciones avanzadas de tipografía y dales un poco más de aire aumentando la altura de línea a 23 píxeles.
Mucho mejor así.
Diseño adaptable hecho fácil
Webflow te permite previsualizar tu diseño para ver cómo se verá en distintos dispositivos. En la parte superior de la pantalla, verás opciones para previsualizar tu sitio en cuatro vistas: escritorio, tableta, móvil horizontal y móvil vertical.
Si algo no se ve bien en alguna de estas vistas previas, puedes ajustar el estilo de ese elemento para esa resolución y para pantallas más pequeñas. (Asegúrate de corregir cualquier problema en la resolución más grande donde aparezca; es posible que eso solucione el error en todos los tamaños).
Supongamos que queremos que el H1 sea más grande en tabletas. Lo previsualizaríamos en modo tableta y ajustaríamos la clase (o añadiríamos una clase combinada específica para el dispositivo). Webflow nos da el poder de adaptar nuestro diseño al dispositivo que sea.
Añadiendo nuestra propia llamada a la acción
No necesitamos ese Obtener presupuesto botón, así que vamos a reemplazarlo por una llamada a la acción de Visítanos, con la dirección y el número de teléfono del restaurante debajo.
Arrastra un encabezado desde los elementos y conviértelo en un H2. Además, vamos a añadir otra sección de texto. Crearemos una nueva clase para ella, llamada "Detalles de ubicación", haciendo que la fuente sea un poco más pequeña para darle variedad a la tipografía. Como se trata de un negocio físico, es fundamental que esta información tan importante esté bien visible para cualquiera que visite el sitio web.
¡Ahora vamos a sumergirnos en la parte del CMS del diseño!
Crear contenido dinámico es sencillo con nuestro sistema de gestión de contenidos (CMS)
Antes de hacer nada con el CMS, vamos a modificar la barra de navegación superior.
Necesitamos cambiar la palabra "PORTFOLIO" por algo relacionado con las entradas del CMS que vamos a crear. Cambiemos PORTFOLIO por PLATOS ESTRELLA en los enlaces de navegación del encabezado.
Haz clic sobre el enlace hasta que veas el enlace de navegación en el Navegador. Luego, puedes escribir directamente en el cuadro para cambiar el texto del enlace. Como este botón está en el símbolo de navegación, esta actualización aparecerá en cualquier otro lugar donde se utilice el símbolo.
También tenemos que deshacernos de "Latest Work". Vamos a cambiarlo por "Platos destacados" haciendo doble clic en la sección y escribiendo directamente en el cuadro.
Creación de nuevas entradas en el CMS
Una de las funciones más potentes de Webflow es su CMS visual. Te permite crear una estructura personalizada para tu contenido dinámico, así como un diseño que se aplicará a cada elemento, ya sea una entrada de blog, un proyecto de portafolio o un plato estrella. Hay varias plantillas para ayudarte a empezar con lo que necesites crear.
Ahora tenemos que convertir estas entradas de portafolio en los platos que queremos destacar.
Primero, vamos a crear nuevas categorías para toda la comida que queremos resaltar. Puedes usar categorías para organizar mejor tu contenido, tanto para tus colaboradores como para los visitantes del sitio.
Dirígete a Colecciones, haz clic en ella y añade las categorías para todos estos platos. Yo voy a añadir las categorías de platos principales, postres y desayunos. Para tu propio diseño, piensa qué tipo de categorización tiene más sentido.
Aquí he creado categorías más amplias para que todos los platos relacionados sean fáciles de encontrar. Si hubiera querido ser más específico, podría haber creado categorías para hamburguesas, pizzas y pasteles, pero por simplicidad, he optado por algo general.
No vamos a hacer cambios en la plantilla de entradas para este tutorial. Pero si quieres, puedes hacer cambios en la configuración de la colección. Solo tienes que hacer clic en el icono del engranaje junto a Proyectos para abrir este panel. Así podrás estructurar estas entradas de la forma que mejor te funcione.
Ve a Proyectos y haz clic en + Nuevo en la esquina superior derecha del panel. Luego, añade el nombre del plato, en este caso espaguetis, sube una imagen y elige la categoría correspondiente.
Puedes repetir este proceso para cada entrada, añadiendo un plato diferente para cada publicación. ¡Solo no olvides eliminar todas las entradas del CMS que venían incluidas en la plantilla de portafolio Versus original!
Nota: para mantener la rapidez en este tutorial, usamos la Colección de Proyectos de la plantilla para nuestros platos. Lo ideal sería crear una nueva Colección y actualizar los enlaces en la página de inicio del sitio para usar la nueva. (A menos que tu chef sea tan experimental que llame a sus platos "proyectos").
Toques finales
Como este es un sitio web básico, no hay muchas páginas diferentes que actualizar. Para hacer cambios en las otras páginas, solo ve a Páginas en la barra de herramientas izquierda. Selecciona la página y luego actualiza el contenido y las imágenes como te mostramos antes.
En la página Acerca de, cambié el texto y añadí una imagen de fondo diferente, asegurándome de configurarla como "Cover" para que encaje bien en el espacio. Esta plantilla también tiene un degradado sobre la imagen. Como se ve bien, lo dejaremos así.
También cambiaremos la página de Contacto con una nueva llamada a la acción, animando a la gente a preguntar por nuestros servicios de catering.
Lo único que queda es deshacerse del logotipo de Versus en la parte superior derecha de nuestra página y reemplazarlo por el nuestro. Una vez que hayamos revisado todo y estemos satisfechos, podemos publicar el sitio web.
Por último, solo tenemos que elegir un plan de hosting, conectarlo a nuestro dominio personalizado y prepararnos para impresionar al mundo. Y si estás creando este sitio para un cliente, querrás configurar Facturación de Cliente para transferirle los pagos del hosting.
Mejorando como diseñador web, proyecto a proyecto
Te hemos guiado sobre cómo transformar una plantilla de portafolio gratuita en una para un restaurante. No temas tomar una plantilla y ajustarla a tu gusto. Hacemos que sea fácil experimentar y probar cosas diferentes en tus diseños.
Con cada proyecto, mejorarás. Nosotros solo te damos las herramientas y la interfaz intuitiva que necesitas para que te centres en lo importante: tu creatividad.
