Parte 1: Sentando las bases con una guía de estilo y estructuras de Colección

Los sitios web de las agencias de diseño son lo más. Muestran la cúspide del talento creativo y vanguardista.

A los visitantes se les vende la idea de que contratar a dicha agencia hará que su producto estrella vuele de las estanterías. También sienten que con solo rozar el dobladillo de la túnica colectiva de la agencia, el cliente se llenará de un potencial y una visión de futuro tan desbordantes, que hasta el inversor de capital riesgo más astuto y veterano temblaría en sus zapatillas.

Evocan una verdadera onomatopeya de emociones. ¡Guau! ¡Zas! ¡Pum! ¡Bang! ¡Catapum!

¡Parallax! ¡Ohhhhh!

¡Paletas de colores minimalistas! ¡Ahhhhh!

Peeeeeeeeeeero.

Eso… suena muy caro. Por no hablar de lo arduo que es. ¿Quieres que la presencia web de tu agencia destaque en un iPhone? Pues, marinero, probablemente te convenga más usar una vieja y confiable plantilla de WordPress. Nadie tiene tiempo para todas esas tonterías hechas a medida. Al fin y al cabo, tienes cosas importantes que hacer. ¡Ni hablar!

¡Pero espera! ¡Puedes diseñarlo y construirlo tú mismo! Sí, tú, ese diseñador que no sabe programar. ¡Puedes hacerlo! Con Webflow.

¡Webflow, te lo digo yo!

Vale, dejando a un lado toda la grandilocuencia y las presentaciones exageradas, realmente puedes construir un sitio de agencia fantástico, de principio a fin, con Webflow. Esto no es un editor WYSIWYG. No es Dreamweaver ni Flash. No es una herramienta de diseño a medio cocer que vomita código descuidado. Tampoco es una herramienta de código que finge ser de diseño, pero que te obliga a aprender un lenguaje de programación complicadísimo. Es una herramienta que expone todos los atributos CSS de forma visual para que puedas crear sitios limpios, concisos y asombrosos.

Si sabes diseñar sitios web, deja de delegar el desarrollo a otros que los construyen de forma distinta a como tú querías. Y si sabes desarrollar sitios web, deja de perder el tiempo con frameworks poco fiables o tiempos de aprendizaje lentos. Usa una herramienta que crea código tan bien como si hubieras escrito cada etiqueta a mano con todo el cariño. ¡Webflow!

La siguiente serie de cuatro artículos es una guía práctica para lograrlo. Te daré un vistazo a mi propio proceso, perfeccionado durante los últimos tres años diseñando sitios web, productos y prototipos con Webflow.

Te daré instrucciones paso a paso sobre cómo poner tu sitio en marcha, incluyendo cómo:

• Crear tus propios elementos del CMS, configurar los datos necesarios para cada tipo de contenido y entender cómo funcionan las API
• Pensar en tu sitio en términos de sistemas de diseño, para tener los bloques necesarios para implementar contenido nuevo rápidamente manteniendo la coherencia.
• Usar tecnologías web modernas como flexbox para que tu sitio sea más escalable y se adapte a cualquier tamaño de dispositivo
• Crear interacciones geniales para usuarios de escritorio y móviles, teniendo siempre en cuenta cómo interactúan tus usuarios
• Integrar tu nuevo sistema CMS con API externas para que puedas extraer contenido de toda la web con total facilidad
• Abre tu sitio a colaboradores internos y externos para que mantengan tu comunidad viva mucho después de que el sitio esté en línea
• Usa Webflow para crear algo increíble de lo que te sientas orgulloso

¿Te interesa? Genial. Vamos a ello.

Paso 1: Empieza con una base

“Diseñé” este sitio Bespke en Webflow.

Digo “diseñé” porque no hice toda la parte del diseño dentro de Webflow, ni tampoco lo hice yo solo. Empecé con esta plantilla Mirror de UI8 para facilitar el arranque. Es más bien un tema para portafolios, pero me encantan el texto grande y la interfaz oscura. Creo que tiene un toque premium genial, así que la elegí como punto de partida.

