Cómo entregarle el copy a un diseñador

El de cómo entregar un copy a un diseñador

Seas copywriter o empresa turística, antes o después vas a tener que pasar por un diseñador web.

A mí me pasa conmigo mismo y con mis clientes:

  • Para mi propia web, tengo un diseñador al que le pasé mis copies y él los implementó, resultando en lo que estás viendo.
  • Para la web de mis clientes, yo les entrego el copy por el que me contratan y ellos lo implementan en su propia página con la ayuda de un diseñador, suyo o recomendado por mí.

En ambos casos el copy ha de pasar por manos del diseñador.

Pues la cosa es que yo me llevo muy bien con los míos y conozco de buena tinta cuándo y por qué sufren al implementar los copies que reciben.

Se me está quedando la intro muy larga, así que voy al tema ya: cómo es el documento con el copy que le das al diseñador es importante para que el resultado final sea óptimo.

Y yo te voy a contar, en este primer post de 2022 —en el que por cierto, estreno nuevo diseño de imagen principal, como llevo haciendo desde 2019—, cómo hago yo mis documentos.

Con muuuchos ejemplos.

Si has sido mi cliente y te he escrito un copy alguna vez, lo sabes.

Si has formado parte de Capitán Reservas o de Turmenta, también lo sabes.

Si no, sospecho que no, y me atrevo a escribir este post porque los mochis —mis diseñadores— me disen que es una bendisión maquetar copies como los que yo les paso.

Pongámonos en situación

Vas a escribir un copy para una web, y ese copy lo va a implementar luego un diseñador.

Vas a tener que entregar un documento, así pues.

¿Qué opciones tienes?

  • Yo trabajo con Microsoft Word, porque me gusta cómo trata los saltos de línea bastante más que Drive.
  • También puedes trabajar directamente en Drive.

La cosa es que el documento, para su revisión, es ideal que esté en Drive, porque tienes cosas maravillosas como comentarios, sugerencias, historial y demás.

Luego al diseñador solo hay que darle acceso al documento con el copy revisado. Accede a Drive, lo coge y hala, a diseñar.

5 consejos para hacer el documento

Da igual si lo haces en Word o directamente en Drive, porque las funciones que tienen para lo que necesitamos nosotros son las mismas.

Como formador he llegado a ver documentos de texto con párrafos y párrafos y párrafos consecutivos.

¿Te imaginas trasladar eso tal cual a la web?

A un diseñador no le puedes dar 800 palabras del tirón y esperar que haga magia.

Mira, me refiero a esto. Este es un trozo de landing escrita en plan mazacote:

Copy sin estructura
Hala, todo de golpe

No, no y no.

Hay que estructurar y dar indicaciones al diseñador de qué idea llevas en la cabeza.

Los copys o los que escribimos los copies no somos diseñadores, pero elaboramos textos pensando en que tienen que convertir. Es nuestra responsabilidad, y no solo la de nuestro diseñador.

Una forma de estructurar ese mismo copy es esta que ves, que ahora te contaré al detalle, conforme vaya avanzando con los consejos:

Copy con estructura
Así mejor

Cuando un diseñador ve lo de antes se echa las manos a la cabeza, te lo digo yo.

Los tochos de texto plano, prohibidos. Ese es nuestro punto de partida.

#1 Las cajas nos gustan; las cajas son nuestras amigas

Cuando en una web te encuentras textos y más textos, sin interrupciones ni nada que corte un poco el tochazo, ¿qué haces?

Inconscientemente, de forma automática, te largas a otra.

Las cajas hacen que la pereza de ver esa página se reduzca. Mira este ejemplo real:

Cajas en copywriting
Larga vida a las cajas

¿Y cómo se crea eso?

Con una simple tabla con las filas y columnas que desees. Si te haces el dibujo mental de cómo será esa estructura en la web, lo tendrás chupao.

Mira para el diseñador el suplicio que supone llegar a lo que acabas de ver a partir esto:

Cajas mal indicadas en el copy
Las cajas así no se indican

Cuando la cosa era tan sencilla como darle esto:

