40 páginas de contacto para inspirarte a crear una perfecta

Diseño de páginas de contacto

Invita a los visitantes de tu sitio web a que te contacten con una página de contacto que se sienta como una cálida sonrisa. Echale un ojo a estos ejemplos de páginas de contacto y llénate de inspiración para crear la tuya.

Un sitio web es uno de los vehículos más importantes de marketing y branding que puede tener un negocio y es una de las principales herramientas que los consumidores y clientes (presentes y potenciales) usarán ya sea para encontrar tus detalles de contacto o para ponerse en contacto contigo. Entonces, dinos, ¿qué tan fácil es para los visitantes de tu sitio contactarte?

Una página de contacto no es un obstáculo; es una entrada. Inspírate viendo la manera en que estas 40 páginas de contacto lo han logrado.

01. Sé Amigable y servicial

No hay nada mejor que un gran “Hola”. Infinum da justo en el clavo en lo que respecta a la amabilidad y buena disposición con una página de “contáctanos” fácil de usar y de leer. Pregunta, ‘What can we help you with?’ (¿En qué podemos ayudarte?) y dirige a los usuarios para que hagan clic en 'Join us' o ‘Hire us’ (‘Únete’ y ‘Contrátanos’) o proporciona un email para atender cualquier otro asunto.

01.-Infinum-tb-800x0

Infinum

02. Ubica las oficinas globales

Tool expresa fuerte y claro que tiene oficinas en Los Ángeles, Nueva York y Francia. La tipografía en negrita identifica claramente sus ubicaciones globales con direcciones, números telefónicos y enlaces a un mapa.

02.-Tool-tb-800x0

Tool

03. Simplifica el proceso de comunicación

La página de contacto de Production Locations también usa tipografía en negrita para identificar las diversas razones por las que los visitantes del sitio web pudiesen necesitar ponerse en contacto con la compañía. Cada línea es una indicación que dirige la consulta al departamento correcto, simplificando el proceso de comunicación.

03.-Production-Locations-tb-800x0

Production Locations

04. Personalízala con una imagen

Ponle un rostro al nombre y deja que las personas conozcan con quien están hablando realmente, al igual que lo hace la página de contacto de Bert Timmermans. Es personal y el diseño es claro y fácil de usar.

04.-Bert-TImmermans-tb-800x0

Bert Timmermans

05. Anima a los visitantes para que digan hola

Hazles saber a los visitantes del sitio web que realmente quieres saber de ellos e incluye un llamado a la acción que diga ‘Di Hola’. Este llamado a la acción es apropiado para Hello Innovation ya que su nombre comparte el mismo mensaje, pero la compañía ha ido más allá al incluir ‘hola’ en la dirección de email. ¿Puedes resistirte la tentación de decir hola?

05.-Hello-Innovation-tb-800x0

Hello Innovation

06. Incluye una imagen relevante

La página de contacto de Design Museum presenta una imagen de un teléfono antiguo, lo cual es relevante por ser una herramienta para la comunicación y un objeto en la colección del museo.

06.-Design-Museum-tb-800x0

Design Museum

07. Que sea memorable

Ponte algo estrafalario con las imágenes o el texto para que los visitantes del sitio web no te olviden. Si bien puede que esto no funcione para todos los negocios o marcas, esta imagen de los jóvenes en Molamil es una que sin lugar a dudas quedará grabada en tu mente.

07.-Molamil-tb-800x0

Molamil

08. Mantente dentro de la marca

Asegúrate de que la apariencia y la sensación de la página de contacto coincidan con la marca. Este sitio elegante y profesional de Boone Selections tiene una paleta de colores sutiles, tipografía moderada, y un diseño con desplazamiento para reflejar que el negocio se dedica a la importación de vino. Es una buena práctica mantener cada elemento consistente desde los primeros momentos en que estás creando la identidad visual de tu marca.

08.-Boone-Selections-tb-800x0

Boone Selections

09. Muéstrales a las personas cómo encontrarte

La página de This Also presenta un mapa de Downtown Brooklyn para mostrar la ubicación de la oficina. Desplázate hacia abajo de la página y verás las líneas relevantes del metro, junto con la dirección física y direcciones de email.

09.-This-Also-tb-800x0

