Come creare
un sito web
partendo da zero


Come creare un sito web partendo da zero

Oggi su internet sono presenti circa 1.83 miliardi di siti internet.

Aziende, liberi professionisti, associazioni: chiunque al giorno d'oggi è presente sul web, e per quanto possa sembrare immediato, progettare, costruire e mettere online un sito web è un processo che richiede studio e dedizione.

Come creare un sito web partendo da zero
Coding

Come creare un sito web

Non sai da dove partire per creare un sito web da zero? Non ti preoccupare! Abbiamo preparato per te una guida in 12 passi da seguire step-by-step per progettare e costruire un sito web funzionale ed efficace.

Se vuoi imparare a creare un sito web per la tua azienda o per iniziare a lavorare come programmatore freelance, ecco le 12 fasi da seguire per progettare e costruire una pagina web.

  1. Individuare obiettivi e target
  2. Analizzare le ricerche degli utenti
  3. Analizzare i competitor
  4. Scegliere e comprare il nome dominio giusto
  5. Organizzare le informazioni: come creare l'alberatura del tuo sito web
  6. Decidere immagine e mood del sito web
  7. Scrivere i copy delle singole pagine
  8. Ottimizzare a livello SEO i tag
  9. Realizzare i mock-up
  10. Individuare le tecnologie per realizzare il sito web
  11. Realizzare e mettere online il sito web
  12. Ottimizzare il sito web una volta che è online (CRO)

Leggi il resto della guida per creare un sito web per scoprire come affrontare nel dettaglio le 12 fasi e creare il tuo primo sito web da zero.

1 Individuare obiettivi e target

Prima di iniziare a creare il tuo sito web devi assicurarti di trasmettere il messaggio giusto alle persone giuste al momento giusto.

Identificare il tuo pubblico di destinazione è alla base della costruzione del tuo sito web. Questo significa capire chi sono i tuoi potenziali clienti, cosa vogliono e quali sono le problematiche che il tuo prodotto o servizio risolve.
È importante capire come il tuo target si comporta online, quali piattaforme frequenta e come vuole interagire.

Ricorda che parlando a un pubblico di 100 persone, statisticamente al massimo 10 risponderanno alla tua call to action. 100 sono potenziali clienti, solo 10 lo diventeranno effettivamente.

Se non hai ancora dei clienti, dovresti fare supposizioni ed ipotesi plausibili basate sulla tua esperienza: definisci età, sesso, ubicazione geografica ed esigenze dei tuoi ipotetici clienti e parti da qui.
Se invece hai già dei clienti, la cosa migliore che puoi fare è porre loro delle domande per scoprire perché e come acquistano.

2 Analizzare le ricerche degli utenti

Analizzare le ricerche degli utenti è un ottimo modo per scoprire quali sono le loro esigenze e rendere il tuo sito efficiente, competitivo ed utile.

Google Trends

Google Trends

Google Trends è uno strumento gratuito che consente di comprendere meglio ciò che interessa e incuriosisce il pubblico, in tempo reale. Molti esperti di marketing utilizzano questi dati come un modo per ottenere informazioni sul comportamento dei clienti.

Answer The Public

Answer The Public

È uno strumento di analisi dei consumatori che combina le ricerche suggerite da Bing e Google e le visualizza in quello che potrebbe essere chiamato un cloud di ricerca. Organizzate in categorie come cosa, dove e perché, queste nuvole di ricerca forniscono una panoramica delle domande che le persone stanno ponendo ai motori di ricerca dai loro dispositivi.

Google Suggest

Google Suggest

Google Suggest è una funzione del motore di ricerca di Google che fornisce suggerimenti agli utenti quando inseriscono una query nella casella di ricerca. Attraverso un'altra funzione chiamata Google Instant, la SERP si adatta alle parole chiave o alla frase man mano che vengono immesse.

3 Analizzare i competitor

Per creare un sito web è importante analizzare ciò che fanno i tuoi concorrenti.
Immedesimati nel tuo cliente ideale, fai su Google le ricerche che farebbe il tuo cliente, vedi i 5 primi risultati e studia questi siti web.

Scopri che messaggi e che tono di voce usano, che contenuti prediligono e che stile visuale utilizzano e prendi ispirazione per creare il tuo sito web.

4 Scegliere e comprare il dominio giusto