Cajas en copywriting
Así sí, che

Para crear una tabla así, ya te digo que es tan simple como insertar y elegir el tamaño:

Tablas para hacer cajas
Insertar tablas en Word

Una vez insertes la tabla en el documento, ojo:

  • Lo suyo es que la centres en la hoja
  • Que centres también el contenido de sus celdas
  • Que digas si quieres que haya encima un icono, un número… un algo

Yo en esta landing elegí poner un A, B o C, pero generalmente tiendo a poner iconos, como aquí:

Iconos en copywriting
Iconos en cajas

O aquí, ya saliendo de mi propia web:

Iconos al maquetar copy en cajas
Más iconos en cajas

Esas cajas con algo encima van genial para cualquier tipo de landing. Cuando se ven en un móvil, además, se adaptan fácil, al colocarse las cajas por orden, pero esta vez de arriba abajo:

Las cajas en responsive
Cajas en responsive

O con el ejemplo de mi web:

Bloques en responsive
Más cajas en formato responsive

Las cajas, además, te sirven para un montón de cosas:

  • Poner beneficios
  • Poner características
  • Poner propuestas de valor
  • Diferenciar buyer personas
  • Indicar un orden de pasos a realizar

Mira, aquí un ejemplo en otra web que escribí yo:

Diferenciar buyers con cajas
Cajas para diferenciar buyers

Lo pasé así en mi documento:

Bloques para distintos buyer personas
Así indico los bloques

#2 Los encabezados también son nuestros coleguitas

Esos H2 y H3 de colores que ves a la derecha de algunas líneas le indican al diseñador que estamos hablando de encabezados.

Los encabezados son etiquetas HTML —no te preocupes, que no es difícil— con las que jerarquizamos las páginas.

Yo siempre me baso en el mismo ejemplo para comprenderlos: un periódico.

El periódico de El País, por ejemplo, tiene como encabezado principal su propio nombre, El País.

Luego tiene encabezados menores de nivel 2, que son los títulos de las noticias más importantes y, dentro de estos, algunos subtítulos con una jerarquía menor.

Los encabezados de una página pueden ser H1, H2, H3 o, si la cosa se pone profunda, H4 y posteriores —no es lo habitual—.

Solo puede haber un H1, pero varios de los demás. No hay límite.

A tener en cuenta, eso sí, esto:

  • Generalmente, en una web los textos que más se ven o destacan es porque están etiquetados como encabezados.
  • Los encabezados son importantes para el SEO. Google los tiene muy en cuenta. A la hora de hacer SEO copywriting son cruciales.

Bueno, pues es labor del copy decirle al diseñador qué frases del documento son encabezados.

Para ello, yo simplemente pongo al ladito un H1, H2, H3 o H4, coloreados siempre del mismo color: magenta, amarillo, verde y rojo. Los elegí así hace años porque se diferencian bien y son los colores que me daba el Word.

El diseñador agradecerá de todo coraçao que le des los encabezados marcados, para que él entienda que esos encabezados tienen importancia de dos maneras:

  • A nivel visual
  • A nivel SEO

Generalmente importa por las dos cosas a la vez. Sea como sea, si él sabe que un trozo de texto es encabezado, hará mucho mejor su trabajo.

Volvamos a mi landing de copy. Mira cómo indico los distintos encabezados de ese trozo de página que veíamos.

Este es el H1:

Así indico el H1
Así indico el H1 de cada landing

Y estos son algunos H2:

Indicación de los H2 en el copy
Así indico los H2

Mira cómo se ve en la web el segundo H2:

Encabezado H2 de una landing
Un encabezado H2 de mi landing

Destaca por encima del texto que viene después y, además, tiene la keyword que quiero tener posicionada en esa landing —«copywriting turístico»—.

Las etiquetitas H2, H3 y demás las puedes colocar dentro de cajas también. Tener dos o más H2 en cajas es raro, pero sí que se suelen ver combinaciones de H3:

H3 en cajas
Encabezados H3 en cajas

Que, trasladado a la web, queda así:

