Cómo diseñar la mejor página en construcción: 20 casos prácticos maravillosos

páginas en construcción

No hay problema si tu producto no está listo todavía.

Estás totalmente seguro que será todo un éxito, pero quizás te falten unos días o semanas para arreglar todos los detalles. Lo bueno es que hay algo que puedes hacer en el ínterin para ir llamando la atención de las personas, una página “en construcción”, conocidas en inglés como Coming Soon, padrísima. A pesar que hay otros medios que te dan la oportunidad de captar el interés, esta clase de páginas es la mejor vía para informar a los usuarios que algo grande se avecina y que la espera vale la pena.

En este artículo, aprenderás como 20 equipos diseñaron asombrosas páginas en construcción que generaron interés, registros y conversiones futuras.

1. Bezar: Ofrece un incentivo

Bezar es mercado de diseño colorido, creado por uno de los fundadores de Fab.com.

Aporte: Cuando se trata de diseñar páginas en construcción, considera un ofrecer un incentivo. En el caso de Bezar, ellos ofrecieron dar $10 a la persona que diera su email y refiriera a un amigo. Igualmente, su página contaba con un call to action para que vendedores y marcas se pusieran en contacto con ellos.

opl-big12-tb-800x0

Imagen a través de Onepagelove

2. Google Calendar: Invita a la interacción

Uno pensaría que por ser Google no necesitarían una página en construcción, pero hasta ellos tuvieron que usarla con su producto, Google Calendar. En este caso, el sitio se diseñó para anunciar la mencionada app, la cual venía con todo un nuevo conjunto de funciones.

Aporte: En lugar de captar emails, el equipo de Google Calendar decidió pedirles a los usuarios que vieran un video como su call to action. Puedes verlo aquí, y una vez que lo hagas, reconocerás que posiblemente fue la mejor forma de usar el tiempo de las personas. Trata de hacer lo mismo preguntándote, ¿cómo puedo convencerlos de que estén pendientes por el lanzamiento del producto?

opl-big9-tb-800x0

Imagen a través de Onepagelove

3. Smashing Conference New York: Aprovéchate de los colores del branding

Smashing Magazine, una famosa publicación de diseño, lanzó esta página para invitar a los visitantes potenciales a registrarse si querían más información. Como podrás ver, el sitio no incluía una lista de los oradores o un calendario, bueno, no en este punto, al menos, pues el objetivo era captar el interés.

Aporte: Una fuerte paleta de colores con unos pocos tonos llamativos puede ser muy útil. Smashing Magazine decidió ir con varios azules y un rojo de realce para crear esta ilustración. Al aplicar este método, puedes dar a entender el branding general del producto/servicio/evento y si le das un vistazo a su paquete de invitados para esta conferencia, te darás cuenta que mantienen la paleta de colores, indicando que sí son los colores de su marca.

opl-big30-tb-800x0

Imagen a través de Onepagelove

4. Blogin: Vende los beneficios

En 2013, el equipo de Blogin decidió crear una plataforma de blogging para la industria corporativo y en esta landing page, su objetivo principal era captar los emails de aquellos interesados en probarla.

Aporte: Escribe el texto de la página con cuidado. Sí, es recomendable que incluyas un logotipo y un call to action, pero los usuarios quieren saber exactamente por qué este producto/servicio es importante. ¿Cómo tuvo éxito Blogin con esta página? Colocando verbos que determinen la narrativa de la marca: “Create a company blog” (Crea un blog para tu compañía), “Share news with the team” (Comparte noticias con el equipo), “Boost company culture” (Mejora la cultura de la compañía). Al aplicar esta técnica, Blogin se centró más en las personas y menos en las características del producto, por lo que tuvo un gran impacto con su audiencia objetivo.

BlogIn-big-tb-800x0

Imagen a través de Onepagelove

5. MyOwnCorks: Envía un mensaje consistente

Si eres un amante de los vinos, quizás MyOwnCorks se convierta en tu página favorita. Su objetivo es propiciar un motor de búsqueda completo que se centre solo en vinos, poniendo a tu disposición una herramienta para descubrir nuevos sabores y experiencias.

Aporte: En esta página en construcción, MyOwnCorks usó uno de los principios más fundamentales de la conducta del consumidor: la repetición. Haz una prueba, cuenta las veces que encuentras las palabras discover (descubrir), rate (calificar) y share (compartir). Te garantizo que es más de una vez. Si bien muchos piensan que las cosas solo tienen que decirse una vez, el ser redundante puede ayudarte a remarcar un punto, sobre todo ahora, cuando nuestra atención es tan dividida.

1150MOC-tb-800x0

Imagen a través de Onepagelove

6. LandApart: Crea una comunidad exclusiva

LandApart es ese punto en el que la economía colaborativa se encuentra con el camping y los eventos al aire libre. En su página en construcción, la cual sigue disponible aquí, ellos instan a las personas que registren para recibir una invitación y en caso que ya tengas una, bueno, solo tienes que iniciar sesión.

