Como construí y administro Components UI [parte 1]

Cuando decidimos iniciar un proyecto realmente no sabemos cómo comenzar o qué herramientas y servicios utilizar. Esta es la lista de productos, servicios y herramientas que usé para construir y ahora administrar Components UI. He agregado y eliminado algunas herramientas desde el comienzo de este viaje por lo que la lista podría verse diferente en el futuro (por ejemplo: al comienzo de Components UI, comencé usando Carrd, Gumroad y consejos del libro electrónico Landing Page Hot Tips Ebook.

La mayoría de las herramientas que utilizo son servicios pagados. Aunque hay opciones gratuitas disponibles, decido pagarlas porque me ahorran tiempo y ofrecen un gran valor por lo que pago mensualmente. Me permiten administrar Components UI de manera muy simple, con procesos automatizados y sin demasiados gastos generales. A veces, "gratis" no significa realmente gratis, solo significa que estás pagando con "vida", lo que quiere decir que estás pagando con tu tiempo.

Algunos de los servicios y productos incluyen descuentos cuando te registras y algunos de ellos son enlaces de afiliados, lo que significa que obtengo una comisión cuando te registras y sin costo adicional para ti.

Carrd: Creador de páginas de destino

Al comienzo de Components UI usé Carrd para diseñar, construir y publicar mis páginas de destino. No tienes que preocuparte por el hosting, el monitoreo del sitio y todo lo relacionado con la administración de un servidor privado.

La plataforma Carrd es muy versátil por lo que se puede utilizar con otros servicios: cuando se creó la página de destino, agregué la integración Gumroad para poder aceptar pagos y entregar los productos digitales. Después de eso, agregué Fathom Analytics para poder monitorear de dónde vienen mis clientes (referencias) y trabajar en el desarrollo de canales de marketing. Finalmente agregué Convertkit para comenzar con el marketing por correo electrónico.

No tienes que hacer esto pero recientemente comencé a alojar las páginas de destino para mis proyectos en mi propio servidor usando Digital Ocean. Todavía uso Carrd para diseñar y construir las páginas de destino pero cuando termino de construir, exporto los activos (HTML, CSS, etc.) y los alojo en mi propio servidor.

Por qué me encanta Carrd:

• Restricciones: tienes que ser creativo y construir cosas simples con Carrd. "Simple" no significa "fácil" o "barato", significa eliminar el desorden innecesario para lograr tu objetivo (en el caso de Components UI: conseguir clientes)
• Configuración avanzada: puedes agregar componentes complejos y funcionalidad a tus proyectos de Carrd con un poco de código. Así es como comenzó uno de mis proyectos (Build UI).
• Precio: El precio frente al valor entregado es asombroso. Estoy en el plan Pro Plus (el más caro) y comienza en $ 49 USD por año.
• Varios sitios: puedes tener varios sitios para varios proyectos en la misma cuenta. Incluso puedes utilizar la plataforma si tienes una agencia o si eres un profesional independiente que realiza diseño web y alojamiento para sus clientes.

Components UI: creador de páginas de destino

Una vez que tengo una idea para un nuevo proyecto, normalmente especifico el MVP (producto mínimo viable) y comienzo a construir la página de destino del proyecto en Carrd. Para iniciar este proceso utilizo Components UI y Build UI. Estas dos herramientas me permiten diseñar y construir rápidamente una nueva página de destino sin la molestia de comenzar con un lienzo en blanco. Sí, son mis propios productos. Sí, los uso para la mayoría de mis proyectos. Y sí, Build UI se creó utilizando la galería de Componentes UI.

No voy a entrar en demasiados detalles sobre por qué me encanta Components UI y Build UI, ya que son mis productos. Puedes leer más sobre ellos y lo que otros dicen sobre ellos aquí:

• Components UI: Una colección de componentes y plantillas prediseñados diseñados para Carrd.co
• Build UI: una compilación de tutoriales paso a paso para ayudarlo a construir componentes complejos utilizando elementos de Carrd y pequeños fragmentos de código

Gumroad: Pasarela de pago

Utilizo Gumroad para vender mis productos digitales: funcionan como proveedor de hosting (alojan los archivos digitales que se entregan a mis clientes), como pasarela de pago (aceptan y gestionan pagos de forma segura) y como proveedor de entrega (envían acceso a los archivos digitales una vez realizada la compra).

También puedes usar Gumroad para tu página de destino pero prefiero Carrd porque es más poderoso y permite una mayor personalización.

Por qué amo Gumroad:

• Son la pasarela de pago por lo que manejan todos los temas relacionados con el pago de forma segura
• Gumroad realiza automáticamente la entrega de contenido para tus productos digitales. Esto significa: solo tienes que cargar los archivos (PDF, videos, etc.) que tu cliente va a recibir y Gumroad los aloja y los entrega a sus clientes una vez que los compran
• No necesitas saber cómo codificar para configurar tus productos
• Obtienes análisis (ventas y vistas) de tus productos
• Posibilidad de configurar afiliados: personas que promocionarán tus productos y obtendrán una comisión cada vez que alguien compre utilizando su enlace de afiliado. Puedes leer más sobre afiliados en Components UI aquí.

Puedes usar Gumroad de forma gratuita pero para Components UI pago su cuenta premium que comienza en USD $ 10 / mes. Con la cuenta Premium obtienes una reducción en las tarifas que Gumroad cobra por cada venta y obtienes publicaciones y flujos de trabajo ilimitados para tus clientes.

Aunque es bueno tener flujos de trabajo en Gumroad, yo utilizo secuencias y automatizaciones Convertkit para mis clientes y suscriptores. Lea más sobre cómo uso Convertkit aquí.

Hover: Registro de dominio

Utilizo Hover para comprar y administrar la mayoría de mis dominios. El servicio y su plataforma son fáciles de usar, brindan un gran soporte e incluyen cosas como Protección de privacidad WhoIs de forma gratuita (esto se agrega por un costo adicional en la mayoría de los proveedores de dominio). También puedes comprar una dirección de correo electrónico para tu dominio (ejemplo: email@tudominio.com) desde $ 5 USD al año.

Si deseas utilizar Hover para tu próximo proyecto haz clic aquí y obtendrás $ 2 USD de descuento en tu primera compra. Este es un enlace de afiliado así que obtengo una comisión sin costo adicional para ti si decides utilizar el servicio.

Ghost: Gestión de contenido

Para escribir y publicar el blog de Components UI utilicé Ghost como mi sistema de gestión de contenido (CMS). Ghost tiene una versión pagada que comienza desde $ 29 USD pero yo uso la versión de código abierto que es gratuita pero que tienes que alojar en tu servidor personal (más sobre eso aquí).

Ghost se ha convertido en una herramienta muy poderosa que también puedes usar para tener membresías, suscripciones y contenido exclusivo.

Digital Ocean: Hosting

El blog de Components UI está alojado en Digital Ocean. Sus precios comienzan en $ 5 USD y obtienes una "instalación con 1 clic" para configurar tu blog con Ghost.

Si deseas utilizar Digital Ocean para su blog o algún otro proyecto haz clic aquí y obtendrás $ 100 en crédito durante 60 días. Este es un enlace de afiliado así que obtengo una comisión sin costo adicional para usted si decide registrarse.

Fathom Analytics: Analíticos

Los analíticos te ayudan a rastrear de dónde provienen tus visitantes, cuánto tiempo pasan en tu sitio, cómo se convierten en clientes y más. Hay muchas opciones gratuitas que puedes usar pero no respetan la privacidad de tus usuarios y algunos de ellos usan trucos desagradables para rastrearlos. Una solución más sencilla es utilizar una herramienta de analíticos centrada en la privacidad como Fathom Analytics.

Yo personalmente uso Fathom Analytics en mis sitios web y funciona a la perfección. Para configurarlo en tu sitio web  simplemente copia un código, agrégalo en tu sitio web y listo. Esto es incluso más fácil si lo utilizas de la mano con Carrd.

Por qué me gusta Fathom Analytics:

• No es necesario que agregues uno de esos molestos banners de cookies en su sitio
• Puedes tener múltiples sitios en tu cuenta de Fathom Analytics
• El proyecto está construido por creadores independientes
• Diseño simple y sorprendente
• Obtendrás monitoreo del sitio web de forma gratuita (es decir, recibes alertas cuando tu sitio web esté inactivo)
• Configura dominios personalizados para tus analíticos para evitar bloqueadores de contenido

Una última cosa que me gusta de Fathom Analytics es que puedes usarlo para clientes si eres una agencia o un freelancer con clientes. Dado que puedes tener varios sitios en su cuenta, puedes optar por compartir un panel específico con personas específicas y ofrecerlo como un servicio.

Si quieres probar Fathom haz clic aquí y obtén un crédito de $ 10 USD. Este es un enlace de afiliado así que obtengo una comisión sin costo adicional para usted si decide registrarse.

Convertkit: Marketing con email

El correo electrónico es una forma directa de mantenerse en contacto con tus clientes o clientes potenciales. Personalmente uso Convertkit para mis productos ya que tiene un hermoso diseño y es fácil de usar. Puedes configurar automatizaciones y secuencias para convertir clientes potenciales en clientes.

Puedes ser realmente creativo con las automatizaciones y secuencias de Convertkit para crear un embudo para tus clientes potenciales. Como ejemplo: yo lo uso para entregar las guías gratuitas “10 días de Carrd” y “Una semana de mejor diseño” automáticamente. Solo tienes que suscribirte para recibir la guía y Convertkit se encarga del envío de los correos electrónicos. Una vez que un suscriptor termina con la guía, lo configuro para que inicie otra secuencia y presentar uno de mis productos si aún no lo ha comprado. Como no quiero presentarle a alguien que ya haya comprado el producto uso Convertkit para asignar etiquetas y segmentos.

Todo esto se hace automáticamente sin que yo estorbe o pierda tiempo administrando cada correo electrónico. Solo configuro la automatización, incluyo la (s) secuencia (s) dentro de las automatizaciones y las activo. Suena complejo al principio pero Convertkit está tan bien diseñado que puedes ver visualmente los pasos en tus automatizaciones.

Por qué amo Converkit:

• Gran diseño y fácil de usar
• Potentes automatizaciones y secuencias
• Increíble precio por el valor que aporta a mis proyectos
• Puedes conectarlo a Gumroad para configurar automatizaciones como ventas cruzadas (por ejemplo: "Compraste mi producto. Tal vez quieras comprar este otro producto" o el clásico "¿Quieres papas fritas con eso?") O upsell (ejemplo: actualice a una versión más cara del producto que acaba de comprar)

Si deseas probar Convertkit hazclic aquí y comienza con una prueba gratuita. También puedes obtener una cuenta gratuita pero sin automatizaciones ni capacidades de secuencias. Este es un enlace de afiliado así que obtengo una comisión sin costo adicional para ti si decides registrarte.

Recursos adicionales

Landing Page Hot Tips Ebook

Diseñar un sitio web es difícil. No sabes por dónde empezar o diseñas algo que no se ve bien pero no puedes entender por qué. Sé que esto es cierto porque me ha pasado.

Un gran recurso que me ha ayudado a mejorar mis diseños proviene de Rob Hope y su Landing Page Hot Tips Ebook. El Ebook cuenta con 100 pequeñas lecciones para implementar en tus páginas de destino. Cada consejo incluye algunos párrafos, referencias visuales y recursos relacionados. Las características adicionales incluyen: Ebook en PDF  (180 páginas), Audiolibro (54 minutos), listas de verificación de lanzamiento interactivas y más.

Es seguro decir que vuelvo a revisar el contenido de este libro electrónico cada vez que comienzo un nuevo proyecto en línea.

Si estás interesado en aprender más sobre cómo diseñar una gran página de destino o mejorar los superpoderes de diseño de su sitio web, puedes obtener el libro electrónico con un descuento haciendo clic → aquí. Este es un enlace de afiliado así que obtengo una pequeña comisión sin costo adicional para ti si decides comprar el libro electrónico.

Iconos de código abierto

Estas son algunas de las bibliotecas de iconos que utilizo con frecuencia. Hay muchas opciones pagadas disponibles pero creo que estas son suficientes para mis necesidades:

• https://material.io/resources/icons/: Iconos de código abierto. Aquí puedes encontrar íconos básicos hechos por Google
• Remix Icon - Biblioteca de iconos de código abierto: Remix Icon es un conjunto de iconos de código abierto de estilo neutro elaborados para diseñadores y desarrolladores

Ilustraciones

Estas ilustraciones se han vuelto muy populares últimamente. Son geniales para poner en marcha tu proyecto pero si los usas sin ninguna personalización, corres el riesgo de parecer mucho a cualquier otro sitio web.

• https://undraw.co: ilustraciones de código abierto para cualquier idea. Aquí puedes encontrar impresionantes ilustraciones para tus proyectos
• https://www.openpeeps.com: Biblioteca de ilustraciones dibujadas a mano. Aquí puedes encontrar ilustraciones para usar con usuarios, avatares y más

Conectando las herramientas

Ahora que las herramientas están definidas y configuradas, quiero explicar brevemente cómo las conecto entre sí para diseñar los sistemas y procesos que impulsan Components UI. Esta parte resultó ser una publicación de blog en sí misma así que haz clic aquí si deseas leer la Parte 2 de esta publicación: Conexión de las herramientas: cómo administro Components UI (parte 2).