Quan s'aprèn sobre programació, es poden trobar dues fases diferents
-
Aprendre sobre els fonaments: Comences a explorar l'anatomia d'un programa informàtic, aprens a pensar problemes senzills en termes d'unitats lògiques i comences a formalitzar aquestes unitats en instruccions de codi. En aquesta etapa, apreneu sobre temes abstractes i pràctiques senzilles. Si es fa bé i se li dona la quantitat de temps adequada, qualsevol persona seria capaç d'entendre i escriure programes lògics senzills utilitzant un llenguatge escollit.
-
La segona fase, que la majoria de la gent troba una mica més descoratjadora, consisteix a aprendre un ecosistema de desenvolupament: el següent pas natural després d'adquirir coneixements simples de programació és triar un subdomini de programació (desenvolupament web, desenvolupament d'aplicacions mòbils, sistemes integrats i similars). ) i comenceu a aprendre sobre com resoldre problemes amb aquesta plataforma específica. La dificultat aquí és que ja no es tracta de cobrir un conjunt de fonaments, practicar cada concepte i repetir. Sovint és impossible cobrir totes les eines, totes les tecnologies i seguir tots els principis. La manera correcta de fer-ho és fer una bona quantitat d'experimentació i investigació. És probable que només necessiteu adquirir un grapat d'habilitats i utilitzar diverses eines per començar amb tasques senzilles. Un cop us sentiu còmode en aquest nivell, podeu intentar expandir-vos a un nou conjunt d'eines i evolucionar de manera constant. Seguint aquesta metodologia, intentarem construir una base sòlida en el domini del desenvolupament web mitjançant l'exploració de les tecnologies i eines utilitzades per construir pàgines de destinació senzilles.
En aquesta publicació del bloc, farem una breu exploració del panorama del desenvolupament web d'interfície, centrant-nos en el desenvolupament de pàgines de destinació. Repassarem una selecció de recursos que us recomanem que consulteu per a les diferents parts del desenvolupament que us podeu trobar. Al final d'aquest article, tindreu una imatge molt més clara de com crear una pàgina de destinació. Consulteu aquest vídeo complementari per obtenir un exemple pràctic.
Paisatge de desenvolupament de la pàgina de destinació
Una pàgina de destinació és un terme emprat inicialment pels experts en màrqueting digital per referir-se a una pàgina web autònoma utilitzada amb finalitats de màrqueting i campanyes publicitàries. El concepte és bastant simple: un visitant interessat en un producte o servei prestat per una empresa fa clic a un enllaç d'aquest producte, després "aterra" a una pàgina web que té una descripció rica que combina text, imatges, etc. del producte o servei. La pàgina conté un botó de compra, que s'anomena "CTA" (Call To Action) per convertir el visitant en un client que paga. Com és d'esperar, crear una bona experiència d'usuari és primordial per tenir una bona taxa de conversió.
Al llarg d'aquest article, coneixerem moltes maneres i eines que ens permetran crear pàgines de destinació que compleixin la seva funció. És important esmentar que hi ha altres consideracions a l'hora de crear pàgines de destinació relacionades amb el SEO (Search Engine Optimization). El SEO es tractarà en futurs workshops.
Inspiració de disseny
Tant si teniu experiència en la creació de pàgines de destinació com si acabeu de començar, trobareu que sovint és difícil identificar exactament com voleu que sembli el vostre lloc web. També passa sovint, quan treballen amb clients, que no saben exactament quin disseny volen per a la seva pàgina web. Normalment, la maqueta i el prototip de disseny els lliuraria al desenvolupador un dissenyador web especialitzat en aquest tipus de treball. Pot ser útil tenir una font fiable de dissenys web. Aquestes fonts us permetran estar al dia de les tendències de disseny, impulsar la vostra creativitat i... començar. Dos dels millors recursos que podeu utilitzar per inspirar-vos en el disseny del vostre proper projecte són Dribbble i Behance.
Dribbble
Dribbble és probablement el recurs més popular a l'espai de disseny web. És una comunitat de dissenyadors que comparteixen el seu treball per millorar les seves habilitats, ajudar-se els uns als altres i obtenir comentaris constructius. Conté una àmplia gamma de dissenys en gairebé qualsevol tema o camp fets per persones creatives de tot el món, juntament amb comentaris de la comunitat, el que el converteix en un lloc ideal per inspirar-se.
Behance
Behance és una altra comunitat de disseny popular que us pot ajudar a trobar inspiració. Aquest lloc web ofereix funcions de cerca avançades que us permeten accedir fàcilment al treball específic que us interessa, utilitzant paraules clau, camps i paleta de colors. També és important tenir en compte que Behance forma part d'Adobe i s'integra perfectament amb el núvol creatiu d'Adobe.
Dribbble i Behance són bones plataformes per inspirar-se en el disseny web i no us podeu equivocar amb cap de les dues. Us animem a començar a explorar dissenys i a crear els vostres!
Disseny de prototips
Ara que t'has inspirat en el treball de dissenyadors talentosos, és hora que comencis a crear prototips del disseny de la teva pàgina de destinació. La creació de prototips és una fase important de la creació d'una pàgina de destinació. Es pot definir com el procés experimental on implementeu idees en estructures visibles, de manera que les podeu refinar i validar amb el vostre equip o client. Al final de la fase de prototipatge, tindreu un disseny a punt per a la vostra pàgina de destinació.
Hi ha una gran quantitat de solucions de programari que es poden utilitzar per construir prototips de disseny. De fet, n'hi ha tantes que ràpidament pot arribar a ser un repte avaluar, comparar i triar una eina. Farem servir Figma, ja que l'utilitzen habitualment dissenyadors ux/ui. Si voleu aprendre a utilitzar Figma per crear prototips, podeu consultar el nostre curs intensiu a YouTube aquí.
Figma
Figma és una eina de disseny tot en un que facilita que els dissenyadors i desenvolupadors d'UX puguin crear i col·laborar en prototips de disseny en una plataforma allotjada al núvol basada en navegador. . Figma posa èmfasi en la simplicitat i la facilitat d'ús.
La interfície de Figma us permet crear elements i estilitzar-los controlant l'aparença del text, les quadrícules i altres components de la pàgina. Ofereix una àmplia gamma de complements complementaris, com ara Autoflow per mostrar els fluxos d'usuari, Figmotion per a animacions i molts més.
Icones i tipus de lletra
Les icones de tipografia i estil són algunes de les funcions més senzilles d'utilitzar per millorar l'aspecte de qualsevol pàgina web. Voleu utilitzar el tipus de lletra i les icones adequats a la vostra pàgina de destinació per fer coincidir la idea general que voleu comunicar. Afortunadament, és fàcil trobar i aplicar una gran selecció de tipus de lletra i icones mitjançant Font Awesome o Google Fonts.
Font Impressionant
Font Awesome és un conjunt d'eines de tipus de lletra i icones basat en CSS i Menys . A partir del 2020, el 38% dels llocs que utilitzen scripts de fonts de tercers van utilitzar Font Awesome, col·locant-lo en segon lloc després de Google Fonts (Wikipedia).
Font Awesome és compatible amb moltes biblioteques de frontend com Bootstrap, per a la qual es va crear inicialment. Font Awesome fa que la integració de tipus de lletra i icones en una pàgina web sigui tan fàcil com incloure un enllaç CDN. Aquesta facilitat d'ús, juntament amb la seva gran selecció de tipus de lletra i icones, la van convertir en la solució més popular de l'espai.
Fonts de Google
Google Fonts és un servei web gratuït i de codi obert que ofereix Google per incrustar tipus de lletra als llocs web. Ofereix integracions perfectes i un alt nivell de flexibilitat i personalitzacions.
Desplegueu la vostra pàgina de destinació
Ara que heu creat la vostra pàgina de destinació, és hora de compartir-la amb tot! El pas final és desplegar la vostra pàgina de destinació mitjançant una solució de proveïdor d'allotjament. Github Pages i Vercel són les nostres millors opcions. Són els més populars i els més fàcils d'utilitzar. Vercel és l'eina introduïda al nostre taller, però Github Pages funciona de manera similar.
Pàgines Github
Si actualment esteu aprenent a programar, és probable que hàgiu sentit parlar de Github. Github és una plataforma per compartir i allotjar codi com a part de la comunitat de codi obert. Ofereix una funció anomenada Pàgines de GitHub, que és un servei d'allotjament per a pàgines web públiques que poden ser utilitzats per persones i organitzacions. Totes les pàgines estan allotjades lliurement al domini github.io de GitHub o en un nom de domini personalitzat si en teniu un. Les pàgines de GitHub són una manera senzilla i eficaç d'allotjar els vostres projectes de manera gratuïta si ja feu servir Github per al control de versions.
Vercel
Vercel és una alternativa de Github Pages que ofereix una àmplia gamma de funcions i configuracions. Ve amb una versió gratuïta. Recomanem Vercel per a qualsevol persona amb un projecte complex, ja que ofereix una gran experiència de desenvolupador i ofereix un gran suport. Code Labs Academy l'utilitza com a part del seu procés de desenvolupament.
Conclusió
Aquest article presenta eines útils per desenvolupar una pàgina de destinació. De nou! La millor manera d'aprendre és fent, així que us animem a provar aquestes eines en el vostre projecte personal! Una gran part del treball d'un desenvolupador és investigar les solucions existents als problemes que troben i evitar reinventar la roda. El millor de la comunitat de programació és el seu caràcter col·laboratiu. Us animem a aprofitar la feina que han compartit els altres i a contribuir amb la vostra!
I si voleu aprendre més sobre com dissenyar llocs web fantàstics i crear-los, aleshores voleu consultar el nostre Disseny UX/UI i Desenvolupament web Bootcamps!
