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.
Te voy a hablar de...
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:
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:
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:
¿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:
Cuando la cosa era tan sencilla como darle esto:
Para crear una tabla así, ya te digo que es tan simple como insertar y elegir el tamaño:
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í:
O aquí, ya saliendo de mi propia web:
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:
O con el ejemplo de mi web:
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:
Lo pasé así en mi documento:
#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:
Y estos son algunos H2:
Mira cómo se ve en la web el segundo H2:
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:
Que, trasladado a la web, queda así:
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:
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:
Lo resuelven así:
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:
Formato acordeón es cuando un trozo de texto solo se ve si haces clic:
#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:
Y ahora versión web:
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.
5 respuestas
¡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!
¡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.
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!
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.
Que bueno Joan👏, el próximo trabajo lo entrego «nikelao»😉