This Also

10. Da una instrucción

Aunque Deux Huit Huit no da realmente ningún detalle de contacto en esta página, facilita y fomenta que los usuarios del sitio web se pongan en contacto con la compañía. ‘Say hello ☺’ es un llamado a la acción amigable seguido por una notificación, por así nombrarla, que dice ‘Dear Deux Huit Huit’ (‘Estimado Deux Huit Huit’, en español).

10.-Deux-Huit-Huit-tb-800x0

Deux Huit Huit

11. Incluye horarios de atención al público

Si tu sitio web es para un restaurante – como Le Mugs –, una tienda, un museo o algún otro negocio que esté abierto en horas seleccionadas del día o la semana, incluye esos detalles en la página  de contacto para que los visitantes sepan a qué horas pueden hablar y evitar toparse con las puertas cerradas.

11.-Mugs-tb-800x0

Le Mugs

12. Usa una fuente de exhibición

Panache tiene una fuente llamativa para ‘Travaillons Ensemble,’ un llamado a la acción que fomenta la colaboración y el trabajo conjunto. La estética general es ligera y bien condensada y los detalles de contacto incluyen email, dirección, teléfono, formulario de contacto y enlaces a las redes sociales.

12.-Panache-tb-800x0

Panache

13. Usa una paleta de colores llamativos

La paleta de colores negro, blanco y amarillo para la página “contáctanos” de Sponge es llamativa y dinámica. El amarillo se usa como un color de acento para resaltar las partes importantes de información como la ubicación, la dirección y el email.

13.-Sponge-tb-800x0

Sponge

14. Incorpora una ilustración llena de personalidad

Haz que la página de contacto sea más interesante con una ilustración que exprese el estilo y/o la personalidad de la marca y sitio web. Legwork Studio tiene una ilustración de medios mezclados de un hombre con una cabeza de lobo y un testimonio que brota del teléfono.

14.-Legwork-Studio-tb-800x0

Legwork Studio

15. Usa una forma simple

La página “contáctanos” de Giampiero Bodini es simplemente un rectángulo blanco que sobresale del hermoso fondo ilustrado en blanco y negro. La forma actúa como mediador entre el fondo y los detalles de contacto para hacer que la información sea fácil de leer.

15.-Giampiero-Bodini-tb-800x0

Giampiero Bodini

16. Incluye un formulario de contacto para una fácil comunicación

Un formulario de contacto facilita que los visitantes del sitio web se pongan en contacto y exhortan a los usuarios a introducir la información necesaria. Así como lo hace QED Group, puedes solicitar tan poca o tanta información como sea requerida, pero recuerda que demasiadas indicaciones o instrucciones podrían desalentar a los usuarios de participar del todo.

16.-Qed-Group-tb-800x0

QED Group

17. Usa una paleta de un solo color

La página de contacto de Joseph A Avoue es un conjunto de elegantes letras blancas dentro del contorno de un círculo sobre un fondo rosa. Es simple, elegante y fácil de leer.

17.-Joseph-A-Avoue-tb-800x0

Joseph A Avoue

18. Sé gracioso

Sácales una risa a los visitantes con una página de contacto que sea divertida o irreverente, como Bio-Bak. El mensaje ‘Insert letter combinations’ (‘Inserta combinaciones de letras’, en español) les informa a los visitantes en dónde escribir mientras que las instrucciones les dicen cómo escribir: ‘press some keys on your keyboard to form all kinds of works, like duck or pirate’ (presiona algunas de las teclas en tu teclado para formar toda clase de palabras, como pato o pirata, en español).

18.-Bio-Bak-tb-800x0

Bio-Bak

19. Rellena los espacios en blanco

El formulario de contacto disfrazado de Anakin les pide a los visitantes poner su nombre, su dirección de email y su consulta. De hecho, es igual a cualquier otro formulario de contacto, sin embargo, los cuadros de texto no son visibles e invita a los visitantes del sitio web a rellenar los espacios en blanco.

19.-Anakin-tb-800x0

Anakin

20. Personaliza tus oficinas globales

