Quando si impara a programmare, ci si può imbattere in due fasi distinte
-
Apprendimento dei fondamenti: Si inizia a esplorare l'anatomia di un programma per computer, si impara a pensare a semplici problemi in termini di unità logiche e si inizia a formalizzare queste unità in istruzioni di codice. In questa fase, si imparano a conoscere argomenti astratti e semplici pratiche. Se fatto bene e con il tempo necessario, chiunque è in grado di comprendere e scrivere semplici programmi logici utilizzando un linguaggio a scelta.
-
La seconda fase, che la maggior parte delle persone trova un po' più scoraggiante, consiste nell'apprendimento di un ecosistema di sviluppo: il passo successivo naturale dopo l'acquisizione di semplici conoscenze di programmazione è quello di scegliere un sottodominio di programmazione (sviluppo web, sviluppo di applicazioni mobili, sistemi embedded e simili) e iniziare a imparare come risolvere i problemi utilizzando quella specifica piattaforma. La difficoltà sta nel fatto che non si tratta più di coprire una serie di nozioni fondamentali, di esercitarsi su ogni concetto e di ripetere. Spesso è impossibile coprire ogni strumento, ogni tecnologia e seguire ogni principio. Il modo giusto di procedere è quello di fare una buona dose di sperimentazione e ricerca. È probabile che sia sufficiente acquisire una manciata di competenze e utilizzare un certo numero di strumenti per iniziare a svolgere compiti semplici. Una volta che vi sentite a vostro agio a questo livello, potete provare a espandere la vostra conoscenza a una nuova serie di strumenti e ad evolvervi costantemente. Seguendo questa metodologia, cercheremo di costruire una solida base nel campo dello sviluppo web attraverso l'esplorazione delle tecnologie e degli strumenti utilizzati per costruire semplici landing page.
In questo post del blog, faremo una breve esplorazione del panorama dello sviluppo web frontend, con particolare attenzione allo sviluppo di landing page. Passeremo in rassegna una selezione di risorse che vi consigliamo di consultare per le diverse parti dello sviluppo che potreste incontrare. Alla fine di questo articolo, avrete un quadro molto più chiaro di come costruire una landing page. Date un'occhiata a questo video di accompagnamento per un esempio pratico.
Paesaggio dello sviluppo di landing page
Una landing page è un termine utilizzato inizialmente dagli esperti di marketing digitale per indicare una pagina web indipendente utilizzata per scopi di marketing e campagne pubblicitarie. Il concetto è piuttosto semplice: un visitatore interessato a un prodotto o a un servizio fornito da un'azienda fa clic su un link di tale prodotto, quindi "atterra" su una pagina web che contiene una ricca descrizione che combina testo, immagini ecc. del prodotto o del servizio. La pagina contiene un pulsante di acquisto, chiamato "CTA" (Call To Action), per convertire il visitatore in un cliente pagante. Come ci si può aspettare, la creazione di una buona esperienza utente è fondamentale per ottenere un buon tasso di conversione.
Nel corso di questo articolo, impareremo a conoscere molti modi e strumenti che ci permetteranno di costruire landing page che svolgano il loro ruolo. È importante ricordare che ci sono altre considerazioni da fare quando si costruiscono landing page legate alla SEO (Search Engine Optimization). La SEO sarà trattata nei prossimi seminari.
Ispirazione di design
Sia che siate esperti nella creazione di landing page o che abbiate appena iniziato, vi accorgerete che spesso è difficile individuare esattamente l'aspetto che desiderate per il vostro sito web. Spesso capita anche che i clienti, quando lavorano con loro, non sappiano esattamente quale design desiderano per la loro pagina web. Di solito, il mockup e il prototipo del design vengono consegnati allo sviluppatore da un web designer specializzato in questo tipo di lavoro. Può essere utile avere una fonte affidabile di design web. Tali fonti vi permetteranno di tenervi aggiornati sulle tendenze del design, di stimolare la vostra creatività e... di iniziare. Due delle migliori risorse che potete utilizzare per trovare ispirazione per il vostro prossimo progetto sono Dribbble e Behance.
Dribbble
Dribbble è probabilmente la risorsa più popolare nel settore del web design. È una comunità di designer che condividono il proprio lavoro per migliorare le proprie capacità, aiutarsi a vicenda e ricevere feedback costruttivi. Contiene un'ampia gamma di progetti di qualsiasi argomento o campo realizzati da creativi di tutto il mondo, insieme ai feedback della comunità, che lo rendono un luogo ideale per trarre ispirazione.
Behance
Behance è un'altra popolare comunità di design che può aiutarvi a trovare ispirazione. Questo sito offre funzioni di ricerca avanzate che consentono di accedere facilmente a lavori specifici di interesse, utilizzando parole chiave, campi e palette di colori. È importante notare che Behance fa parte di Adobe e si integra perfettamente con Adobe Creative Cloud.
Dribbble e Behance sono entrambe ottime piattaforme di ispirazione per il web design e non si può sbagliare con nessuna delle due. Vi invitiamo a iniziare a esplorare i design e a proporre i vostri!
Prototipazione del design
Ora che vi siete ispirati al lavoro di designer di talento, è il momento di iniziare a prototipare il design della vostra landing page. La prototipazione è una fase importante della costruzione di una landing page. Può essere definita come il processo sperimentale in cui si implementano le idee in strutture visibili, in modo da poterle perfezionare e convalidare con il team o il cliente. Alla fine della fase di prototipazione, avrete un progetto pronto per essere portato in vita sulla vostra landing page.
Esiste una pletora di soluzioni software che possono essere utilizzate per costruire prototipi di design. In effetti, ce ne sono così tante che può diventare difficile valutare, confrontare e scegliere uno strumento. Noi utilizzeremo Figma, in quanto è comunemente usato dai designer ux/ui. Se volete imparare a usare Figma per la prototipazione, potete dare un'occhiata al nostro corso intensivo su youtube, qui.
Figma
Figma è uno strumento di progettazione all-in-one che semplifica la creazione e la collaborazione di prototipi di design da parte di UX designer e sviluppatori su una piattaforma cloud-hosted basata su browser. Figma pone l'accento sulla semplicità e sulla facilità d'uso.
L'interfaccia di Figma consente di creare elementi e di stilizzarli controllando l'aspetto del testo, delle griglie e di altri componenti della pagina. Offre un'ampia gamma di plugin complementari, come Autoflow per mostrare i flussi di utenti, Figmotion per le animazioni e molti altri.
Icone e caratteri
Tipografia e styling Le icone sono alcune delle caratteristiche più semplici da utilizzare per migliorare l'aspetto di qualsiasi pagina web. Nella vostra landing page dovete utilizzare il font e le icone giuste, in modo che corrispondano all'idea generale che volete comunicare. Fortunatamente, è facile trovare e applicare un'ampia selezione di font e icone utilizzando Font Awesome o Google Fonts.
Font Awesome
Font Awesome è un kit di font e icone basato su CSS e Less. Nel 2020, Font Awesome è stato utilizzato dal 38% dei siti che utilizzano script di font di terze parti, collocandosi al secondo posto dopo Google Fonts(Wikipedia).
Font Awesome è supportato da molte librerie di frontend come Bootstrap, per la quale è stato inizialmente creato. Font Awesome rende l'integrazione di font e icone in una pagina web semplice come l'inclusione di un link CDN. Questa facilità d'uso, insieme all'ampia selezione di font e icone, lo ha reso la soluzione più popolare in questo settore.
Caratteri di Google
Google Fonts è un servizio web gratuito e open-sourced offerto da Google per l'integrazione dei font nei siti web. Offre integrazioni perfette e un alto livello di flessibilità e personalizzazione.
Distribuire la pagina di destinazione
Ora che avete costruito la vostra landing page, è il momento di condividerla con tutti! Il passo finale consiste nel distribuire la vostra landing page utilizzando una soluzione di hosting provider. Github Pages e Vercel sono le nostre scelte migliori. Sono i più popolari e i più facili da usare. Vercel è lo strumento introdotto nel nostro workshop, ma Github Pages funziona in modo simile.
Pagine Github
Se state imparando a programmare, è probabile che abbiate sentito parlare di Github. Github è una piattaforma per la condivisione e l'hosting di codice nell'ambito della comunità open-source. Offre una funzione chiamata GitHub Pages, che è un servizio di hosting per pagine web pubbliche che possono essere utilizzate da individui e organizzazioni. Tutte le pagine sono ospitate gratuitamente sul dominio github.io di GitHub o su un nome di dominio personalizzato, se ne possedete uno. GitHub Pages è un modo semplice ed efficiente per ospitare gratuitamente i propri progetti se si utilizza già Github per il controllo di versione.
Vercel
Vercel è un'alternativa a Github Pages che offre un'ampia gamma di funzionalità e configurazioni. È disponibile una versione gratuita. Raccomandiamo Vercel a chiunque abbia un progetto complesso, perché offre un'ottima esperienza di sviluppo e un ottimo supporto. Code Labs Academy lo utilizza come parte del suo processo di sviluppo.
Conclusione
Questo articolo ha introdotto strumenti utili per sviluppare una landing page. Ancora! Il modo migliore per imparare è quello di farlo, quindi vi invitiamo caldamente a provare questi strumenti sul vostro progetto personale! Una parte importante del lavoro di uno sviluppatore consiste nel ricercare le soluzioni esistenti ai problemi che incontra, evitando di reinventare la ruota. Il bello della comunità dei programmatori è la sua natura collaborativa. Vi invitiamo a trarre vantaggio dal lavoro condiviso da altri e a contribuire con il vostro!
E se volete saperne di più sulla progettazione e la costruzione di siti web di qualità, allora dovete dare un'occhiata ai nostri Bootcamp di UX/UI Design e Web Development!
