Ao aprender sobre programación, pódese atopar dúas fases distintas
-
Coñecer os fundamentos: comeza a explorar a anatomía dun programa informático, aprende a pensar problemas sinxelos en termos de unidades lóxicas e comeza a formalizar estas unidades en instrucións de código. Nesta fase, aprende sobre temas abstractos e prácticas sinxelas. Se se fai ben e se lle dá o tempo adecuado, calquera persoa poderá comprender e escribir programas lóxicos sinxelos utilizando a linguaxe da súa elección.
-
A segunda fase, que a maioría da xente considera un pouco máis desalentadora, consiste na aprendizaxe dun ecosistema de desenvolvemento: o seguinte paso natural despois de adquirir coñecementos sinxelos de programación é escoller un subdominio de programación (desenvolvemento web, desenvolvemento de aplicacións móbiles, sistemas integrados e similares). ) e comezar a aprender sobre como resolver problemas usando esa plataforma específica. A dificultade aquí é que xa non se trata de cubrir un conxunto de fundamentos, practicar cada concepto e repetir. Moitas veces é imposible cubrir todas as ferramentas, todas as tecnoloxías e seguir todos os principios. A forma correcta de facer isto é facer unha boa cantidade de experimentación e investigación. É probable que só necesites adquirir un puñado de habilidades e utilizar unha serie de ferramentas para comezar con tarefas sinxelas. Unha vez que esteas cómodo neste nivel, podes tentar expandirte a un novo conxunto de ferramentas e evolucionar de forma constante. Seguindo esta metodoloxía, trataremos de construír unha base sólida no dominio do desenvolvemento web mediante a exploración das tecnoloxías e ferramentas utilizadas para construír páxinas de destino sinxelas.
Nesta entrada do blog, faremos unha breve exploración do panorama do desenvolvemento web frontend, centrándonos no desenvolvemento da páxina de destino. Pasaremos por unha selección de recursos que recomendamos que consultes para as diferentes partes do desenvolvemento que podes atopar. Ao final deste artigo, terás unha imaxe moito máis clara de como construír unha páxina de destino. Mira este vídeo complementario para ver un exemplo práctico.
Paisaxe de desenvolvemento da páxina de destino
Unha páxina de destino é un termo empregado inicialmente polos expertos en mercadotecnia dixital para referirse a unha páxina web independente utilizada para fins de mercadotecnia e campañas publicitarias. O concepto é bastante sinxelo: un visitante interesado nun produto ou servizo proporcionado por unha empresa fai clic nunha ligazón do devandito produto e, a continuación, "aterra" nunha páxina web que ten unha descrición rica que combina texto, imaxes, etc. do produto ou servizo. A páxina contén un botón de compra, que se chama "CTA" (Call To Action) para converter o visitante nun cliente que paga. Como podes esperar, crear unha boa experiencia de usuario é fundamental para ter unha boa taxa de conversión.
Ao longo deste artigo, coñeceremos moitas formas e ferramentas que nos permitirán crear páxinas de destino que cumpran o seu papel. É importante mencionar que hai outras consideracións á hora de construír páxinas de destino relacionadas co SEO (Search Engine Optimization). O SEO cubrirase en futuros workshops.
Inspiración de deseño
Tanto se tes experiencia na creación de páxinas de destino como se só comezas, descubrirás que moitas veces é difícil determinar exactamente como queres que o teu sitio web se vexa. Tamén adoita suceder, cando traballan con clientes, que non saben exactamente que deseño queren para a súa páxina web. Normalmente, a maqueta e o prototipo do deseño serían entregados ao desenvolvedor por un deseñador web especializado neste tipo de traballos. Pode ser útil ter unha fonte fiable de deseños web. Tales fontes permitiranche estar ao día das tendencias de deseño, impulsar a túa creatividade e... comezar. Dous dos mellores recursos que podes usar para inspirarte no deseño do teu próximo proxecto son Dribbble e Behance.
Regate
Dribbble é probablemente o recurso máis popular no espazo de deseño web. É unha comunidade de deseñadores que comparten o seu traballo para mellorar as súas habilidades, axudarse mutuamente e obter comentarios construtivos. Contén unha ampla gama de deseños en case calquera tema ou campo feitos por persoas creativas de todo o mundo, xunto cos comentarios da comunidade, o que o converte nun lugar ideal para inspirarse.
Behance
Behance é outra comunidade de deseño popular que pode axudarche a atopar inspiración. Este sitio web ofrece funcións de busca avanzadas que che proporcionan un fácil acceso a traballos específicos que che interesan, utilizando palabras clave, campos e paleta de cores. Tamén é importante ter en conta que Behance forma parte de Adobe e se integra perfectamente coa nube creativa de Adobe.
Dribbble e Behance son excelentes plataformas para inspirarse en deseño web e non te podes equivocar con ningunha. Animámosche a que comeces a explorar deseños e a que creas o teu!
Prototipado de deseño
Agora que te inspiraches no traballo de deseñadores talentosos, é hora de que comeces a crear prototipos do deseño da túa páxina de destino. A creación de prototipos é unha fase importante da construción dunha páxina de destino. Pódese definir como o proceso experimental no que implementas ideas en estruturas visibles, para que poidas refinar e validalas co teu equipo ou cliente. Ao final da fase de creación de prototipos, terás un deseño que está listo para cobrar vida na túa páxina de destino.
Hai unha infinidade de solucións de software que se poden usar para construír prototipos de deseño. De feito, hai tantos que axiña pode resultar difícil avaliar, comparar e escoller unha ferramenta. Imos usar Figma, xa que adoitan usar ux/ui designers. Se queres aprender a usar Figma para crear prototipos, podes consultar o noso curso intensivo en YouTube aquí.
Figma
Figma é unha ferramenta de deseño todo en un que facilita aos deseñadores e desenvolvedores de UX a creación e colaboración en prototipos de deseño nunha plataforma aloxada na nube baseada en navegador. . Figma fai fincapé na sinxeleza e facilidade de uso.
A interface de Figma permítelle crear elementos e estilolos controlando a aparencia do texto, cuadrículas e outros compoñentes na páxina. Ofrece unha ampla gama de complementos complementarios, como Autoflow para mostrar os fluxos de usuarios, Figmotion para animacións e moitos máis.
Iconas e fontes
As iconas de tipografía e estilo son algunhas das funcións máis sinxelas de usar para elevar o aspecto de calquera páxina web. Quere usar o tipo de letra e as iconas correctas na súa páxina de destino para que coincidan coa idea xeral que quere comunicar. Afortunadamente, é fácil atopar e aplicar unha gran selección de fontes e iconas usando Font Awesome ou Google Fonts.
Font Awesome
Font Awesome é un conxunto de ferramentas de fontes e iconas baseado en CSS e Less . A partir de 2020, o 38 % dos sitios que usan scripts de fontes de terceiros utilizou Font Awesome, situándoo no segundo lugar despois de Google Fonts (Wikipedia).
Font Awesome é compatible con moitas bibliotecas de frontend, como Bootstrap, para a que se fixo inicialmente. Font Awesome fai que a integración de fontes e iconas nunha páxina web sexa tan sinxela como incluír unha ligazón CDN. Esta facilidade de uso, xunto coa súa gran selección de fontes e iconas convertérono na solución máis popular do espazo.
Fontes de Google
Google Fonts é un servizo web gratuíto e de código aberto que ofrece Google para incorporar fontes en sitios web. Ofrece integracións perfectas e un alto nivel de flexibilidade e personalizacións.
Implementa a túa páxina de destino
Agora que creaches a túa páxina de destino, é hora de compartila con todo o mundo. O paso final é implementar a túa páxina de destino mediante unha solución de provedor de hospedaxe. Github Pages e Vercel son as nosas mellores opcións. Son os máis populares e máis fáciles de usar. Vercel é a ferramenta introducida no noso obradoiro, pero Github Pages funciona dun xeito similar.
Páxinas de Github
Se estás aprendendo a codificar, é probable que escoitases falar de Github. Github é unha plataforma para compartir e hospedar código como parte da comunidade de código aberto. Ofrece unha función chamada Páxinas de GitHub, que é un servizo de hospedaxe para páxinas web públicas que poden ser utilizadas por persoas e organizacións. Todas as páxinas están aloxadas libremente no dominio github.io de GitHub ou nun nome de dominio personalizado se tes un. As páxinas de GitHub son unha forma sinxela e eficiente de aloxar os teus proxectos de xeito gratuíto se xa estás usando Github para o control de versións.
Vercel
Vercel é unha alternativa de Github Pages que ofrece unha ampla gama de funcións e configuracións. Vén cunha versión gratuíta. Recomendamos Vercel para quen teña un proxecto complexo, xa que é unha excelente experiencia para desenvolvedores e ofrece un gran soporte. Code Labs Academy utilízao como parte do seu proceso de desenvolvemento.
Conclusión
Este artigo presentou ferramentas útiles para desenvolver unha páxina de destino. De novo! A mellor forma de aprender é facendo, polo que te animamos encarecidamente a que probes estas ferramentas no teu proxecto persoal. Unha gran parte do traballo dun programador consiste en investigar as solucións existentes aos problemas que atopan e evitar reinventar a roda. O gran da comunidade de programación é a súa natureza colaborativa. Animámosvos a que aproveitedes os traballos compartidos polos demais e a que colaboredes cos vosos!
E se queres obter máis información sobre como deseñar sitios interesantes e construílos, queres consultar o noso Deseño UX/UI e Desenvolvemento web Bootcamps!