Aporte: Agregar un nivel de exclusividad similar puede hacer que tu producto/servicio sea más atractivo. Hay muchas empresas a las cuales quizás no les sirva esta estrategia de invitaciones privadas, pero vale la pena considerarla si crees que funcionará con tu producto o servicio.

LandApart_—_Invite-tb-800x0

7. Tapster: Deja claro el mensaje

Tapster es una app que permite ordenar prácticamente de todo; comida, taxi, limpieza de ropa, reservación en un salón de belleza, un masaje, comprar en el súper, y todo con un solo botón. Por su parte, la página en construcción les ofrece a los usuarios la oportunidad de ganar un premio si son la primera persona en usar la app.

Aporte: Lo creas o no, el minimalismo puede enviar un claro mensaje. En este caso, la landing page de Tapster utiliza fuentes ligeras, líneas delicadas y una paleta minimalista para llamar la atención al mensaje más importante “One tap order for everything” (“Ordena todo con un toque”).

Tapster_-_BetaList-tb-800x0

8. Slidescamp: Céntrate en tu punto de venta principal

El objetivo del sitio web Slidescamp es ser una biblioteca de mil diapositivas listas para su uso.

Aporte: Incluso cuando ya tienes una promesa de marca fuerte (esa frase breve en la parte superior de cualquier landing page), es recomendable analizar qué palabras son las más importantes y destacarlas para expresarlas de una manera que llame la atención, así como Slidescamp hizo con “1000 slides” (1000 diapositivas).

SlidesCamp_-_BetaList-tb-800x0

Imagen a través de Beta.list

9. Themezilla: Conoce a tu audiencia y gánate su confianza

Estando en este mundo del diseño y los sitios web, es muy probable que hayas escuchado de Themezilla, uno de los proveedores de plantillas para WordPress más grandes de la industria. Allá por el 2012, el diseño que ves a continuación fue la página en construcción que usaron.

Aporte: ¿Ves cómo inmediatamente te relacionas y sientes una cierta confianza con la página? Eso es gracias al tono casual que utilizan con expresiones como “Super awesome” (Padrísimo), “Nuff said” (Eso es todo), “that sucks” (mala onda) y otras expresiones que quizás no quizás no sirvan para todas las marcas. Cuando tu producto es nuevo y nadie lo conoce, la confianza puede ser una gran influencia.

opl-big1-tb-800x0

Imagen a través de Onepagelove

10. Cellar: Invita a la interacción desde temprano

Regresamos al vino, aunque con otra compañía esta vez, Cellar, quienes se dirigen a una clase distinta de amantes del vino, proporcionando un sistema para aquellos que coleccionan botellas en su casa y necesitan una forma para organizarlas.

Aporte: El equipo de Cellar tomó una decisión interesante con su página; además de pedir el email de las personas, ellos incluyeron una pequeña casilla para llenarla en caso que uno estuviese interesado en probar la versión beta de su sistema. Piénsalo bien: Son amantes del vino que ya están dando su email, ¿no crees que sea inteligente llevarlo un paso más allá y pedirles que prueben el producto?

coming_soon_site-tb-800x0

Imagen a través de Dribbble

11. Cloudresize: Céntrate en lo simple

Lamentablemente este servicio basado en la nube ya no está disponible, pero en su momento ofrecía lecciones valiosas sobre la venta de productos complejos.

Aporte: ¿Cómo plasmar un producto que tenga una versión comprimida de una imagen a través de servidores en la nube? Con creatividad, exactamente lo que hizo esta compañía. Marian Pop, la diseñadora de esta página en construcción, incluyó un fragmento del código en el que dejaba claro que lo único que se tenía que hacer era agregar un texto a la etiqueta <img> para que la imagen fuera más pequeña, algo que puede entender cualquier persona que haya tratado con HTML. ¿El producto que intentas vender es complejo? Piensa en cómo puedes simplificarlo visualmente e intenta de minimizar la cantidad de texto que usas para explicarlo.

folio1-tb-800x0

Imagen a través de Dribbble

12. Twelve24: Introdúcete

Lo entendemos, quizás tu producto/servicio no está listo simplemente porque es un sitio web y no has podido terminarlo o rediseñarlo. Si esta situación te describe, una página en construcción probablemente sea exactamente lo que necesites para informar a las personas que vendrá algo pronto.

Aporte: Agrégale diversión a tu página mostrando los miembros encargados de llevar a cabo este sitio/producto/servicio. Aquí, con Twelve24, lo que ves es un grupo cuyos miembros decidieron aparecer enredados, creando una página en construcción muy colorida.

tw24-tb-800x0

Imagen a través de Dribbble

13. The Pitch: No aísles ninguna parte de tu audiencia