Il nome del dominio è il biglietto da visita per il tuo sito web. Per questo avrai bisogno di un nome memorabile, brandizzabile e facile da digitare e pronunciare.
Evita nomi troppo lunghi o eccessivamente specifici e scegli un nome che ti aiuti a indirizzare più traffico verso di te.

Le keyword non servono solo per indicizzare i contenuti. I motori di ricerca usano il tuo nome dominio per capire di cosa tratta il tuo sito, quindi se possibile è importante includere parole chiave pertinenti.

5 Organizzare le informazioni:
come creare l'alberatura del tuo sito web

Organizzare le informazioni

L'alberatura di un sito si presenta generalmente sotto forma di diagramma che organizza le pagine web in sezioni e definisce i diversi livelli di navigazione. Creare l'alberatura del tuo sito web ti permetterà di avere una visione globale del sito e del percorso di navigazione prima di creare effettivamente le pagine principali.

Un sito web, per quanto bello, difficilmente raggiungerà i suoi obiettivi se prima non progetterai la sua struttura. Come fare? Innanzitutto crea un elenco che comprenda tutti i contenuti che vuoi includere all'interno del tuo sito web. Ad esempio, i contenuti per un'azienda che cerca di promuovere la propria attività su Internet potrebbero essere elencati in questo modo:

  • Servizi e offerte: Attività, settore di competenza 1, Settore di competenza 2, Punti di forza
  • Catalogo dei prodotti
  • Chi siamo: Contatti, Uffici, Note legali

Analizzare l'alberatura dei tuoi competitor può essere un ottimo punto di partenza, sia per assicurarti di non aver dimenticato di inserire contenuti importanti all'interno del tuo sito web, sia per prendere spunto per organizzarli.

6 Decidere immagini e mood del sito web

Il visitatore medio deciderà se il tuo sito gli piace in meno di mezzo secondo. Per questo è fondamentale che il tuo sito web comunichi il messaggio giusto tramite le immagini, i colori, i font.

I colori

I colori

I colori comunicano emozioni. Per esempio il rosso brillante comunica una sensazione di pericolo, il blu calma o tranquillità e il viola regalità. La scelta del colore giusto può avere una forte influenza sulla reazione di un visitatore. Crea una palette di colori con circa 3 colori primari e 3 colori secondari. I tuoi colori primari riempiranno la maggior parte del layout, mentre i colori secondari fungeranno da contrasto. Ricordati di usare il colore per mettere in risalto le informazioni principali e per le call to action, ovvero le azioni che devono compiere gli utenti.

Le immagini

Le immagini

Se vuoi che il tuo sito web colpisca nel segno, devi scegliere immagini ben fatte ed inserirle al posto giusto. Non usare immagini sgranate, inserisci le più belle in primo piano e distribuisci le altre all'interno delle varie pagine.

I font

I font

Scegli caratteri semplici e di facile lettura! Quando si tratta di web design, la leggibilità è fondamentale. I caratteri eccessivamente stilizzati o condensati metteranno in difficoltà gli utenti e, molto probabilmente, li faranno uscire dalla pagina web.

7 Scrivere i copy delle singole pagine

Ogni singola riga di testo sul tuo sito web dovrebbe aiutare i tuoi visitatori a scoprire o imparare qualcosa di nuovo. Cerca di spiegare in modo chiaro e conciso come funziona il tuo prodotto e quali vantaggi offre all'utente.

Definisci il “tono di voce” del tuo brand ma cerca anche di concentrarti sui desideri e sui bisogni dei clienti (e potenziali clienti) dando una priorità in termini di importanza a quello che vuoi comunicare.

Quando scrivi i copy del tuo sito web tieni ben presente i motivi principali per cui una persona lo sta visitando:

  • Conoscere il settore in cui opera la tua azienda
  • Saperne di più sulle offerte di servizi nel tuo settore
  • Saperne di più sulla tua azienda in particolare
  • Confrontare prodotti, offerte, prezzi etc.
  • Comprare qualcosa

8 Ottimizzare a livello SEO i tag

La SEO è il metodo per ottimizzare l'efficacia dei tuoi contenuti per i motori di ricerca, al fine di posizionarsi più in alto rispetto ai contenuti di altri siti che hanno come target gli stessi termini di ricerca.