CPB Group tiene oficinas alrededor del mundo y su página de contacto presenta una imagen icónica de cada ubicación junto con sus detalles de dirección, enlace de email, y la hora, temperatura y elevación de cada lugar. Desplázate hacia abajo de la página para ver que todas las oficinas ofrecen hermosas imágenes de las ciudades alrededor del mundo.

20.-CPB-Group-tb-800x0

CPB Group

21. Presenta el negocio

Preséntales a los visitantes del sitio web el negocio o la marca – a ti mismo (si es relevante hacerlo) – con un amigable párrafo de apertura que brinde un poco más de información que la que normalmente encuentras en páginas de contacto. Hello Monday les habla a los visitantes sobre su misión y los invita a ponerse en contacto para decir hola.

21.-Hello-Monday-tb-800x0

Hello Monday

22. Agrega una película en el fondo

Moodboard es un estudio cinematográfico y el fondo de su página “contáctanos” es una película en primer plano melancólica y sofisticada de letras siendo mecanografiadas en una máquina de escribir.

22.-Moodboard-tb-800x0

Moodboard

23. Usa una cuadrícula para la estructura

Esta página “contáctanos” bien estructurada para Urban Influence usa una cuadrícula para organizar el espacio y la información. Los detalles de contacto están en la parte superior izquierda; un formulario de contacto en la parte superior derecha; y un mapa que abarca la mitad inferior de la cuadrícula.

23.-Urban-Influence-tb-800x0

Urban Influence

24. Procura que sea sencilla

Esta página de contacto para Deda es bastante legible y sencilla con un llamado a la acción en la parte superior, un formulario de contacto a la derecha (con indicaciones), y detalles de contacto en burbujas de diálogo a la derecha.

24.-Deda-tb-800x0

Deda

25. Da un paso a la vez

La página de contacto de Simple As Milk está formateada paso a paso con cada página, instrucción y llamado a la acción siendo tan amigable como el anterior. El tono es conversacional y la compañía transmite la sensación de estar tan interesada en el visitante del sitio web así como el visitante en la compañía.

25.-Simple-as-Milk-tb-800x0

Simple As Milk

26. Agrega atajos de contacto

Anticipa la razón por la que los visitantes del sitio web podrían ponerse en contacto y agrega enlaces sencillos en los cuales puedan hacer clic, justo como lo hizo White Frontier. Estos pueden dirigirlos a una sección de preguntas frecuentes o funcionar como un enlace de email que los llevará directamente a la persona relevante.

26.-White-Frontier-tb-800x0

White Frontier

27. Intégrala con el resto del sitio web

El sitio web de Robby Leonardi es como si fuese un juego de computadora por el que los usuarios navegan siguiendo al personaje principal. La pantalla final es la página de contacto,  y el formulario de contacto está completamente integrado con el diseño de todo el sitio web.

27.-Robby-Leonardi-tb-800x0

Robby Leonardi

28. Agrega una foto de equipo

Muestra al equipo con una foto, como en la página de contacto de Online Department. Esto hace que la comunicación y el proceso de consulta sean mucho más personales para los visitantes del sitio web.

28.-Online-Department-tb-800x0

Online Department

29. Usa el espacio negativo

Al igual que Design Museum, Beta Tataki ha incluido una imagen de un teléfono en el fondo de su página “Contacto”. La estructura de la página saca provecho del espacio negativo (o espacio blanco) con texto colocado en un área en blanco de la imagen para no inhibir la legibilidad.

29.-Beta-Tataki-tb-800x0

Beta Tataki

30. Crea una imagen con tipografía

Pauline Osmont crea una impresionante imagen en negro, dorado y plateado con el llamado a la acción ‘Contact Me’ (‘Contáctamente’, en español). Desplázate hacia abajo de la página y verás un formulario de contacto bien posicionado y fácil de leer.

30.-Pauline-Osmont-tb-800x0

31. Sostén un letrero

Igual que Mark Jaworkski Studios, considera integrar una imagen de ti mismo o un miembro de equipo como si estuviese sosteniendo un letrero o un trozo de papel con los detalles de contacto.

31.-Mark-Jaworski-tb-800x0

Mark Jaworski Studios

32. Muestra tus enlaces de redes sociales

