Me encanta la capacidad de Webflow para transformar mis diseños web en algo especial, sin necesidad de programar. Pero antes de que ocurra esa transformación, la mayoría de los diseñadores trabajamos en nuestra herramienta de diseño preferida. La mía es Adobe XD. Vamos a ver cómo paso de capas a divs.
¿Prefieres verlo en video?
Te cubrimos las espaldas con una versión en vídeo completa de este artículo, a cargo de Martin Perhiniak, instructor certificado de diseño de Adobe y presentador del canal de YouTube Yes I'm a Designer:
Diseñar con experiencia
Antes de empezar a diseñar el sitio web de la próxima empresa tecnológica unicornio, me gusta pensar en los componentes, las páginas y los flujos que necesitaré. Cada paso se traslada fácilmente de XD a Webflow.
Divido mi proceso de diseño web en cinco secciones:
1. Sistema
Aquí es donde creo mi sistema de diseño, todo en una misma mesa de trabajo, incluyendo elementos de marca como:
- Colores
- Logotipo
- Tipografía
También incluyo elementos más centrados en la web:
- CTA (botones y/o enlaces de texto)
- Componentes (tarjetas, secciones hero, formularios, etc.)
- Símbolos (elementos recurrentes como la navegación principal y el pie de página)
Esto me permite pensar en los cimientos sobre los que quiero construir mi sitio. Una vez diseñados, los guardo en la interfaz de activos de XD.
El panel de activos es tu mejor aliado
Cuando empiezo cualquier proyecto, creo un moodboard como base para mi sistema de diseño. Añado mi logotipo, colores, iconos y encabezados, del nivel uno al seis.
A continuación, selecciona un color o estilo de carácter (o una mesa de trabajo llena de ellos), abre el panel de activos y haz clic en el signo más junto al tipo de activo correspondiente. Esto añadirá todos tus colores y/o estilos de texto al panel de activos, haciendo que sea mucho más sencillo aplicarlos a todo tu diseño.
¿No me crees? Contempla el GIF:
En Webflow, sigo los mismos pasos. Añado mi familia tipográfica y mis colores globales, y subo las imágenes al panel de activos antes de hacer cualquier otra cosa. Es una combinación perfecta. Aquí tienes cómo seleccionar y añadir fuentes de Google.
Una vez añadidos, configuraré mis h1-h6, el cuerpo y el texto de los párrafos.
Así es como creo colores globales:
- Crea un div (no le asignes un nombre de clase)
- Asígnale un color de fondo
- Guarda el color como una muestra global
Repite esto con cada color de la marca. Te sugiero subirlos todos de una vez antes de empezar el proyecto. Adobe tiene un desglose muy útil sobre cómo exportar recursos de diseño o mesas de trabajo.
2. Mapa del sitio
Aquí creo un mapa del sitio que muestra todas las páginas necesarias y las relaciones jerárquicas entre ellas. Esto me ayuda a visualizar cuántas mesas de trabajo necesitaré en las tres últimas secciones.
3. Wireframe
El wireframing me ayuda a organizar el contenido y definir la experiencia de usuario del sitio mientras sigo trabajando en XD. Aquí creo cada contenedor, fila y div, y luego los agrupo para facilitar la transición a Webflow.
En otras palabras: intento pensar siempre en términos del modelo de caja de la web para que la relación entre el prototipo y el sitio final sea lo más directa posible.
Diseño de la mesa de trabajo
A continuación, configuro el diseño en mis mesas de trabajo. Utilizo los ajustes necesarios para cada proyecto web, pero mi configuración predeterminada es de 1200px con 15 columnas. Para hacerlo, selecciona la mesa de trabajo y elige el diseño que necesites en el panel de propiedades.
Replicar esto en Webflow es muy sencillo. Echa un vistazo a esta plantilla de Webflow; clonarla es una forma genial de aprender a configurar tu sitio web.
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
4. Alta fidelidad
Aquí es donde empiezo a aplicar los elementos de mi sistema al wireframe, dándole vida al esqueleto con elementos visuales de nivel profesional.
Ahora, voy a hacer un poco de magia. No, no te voy a volver invisible; ya he visto lo que eso le hace a la gente.
525.600 minutos al año. ¿Cómo mides, cómo mides un año?
Con la cuadrícula de repetición. Te ahorrará todo ese tiempo.
El diseño consiste en repetir. Por eso es tan genial tomar algo como una cuadrícula de capas de imágenes y simplemente duplicarla, una y otra y otra vez. Ah, y otra más. Lo cual, en realidad, no es tan genial.
Con la cuadrícula de repetición, todo eso es historia. Bienvenido al futuro del diseño. Este flujo de trabajo ha salvado mi matrimonio (es verdad) porque, como ya no tengo que repetir elementos una y otra vez, tengo tiempo para salir a citas. El GIF de arriba muestra cómo lo hago.
¿Lo mejor de todo? Esto te ayuda a modelar el tipo de diseños que crearás en Webflow usando Listas de Colección.
5. Prototipado
En esta etapa final, empiezo a usar las herramientas de prototipado de XD para enlazar páginas, añadir transiciones y estados, y pulir la vista previa del diseño antes de darle vida en Webflow. Este último paso es opcional, pero ayuda a mantener esa relación directa entre los bocetos y el sitio que mencioné antes, y es genial para ilustrar ideas a los clientes si hace falta.
De vuelta a Webflow
La etapa final de este proceso es, por supuesto, trasladar todo mi trabajo de XD a Webflow. Seguir los pasos que he detallado aquí te ayudará a preparar el terreno para el éxito —y para una fase de desarrollo rápida— en Webflow.
Y con esto, me despido. Ve y construye una mejor experiencia web. Yo necesito una siesta. Esto de escribir blogs se lo dejo a los escritores.
