Ventajas de diseñar antes de implementar

A la hora de comenzar un nuevo proyecto web hay una decisión que tienes que tomar. ¿Harás el diseño previamente en una aplicación específica de diseño o lo realizarás sobre la marcha mientras lo implementas? Si trabajas con WordPress, y aún más si trabajas con WordPress + Elementor, probablemente más de una vez (o quizás siempre) has trabajado de la segunda manera. Bien, déjame decirte que en ese caso te estás perdiendo todas las ventajas que ofrece hacerlo de la primera forma. Es decir, diseñando primero e implementando después.

Hay muchas aplicaciones que te permiten diseñar toda una web antes de pasar a la fase de implementación (y no, Photoshop no es una de ellas, Photoshop es para otra cosa). En Plan A/B trabajamos con Figma y es la aplicación en la que me centraré en este post, pero existen otras como Adobe XD, Sketch, InVision e incluso proyectos open source como Penpot. Por opciones no será, ahora voy a contarte las ventajas de adoptar este flujo de trabajo. ¡Vamos!

Empieza a diseñar al instante

Rapidez. No sé a ti, pero a mí me obsesiona trabajar cada vez más rápido. Y por rápido no quiero decir descuidadamente, sino eficientemente, es decir, conseguir llegar al punto al que quiero llegar empleando el menor número de recursos y en el menor tiempo posible.

Usar una aplicación de diseño me permite eso, puesto que puedo comenzar a diseñar al instante, sin preocuparme de hosting, de instalar WordPress, de configurar el tema, de qué plugins necesito... Nada de eso, comienzo con un lienzo en blanco y sólo tengo que dejar que la inspiración y la creatividad me guíen.

Si el proyecto es muy, muy simple, quizás eso no te parezca demasiado trabajo, al fin y al cabo tendrás que instalar WordPress igualmente más adelante, pero verás por el resto de ventajas que aun así te compensará diseñar previamente. Para proyectos un poco más avanzados ya ni te digo, apenas que entren en la ecuación tipos de contenido personalizados, campos personalizados o cosas por el estilo, diseñar ciertos elementos del sitio llevará un tiempo considerable y todo ello sin la certeza de que el cliente te vaya a aceptar ese diseño, te vaya a modificar los campos...

Igualmente, si se trata de una tienda online con una aplicación de diseño tardarás pocos minutos en diseñar una página de categoría, una ficha de producto... mientras que implementar directamente implicará instalar WooCommerce o PrestaShop o el sistema que vayas a utilizar para poder crear ese diseño y que tu cliente te lo valide... o no.

Vista general del diseño

Diseñando en una aplicación como las que te he mencionado antes podrás ver toda la página sobre la que estés trabajando y todas las páginas del sitio a un golpe de vista. Esto es genial para comprobar si el diseño es consistente entre todas las páginas que componen la web.

Si estás trabajando directamente en Elementor verás sólo una parte de la página que estés diseñando en ese momento y no tendrás una vista general del sitio como la que puedes ver en la siguiente imagen.

Crear o modificar elementos del diseño

Con aplicaciones como Figma puedes crear recursos vectoriales para utilizarlos en tu diseño. Puedes crear iconos, gráficos, bullets para listas... Del mismo modo, puedes modificar elementos de diseño que no puedes tocar con Elementor ni con Gutenberg, como iconos u otros recursos vectoriales que quizás has descargado de bancos de imágenes.

Esto te da mucha versatilidad a la hora de hacer que el diseño que estás realizando para tu cliente sea verdaderamente único.

Colaboración en tiempo real

Con Figma, igual que con otras aplicaciones de este tipo, puedes colaborar en tiempo real con otras personas de tu equipo y trabajar sobre diferentes partes del sitio simultáneamente. Incluso editar partes de la misma página a la vez, cosa que con WordPress no es posible.

Si colaboras con otras personas en la fase de diseño, te resultará especialmente útil esta característica, ya que todo el equipo puede ver sobre qué están trabajando el resto de personas y el diseño que están haciendo. Esto, además de agilizar el proceso de diseño y la comunicación con todo el equipo, facilita, como te comenté antes, que el diseño sea consistente, por el hecho de que todos, en todo momento, tienen una vista completa de todo el sitio.

Ágil manejo de imágenes