Este tema de WordPress llamado Retro Portfolio tiene una fuente retro en negrita que encaja con su nombre y estilo. Tiene muchos enlaces obvios hacia las distintas redes sociales y la frase ‘I am social’ (‘Soy sociable’, en español) le da un toque más accesible.

32.-Retro-Portfolio-tb-800x0

Retro Portfolio

33. Haz referencia a las formas tradicionales de comunicación

Desafortunadamente, los tiempos de escribir cartas y tarjetas postales han terminado. Pero eso no quiere decir que no haya razón para hacer referencia a aquellos días en el estilo y las imágenes de la página de contacto. La página de Lionway presenta tres tarjetas postales con un formulario de contacto evocando la idea de que el visitante está escribiendo una tarjeta postal.

33.-Lionways-tb-800x0

Lionways

34. Que el texto sea algo pícaro

El estudio de diseño sueco Snask muestra un poco de humor pícaro en su página “contáctanos” con frases como ‘For filth, candy or gossip call…’ y ‘Walk until the pink sign’ (‘Para obscenidades, dulces o chimes...’ y ‘Camina hasta que veas la marca rosa’, respectivamente, por sus traducciones al español), al igual que toques juguetones que abordan la razón para contactar: ‘Re-branding your airline?’ (‘¿Quieres cambiar la marca de tu aerolínea?’, en español).

34.-Snask-tb-800x0

Snask

35. Muestra algo de personalidad

El estudio de diseño Resn es igual de descarado, sin embargo, usas imágenes en lugar de texto para expresar la irreverencia en su página “contáctanos”. Los miembros del equipo desfilan en la parte inferior de la pantalla con cabezas de animales y juguetes y computadoras de los años 80.

35.-Resn-tb-800x0

Resn

36. Diseña un infográfico

Comunica tus detalles de contacto a los visitantes del sitio web con un infográfico, como lo hace Quicksprout. Describe cuál es la mejor forma de ponerse en contacto o usa un organigrama de comunicación, sólo asegúrate de que sea fácil de leer, relevante y preciso. Crear una infografía paso a paso puede ser muy sencillo.

36.-Quicksprout-tb-800x0

37. Anima al equipo

Crea imágenes animadas o tipo caricaturas de los miembros del equipo. Melonfree tiene al Diseñador y al Desarrollador (The Designer y The Developer, respectivamente) presentados como caricaturas para familiarizar a los visitantes del sitio web sobre quiénes son.

37.-Melonfree-tb-800x0

Melonfree

38. Usa una forma transparente

Agrega transparencia a una forma, como la página de contacto de Indofolio, para que los detalles de contacto puedan leerse sin perturbar el efecto visual o el tono de la imagen de fondo.

38.-Indofolio-tb-800x0

Indofolio

39. Produce el efecto a mano alzada

La página de contacto de Mario Petrone tiene el efecto visual de haber sido dibujada a mano. El texto rosa y rojo y los dibujos sobre un papel cuadriculado tiene una apariencia y sensación personal y alegre.

39.-Mario-Petrone-tb-800x0

Mario Petrone

40. Simplemente usa un cuadro desplegable

La página “contáctanos” de Spokes Pedicabs ni siquiera es un página. Tan sólo haz clic en el enlace superior derecho y el cuadro naranja se despliega con un grande y llamativo ‘contact us’  junto con todos los detalles necesarios.

40.-Spokes-Pedicabs-tb-800x0

Spokes Pedicabs

¿Qué dices? ¿Tienes ganas de compartir algo?

Twitter Ads info and privacy

Es tu turno

La página de contacto debería ser una de las páginas más fáciles de entender de tu sitio web. Una manera estupenda de probar su facilidad de uso es pedirles a amigos, familiares y colegas que la prueben. Pídeles comentarios sobre:

  • ¿Qué tan rápido encuentran el enlace a la página de contacto?
  • ¿Qué tan fácil pueden leer los detalles de contacto en la página de contacto?
  • ¿El formulario de contacto y todos los enlaces incluidos funcionan?
  • ¿El número de teléfono, la dirección de email, la ubicación y los horarios de oficina son correctos? Basta tener un dígito incorrecto para perder un negocio potencial.
  • Por último, ¿la apariencia y la sensación de la página “contáctanos” realmente los hace querer contactarte?

Debería, porque para esto está ahí.