Una delle maggiori sfide che i creatori di contenuti devono affrontare è scrivere contenuti ottimizzati per i motori di ricerca ma anche per le persone.

L'ottimizzazione del titolo è una delle cose più importanti per assicurarti che il tuo sito web si posizioni su Google, oltre ad attirare un pubblico.

9 Realizzare i Mock-up

Un mock-up è una bozza visiva di una pagina web o un'applicazione che presenta molti dei suoi elementi di design finali ma non è funzionale. Un mockup non è raffinato come una pagina live e in genere include alcuni dati segnaposto.

Per creare il tuo mock-up hai due opzioni:

  • utilizzare un software che potrai scegliere in base agli strumenti che già utilizzi, al tuo budget etc
  • usare uno strumento di progettazione grafica come Adobe Illustrator, utilizzato da tantissimi designer

10 Individuare le tecnologie per realizzare il sito web

I siti web moderni sono costruiti utilizzando tantissime tecnologie diverse. Non esiste una "tecnologia giusta" per la creazione di siti web, e la tua scelta può variare in base alla tua esperienza, ai costi di sviluppo e di licenza, alle prestazioni del sito web, la manutenzione, la scalabilità e altro ancora.
Le tecnologie che di sicuro non possono mancare sono HTML (Hypertext Markup Language), CSS (Cascading Style Sheets) e JavaScript.

HTML

è un linguaggio che compone il contenuto del tuo sito web e dice al tuo browser (come Internet Explorer o Google Chrome) cosa mostrare sul sito web.

CSS

