Al aprender sobre programación, uno puede encontrarse con dos fases distintas
-
Aprender sobre los fundamentos: comienza a explorar la anatomía de un programa de computadora, aprende a pensar en problemas simples en términos de unidades lógicas y comienza a formalizar estas unidades en instrucciones de código. En esta etapa, aprende sobre temas abstractos y práctica simple. Si se hace bien y se le da la cantidad adecuada de tiempo, cualquier persona podrá comprender y escribir 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 básicos de programación es elegir un subdominio de programación (desarrollo web, desarrollo de aplicaciones móviles, sistemas integrados y similares) y comenzar a aprender cómo resolver problemas usando 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 cubrir todas las herramientas, todas las tecnologías y seguir todos los principios. La forma correcta de hacerlo es hacer una buena cantidad de experimentación e investigación. Lo más probable es que solo necesite adquirir un puñado de habilidades y usar una serie de herramientas para comenzar con tareas simples. Una vez que se sienta cómodo en este nivel, puede intentar expandirse a un nuevo conjunto de herramientas y evolucionar constantemente. Siguiendo esta metodología, intentaremos construir una base sólida en el dominio del desarrollo web a través de la exploración de las tecnologías y herramientas utilizadas para construir páginas de destino simples.
En esta publicación de blog, haremos una breve exploración del panorama del desarrollo web frontend, con un enfoque en el desarrollo de la página de destino. Revisaremos una selección de recursos que le recomendamos que consulte para las diferentes partes del desarrollo que puede encontrar. Al final de este artículo, tendrá una idea mucho más clara de cómo construir una página de destino. Mira este video complementario para ver un ejemplo práctico.
Panorama del desarrollo de la página de destino
Una página de destino es un término empleado inicialmente por los expertos en marketing digital para referirse a una página web independiente utilizada con fines de campaña 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, luego "aterriza" en una página web que tiene una rica descripción que combina texto, imágenes, etc. del producto o servicio. La página contiene un botón de compra, que se llama "CTA" (Llamada a la acción) para convertir al visitante en un cliente que paga. 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, conoceremos muchas formas y herramientas que nos permitirán construir páginas de destino que cumplan su función. Es importante mencionar que existen otras consideraciones al construir páginas de destino relacionadas con SEO (Search Engine Optimization). 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, cuando se trabaja con clientes, que 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 y el prototipo de diseño al desarrollador. Puede ser útil tener una fuente confiable de diseños web. Dichas fuentes le permitirán mantenerse al día con las tendencias de diseño, impulsar su creatividad y... ayudarlo a comenzar. Dos de los mejores recursos que puede usar para inspirarse en el diseño de su próximo proyecto son Dribble y Behance.
Regate
Dribble 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 obtener inspiración.
comportamiento
Behance es otra comunidad de diseño popular que puede ayudarlo a encontrar inspiración. Este sitio web ofrece funciones de búsqueda avanzada que le brindan un 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 la nube creativa de Adobe.
Dribbble y Behance son excelentes plataformas para la inspiración del diseño web y no puedes equivocarte con ninguna de las dos. ¡Te animamos a que empieces a explorar diseños y crees el tuyo propio!
Prototipos de diseño
Ahora que se inspiró en el trabajo de diseñadores talentosos, es hora de que comience a crear prototipos del diseño de su página de destino. La creación de prototipos es una fase importante de 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 plétora de soluciones de software que se pueden utilizar para construir prototipos de diseño. De hecho, hay tantos que rápidamente puede convertirse en un desafío evaluar, comparar y elegir una herramienta. Vamos a usar Figma, como lo usan comúnmente los diseñadores de ux/ui. Si desea aprender a usar Figma para la creación de prototipos, puede consultar nuestro curso intensivo en YouTube justo 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 basada en navegador y alojada en la nube. 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
La tipografía y los iconos de estilo son algunas de las características más sencillas de usar 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 coincida 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 iconos basado en CSS y Less. A partir de 2020, Font Awesome fue utilizado por el 38% de los sitios que usan secuencias de comandos de fuentes de terceros, colocándolo en el segundo lugar después de Google Fonts (Wikipedia).
Font Awesome es compatible con muchas bibliotecas frontend 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 convirtieron 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 incrustaciones de fuentes en sitios web. Ofrece integraciones perfectas y un alto nivel de flexibilidad y personalizaciones.
Implementa tu página de aterrizaje
Ahora que ha creado su página de destino, ¡es hora de compartirla con todos! El paso final 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 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á aprendiendo a codificar, es probable que haya 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 característica llamada Páginas de GitHub, que es un servicio de hospedaje para páginas web públicas que pueden usar individuos y organizaciones. Todas las páginas se alojan 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 simple y eficiente de alojar sus proyectos de forma gratuita si ya está utilizando Github para el control de versiones.
Vercel
Vercel es una alternativa a las páginas de Github que ofrece una amplia gama de características y configuraciones. Viene con una versión gratuita. Recomendamos Vercel para cualquier persona con un proyecto complejo, ya que brinda una excelente experiencia de desarrollador y ofrece un excelente soporte. Code Labs Academy lo usa como parte de su proceso de desarrollo.
Conclusión
Este artículo introdujo herramientas útiles para desarrollar una página de destino. ¡De nuevo! La mejor manera de aprender es haciendo, por lo que le recomendamos encarecidamente que pruebe estas herramientas en su propio proyecto personal. Una gran parte del trabajo de un desarrollador es investigar las soluciones existentes para los problemas que encuentran y evitar reinventar la rueda. Lo mejor de la comunidad de programación es su naturaleza colaborativa. ¡Te animamos a aprovechar el trabajo que otros han compartido y a contribuir con el tuyo!
Y si desea obtener más información sobre el diseño de sitios web geniales y su creación, consulte nuestros Bootcamps de Diseño de UX/UI y Desarrollo web.
