Cómo convertir un diseño PDF en una web hecha en WordPress

A lo mejor tienes un diseño que te ha quedado bien chulo y te preguntas… ¿podría convertir este mismo diseño que está en PDF a una web en WordPress?

Pues la respuesta es que SÍ.

En este artículo vamos a ver de forma rápida, cómo convertir un diseño que tenemos en un PDF en una web hecha en WordPress.

También podríamos hacer la web en cualquier otro CMS o gestor de contenidos, pero da para otro artículo.

No es un proceso automático, pero si es posible. La clave está en usar las herramientas adecuadas para ello y eso es lo que vamos ahora.

¿Comenzamos?

Diferencias entre un PDF y una web

Antes de empezar, vamos a ponernos en situación y analizar las principales diferencias entre estos dos formatos PDF y Web.

Características de un PDF

Conoces de sobra los PDF, pero quizá no te has parado a pensar en sus características:

• Diseño estático: su contenido es estático y no se puede interactuar con sus elementos, salvo excepciones (como enlaces y formularios)
• Tamaño fijo: el diseño está delimitado por el tamaño del documento cuando se creó y sólo se amplía y reduce en proporción utilizando la lupa para ello.
• Multipágina: al igual que una web, puede contener diferentes páginas y todas comparten el mismo tamaño de página, como norma general.
• Contenido: puede contener tanto texto como imágenes, de vector o pixel, y en raras ocasiones archivos de vídeo incrustado.
• Uso: el principal uso de este formato es compartir documentos para imprimir, como una tarifa o un catálogo, como para comunicar, una memoria o una guía.

Entendiendo sus características, vamos a compararlas con las características de una web en WordPress.

Características de una web en WordPress

Como ya sabes, una web no solo sirve para compartir información a través de textos e imágenes, sino que además nos permite realizar tareas como si de una aplicación se tratara.

Comparemos las características vistas anteriormente:

• Diseño dinámico: su contenido es dinámico y se puede interactuar con los elementos que aparecen en la web (como botones, formularios, imágenes, desplegables, sliders, banners). Si te suena a chino puedes ojear el diccionario imprescindible de términos web.
• Formato responsivo: el diseño se adapta de forma dinámica y no como si fuera un zoom, como en el caso del PDF. Como ejemplo, visitamos una web desde el portátil y vemos un diseño en 4 columnas. Pues esta misma web vista desde una tablet se ve en 3 columnas y en un móvil se ve en 1 columna. A eso me refiero.
• Multipágina: por supuesto la web se compone de varias páginas, aunque existen webs de navegación única. La diferencia es que las diferentes páginas de una web, no tienen por qué tener el mismo tamaño como sí es habitual en un PDF.
• Contenido: por supuesto tiene contenidos multimedia y además, contenidos dinámicos que pueden alterarse por el usuario, como si fuera una aplicación informática.
• Uso: en una web podemos comprar productos, descargar información o almacenar cantidad de información muy extensa que en un pdf sería impensable.

Aplicaciones de diseño UX

Supongamos que ya tenemos el diseño en PDF, bien porque lo hemos creado nosotros o bien porque nos lo ha enviado otra persona.

El primer paso, sería adaptar esta maquetación en un prototipo web, de la forma más detallada posible.

Existen varias aplicaciones de diseño UX, pero te recomiendo elegir una de éstas:

• Adobe XD: mi favorita. Es de Adobe y se entiende perfectamente con las otras aplicaciones de la suite. Además, puedes compartir bibliotecas donde utilizas elementos de forma frecuente.
• Figma: otra potente herramienta para diseño UX. Lo que más me gusta es que puedes utilizarla desde el propio navegador, sin instalarte la aplicación en el ordenador.
• Sketch: solo para usuarios de Mac. Antes era gratis, pero ahora es de pago. Es una herramienta muy potente también para hacer prototipos web.

También puedes hacer el prototipo web en otra aplicación de diseño, de hecho yo utilizaba Adobe InDesign, pero encontrarás limitaciones que te van a condicionar después.

Prototipo web

Con nuestra herramienta de diseño UX favorita, lo siguiente que haremos es realizar el prototipo.

Este prototipo será el paso intermedio entre el diseño del PDF y la web hecha en WordPress.

La ventaja de hacer un prototipo con un software de diseño UX, es que nos van a servir todos los tamaños de tipografías, referencias de colores y medidas en pixel.

Además, desde este programa podemos exportar los objetos para utilizarlos después en WordPress. Tanto imágenes optimizadas, vectores o iconos.

Desde el diseño en PDF, debemos valorar si el contenido que aparece en varias páginas queremos unificarlo en una misma página de la web. Dependerá de si es un contenido específico o una web completa.

Lo habitual de un sitio web, es hacer un resumen en la página de incio, de todos los contenidos que veremos a lo largo de las diferentes páginas del sitio.

Una vez adaptado el diseño en pdf al prototipo web, comenzamos a exportar los elementos que nos interesen: iconos en formato vectorial SVG, imágenes optimizadas en JPG y las imágenes transparentes en PNG.

Además, anotaremos los colores utilizados en el valor hexadecimal (tendrían este formato #oooooo) y los estilos de tipografía empleados (recomiendo usar Google Fonts).

Trasladando a WordPress

Una vez estamos en WordPress, instalamos el tema que queramos usar. Para este ejemplo yo voy a usar el tema Divi y su constructor visual Divi Builder.

También puedes elegir cualquier otro tema y trabajar con los bloques de Gutenberg o Elementor, si es tu constructor visual favorito.

En esencia, la forma de adaptar los contenidos será lo mismo, con más o menos capacidades de personalización (por eso me gusta tanto Divi).

Una vez tenemos nuestro tema y constructor instalados, vamos a seguir los siguientes pasos:

1- Creamos una nueva página y editamos con el constructor visual de Divi Builder, el editor de Gutenberg o Elementor, si es tu caso.

2- Elegimos el formato de columnas más apropiado para el contenido. Como ves en la siguiente foto las posibilidades de diseño de columnas son muy variopintas. Aun así, podemos personalizarlo aun más mediante CSS.

3- Insertamos el módulo apropiado para el contenido que vamos crear según nuestro prototipo: texto, imagen, anuncio, etc.

4- Una vez componemos el texto, aplicamos los mismos estilos de tipografía, color y espaciado que en el prototipo que hemos hecho de referencia.

Ajustes finales

Repetiremos el proceso a lo largo de toda la web, creando tantas páginas como hayamos previsto en nuestro prototipo o en el documento PDF.

Una vez creada la estructura en una página, podemos guardar el módulo, la fila o la sección en la biblioteca y utilizarlo después en otra página de nuestro sitio.

Esto nos va a facilitar la tarea de maquetación en WordPress y además nos aseguraremos de que todas las secciones y columnas tienen los mismos criterios de tamaño y espaciado.

Conclusión

Convertir un diseño desde un PDF a una web con WordPress no es misión imposible, sino todo lo contrario.

La clave está en saber adaptar los contenidos y realizar un prototipo intermedio con el estilo y tamaño finales. Así, cuando estemos maquetando en WordPress no tendremos que improvisar ningún diseño.

Cada aplicación tiene su uso específico y los atajos no existen. Saltarte algún paso puede ser tentador, pero a la larga verás que pierdes mucho más tiempo.

¿Y tú, ya has probado a trasladar un diseño en PDF a una web en WordPress?