Al aprender sobre programación, uno puede encontrarse con dos fases distintas.
-
Aprender los fundamentos: comienzas a explorar la anatomía de un programa de computadora, aprendes a pensar en problemas simples en términos de unidades lógicas y comienzas a formalizar estas unidades en instrucciones de código. En esta etapa, aprendes sobre temas abstractos y prácticas sencillas. Si se hace correctamente y se le da la cantidad de tiempo adecuada, cualquiera podría adquirir un conocimiento sólido de la comprensión y escritura de programas lógicos simples utilizando el lenguaje de su elección.
-
La segunda fase, que la mayoría de la gente encuentra un poco más desalentadora, consiste en aprender un ecosistema de desarrollo: el siguiente paso natural después de adquirir conocimientos de programación simples es elegir un subdominio de programación (desarrollo web, desarrollo de aplicaciones móviles, sistemas integrados y similares). ) y comience a aprender cómo resolver problemas utilizando esa plataforma específica. La dificultad aquí es que ya no se trata de cubrir un conjunto de fundamentos, practicar cada concepto y repetir. A menudo es imposible abarcar todas las herramientas, todas las tecnologías y seguir todos los principios. La forma correcta de hacerlo es realizar una buena cantidad de experimentación e investigación. Lo más probable es que sólo necesite adquirir unas cuantas habilidades y utilizar una serie de herramientas para comenzar con tareas sencillas. Una vez que se sienta cómodo en este nivel, puede intentar expandirse a un nuevo conjunto de herramientas y evolucionar de manera constante. Siguiendo esta metodología, intentaremos construir una base sólida en el ámbito del desarrollo web mediante la exploración de las tecnologías y herramientas utilizadas para crear páginas de destino simples.
En esta publicación de blog, haremos una breve exploración del panorama del desarrollo web frontend, centrándonos en el desarrollo de páginas de destino. Revisaremos una selección de recursos que le recomendamos consultar para las diferentes partes del desarrollo que pueda encontrar. Al final de este artículo, tendrá una idea mucho más clara de cómo crear una página de destino. Mire este video complementario para ver un ejemplo práctico.
Panorama de desarrollo de páginas de destino
Una página de destino es un término inicialmente empleado por los expertos en marketing digital para referirse a una página web independiente utilizada con fines de campañas de marketing y publicidad. El concepto es bastante simple: un visitante interesado en un producto o servicio proporcionado por una empresa hace clic en un enlace de dicho producto y luego "aterriza" en una página web que tiene una descripción rica que combina texto, imágenes, etc. del producto o servicio. La página contiene un botón de compra, que se denomina "CTA" (llamado a la acción) para convertir al visitante en un cliente de pago. Como es de esperar, crear una buena experiencia de usuario es fundamental para tener una buena tasa de conversión.
A lo largo de este artículo, aprenderemos muchas formas y herramientas que nos permitirán crear páginas de destino que cumplan su función. Es importante mencionar que existen otras consideraciones al crear páginas de destino relacionadas con SEO (optimización de motores de búsqueda). El SEO se tratará en futuros talleres.
Inspiración de diseño
Ya sea que tenga experiencia en la creación de páginas de destino o recién esté comenzando, encontrará que a menudo es difícil determinar exactamente cómo desea que se vea su sitio web. También suele ocurrir que, cuando se trabaja con clientes, estos no saben exactamente qué diseño quieren para su página web. Por lo general, un diseñador web especializado en este tipo de trabajo entregará la maqueta del diseño y el prototipo al desarrollador. Puede resultar útil tener una fuente confiable de diseños web. Estas fuentes le permitirán mantenerse actualizado con las tendencias de diseño, impulsar su creatividad y… ayudarlo a comenzar. Dos de los mejores recursos que puede utilizar para inspirarse en el diseño de su próximo proyecto son Dribbble y Behance.
Regatear
Dribbble es probablemente el recurso más popular en el espacio del diseño web. Es una comunidad de diseñadores que comparten su trabajo para mejorar sus habilidades, ayudarse unos a otros y obtener comentarios constructivos. Contiene una amplia gama de diseños en casi cualquier tema o campo realizados por personas creativas de todo el mundo, junto con comentarios de la comunidad, lo que lo convierte en un lugar ideal para inspirarse.
comportamiento
Behance es otra comunidad de diseño popular que puede ayudarte a encontrar inspiración. Este sitio web ofrece funciones de búsqueda avanzada que le brindan fácil acceso al trabajo específico que le interesa, utilizando palabras clave, campos y paleta de colores. También es importante tener en cuenta que Behance es parte de Adobe y se integra perfectamente con Adobe Creative Cloud.
Dribbble y Behance son excelentes plataformas para inspirarse en el diseño web y no puedes equivocarte con ninguna de ellas. ¡Te animamos a que empieces a explorar diseños y crees el tuyo propio!
Diseño de prototipos
Ahora que se inspiró en el trabajo de diseñadores talentosos, es hora de que comience a crear un prototipo del diseño de su página de destino. La creación de prototipos es una fase importante en la creación de una página de destino. Se puede definir como el proceso experimental en el que implementas ideas en estructuras visibles, para que puedas refinarlas y validarlas con tu equipo o cliente. Al final de la fase de creación de prototipos, tendrá un diseño listo para cobrar vida en su página de destino.
Existe una gran cantidad de soluciones de software que se pueden utilizar para construir prototipos de diseño. De hecho, hay tantas que rápidamente puede resultar un desafío evaluar, comparar y elegir una herramienta. Usaremos Figma, como lo usan comúnmente los diseñadores de ux/ui. Si desea aprender a utilizar Figma para la creación de prototipos, puede consultar nuestro curso intensivo en YouTube aquí.
figura
Figma es una herramienta de diseño todo en uno que facilita a los diseñadores y desarrolladores de UX crear y colaborar en prototipos de diseño en una plataforma alojada en la nube basada en navegador. . Figma pone énfasis en la simplicidad y la facilidad de uso.
La interfaz de Figma le permite crear elementos y diseñarlos controlando la apariencia del texto, las cuadrículas y otros componentes en la página. Ofrece una amplia gama de complementos complementarios, como Autoflow para mostrar flujos de usuarios, Figmotion para animaciones y muchos más.
Iconos y fuentes
Los iconos de tipografía y estilo son algunas de las funciones más sencillas de utilizar para mejorar el aspecto de cualquier página web. Desea utilizar la fuente y los íconos correctos en su página de destino para que coincidan con la idea general que desea comunicar. Afortunadamente, es fácil encontrar y aplicar una gran selección de fuentes e íconos usando Font Awesome o Google Fonts.
Fuente impresionante
Font Awesome es un conjunto de herramientas de fuentes e íconos basado en CSS y Less . A partir de 2020, Font Awesome fue utilizado por el 38% de los sitios que utilizan scripts de fuentes de terceros, ubicándolo en segundo lugar después de Google Fonts (Wikipedia).
Font Awesome es compatible con muchas bibliotecas de interfaz, como Bootstrap, para la que se creó inicialmente. Font Awesome hace que la integración de fuentes e íconos en una página web sea tan fácil como incluir un enlace CDN. Esta facilidad de uso, junto con su gran selección de fuentes e íconos, la convirtió en la solución más popular en el espacio.
Fuentes de Google
Google Fonts es un servicio web gratuito de código abierto ofrecido por Google para incrustar fuentes en sitios web. Ofrece integraciones perfectas y un alto nivel de flexibilidad y personalizaciones.
Implemente su página de destino
Ahora que ha creado su página de destino, ¡es hora de compartirla con todos! El último paso es implementar su página de destino utilizando una solución de proveedor de alojamiento. Github Pages y Vercel son nuestras mejores opciones. Son los más populares y los más fáciles de usar. Vercel es la herramienta presentada en nuestro taller, pero Github Pages funciona de manera similar.
Páginas de Github
Si actualmente estás aprendiendo a codificar, es probable que hayas oído hablar de Github. Github es una plataforma para compartir y alojar código como parte de la comunidad de código abierto. Ofrece una función llamada Páginas de GitHub, que es un servicio de alojamiento para páginas web públicas que pueden utilizar individuos y organizaciones. Todas las páginas están alojadas gratuitamente en el dominio github.io de GitHub, o en un nombre de dominio personalizado si tiene uno. Las páginas de GitHub son una forma sencilla y eficiente de alojar tus proyectos de forma gratuita si ya estás usando Github para el control de versiones.
Vercel
Vercel es una alternativa de Github Pages que ofrece una amplia gama de características y configuraciones. Viene con una versión gratuita. Recomendamos Vercel a cualquier persona con un proyecto complejo, ya que ofrece una excelente experiencia para el desarrollador y ofrece un excelente soporte. Code Labs Academy lo utiliza como parte de su proceso de desarrollo.
Conclusión
Este artículo presentó herramientas útiles para desarrollar una página de destino. ¡De nuevo! La mejor manera de aprender es haciendo, por lo que te recomendamos encarecidamente que pruebes estas herramientas en tu proyecto personal. Una gran parte del trabajo de un desarrollador es investigar las soluciones existentes a los problemas que encuentra y evitar reinventar la rueda. Lo mejor de la comunidad de programación es su naturaleza colaborativa. ¡Te animamos a aprovechar el trabajo compartido por otros y a contribuir con el tuyo propio!
Y si desea obtener más información sobre cómo diseñar sitios web interesantes y crearlos, consulte nuestro Diseño UX/UI y Desarrollo web ¡Campamentos de entrenamiento!
¡Conviértete en un profesional de la codificación a tu propio ritmo! Únase al [Bootcamp en línea a tiempo parcial] de Code Labs Academy (https://codelabsacademy.com/) y mejore sus habilidades en codificación. ¡Ajuste el aprendizaje a su horario y comience su viaje hacia la tecnología hoy!
