Si eres como la mayoría de los diseñadores, probablemente te sientas más cómodo abordando las primeras etapas del proceso de diseño en una aplicación de escritorio como Photoshop o Sketch. Esta puede ser una excelente manera de gestionar el proceso, ya que minimiza la cantidad de decisiones que debes tomar dentro de Webflow, acelerando aún más las cosas.
Pero, por desgracia, también puede significar mucho trabajo duplicado. Con eso en mente, aquí te explico cómo hago que el proceso de diseño de PSD a Webflow sea más rápido y sencillo.
¿Quieres seguir los pasos?
A lo largo de esta publicación, trabajaré en la creación de un sitio en Webflow basado en el diseño de portafolio PSD gratuito de Robert Mayer.
Paso 1: Extrae todos tus recursos de imagen de Photoshop
Solía pensar que esta era una tarea muy tediosa, pero Adobe creó una maravillosa función llamada "Generar recursos de imagen" que hace que el proceso sea mucho más rápido y sencillo.
Aquí te explico cómo generar tus recursos de imagen en Photoshop:
1. En el panel Capas, selecciona y nombra todas tus imágenes
Asegúrate de que los nombres estén listos para producción, ya que los exportarás en el siguiente paso.
2. Ve a Archivo ➞ Generar ➞ Recursos de imagen
Esto creará una carpeta que contiene todos tus recursos de imagen. Tendrán los nombres, formatos y tamaños de imagen que definiste en Photoshop.
Paso 2: Crea un nuevo proyecto de Webflow y añade tus fuentes
Una vez que hayas creado un nuevo proyecto en Webflow, ve a la pestaña Fuentes en la configuración del proyecto y añade todas las fuentes que necesites. Puedes elegir cualquier fuente de la biblioteca de Google Fonts, usar fuentes propias o conectar tu cuenta de Typekit para añadir fuentes desde allí.
Ya sea que estés subiendo fuentes o seleccionándolas desde Google Fonts o Typekit, ten cuidado de solo seleccionar los grosores que necesites en tu sitio. Cada grosor de fuente que añades a tu sitio aumenta el tamaño total del archivo y, por lo tanto, el tiempo de carga.
Paso 3: Sube tus imágenes
En el Diseñador, abre el panel Recursos y añade todas tus imágenes, ya sea arrastrándolas y soltándolas, o haciendo clic en el botón de carga (el icono de la nube con la flecha hacia arriba). De cualquier manera, puedes subir tus imágenes por lotes.
Paso 4: Crea tu guía de estilo
Crear una guía de estilo en Webflow te permite ajustar los estilos globales del sitio desde un solo lugar, así podrás actualizar tu diseño rápidamente cuando tu cliente decida que no le gusta la fuente de los titulares o quiera un tono de azul diferente.
Puedes crear la guía de estilo como una página propia del sitio o convertirla en un Símbolo para añadirla y eliminarla fácilmente de las páginas mientras trabajas.
Al crear una guía de estilo, suelo incluir:
- Encabezados de H1 a H6. Asegúrate de dar estilo a tus selectores globales (es decir, "Todos los encabezados H1") para cada nivel.
- Párrafo. Es posible que necesites estilos de párrafo distintos para textos largos y otros contenidos.
- Botón. ¡No olvides dar estilo a sus diferentes estados!
- Enlace de texto. Lo mismo para sus estados.
- Colores. Asegúrate de guardar todos tus colores personalizados como muestras globales.
Consejo pro: Convierte tu guía de estilo en un Símbolo
Convierte toda tu sección de guía de estilo en un Símbolo para que sea fácil añadirla o eliminarla de cualquier página. Esto es muy útil, ya que te permite tener la guía de estilo a mano en la página en la que trabajas como referencia y borrarla fácilmente cuando termines.
También puedes añadir variantes claras y oscuras de elementos de texto y logotipos. Muy práctico si los fondos de las páginas tienen colores distintos.
Paso 5: Crea tu paleta de colores de marca
Mencionamos añadir colores a la guía de estilo en el paso anterior, pero merece un poco más de atención.
Añade un bloque div a tu página y asígnale un color de fondo de tu diseño de Photoshop. Usa el cuentagotas para seleccionar el color en tu PSD y pega el código hexadecimal directamente en Webflow para asegurarte de obtener el tono exacto. Luego, guarda el color como una muestra global y ponle un nombre adecuado.
Repite el proceso hasta tener toda tu paleta de colores definida. Con cada muestra guardada globalmente, podrás aplicar los colores correctos en todo tu sitio de forma rápida y sencilla, e incluso actualizarlos más tarde si es necesario.
Paso 6: Construye tus elementos globales
Elementos como la navegación del sitio, el pie de página, el formulario de contacto y otros, a menudo no cambian de una página a otra. Al crear estos elementos globales, asegúrate de convertir cada uno en un Símbolo.
Los Símbolos te permiten convertir cualquier elemento recurrente en un componente reutilizable y mantener sincronizadas todas las instancias de ese Símbolo en todo tu sitio a medida que realizas actualizaciones.
De esta manera, puedes añadir rápidamente elementos globales a cada página que los necesite, acelerando enormemente el proceso de diseño.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
Paso 7: Prepárate para el éxito en el diseño responsivo
Cuando trabajas desde un PSD, es muy fácil quedarse atrapado en una mentalidad basada en píxeles. Pero para simplificar el proceso de diseño responsivo, debes pensar en unidades relativas, no fijas — y para gran parte de tu sitio, eso significa pensar en porcentajes.
Hacer esto te ahorrará un montón de trabajo a medida que ajustes tu diseño para dispositivos más pequeños.
Aquí tienes algunos pasos que sigo para asegurar que mi diseño sea fácilmente adaptable:
- Configura tus Secciones al 100% de ancho, posición relativa y con un clear: left. Esto garantiza que los elementos secundarios permanezcan dentro del elemento principal y que la sección no colapse en ningún momento. También lo hago por costumbre, ya que Internet Explorer requiere instrucciones de estilo bastante explícitas.
- Añade overflow: hidden a cualquier elemento que se extienda más allá del ancho de la página para evitar el desplazamiento horizontal
- Si añades un ancho máximo (max-width) a un elemento, asegúrate de que su ancho esté configurado como un porcentaje
- Usa ems para el tamaño de fuente, al menos para las alturas de línea, e idealmente también para el tamaño
- Termina tu diseño de escritorio antes de dar estilo a tus puntos de interrupción móviles ya que los estilos se heredan en cascada en Webflow
- Si trabajas desde un PSD con múltiples puntos de interrupción prediseñados, asegúrate de comparar los distintos diseños antes de empezar para ver si necesitarás tener en cuenta cambios radicales
Paso 8: Usa Flexbox con responsabilidad
Flexbox es una herramienta de diseño potente que puede acelerar drásticamente tu flujo de trabajo, especialmente cuando intentas centrar contenido verticalmente, distribuir elementos de manera uniforme o cambiar las posiciones de los elementos en diferentes puntos de interrupción.
Normalmente uso estilos básicos del modelo de caja como el posicionamiento relativo, absoluto y fijo, pero eso es solo porque crecí en un mundo donde la gente todavía usaba IE8.
Dicho esto, hay varios casos de uso excelentes para flexbox:
- Diseño inverso: Los diseños que alternaban entre "texto a la izquierda, imagen a la derecha" e "imagen a la derecha, texto a la izquierda" solían ser difíciles de manejar en móviles. Pero con flexbox, solo tienes que marcar la casilla de "diseño inverso" para asegurar que las imágenes se muestren siempre encima o debajo del texto.
- Centrar elementos verticalmente
Aunque no lo creas, centrar elementos verticalmente dentro de un contenedor solía ser un dolor de cabeza. Con Flexbox, se hace en un clic.
- Diseños de cuadrícula fluida
Flexbox también simplifica la creación de diseños basados en cuadrículas fluidas.
Paso 9: Decidir entre imágenes en línea o de fondo
Elegir entre una imagen en línea o una de fondo a veces es complicado, así que uso estas reglas de oro para tomar la decisión correcta:
Si quieres que la imagen:
- Sirva como fondo de una sección, cubriendo todo el ancho y alto
- Tenga un degradado o una capa de color superpuesta
- Tenga una sombra interior
- Esté fija para crear un efecto de desplazamiento parallax
Entonces usa una imagen de fondo.
Sin embargo, ten en cuenta que los elementos con imágenes de fondo son más difíciles de reutilizar (a menos que sirvas la imagen de fondo de forma dinámica), ya que necesitarás añadir una clase combinada para evitar servir la misma imagen una y otra vez.
De lo contrario, usa una imagen en línea. Webflow redimensiona automáticamente las imágenes en línea para distintos dispositivos y puedes añadirles etiquetas alt fácilmente. Además, son más fáciles de reutilizar que los elementos con imágenes de fondo.
Paso 10: Cuándo usar margen frente a relleno (padding)
Me hacen esta pregunta a menudo, así que pensé en añadir un consejo rápido aquí.
Si intentas separar un contenido de otro, usa márgenes. Si intentas mantener el contenido dentro de un área determinada o añadir espacio alrededor de todo un componente (como una sección hero), usa relleno y estilos de ancho.
En otras palabras, el margen añade espacio fuera de un elemento, mientras que el relleno añade espacio dentro de un elemento.
Paso 11: Añadir animaciones y efectos al pasar el ratón
Sé lo tentador que puede ser empezar a crear interacciones y efectos al pasar el ratón, pero espera a tener listo el diseño estático. Perderse en los detalles pensando en cómo se transformará una tarjeta al interactuar con ella puede ralentizar muchísimo el resto de la construcción de tu sitio.
Si quieres ver otro artículo sobre animación en el diseño web, ¡dímelo en los comentarios!
Paso 12: Construye el resto de tu sitio
Ahora que has añadido correctamente tus recursos, estilos básicos y fuentes al sitio, la velocidad de tu flujo de trabajo debería mejorar drásticamente. Este proceso suele llevar entre 5 y más de 30 minutos, dependiendo del tamaño de tu sitio o archivos PSD y de la complejidad del diseño.
Convertir de Photoshop a Webflow
Con este esquema de proceso y estos consejos, estarás en el buen camino para realizar transiciones de Photoshop a Webflow de forma más rápida y sencilla. Si tienes tus propios trucos o consejos, ¡compártelos con la comunidad en los comentarios!