è un linguaggio utilizzato per descrivere la presentazione (l'aspetto e la formattazione) del tuo sito web e indica al tuo browser cosa mostrare sul tuo sito web.

JavaScript

è un linguaggio di programmazione comunemente usato per creare effetti interattivi all'interno dei browser web.

11 Realizzare e mettere online il sito web

Ci sono vari modi per realizzare il tuo sito web in base alle tue esigenze e competenze specifiche:

Creare un sito web statico in HTML e CSS

A Creare un sito web statico in HTML e CSS

Per creare un sito web in HTML devi innanzitutto installare un editor di testo adatto a scrivere codice (ad esempio puoi usare Sublime Text, gratuito e disponibile sia per Mac che per PC). Dopodiché dovrai imparare le basi del funzionamento dell'HTML.

L'elemento principale di una struttura HTML è un tag HTML. Un tag, ad esempio, ha questo aspetto:
<b>QUALCOSA</b>
Qui abbiamo a che fare con un tag <b>. Questo metterà in grassetto una parte di testo che si trova tra il tag di apertura (<b>) e il tag di chiusura (</b>).
In questo caso, quella parte di testo è QUALCOSA.

Esistono altri tag, solo per citarne alcuni:
<i>...</i> metterà in corsivo il testo tra i tag di apertura e chiusura
<u>...</u> lo sottolineerà
<p>...</p> è un paragrafo di testo
<h1>...</h1> è l'intestazione principale della pagina

Oltre a questi tag semplici, ci sono anche tag più complessi. Ad esempio, se vuoi creare un elenco puoi farlo con il seguente codice HTML:
<ul>
<li>Articolo 1</li>
<li>Articolo 2</li>
<li>Articolo 3</li>
</ul>

Per rendere la tua pagina accattivante dovrai imparare ad usare anche i CSS, che (Cascading Style Sheets) definisce lo stile/presentazione di una pagina web e gli elementi su di essa. HTML e CSS lavorano insieme per creare la pagina web finale, il suo design e il contenuto.

Dopodiché dovrai installare Bootstrap, un toolkit open source che si occupa della struttura di base di un documento HTML e di un foglio di stile CSS. Fornisce un framework che assicura che l'impalcatura principale della tua pagina web sia pronta e ottimizzata per un ulteriore sviluppo.

Ci sono due strade che puoi intraprendere:

  • imparare ad utilizzare Bootstrap vai alla homepage di Bootstrap, scarica il pacchetto Bootstrap principale e inizia ad utilizzarlo;
  • prendere una scorciatoia ottieni uno starter pack per Bootstrap con un bel design e una pagina web demo già creata.
Creare un sito con un CMS (es. Wordpress)

B Creare un sito con un CMS (es. Wordpress)

Un CMS (Content Management System) è un'applicazione che permette di creare un sito internet tramite un'interfaccia semplice da utilizzare. I CMS nascono dalla necessità di dare a chiunque la libertà di progettare la propria pagina web, non è necessario possedere specifiche conoscenze di programmazione, ma soltanto qualche nozione di informatica.
Con questi software è possibile creare un sito web di buona qualità e facile gestione. Per chi vuole pubblicare da subito ed è meno interessato alla parte tecnica, questa è la strada giusta da percorrere.
I Cms nascono dalla necessità di dare a chiunque la libertà di poter progettare la propria pagina Web, anche a chi non possiede conoscenze specifiche di linguaggi di programmazione. La verità però è che creare un sito web vero e proprio è più complesso di quanto possa sembrare.

I CMS hanno infatti molti limiti che ti faranno perdere tutto il tempo risparmiato con la creazione immediata del sito:

  • Non potrai implementare nessuna funzionalità custom, avendo a disposizione soltanto alcune funzionalità di base;
  • Saranno mostrati banner pubblicitari che non potrai monetizzare (come per esempio succede su Wordpress);
  • Il codice del sito non sarà semantico e tutta la SEO sarà affidata a dei plugin o comunque dovrai pagare altri professionisti per curarla;
  • I CMS rendono task semplici molto più complessi di quello che sono in realtà;
  • I sistemi drag & drop usati dalla maggior parte dei CMS producono un codice estremamente sporco che va ad inficiare notevolmente performance e velocità del sito, rendendolo anche non responsive. Di conseguenza il sito sarà pieno di errori che spunteranno fuori come bug che non saprai come risolvere;
  • Non potrai aggiungere temi o ne dovrai comprare di nuovi e se vorrai modificare un tema ti troverai comunque davanti ad una schermata del genere:
Limiti CMS

Cosa fare a questo punto? È qui che ci si rende conto che in tutto il tempo passato a smanettare con un CMS per ottenere un risultato non soddisfacente seppur a basso costo si potevano intraprendere altre strade.

Creare un sito web con un framework (es. Laravel)

C Creare un sito web con un framework (es. Laravel)

Laravel è un framework per applicazioni web con una sintassi espressiva ed elegante. Laravel tenta di rendere divertente lo sviluppo semplificando le attività comuni utilizzate nella maggior parte dei progetti Web, come autenticazione, routing, sessioni, modelli, memorizzazione nella cache e altro.

Laravel è progettato per sviluppare siti web di media complessità, a differenza dei CMS come WordPress.

Con Laravel, ad esempio, potete creare una web app, un sito di news, un sito aziendale, ma anche progetti più grandi come veri e propri gestionali per aziende.

È una base di partenza per i programmatori per creare siti e applicazioni, mentre WordPress viene utilizzato da esperti di web marketing e web designer più che da veri e propri developers.

12 Ottimizzare il sito web una volta che è online (CRO)

Dopo aver creato il tuo sito web, è arrivato il momento analizza ciò che fanno gli utenti e fai un'ottimizzazione iterativa. Se all'inizio il nostro sito converte all'1%, il tuo obiettivo è far salire questa percentuale al 10%.
Alcuni ottimi strumenti di analisi sono:

Google Analytics

Google Analytics

È lo strumento più popolare e conosciuto e serve per analizzare le sorgenti di traffico e l'efficacia dei contenuti. Utilizzarlo correttamente ti permetterà di scoprire tendenze molto utili per creare ed ottimizzare il tuo sito web.

Hotjar

Hotjar

Offre strumenti per comprendere il comportamento degli utenti e può davvero aiutarti a distinguerti dalla concorrenza.

Google Optimize

Google Optimize

È lo strumento di Google per eseguire esperimenti su un sito web, come A/B test e test di reindirizzamento per valutare l'efficacia di potenziali modifiche al sito Web e testare funzionalità come pulsanti e call to action.

Vuoi imparare a creare siti web efficaci e funzionanti?
Il corso aulab Hackademy è incentrato sullo sviluppo web e la programmazione Object Oriented.

I linguaggi trattati saranno HTML, CSS e Javascript per lo sviluppo frontend e PHP con Framework Laravel per lo sviluppo backend; imparerai a lavorare in team con le Metodologie Agili, utilizzando il framework SCRUM.
Per il progetto finale metterai in pratica ciò che hai imparato, sviluppando da zero un portale di annunci.

Scopri il corso Hackademy