Puede que empieces desde cero como diseñador, o que recibas especificaciones como los archivos de la plantilla Mirror si eres el desarrollador. He descubierto que es mejor no empezar con un lienzo en blanco en Webflow: lograr la coherencia lleva demasiado tiempo. Recomiendo empezar con un bloc de notas y luego pasar a Photoshop, Sketch o, en mi caso, Figma.

He escrito sobre Figma, pero la razón principal por la que lo usé aquí fue por las funciones de entrega al desarrollador. Pude obtener medidas exactas en píxeles de los archivos de Sketch que importé a Figma. Y como sabía que trabajaría con algunos vectores, tenía sentido mantener todo en un mismo lugar.

Sea cual sea la herramienta que elijas, lo más importante es tener un diseño base sobre el cual trabajar. Casi de inmediato empecé a hacer mis propios cambios al diseño, pero trabajar desde una base redujo mi tiempo a la mitad. Para mí, Webflow es una herramienta fantástica para iterar, pero puede ser demasiado rígida para experimentar de verdad. Por eso me gusta desarrollar mis ideas antes de refinarlas en Webflow. ¡Pero cada quien tiene su propia experiencia!

Paso 2. Define tus estilos predeterminados

Todos los sitios web incluyen algunos elementos comunes. Webflow aplica estilos muy básicos a todos ellos, pero para tus proyectos, empezarás con el pie derecho si los reajustas para que se adapten a tus necesidades.

Aquí tienes una lista no exhaustiva de todos los elementos en Webflow con una clase predeterminada que se puede sobrescribir:

• Cuerpo (Body)
• Enlaces
• Encabezados
• Párrafos
• Citas
• Elementos de lista

Hay otros, pero estos son los más importantes.

Empecemos con el elemento body. No aparece en la barra lateral de añadir elementos porque ya está presente en todas las páginas; funciona como el contenedor principal de todo tu sitio. Configurar los estilos predeterminados del elemento body te ayuda a ahorrar mucho tiempo. Te contaré más sobre eso en un momento.

Primero, selecciona el elemento body y luego selecciona la clase Body (All Pages) de esta manera:

Ahora, te explico por qué hacemos esto. Si defines el estilo de tu fuente en este nivel, esos estilos se aplicarán al resto de tu sitio. Supongamos que quieres que tu sitio use la fuente Lato y que sea de color negro. Si no lo defines aquí, tendrás que hacerlo de forma distinta en cada instancia de estilo de fuente.

Además, si más adelante decides cambiar a Helvetica, solo tendrás que hacerlo en un lugar. ¡Es una maravilla!

Otra cosa: el tamaño que le des a tu fuente a nivel de body determinará el valor de la unidad em. Básicamente, si configuras tu fuente a 12px, entonces para el resto del documento, 1em = 12px. La unidad em es súper útil si planeas trabajar con tipografía responsiva. Aunque los resultados pueden variar, así que asegúrate de leer sobre el tema si quieres probarlo y dejar a todos con la boca abierta.

Así es como configuré el sitio de Bespke:

Sabía que quería que la fuente predeterminada fuera blanca y que Lato fuera mi unidad base. Aquí también es donde configuré un fondo negro para todo el sitio.

Una vez que tengas definidos los estilos del body, trabaja en los otros elementos que mencioné en la lista anterior. Cuando termines, podrías tener algo así:

Me gusta llamar a esto una página de guía de estilo. Después de configurarla inicialmente, solo hago cambios si me doy cuenta de que un estilo base no es del todo correcto. Incluso podrías profundizar más y empezar a crear una biblioteca de patrones de átomos y componentes.

La idea aquí es hacerla tan completa como necesites. Para el sitio de Bespke, sabía que no lo ampliaría con el tiempo, que tenía una paleta de colores muy limitada y que no compartiría la plantilla con un equipo. Así que no me molesté en escribir sobre el qué y el cómo de todo; no lo necesitaba.

Pero si estuviera trabajando con un equipo más grande, la documentación sería imprescindible para esta guía de estilo.

Ah, hablando de paletas de colores: asegúrate de que las que definas aquí sean globales para que se puedan cambiar fácilmente. A esto me refiero: