Hacer webs con Carrd: recursos y ejemplos
Llevo tiempo usando Carrd para proyectos personales y es asombroso ver todo el ecosistema que se está creando alrededor, así como la capacidad de algunas personas de exprimir las limitaciones de las herramientas.
Si ya conoces algunas cosas, en este otro post te cuento algunos trucos. https://medium.com/livink-offsite/hacer-webs-con-carrd-algunos-trucos-9082e5f3b2fe
La buena noticia es que sin tener ni idea de HTML o CSS con Carrd podrás crear webs bastantes pintonas. La noticia regular es que tiene una ligera curva de aprendizaje y que puede que te desespere un poco entender cómo sacarle partido a los componentes. No hay noticia mala porque la verdad es que no se puede pedir más a una herramienta que te permite tener una web funcionando, con dominio propio y con certificado SSL por 1,32 €/mes.
Al final del post tienes recursos para aprender Carrd a fondo y/o para olvidarte de aprender y comprar directamente los componentes. Iré añadiendo información conforme la vaya encontrando. Al final me sirve a mí también para hacer mis webs en Carrd.
Me gusta mucho Carrd, la verdad, se pueden hacer cosas extremadamente funcionales y su coste es ridículo, y me encantaría tener tiempo para hacer esos cursos. Si te mola el rollo Carrd hace tiempo que me gustaría tener un grupo de conversación para comentar hacks y trucos. Si te apetece escríbeme.
Al final te dejo las webs que yo he hecho en Carrd y que son los proyectos en los que estoy trabajando ahora mismo.
No me enrollo más. Voy con la lista algunos de los recursos más útiles y algunas de las webs más interesantes que he recopilado.
Una web barata, rápida y pintonta
Si lo quieres es tener una web funcionando en pocos minutos, y no te importa no darle tu impronta (tipografía, colores, etc.) lo más recomendable es irse a la sección de plantillas y elegir una.
Solamente tendrás que cambiar los textos, subir tus propias fotos y darle a publicar. La interfaz es extremadamente sencilla. Para tener algo funcionando y público no está nada mal.
Si buscas algo más sofisticado aquí van algunos ejemplos en los que inspirarte. Me paro en aquellas que tienen algo destacable. Al final añado otro montón más y otros recursos útiles.
Thinkbox
Una consultora/agencia/estudio de diseño enfocados en marketplace y en herramientas no code. Me gusta como han resuelto la imposibilidad de crear el clásico navbar, rediseñando el footer.
Everything Marketplaces
Everything Marketplace es una comunidad de profesionales relacionados con los marketplaces. Entiendo que sería algo similar a Sin Oficina. La comunidad funciona sobre Slack (al igual que Sin Oficina). Lo que ves aquí no es la comunidad sino la página de entrada o bienvenida a la comunidad. Y si la observas podrás apreciar que contiene todos los apartados típicos de un saas. Si navegas verás que hay bastantes apartados aunque en realidad todo es una misma página dónde se ha hecho un uso muy efectivo de enlaces ancla.
Finalmente, el acceso a la comunidad se hace a través de la integración con Stripe Checkout que ofrece el propio Carrd.
Fundamentals Studio
Otra agencia de desarrollo, esta vez dedicada a Shopify. Parece un folio en blanco. Sencilla, clara y concisa.
Muazzim
Un portfolio de proyectos que cumple visualmente. Los segundos niveles de información ya no están en Carrd sino en Notion y en Medium. Los subdirectorios probablemente estén redireccionados a través del hosting.
The Banksy Database
Página web de presentación de una base de datos en formato app, de todas las obras de Banksy. Genial uso de la galería, uno de los componentes de Carrd para mostrar imágenes.
Simon D James
Página web personal de Simon, que parece ser músico. La parte derecha (con su foto) es fija y hacer scroll down lo que se va desplazando es la parte izquierda (zona negra).
Japan by River Cruise
¡Qué fantasía!. Japan by River Cruise es la web de un podcast, que no he escuchado.
Abajo a la derecha se puede ver el widget de Buy Me A Coffe. Carrd permite mostrar widgets flotantes insertando o embebiendo scripts.
Positext
Una web sencilla con 4 secciones. Los botones abren formularios en Airtable.
Newsletter OS
Página de producto casi perfecta. Medium no me deja incluir la captura.
Te dejo el link https://newsletteros.com/
TinyJar
TinyJar es una web para unir en un único sitio la gestión de todas tus donaciones. Lo que vemos es su página de inicio. Los pagos están gestionados con GumRoad, que tiene integración directa en Carrd.
Otras que tengo anotadas
- Crytal Chen — Portfolio — www.crystalhsc.com
- Anaptyxe — Agencia — https://anaptyxe.com/
- Playing Card Mockups — Diseños de traseras de naipes para que los uses en tus fotos. Es una adaptación de uno de las plantillas originales de Carrd — https://playingcardmockups.com/
- SaasHook — Landing de acceso a recurso — Introduces tu email en el campo de formulario y te redirecciona a una página de Notion que tiene una tabla de recursos — https://saashook.co/
- Whizzoe — Portfolio — https://whizzoe.com/
- DPlus — directorio de ofertas de trabajo. Hecha con Carrd + Airtable — https://dplusp.org/
- AlxAndrws. Me gustó como ejemplo para hacer una “hire me web” https://alxandrws.com/. Sencilla y visualmente fácil de entender.
Como ves hay dominios .com, .co, .org, .co.uk., .es. Esto no supone un problema. La configuración es bastante sencilla.
Investigando para este texto encontré otros repositorios de webs en Carrd que no he podido investigar a ver qué tenían de especial.
Otros recursos para acelerar el desarrollo
Después de intentar hacer tú mismo tus webs en Carrd es probable que quieras, previo pago, acelerar un poco el proceso. Aquí te dejo algunos recursos para ello
Components UI
Es presuntamente, una colección de componentes para Carrd. Extremadamente útil para acelerar el proceso de construcción con componentes complejos, aunque reconozco que no tengo claro si estás comprando el componente o un tutorial para hacerlo tú.
Hasta dónde yo sé Carrd te permite enviar y recibir plantillas si pagas un plan PRO, pero en ningún sitio dice que se pueda traficar con componentes. Seguiré investigando y actualizaré la información.
Drrac
Plantillas de Carrd hechas por terceros a módico precio
Recursos para aprender
Y bueno, si después de esto te resulta complejo o quieres sacarle el máximo partido pues aquí tienes un par de recursos para aprender, que no he probado
Course of Carrd
Web con plantillas, tutoriales y vídeos para crear webs en Carrd.
Carrd Tutorials
Es la misma persona que ha hecho Drrac. El tipo sabe lo que hace. Este producto es un acceso de por vida a un tutorial con vídeos explicándote cómo editar templates. Ligeramente diferente al siguiente aunque probablemente incluya cosas similares.
https://gumroad.com/l/Carrdfixes
How To Build Carrd Sites
De nuevo, el mismo tipo. Este curso tiene buena pinta, la verdad. Es un curso con 18 vídeos en los que te enseña a hacer webs con Carrd, parte por parte.
https://gumroad.com/l/free-carrd-course
Proyectos en los que estoy trabajando
AmpleBlank
Con Ample Blank estamos desarrollando una línea de mobiliario modular y configurable que viene con garantía de recompra.
Hicimos la web en Carrd para mostrar el producto. Con esta web intentamos captar tráfico para preguntar a la gente cosas sobre el modelo, pero fue un desastre. Seguimos dándole vueltas. Si te gusta la idea danos feedback ¡por favor!
Escribiendo este artículo y repasando algunas webs veo que tengo mucho margen de mejora.
Brands Beats
Brands Beats es un directorio con todas las marcas DTC/DNVB de España y Portugal, filtrables por etiquetas. Ya tengo recopiladas y etiquetadas más de 600, de moda, complementos, joyería, mobiliario y cosas de hogar.
Hice la landing en Carrd mientras desarrollamos la web, que estará hecha en Algolia si todo sale bien.
Si te gusta este proyecto y quieres comentarme algo, ¡hazlo por favor!
La única pega que tiene Carrd, por lo visto, es que no posiciona muy bien. Es una de las razones por las que no he cambiado la web de LIVINK (http://livink.es/) que sigue siendo un WordPress, aunque es candidata ideal pues es más simple que ver llover.
Por último te dejo mi link de afiliado de Carrd.