H3 en bloques maquetados en la web
Los H3 en cajas, en la web

Hay una alternativa válida que da menos trabajo pero que, a mi forma de ver, es peor para analizar visualmente las landings.

Consiste en, en Word o Drive, decir qué tipo de título es una frase:

Marcar encabezados en Word
Así se marcan los encabezados en Word

Si eliges título 2 e hicieras un copy/paste del copy, automáticamente se pegaría como H2. Esto solo lo veo realmente útil para los posts; en un copy no tiene sentido.

Hecha esta aclaración, seguimos.

#3 Los materiales audiovisuales

Con tanta captura de mis documentos de trabajo seguro que ya te has dado cuenta de cómo indico los iconos.

Para acompañar las cajas/tablas son ideales, y mi forma de indicar que ahí va un icono es ponerlo con el fondo en azul clarito.

Al igual que los iconos, las fotos o vídeos también los indico así. Bueno, indico una intención: la de que el diseñador considere poner ahí un icono, una foto, un vídeo… o algo.

En este sentido, la selección de la parte audiovisual se la dejo al que diseña.

Entrego la relación de los textos con el aspecto audiovisual, pero ya está. Ahí sí que creo que un diseñador tiene mucho más que decir que un copy.

Como caso especial, sí que podemos indicar qué queremos que aparezca ahí, o qué idea llevamos en la cabeza. Por ejemplo:

  • «Icono que podría ser una lupa»
  • «Foto de una familia sonriendo»
  • «La foto DCIM1204»
  • «La foto que he visto en esta página»

Insisto en lo de que yo casi nunca digo qué foto va en qué sitio.

Con mis diseñadores, con darles la estructura básica ya es suficiente para que lo resuelvan con nota.

Si le paso esto:

Audiovisuales en copy
Así se lo doy yo

Lo resuelven así:

Cómo maquetar audiovisuales
Audiovisuales subidos a la web

Y es un ejemplo básico, en el que han respetado la estructura tal cual que pasé yo. Otras veces hacen lo que quieren y mejoran lo que yo les doy 🙂

¿Te has fijado en esos //textos que aparecen así//?

#4 //Comentarios que no saldrán en la web//

Cuando se trata de dejar comentarios para el diseñador —o para el cliente que ha de revisarte los textos, en caso de que seas copy—, yo los meto entre barras y los pinto de color verde.

En esos comentarios puedes decir:

  • «Aquí pon esto o esto otro»
  • «Maqueta así o asá»
  • «Pongo el copy así, pero a nivel de diseño he pensado que…»
  • «Hasta aquí el primer scroll»: lo utilizo para decirle al diseñador hasta dónde llega la web sin necesidad de hacer scroll o mover la ruedecita del ratón

Cosillas así, ya sabes. Son bienvenidos comentarios de cualquier tipo.

Ejemplito:

Cómo indicar formato acordeón
Así indico los acordeones

Formato acordeón es cuando un trozo de texto solo se ve si haces clic:

Formato acordeón en una web
Formato acordeón en web

#5 ¿Y los botones? ¿Los dibujamos?

Cuando quiero poner una llamada a la acción no escribo «botón», sino que pongo «CTA: [texto del botón]» y lo subrayo de fucsia, como el H1 —no hay problema, porque H1 solo hay uno, al inicio de la landing—.

Así, de un vistazo, el diseñador puede ver dónde ha de colocar los botones y cuántos hay.

Generalmente se sabe dónde apuntan los botones pero si no, es tan sencillo como insertar un enlace en el trocito de texto, para que el diseñador lo tenga claro.

Y si no te apetece insertar ese enlace, solo tienes que abrir un comentario con // y poner ahí la URL destino.

Ejemplos de CTAs, primero versión documento:

Forma de indicar los CTA
Así indico cada CTA

Y ahora versión web:

CTA maquetados
Los CTA anteriores, maquetados

Por cierto, en otro post hablé largo y tendido sobre qué escribir en los CTA en turismo.

Otras cosas a tener en cuenta

Si el copy del documento que entregas es una castaña, la web será una castaña por muy bien que lo haga el diseñador.