Si implementas directamente tendrás que trabajar todas las imágenes para subirlas a WordPress. Tendrás que recortar, redimensionar y optimizar las imágenes para que estén justo como quieres que estén, pero probablemente algunas (o muchas) de ellas se cambien posteriormente cuando el cliente vea el diseño.

Seguro que te ha pasado un montón de veces. Has encontrado la foto perfecta (según tú) para cierta parte del sitio, pero al cliente no le ha gustado y te la ha cambiado. Bueno, te toca volver a recortar, redimensionar y optimizar para subir la imagen nueva a WordPress.

En Figma sólo tienes que arrastrar las imágenes y las tendrás en tu espacio de trabajo. Ahí podrás recortarla y redimensionarla sin modificar la imagen original, por lo que cualquier cambio que quieras hacer será muy rápido. Incluso puedes editar la imagen tocando valores como la exposición, el contraste, la saturación... Además, si cambia la foto sólo tendrás que arrastrar la nueva encima de la anterior para reemplazarla. Tardarás un par de segundos.

Comentarios del cliente

Una vez que tengas un diseño base, puedes enviar al cliente un enlace para que revise el diseño y, a su vez, podrá realizar comentarios sobre puntos concretos del mismo para solicitar cambios.

Esta funcionalidad hace que la comunicación con el cliente sea fluida y facilita la realización de cambios. En lugar de recibir un correo electrónico con un listado de cambios, tendrás estos situados directamente en el diseño, justo en el lugar en el que hay que aplicar cada cambio.

Esto también se puede hacer sobre una web con WordPress usando herramientas como Markup, de la que te hablé en este post, pero ejecutar esos cambios posteriormente en un WordPress ya implementado te resultará más complicado. Lo que me lleva al siguiente punto.

Mayor agilidad para realizar cambios

En Figma puedes realizar cualquier cambio mucho más rápido que en WordPress. No sólo por la agilidad del propio programa, sino por el hecho de tener toda la web al alcance de un clic. Aunque ciertos cambios en WordPress se pueden hacer fácilmente en todo el sitio tocando los estilos, hay ciertas modificaciones que te harán abrir varias páginas, una por una, para llevar a cabo dichas modificaciones.

Esto es tedioso y te llevará mucho más tiempo del que te llevaría hacer esos mismos cambios en Figma. Además, en Figma también puedes definir estilos y componentes que te permiten hacer cambios una vez y que se apliquen a todas las instancias de ese estilo o componente que tengas en el sitio.

Exportación fácil y rápida

Ya tienes el visto bueno del cliente, hora de exportar y preparar los archivos para la fase de implementación. Todos los elementos que diseñes y todas las imágenes que importes en tu diseño en Figma podrás exportarlas fácilmente con un par de clics.

Puedes configurar los formatos y los tamaños a los que quieres exportar tus recursos y Figma lo hará de una vez. Además, todo lo que exportes se exportará tal cual lo ves en el diseño, es decir, al tamaño real al que se mostrará en la web. No importa si la imagen original tiene 5.000 píxeles de ancho, si la has recortado y redimensionado a 800 píxeles se exportará a ese tamaño, pero con la ventaja de que en Figma conservará su encuadre y tamaño original.

Implementación más rápida

Por último, pero no por ello menos importante, la implementación, una vez que todo esté ok, las harás más rápidamente. Como ya tienes todo diseñado, definido, claro y con el visto bueno del cliente, sólo tienes que implementar. Trabajarás mucho más rápido que si tuvieras que pararte a pensar en el diseño y cambiar o mover cosas dentro de Elementor.

Además, cuentas con un inspector en Figma en el que podrás ver todas las propiedades de cualquier elemento que tengas seleccionado. Ancho, alto, posición, color. En el caso de textos podrás ver la tipografía, el tamaño, el peso... Todo a un golpe de vista. Verás cómo te cunde trabajar así.

¿Qué te parece?

Como ves, trabajar el diseño de una web como una fase aparte previa a la implementación tiene muchas ventajas. Es cierto que al principio, debido a la curva de aprendizaje, quizás emplees un poquito más tiempo de la cuenta en esa fase, pero en cuanto te acostumbres te alegrarás de haber hecho el cambio. Si no trabajas así, dale una oportunidad. Prueba con algún proyecto propio o algún proyecto pequeñito de un cliente, a ver qué tal te va. Y cuéntame tu experiencia en los comentarios.

Como siempre, si te ha gustado este post, compártelo en tus redes para llegar a más gente. ¡Gracias de antemano y hasta la próxima!