The Pitch es un podcast que busca tener fundadores de startups que quieran presentar sus ideas a inversionistas potenciales.

Aporte: Lo sofisticado pero simple de su página abarca tres audiencias distintas: personas que escuchan podcast, los entrevistados y los inversionistas, colocando un call to action para cada uno de estos grupos. Si tu producto/servicio está dirigido a varios grupos, trata de llegar a todos cuando hagas esta página.

The_Pitch_Podcast-tb-800x0

14. Creative Market: Haz que registrarse sea la única opción

En el 2012, Creative Market estaba a punto de lanzar un nuevo mercado para creadores de diseños manuales.

Aporte: Esta página en construcción ofrecía toda clase de beneficios a aquellos que se registraran de primero, con artículos gratis y $5 en créditos, entre algunos de ellos. Además, al encerrar el recuadro del call to action de esta manera llama la atención al centro de la página. Cuando cuentes con un campo y botón para registrarse, lo mejor es que orientes la mirada de las personas directamente hacia esos elementos.

151-tb-800x0

15. Visage: Aviva tu identidad visual

Visage es una herramienta de visualización de datos que le permite a las marcas crear toda clase de gráficos hermosos.

Aporte: En esta entrevista, el diseñador responsable de la página en construcción de Visage explica que su objetivo principal fue “preservar la consistencia de la marca con el producto de Visage y mantener las fuentes, colores y movimiento consistente en todo el diseño.” La identidad visual de una marca es super importante y tienes que asegurarte de reflejarla desde el comienzo. Esta clase de páginas es un gran medio para hacerlo.

visage-font1-tb-800x0

Imagen a través de Onepagelove

16. Duolingo: Mantén a los usuarios al tanto de tu progreso

Duolingo es una plataforma online gratis para aprender idiomas con un diseño de página en construcción bastante interesante. Antes de lanzar un nuevo curso, ellos presentan un proceso de producción en el que toman su símbolo, un búho, y lo llevan desde la “Incubación” hasta lo “Estable”.

Aporte: Esta metáfora visual es una técnica inteligente de llamar la atención al progreso de tu lanzamiento. Piensa en tu producto y si hay una forma creativa en la que puedas mostrar los pasos que faltan para el lanzamiento, no dudes en aplicarla.

dribbble-tb-800x0

Imagen a través de Dribbble

17. Fundrise: Gana ímpetu y no pierdas la atención

Fundrise es una plataforma de crowdfunding (similar a Kickstarter) que les da la oportunidad a muchas personas de financiar negocios.

Aporte: Agregar un conteo puede obligar a tu equipo a que se dediquen más para cumplir con la fecha de lanzamiento, aunque eso no tiene por qué ser malo, ¡sobre todo si te ayuda a hacer un progreso! En este caso, la cuenta atrás aumento el ímpetu del proyecto, haciendo que las personas se pusieran más ansiosas por el lanzamiento y de la misma manera en la que benefició a Fundrise, te puede ayudar con tu proyecto.

splash-page-dribbble-tb-800x0

Imagen a través de Dribbble

18. MovingWaldo: Dale a tus usuarios una guía clara

MovingWaldo es una compañía canadiense que ofrece asistencia cuando vayas a mudarte. En este sentido, su landing page está dirigida a dos grupos: empresas e individuales.

Aporte: La jerarquía tipográfica te puede ayudar a expresar un mensaje claro, así como lo ves con los grandes encabezados que orientan al usuario en la página de MovingWaldo: “Here’s a description of what we can do” (Esta es una descripción de lo que podemos hacer”) y “Here’s how to reach us”, siendo dos señales que todos pueden entender.

Waldo_Maquette-tb-800x0

Imagen a través de Dribbble

19. SquidChef: Agrega algo de humor

Así como la #11 de esta lista, SquidChef ya no está disponible, aunque eso no detiene al sentido de humor de la compañía de inspirarnos.

Aporte: Lo que ves en la página simplemente es gracioso y vuelvo a repetir, quizás no sea algo que funcione para cualquier producto/servicio, pero sin duda alguna le agrega a la página a una personalidad, que en la actualidad está muy escasa. ¿Por qué no agregarle un poco de humor a la espera por tu producto?

SquidChef-tb-800x0

Imagen a través de Hongkiat

20. Dropbox: Sigue las tendencias

Si bien las páginas en construcción de esta lista ostentan un gran diseño, no olvidemos donde todo empezó: la página prácticamente de puro texto de Dropbox.

Aporte: Cuando se crea una página en construcción, la distribución y el diseño van de la mano. Es inútil pasar semanas diseñando una página que nadie verá y con lo mucho que los usuarios le prestan atención al diseño, es igual de inútil lanzar un sitio monótono y esperar que convierta. Afortunadamente, Dropbox creó esta página en construcción antes que todo el mundo se preocupara por el diseño.

png_base64fc91768b4f49766-tb-800x0