Las landings deben tener ritmo, alternar elementos, ser escaneables y visualmente atractivas y, sobre todo, deben conseguir el efecto tobogán: que cuando una persona entre a leerla se la vea entera, desde el H1 al último CTA.

Y por favor, vuelve a considerar el hecho de escribir el copy pensando que será visto en ordenadores y teléfonos móviles. Más vale poner muchos bloques cortos que pocos largos.

Ejemplo real de copy en versión documento y versión web

En 2022 seguimos con los ejemplos, que no se diga.

El copy es mío, y lo llevaron a la web mis diseñadores.

Vamos con el copy de mi mercado de antesdeayeres:

Si ves diferencias entre el documento y la web puede deberse a actualizaciones de la página o a que los mochis consideraron que la web sería mejor de la forma que ves ahora.

En esas cosas me fío 100% de ellos; mientras que Rafa diseña, Clara controla la UX.

¿Y el microcopy?

Hay detallines de una web que no pueden ser tratados antes de que se haga el diseño.

Muchos de ellos son microcopywriting puro y duro.

Cuando el copy entrega un trabajo, la cosa no acaba ahí: después de que el diseñador lo implemente, lo suyo es hacer un repasito o rondita de ediciones, para rematar la página del todo.

Que si botoncitos por ahí, que si avisos por allá, que si efectos al pasar el ratón por encima, que si footers y tal y cual, etc.

Mi consejo final no solicitado

Si vas a pedirle a un diseñador que te haga tu web, facilítale el trabajo para que lo haga de forma excelente y no te maldiga mientras diseña.

Empatiza y ponte en su lugar, y trata de imaginar cómo quedará la web una vez se traslade el copy al CMS en cuestión.

Para lo de responsive no te comas el coco, que por mucho que utilicemos cada vez más los móviles hay cosas y procesos a los que todavía no les ha llegado el momento de cambiar.

Y si tu diseñador entiende del asunto porque es bueno en lo suyo, sacará la versión responsive sin problema en cuanto finalice la desktop.

Me despido mandándote a una landing cuyo copy fue entregado con el sistema que te acabo de contar. Vende, precisamente, el servicio de diseño web de casi todos los ejemplos que has visto en el post.

Si les pides presu, diles que vas de mi parte 😉

Hala, pues terminamos aaaaaquí.

Nos vemos el próximo día 25.

¿Quieres suscribirte?

El responsable soy yo, Joan Marco, y mi finalidad es enviarte mi newsletter y de forma muy puntual alguna otra cosa. Me legitimas con el check de la casilla. Tus datos los tendrá mi proveedor, ActiveCampaign, que se acoge al acuerdo de seguridad EU-US privacy. Esta es su política de privacidad. Escríbeme sin miedo a info@joanmarco.com para hacer lo que te venga en gana con la info que me estás dando.

Comparte este post

¿quieres más?

Aquí tienes artículos relacionados

5 comentarios

  1. ¡Muchas gracias Joan! Siempre saco algo interesante de lo que nos explicas y mejoro mis copys (¿o se dice «copies»?) ¡Buen día desde el Cantábrico!

    1. ¡Hola Maribel! Ayyy gracias. Yo utilizo «copies» para las piezas de texto en plural, y «copys» para el plural de los copywriters. Pero vamos, que no viene de la Fundéu ni na, sino por autoconvencionalismo.

  2. Y por cierto, pregunta no solicitada: ¿No les indicas nada sobre title, metadescription y palabras clave?
    Pensé que había que hacerlo en cada página que escribimos… ¿estoy equivocada?

    ¡Grazie mile de nuevo!

    1. Buen apunte 😉

      Los titles, metas y URLs (lo que llamo «metas») los entrego en un Excel, como si fuera una tablita, con una fila por página. Al final del proyecto, ya para cerrar.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

¡Eeeeeeeepa!

¿Sabes que puedo escribir para ti sin que tengas que poner ni un eurillo del bolsillo?

Se trata del Kit Digital, para el que soy oficialmente Agente Digitalizador.