Landing page

CREA UNA LANDING PAGE PARA PROMOCIONAR TU PRODUCTO O SERVICIO
4 de Marzo de 2015

¿QUIÉN SOY?

• Desarrollador Frontend • Desarrollador iOS • Formador imanolteran.com @itermar
[email protected]

WEB, IOS, E-COMMERCE, PUBLICACIONES DIGITALES, FORMACIÓN widdiapps.com @widdiapps [email protected] ȍ
widdiapps

PROGRAMA • INTRODUCCIÓN • ELEMENTOS IMPORTANTES • ESTILOS DE DISEÑO
• PROYECTO. CREACIÓN DE UNA LANDING PAGE

INTRODUCCIÓN

INTRODUCCIÓN ¿QUÉ ES UNA LANDING PAGE?

¿QUÉ ES UNA LANDING PAGE? • Carta de presentación •
Web con un objetivo claro • Puede no ser tu website principal

A.I.D.A. Atención Interés Deseo Acción http://webdesign.tutsplus.com/tutorials/designing-a-landing-page-using-aida-principles--webdesign-7043

INTRODUCCIÓN IMPORTANCIA DE TENER UNA BUENA LANDING PAGE

IMPORTANCIA DE TENER UNA BUENA LANDING • Guiar a los
visitantes hacia nuestro objetivo • Conseguir conversión • Detectar interés de los usuarios • Medir efectividad de nuestras campañas

INTRODUCCIÓN EJEMPLOS DE LANDING PAGES

ELEMENTOS IMPORTANTES

COLORES

TÍTULOS TÍTULOS TÍTULOS Títulos

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

PR€CIO$

CALL TO ACTION

– Imanol Terán “Testimonios”

NEWSLETTER

TÍTULOS Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis PR€CIO$ CALL TO ACTION – Imanol Terán “Testimonios” NEWSLETTER

ESTILOS DE DISEÑO

ESTILOS DE DISEÑO FONDO MULTIMEDIA

FONDO MULTIMEDIA • Más vistoso • Facilita la captación de
atención e interés por parte del usuario • Puede penalizar rendimiento, tiempos de carga…sobre todo en móvil

ESTILOS DE DISEÑO FONDO PLANO

FONDO PLANO • Menos espectacular • Más eﬁciente en términos
de rendimiento • Si tenemos un buen título, puede resultar interesante no tener un fondo que distraiga

ESTILOS DE DISEÑO ANIMACIONES

ANIMACIONES • Útiles para resaltar elementos importantes • Dotan de
“vida” a la landing, a medida que los elementos van apareciendo ⛔️ No abusar de ellas

ESTILOS DE DISEÑO TESTS A/B

A/B TESTING – Wikipedia “..el objetivo es identiﬁcar los cambios
que incrementan o maximizan un resultado determinado (…). Como el propio término indica, se comparan dos versiones (A y B), que son idénticas salvo por una variación que puede afectar al comportamiento del usuario.”

A/B TESTING • Diseñamos dos o más landing diferentes •
Probar la eﬁcacia de un modelo frente a otro • Objetivo —> Obtener más conversión

BUSCAR / ESTUDIAR

ANALIZAR / DECIDIR

ACTUAR / PROBAR

CAMBIAR / ADAPTAR

OPTIMIZAR

PROYECTO

http://tallerlanding.instapage.com

PROYECTO DISEÑO RÁPIDO CON HERRAMIENTAS VISUALES

DISEÑO RÁPIDO CON HERRAMIENTAS VISUALES Rapidez Sencillez Eﬁcacia Personalización Optimización

DISEÑO RÁPIDO CON HERRAMIENTAS VISUALES • Macaw • Invision •
Photoshop • Instapage • UNBOUNCE • PAGEWIZ

PROYECTO HTML Y CSS BÁSICOS

HTML Y CSS BÁSICOS • Base sobre la que se
sustenta una página web • HTML: deﬁnir estructura • CSS: deﬁnir aspecto y ciertos comportamientos como posicionamiento, animaciones…etc.

HTML <html> <head> … </head> <body> … </body> </html>

HTML <html> <head> /* Enlazar CSS */ </head> <body> …
</body> </html>

HTML <html> <head> /* Enlazar CSS */ </head> <body> <header>
/* Navegación, logos… */ </header> <section> /* Contenido*/ </section> <footer> /* Pie de página */ </footer> </body> /* Enlazar JavaScript y código de seguimiento */ </html>

CSS .selector { propiedad: valor; propiedad: valor; }

RECURSOS HTML Y CSS • http://www.codecademy.com/es/tracks/html-css- traduccion-al-espanol-america-latina-clone • https://www.acamica.com/carreras/1/ desarrollador-web
• https://librosweb.es/libro/css/

PROYECTO PLANTILLAS

PLANTILLAS • Nos facilitan enormemente el trabajo • Modelos estándar,
ya probados • Podemos empezar a probar rápidamente • Interesante personalizar para diferenciarnos

http://themeforest.net

PROYECTO INTEGRACIÓN DE PASARELAS DE PAGO

INTEGRACIÓN DE PASARELAS DE PAGO

INTEGRACIÓN DE PASARELAS DE PAGO https://www.paypal.com/es/webapps/mpp/accept-payments-online

INTEGRACIÓN DE PASARELAS DE PAGO https://stripe.com https://plasso.co

GRACIAS Imanol Terán Maruri @itermar [email protected]

Landing page

Landing page

More Decks by Imanol Terán

Other Decks in Business

Featured

Transcript