Nikita Obukhov, fundador y director general de Tilda, explica cómo evitar errores comunes al crear la portada de un sitio web y comparte consejos de diseño sobre cómo casar texto e imágenes.
Una portada es la esencia de un sitio web, expresada en tres o cinco palabras y apoyada por una fotografía. La portada es lo primero que ven los visitantes cuando aterrizan en su sitio web, y en esta misma fase, la gente toma la decisión de quedarse en el sitio web y seguir leyendo o cerrar la pestaña. Por tanto, su tarea es hacer que la primera página sea lo más pegadiza y cautivadora posible.
Portada del sitio web: Primeros pasos
El principio clave del diseño de una portada: el texto es lo primero, mientras que las imágenes sólo sirven de apoyo.
El mensaje es lo más importante, mientras que la imagen de fondo crea el ambiente adecuado. Por lo tanto, trate de elegir una imagen que no dificulte la lectura del texto y que se adapte perfectamente a la voz de su sitio web.
Además, no es necesario mostrar inmediatamente lo que se ofrece en la portada. La imagen es sólo un fondo que apoya el mensaje. Por ejemplo, mire la portada de abajo. Es la primera página de la tienda online de sudaderas con capucha: el fondo tintado no tiene nada que ver con las sudaderas. En este caso, el objetivo de la portada es crear un ambiente determinado. Debe inspirar a los visitantes y ayudarles a sumergirse en el tema.
El mensaje es lo más importante, mientras que la imagen de fondo crea el ambiente adecuado. Por lo tanto, trate de elegir una imagen que no dificulte la lectura del texto y que se adapte perfectamente a la voz de su sitio web.
Además, no es necesario mostrar inmediatamente lo que se ofrece en la portada. La imagen es sólo un fondo que apoya el mensaje. Por ejemplo, mire la portada de abajo. Es la primera página de la tienda online de sudaderas con capucha: el fondo tintado no tiene nada que ver con las sudaderas. En este caso, el objetivo de la portada es crear un ambiente determinado. Debe inspirar a los visitantes y ayudarles a sumergirse en el tema.
La sección Hero de Activize, activize.ae
A veces, sin embargo, la portada parece un anuncio e incluye un mensaje claro, una llamada a la acción y una imagen que muestra lo que el cliente obtendrá como resultado. Si diriges un SPA o un salón de belleza, una buena foto de portada sería la que muestra a tus esteticistas o masajistas trabajando. Si te dedicas a las reparaciones del hogar, añade fotos de tus trabajadores, mostrando que no son jóvenes inexpertos sino profesionales altamente cualificados en los que se puede confiar. Si vende bonitos cuadernos de gatos, no dude en ponerlos en la portada. En este caso, ni siquiera hace falta escribir nada: la foto habla por sí sola.
Plantilla de sitio web de Tilda para una empresa de reformas del hogar
Las imágenes gratuitas para tus proyectos digitales están disponibles en sitios web profesionales de fotos de archivo que distribuyen imágenes bajo la licencia Creative Commons Zero (CC0). Esto significa que una imagen está libre de restricciones de derechos de autor: en otras palabras, puede utilizarse y modificarse de todas las formas posibles, incluso con fines comerciales, sin pedir permiso.
He aquí algunas fuentes de fotos de archivo gratuitas de alta calidad: Unsplash, Pexels, Stocksnap, Rawpixel.
He aquí algunas fuentes de fotos de archivo gratuitas de alta calidad: Unsplash, Pexels, Stocksnap, Rawpixel.
Una parte importante de mi trabajo consiste en elegir imágenes para las plantillas de Tilda. Al principio, sólo tengo una descripción y un tema general de la plantilla, todas las imágenes están por encontrar. Cuando el texto está listo, entiendo cuántas líneas debo utilizar en la portada, cuántas secciones deben incluirse en el menú superior, si tenemos un eslogan y una llamada a la acción, cuántos botones debo añadir (si los hay), si hay un formulario, etc. Teniendo en cuenta el número de elementos y su peso visual, busco una imagen con una composición adecuada que, en primer lugar, facilite la lectura del mensaje de la portada y no robe protagonismo.
Cómo elegir una imagen de portada
Una foto de portada perfecta debe estar vacía en el centro, sin detalles ni elementos.
El título de la primera página casi siempre se sitúa en el centro. Cuando el texto tapa elementos visuales importantes, nadie los verá. Además, puede que el texto no sea legible.
El título de la primera página casi siempre se sitúa en el centro. Cuando el texto tapa elementos visuales importantes, nadie los verá. Además, puede que el texto no sea legible.
1. Coloque el texto en una zona clara y despejada de la foto
Por ejemplo, una foto de paisaje que muestre un desierto o el cielo, una mesa sin objetos en el centro, un bosque verde... todo depende del tema de su sitio web, del estado de ánimo deseado y de su imaginación. El objetivo es que el texto sea fácilmente legible.
Si colocas el texto en una zona con muchos elementos, dificultarás su lectura. Por tanto, asegúrate de que el tamaño de los elementos esté en armonía con el tamaño de la fuente.
El texto es difícil de leer porque el fondo está ocupado. Portada del sitio web del editor de fotos en línea: pixlr.com
Una foto de portada es un fondo que crea un ambiente particular. Puede amplificar su mensaje o pasar desapercibida.
En definitiva, el objetivo es ayudar al visitante a leer y comprender rápidamente el texto. Supongamos que está diseñando un sitio web para una conferencia. Añades a la portada el título de la conferencia, la fecha, la hora y el lugar. Si el texto se funde visualmente con el fondo y es casi ilegible, el visitante puede simplemente saltárselo, desplazarse hacia abajo y perderse la información importante.
Cuando el texto destaca, una foto bien elegida reforzará el mensaje. Por ejemplo, ponga en la portada una foto de la conferencia del año pasado. La gente podrá ver cómo se organizó el evento, si fue una gran sala con cientos de personas o, por el contrario, un espacio acogedor con unos pocos participantes. Una fotografía puede sustituir a un par de párrafos. En cualquier caso, en primer lugar, la gente debe obtener información esencial sobre la hora y el lugar.
En definitiva, el objetivo es ayudar al visitante a leer y comprender rápidamente el texto. Supongamos que está diseñando un sitio web para una conferencia. Añades a la portada el título de la conferencia, la fecha, la hora y el lugar. Si el texto se funde visualmente con el fondo y es casi ilegible, el visitante puede simplemente saltárselo, desplazarse hacia abajo y perderse la información importante.
Cuando el texto destaca, una foto bien elegida reforzará el mensaje. Por ejemplo, ponga en la portada una foto de la conferencia del año pasado. La gente podrá ver cómo se organizó el evento, si fue una gran sala con cientos de personas o, por el contrario, un espacio acogedor con unos pocos participantes. Una fotografía puede sustituir a un par de párrafos. En cualquier caso, en primer lugar, la gente debe obtener información esencial sobre la hora y el lugar.
Mi objetivo es elegir una imagen que transmita adecuadamente el mensaje. Esto significa que el producto o servicio debe estar representado en la foto, ya sea directamente (interior con sillas en el caso de un taller de muebles) o indirectamente (una hermosa playa para el sitio web de una agencia de viajes). Para elegir una foto relacionada indirectamente con el tema, piense en lo que esperan obtener los clientes o incluya imágenes de los atributos asociados a este tema en particular.
Aquí tiene algunas plantillas creadas por los diseñadores de Tilda. Cada plantilla es un ejemplo de un enfoque diferente para elegir una portada:
Aquí tiene algunas plantillas creadas por los diseñadores de Tilda. Cada plantilla es un ejemplo de un enfoque diferente para elegir una portada:
2. Trabajar con formas sencillas
El texto y la imagen deben complementarse. Por ejemplo, coloque el texto sobre la pared vacía. Un fondo uniforme no comprometerá la legibilidad.
Plantilla Tilda (sección "Contactos")
Cuando los elementos que se repiten en la imagen forman un patrón, puede parecer que llenan todo el espacio formando un fondo homogéneo. Esto no es exactamente así: hay que fijarse en todos los pequeños detalles que crean ruido visual y complican la percepción de la copia. En este caso, puede ser una buena idea oscurecer la imagen de fondo.
El fondo parece uniforme, pero el texto se pierde entre los elementos y resulta ilegible.
3. Coloque el texto en la zona con elementos menos importantes
Cuando el sujeto principal de una foto está situado a la derecha, el texto debe colocarse a la izquierda. Funciona de la siguiente manera: el visitante de un sitio web puede ver claramente la cara de una persona, que es el objeto más significativo de la imagen; los demás detalles son menos importantes.
Si la persona está en el centro de la imagen, no añada texto encima de la cara; es mejor bajarlo más cerca de la zona del cuerpo.
En general, la cara de una persona es el objeto más significativo de la foto. Si la cara está cubierta de texto, los visitantes del sitio web no se sentirán cómodos, ya que no podrán ver el objeto con detalle ni leer el mensaje.
Especificaciones de imagen recomendadas para las fundas Tilda
Formato: jpg
Dimensiones: 1680×900 px
Puntos por pulgada: 72 ppp
Modelo de color: RGB
Tasa de compresión: 10
Dimensiones: 1680×900 px
Puntos por pulgada: 72 ppp
Modelo de color: RGB
Tasa de compresión: 10
La imagen de portada dificulta la lectura del texto. Cómo solucionarlo
Oscurece la imagen con filtros de degradado.
Si la imagen de fondo seleccionada dificulta o impide la lectura de la copia, cúbrela con un filtro: una mayor opacidad del filtro da como resultado un fondo más oscuro.
Si la imagen de fondo seleccionada dificulta o impide la lectura de la copia, cúbrela con un filtro: una mayor opacidad del filtro da como resultado un fondo más oscuro.
Es mucho más fácil leer el texto sobre un fondo contrastado. Sin embargo, procura no pasarte con el oscurecimiento, ya que los objetos de la foto pueden resultar indistinguibles. Fíjate en el brillo original de la imagen para decidir cómo aplicar el degradado: para algunas fotos bastará con un 20%, mientras que otras deben oscurecerse un 70% o más. Prueba distintas opciones.
Para oscurecer el fondo de Tilda, abra el panel Configuración del bloque y cambie el porcentaje de opacidad junto a los campos "Color inicial del filtro" y "Color final del filtro". Si fijas los mismos valores, el oscurecimiento será uniforme. También puedes aumentar la opacidad en la zona inferior para obtener un degradado suave.
Ajustes de tapa en Tilda con 2 ajustes de filtro: Сolor y Opacidad. Cuanto mayor sea el porcentaje de opacidad, más denso será el relleno de color
Oscurecer hace que el fondo parezca demasiado sombrío. Cómo solucionarlo
El oscurecimiento no es adecuado para todas las imágenes. Las imágenes brillantes pueden palidecer o oscurecerse debido al degradado a negro. Puede crearse una atmósfera de tristeza. Elija fotos más oscuras para evitar este efecto.
Otra forma de añadir ambiente a la página web es el entonado. Opta por filtros de color en lugar del negro estándar. Utilice los colores oficiales de la marca para el degradado o elija un color del esquema de colores del sitio web. Otra opción es elegir un tono que coincida con la paleta de colores de la imagen.
Otra forma de añadir ambiente a la página web es el entonado. Opta por filtros de color en lugar del negro estándar. Utilice los colores oficiales de la marca para el degradado o elija un color del esquema de colores del sitio web. Otra opción es elegir un tono que coincida con la paleta de colores de la imagen.
Para crear un degradado de color en Tilda, elija el color para los filtros superior e inferior en el panel Configuración. Puede utilizar un tono único o combinar dos colores diferentes para obtener un efecto duotono. La intensidad del filtro depende de los valores del campo "Opacidad".
Ajustes de color del filtro en Tilda, Plantilla de banda de cubierta
Añadir colores
Puede colorear no sólo el fondo, sino también el texto. Además, puede combinar el tono del fondo y el color del texto al mismo tiempo. Sin embargo, debe tener mucho cuidado para evitar que su sitio web tenga un aspecto chillón y llamativo.
Consejo: elija dos colores y utilice uno como color primario (90%) y otro como color de acento (10%).
Por ejemplo, puede aplicar el degradado amarillo al fondo y añadir texto azul brillante. O cubrir toda la imagen con un filtro verde ácido y superponerle texto naranja. Parece brillante y alegre, así que puede ser una buena opción para una conferencia o una página web de una startup.
Consejo: elija dos colores y utilice uno como color primario (90%) y otro como color de acento (10%).
Por ejemplo, puede aplicar el degradado amarillo al fondo y añadir texto azul brillante. O cubrir toda la imagen con un filtro verde ácido y superponerle texto naranja. Parece brillante y alegre, así que puede ser una buena opción para una conferencia o una página web de una startup.
Utiliza herramientas en línea que te ayuden a elegir el color adecuado para el texto o el fondo.
Coolors es un generador de combinaciones de colores que ayuda a comprobar rápidamente si varios colores combinan bien entre sí.
Materialpalette te ayuda a crear una paleta de colores para material design sugiriendo las opciones de color para el texto principal o el fondo.
ColorHunt ofrece paletas ya preparadas. Para añadir un tono a tu página, copia su código Hex.
Coolors es un generador de combinaciones de colores que ayuda a comprobar rápidamente si varios colores combinan bien entre sí.
Materialpalette te ayuda a crear una paleta de colores para material design sugiriendo las opciones de color para el texto principal o el fondo.
ColorHunt ofrece paletas ya preparadas. Para añadir un tono a tu página, copia su código Hex.
Ideas de diseño de portadas para inspirarse
Puedes hacer portadas blancas, suelen quedar bien. Si tienes una foto en clave alta con iluminación brillante en la que aparece un objeto cautivador, combínala con texto oscuro o de color.
No existe un método universal para seleccionar imágenes. Si encuentras una foto adecuada, intenta visualizarla en la portada: cómo se recortará, dónde se puede colocar el texto, qué partes de la imagen se cubrirán, si los elementos visuales afectan a la legibilidad, si puede ayudar un degradado. Este es otro filtro que ayuda a elegir las fotos.
También compruebo si la portada queda natural en la página. Debe ser coherente con las demás imágenes y con el diseño general. Por eso es mejor seleccionar todas las fotos de la página a la vez.
También compruebo si la portada queda natural en la página. Debe ser coherente con las demás imágenes y con el diseño general. Por eso es mejor seleccionar todas las fotos de la página a la vez.
Las portadas en las que sólo se ve un objeto resultan interesantes. Además, es mucho más fácil combinar el texto con este tipo de imágenes. Imagínese que ha encargado una sesión de fotos profesional y los objetos están situados sobre un fondo neutro: un equipo de sonido o un coche sobre un fondo blanco o gris. Así, combinar texto e imágenes es pan comido.
Comprueba cómo se ve la portada en el móvil. En las pantallas de baja resolución, el diseño de tu web puede ser completamente distinto del que se ve en la versión de escritorio. Si un elemento visual importante queda tapado por el texto, crea dos bloques separados: uno para la vista de escritorio y otro para dispositivos móviles.
Ajusta la posición del texto y las imágenes para ambos bloques. A continuación, utiliza la opción "Visibilidad del bloque en dispositivos" del panel Configuración.
El rango de visibilidad para dispositivos móviles es de 0 a 980 px.
El rango de visibilidad para dispositivos de escritorio es de ≤980 px.
Ajusta la posición del texto y las imágenes para ambos bloques. A continuación, utiliza la opción "Visibilidad del bloque en dispositivos" del panel Configuración.
El rango de visibilidad para dispositivos móviles es de 0 a 980 px.
El rango de visibilidad para dispositivos de escritorio es de ≤980 px.
Breve guía para crear una portada
1
Elija una imagen de fondo que no comprometa la legibilidad: sin elementos importantes ni pequeños detalles en el centro.
2
Coloque el texto sobre una zona lisa y homogénea de la imagen.
3
Si resulta difícil leer el texto debido a los elementos de distracción de la imagen, oscurece el fondo con un degradado.
4
Si la portada parece desordenada debido a un filtro negro, elige una foto diferente o añade un matiz de color a la actual. Un filtro de degradado brillante levantará el ánimo de tu web.
5
Utiliza un color brillante para el título. Junto con los filtros de fondo, esta técnica contribuye a crear la sensación adecuada.
Texto: Nikita Obukhov, Yana Plyushcheva
Edición, diseño, maquetación: Lera Merzlyakova, Ira Smirnova
Ilustraciones: Julia Zass
Edición, diseño, maquetación: Lera Merzlyakova, Ira Smirnova
Ilustraciones: Julia Zass
Si le ha gustado este artículo, compártalo con sus amigos. Gracias ✌️
Véase también:
Libro de texto gratuito sobre cómo diseñar, configurar y ejecutar páginas de destino de alta conversión
Guía práctica gratuita de animación web con ejemplos y técnicas,
y consejos para utilizarlos
