En la segunda parte de esta serie, te mostraré cómo manejo el miedo a la página en blanco dividiendo el diseño en partes manejables. También echaremos un vistazo a cómo añadir clases reutilizables de forma estratégica en Webflow.
Parte 2: Planificación de páginas y definición de diseños
En la primera parte de esta serie, hablamos de los tres primeros pasos para crear el sitio web de tu agencia en Webflow:
- Crear tu proyecto
- Definir tus estilos predeterminados
- Definir tus colecciones
Ahora veamos los pasos cuatro y cinco:
- Planificar tus páginas
- Planificar tus clases
Paso 4: Planifica tus páginas
Los lienzos en blanco pueden intimidar. No hay duda. Hay muchas formas de empezar, pero he descubierto que usar los elementos de contenedor y sección como un esquema básico me da el impulso que necesito. Aquí tienes un vídeo rápido que demuestra cómo lo hice en el sitio de Bespke.
En esa demostración en vídeo verás cómo:
- Añado un elemento de sección para cada parte de la página de inicio
- Asigno un ID a cada elemento de sección en la pestaña de ajustes
- Añado elementos de contenedor a las secciones que sabía (o pensaba) que no ocuparían todo el ancho
Empezar con este diseño de sitio te ayuda a dividir la página en partes manejables y a pensar en los tipos de diseño de cada sección. Puedes empezar a dar estilo a los elementos si quieres, pero por ahora solo voy a añadir encabezados, columnas, colecciones y otros elementos básicos.
Aquí tienes otro vídeo de demostración rápido sobre esto. Una vez que tengas las piezas básicas en tu página, puedes empezar a definir tus clases.
El proceso de diseño web moderno
Descubre los procesos y herramientas detrás de los sitios web de alto rendimiento en este libro electrónico gratuito.
Paso 5: Planifica tus clases
Una de las partes más difíciles de Webflow es lo fácil que resulta añadir clases nuevas.
Puede sonar a locura, pero la mejor forma de hacer un sitio web genial en Webflow (o en cualquier plataforma, en realidad) es hacer que tus clases sean lo más intencionales y extensibles posible.
Sí, puedes crear una clase nueva cada vez que añadas una imagen, una fuente o un margen, pero no deberías hacerlo. Asegúrate de que las clases que crees sean reutilizables sin romper nada drásticamente. El primer sitio que construí en Webflow tuve que rehacerlo desde cero porque la cantidad de clases era inmanejable. Además, tenían nombres tan específicos que reutilizarlas era un auténtico dolor de cabeza.
O sea, mira solo esta sección:
Ninguna era críptica a propósito, pero cuantos más estilos específicos añades, más fácil es que la situación se te escape de las manos. Antes de que te des cuenta, tendrás un caos total.
Para evitar esto, piensa estratégicamente en cómo posicionar tus elementos para que tus clases no tengan que ser tan específicas. Por ejemplo, ¿deberían tus encabezados estar centrados, o debería ser el cuerpo el que dicte la alineación del texto? ¿Cada sección debería tener su propio margen, o deberías usar una clase de sección genérica y añadir estilos adicionales para ajustar esos valores? Una buena regla es dejar que el contenedor de un elemento dicte su aspecto y ubicación, en lugar de que el elemento se encargue de ello.
Deja que los contenedores controlen el diseño y la apariencia, no los elementos por sí mismos.
Un gran ejemplo es la alineación centrada. Puedes lograrla de varias formas, especialmente si empiezas a usar flexbox en tu sitio. Sin embargo, hay una manera muy rápida y sencilla de hacerlo, y que además es reutilizable en todo el sitio: crea una clase que solo haga una cosa, que es centrar un texto o un elemento.
Aquí tienes un ejemplo de cómo uso ese elemento con otras clases en el sitio:
Aquí utilicé 3 clases:
- Sección
- Margen-medio
- Centrado
Ninguna por sí sola es gran cosa, pero la combinación de las tres logra algo mucho mejor. Lo mejor es que, al ser tan ligeras, puedes reutilizarlas una y otra vez, juntas o por separado, ¡y siempre funcionarán como deben!
Ya no tendrás que recordar qué clase hace qué o si una está centrada o no. Apila tus clases, modifica solo las básicas y terminarás con un sitio 1000 veces más escalable. Además, ponerles nombre será mucho más fácil.
No te pierdas la tercera parte: el poder de flexbox, las interacciones lógicas y la legibilidad
En la tercera parte de la serie Bespke, veremos cómo flexbox ahorra tiempo y te ayuda a crear mejores sitios web. También hablaremos sobre diseñar interacciones lógicas y mejorar la legibilidad con paletas invertidas.
¡Nos vemos allí!
