Sviluppo siti web: quali sono e di cosa si occupano le varie figure coinvolte nella realizzazione di un sito web efficace?

Quando si decide di sviluppare un sito web, non si tratta soltanto di mettere insieme codice e immagini. Anche la pubblicazione di una semplice pagina ha dietro di sé una serie di decisioni e di conoscenze tecniche.

In questo articolo vorrei parlarti di tutte le competenze necessarie per la realizzazione di una pagina web o di un sito, competenze che sono comuni sia per la realizzazione di una singola pagina, sia di un sito aziendale e sia di un e-commerce.

Naturalmente le risorse necessarie per la realizzazione di un sito, sia economiche che di persone disponibili, dipenderanno dalla grandezza del progetto.

A seconda delle dimensioni del tuo progetto, questo comporterà il coinvolgimento di una squadra più o meno ampia. I grandi siti web sono creati e gestiti da team di decine, se non centinaia di contributori. Ma esistono anche siti che sono progettati e mantenuti da una squadra composta soltanto da poche persone ed è assolutamente possibile creare un sito di tutto rispetto con un team composto solo da un freelance. È la bellezza del web.

In questo articolo ti presenterò le varie discipline che contribuiscono alla creazione di un sito, inclusi i diversi ruoli legati ai contenuti, al design e al codice.

Pianificazione del progetto: i primi passi per la creazione di un sito web

Il tuo sito dovrebbe far parte di una strategia aziendale. Per questo motivo, la prima azione che ti consiglio è di stabilire un obiettivo da raggiungere, prima ancora di buttarti a capofitto a pensare come verranno le pagine del sito.

Una volta fissato l’obiettivo (mi raccomando, di tipo SMART), puoi sviluppare un business plan per raggiungerlo e stabilire delle metriche per verificare periodicamente se la strada intrapresa va verso l’obiettivo stabilito.

Solo a questo punto puoi davvero passare a pensare di affidarti a una web agency specializzata nello sviluppo di siti web come la nostra per la realizzazione del tuo progetto.

Organizzazione dei contenuti nello sviluppo di un sito web

In qualsiasi pagina del tuo sito web saranno presenti dei contenuti, che siano i testi veri e propri di spiegazione dei prodotti e dei servizi che offri, ma anche quelli relativi ai messaggi o alle funzionalità dedicate agli utenti, dalle etichette dei pulsanti ai messaggi di errore. Una buona scrittura aumenta l’efficacia delle così dette “interfacce utente”.

Ma qualcuno deve creare tutti quei contenuti: non sottovalutare le risorse necessarie per farlo. Scrittori e redattori sono una parte importante del team.

In questo senso, evidenzio due specialisti correlati ai contenuti nello sviluppo web: l’Architetto delle Informazion (Information Architect) e il Content Strategist.

Information Architect

Un Information Architect (detto anche progettista dell’informazione) organizza i contenuti di un progetto web in modo logico, con l’obiettivo da far reperire il più semplicemente possibile le informazioni agli utenti. Potrebbe essere responsabile della funzionalità di ricerca, dei diagrammi del sito e di come il contenuto e i dati sono organizzati sul server.

L’architettura dell’informazione è inevitabilmente intrecciata con la progettazione della “esperienza utente” (User Experience, UX) e della interfaccia utente (User Interface, UI).

Content strategy

Un content strategist ha il compito di fare in modo che ogni testo di un sito, dal lungo testo esplicativo fino alle etichette sui pulsanti, siano coerenti con l’identità del brand e con gli obiettivi di marketing aziendali.

Per esempio, se la tua azienda comunica in modo informale, perché magari comunica a un target giovane, il content strategist si occuperà che tutti i messaggi sul sito abbiano il tono di voce il più scherzoso possibile.

Progettazione di un sito web: è tutta una questione di design

Ah, il termine design! Sembra abbastanza semplice da capire, ma anche questa competenza raccoglie diverse specializzazioni nello sviluppo di un sito web, anche se molte volte alcune aree tendono a sovrapporsi.

User Experience (UX), interazione e User Interface (UI)

Quando si pensa al design si fa riferimento all’aspetto visuale. Ma sul web, la prima questione da affrontare è progettare come funziona il sito. Prima di scegliere colori e caratteri tipografici, è importante identificare gli obiettivi del sito, come verrà utilizzato e come i visitatori vi si muoveranno. Queste attività rientrano nelle discipline del design dell’esperienza utente (UX), del design dell’interazione (IxD) e del design dell’interfaccia utente (UI). C’è molta sovrapposizione tra queste responsabilità, e non è raro che una persona o un team si occupi di tutte e tre.

Lo UX design si basa sulla comprensione delle esigenze degli utenti, attraverso l’osservazione del loro comportamento sul web e interviste dirette. Secondo Donald Norman (che ha coniato il termine), la UX comprende “tutti gli aspetti dell’interazione dell’utente con il prodotto: come viene percepito, appreso e utilizzato”. Per un sito web o un’app, questo include il design visivo, l’interfaccia utente, la qualità dei contenuti e persino le prestazioni generali del sito.

L’obiettivo dell’Interaction Designer è quello di rendere il sito il più possibile facile, efficiente e piacevole da utilizzare.

Strettamente correlato al design dell’interazione è il design dell’interfaccia utente (UI), che tende ad essere più focalizzato sull’organizzazione funzionale della pagina così come sugli strumenti specifici (pulsanti, link, menu, e così via) che gli utenti utilizzano per navigare il contenuto o eseguire compiti.

Comprendere le esigenze degli utenti è fondamentale per il successo di un sito o di una app. L’approccio di progettare attorno alle esigenze dell’utente è definito User-Centered Design (UCD) ed è un approccio centrale nel web design di oggi.

Una corretta progettazione del design di un sito dovrebbe iniziare da una analisi degli utenti, intesa come pubblico target a cui la comunicazione si dovrebbe rivolgere. Questa fase di ricerca comprende interviste e osservazioni ed ha lo scopo di ottenere una migliore comprensione di come il sito possa risolvere problemi o di come verrà utilizzato. È tipico che i designer effettuino una serie di test con gli utenti ad ogni fase del processo di progettazione, per garantire l’usabilità dei loro progetti. Se gli utenti hanno difficoltà a capire dove trovare i contenuti o come passare al passo successivo in un processo, è necessario rivedere l’intero progetto.

In questa fase del progetto vengono prodotti due documenti molto importanti per la realizzazione di un sito web.

Wireframe

Il wireframe è uno schema che mostra la struttura di una pagina web, utilizzando solo contorni per ciascun tipo di contenuto e widget.

Lo scopo di un wireframe è indicare come viene ripartito lo spazio sullo schermo e dove vengono posizionati i contenuti e le funzionalità come la navigazione, i campi di ricerca, gli elementi di un modulo e così via.

Colori, caratteri tipografici e altri elementi di identità visiva vengono deliberatamente omessi per non distogliere l’attenzione dalla struttura della pagina.

Diagramma del sito

Un diagramma del sito indica la struttura del sito nel suo complesso e come si relazionano tra loro le singole pagine.

A seconda delle dimensioni del progetto, il diagramma del sito può essere molto semplice. Alcuni diagrammi del sito riempiono intere pareti!

Storyboard e grafici di flusso dell’utente

Nel mondo del cinema e della pubblicità, lo storyboard è una serie di disegni che rappresenta visivamente una serie di scene. Declinato nel web design, uno storyboard serve a rappresentare il percorso di una persona dentro un sito o un’app.

Di solito include una sceneggiatura e delle “scene” costituite da visualizzazioni dello schermo o dell’utente che interagisce con lo schermo. Lo storyboard mira a mostrare i passaggi necessari per completare compiti, delineare opzioni possibili e introdurre anche alcuni tipi di pagine standard.

Graphic design

Fino adesso abbiamo parlato di tutti quei lavori che vengono svolti dietro le quinte nella progettazione di un sito web. Ma essendo il web un mezzo prevalentemente visuale, le pagine web richiedono una notevole attenzione al loro aspetto grafico, specialmente per riuscire a dare a che la visualizza una buona prima impressione.

Un graphic designer crea il “look and feel” del sito: loghi, grafica, caratteri tipografici, colori, layout e così via, per garantire che il sito faccia una buona impressione e sia coerente con il marchio e il messaggio che l’azienda vuole comunicare.

Ci sono molti metodi e materiali che possono essere utilizzati per presentare un design visivo ai clienti. I più tradizionali sono gli schizzi, anche a mano, e i mockup, una rappresentazione grafica del modo in cui potrebbe apparire il sito, declinato per le tre principali tipologie di device: desktop, smartphone e tablet.

L’obiettivo del mockup è arrivare a concordare un linguaggio visivo per il sito prima che inizi la produzione del codice delle diverse pagine.

I graphic designer devono anche occuparsi della produzione dei contenuti grafici per il sito e della loro ottimizzazione alle diverse risoluzioni degli schermi.

Per finire, i graphic designer sono anche essere responsabili della creazione di una guida di stile che documenti le scelte stilistiche attuate, come i font, i colori e altri aspetti visuali, al fine di mantenere coerente nel tempo l’aspetto del sito.

Frontend development

Nel gergo del web design, con il termine frontend ci si riferisce a tutti quegli aspetti del processo di progettazione che afferiscono ai browser.

In altri termini, una volta che è stato definito come dovrà apparire il sito, la parte grafica viene trasformata in un codice che il programma di visualizzazione dei siti (il browser) interpreta per essere in grado di fornire la pagina web.

I linguaggi principali che un browser interpreta sono HTML, CSS e JavaScript.

HTML

Il linguaggio HTML è il linguaggio che permette di definire la struttura di una pagina web: quale parte del documento è il menu, quale il titolo, il logo, il testo principale, un link, un modulo interattivo, un paragrafo, una lista e così via.

Tecnicamente, HTML non è un linguaggio di programmazione, ma linguaggio di marcatura (markup)

CSS

Diversamente da HTML, che definisce la struttura di una pagina web, il linguaggio CSS è proprio quello utilizzato per l’aspetto visuale del sito. Tratta quindi di tipi di caratteri, colori, immagini di sfondo, spaziatura tra le righe, layout della pagina, e così via.

La specifica CSS fornisce anche metodi per controllare come i documenti verranno presentati in contesti diversi da un browser, come in una stampa o nella lettura ad alta voce di uno screen reader.

Sebbene in teoria puoi creare una pagina web solo con l’HTML, nella pratica l’utilizzo del linguaggio CSS nei fogli di stile è necessaria.

JavaScript and DOM scripting

Il JavaScript è un linguaggio che aggiunge interattività e comportamenti alle pagine web, come per esempio:

• Validare i valori inseriti nei campi di un modulo
• Caricare contenuti con lo scroll
• Fare in modo che il browser ricordi informazioni sugli utenti con la gestione dei cookie
• Costruire interfacce complesse, come menu a comparsa, schede di navigazione, caroselli di immagini.

Rispetto ad HTML e CSS, JavaScript è un vero e proprio linguaggio di programmazione. Recentemente sono nati veri e propri framework JavaScript, come React, Bootstrap, Angular e altri, che automatizzano gran parte del processo di produzione. Un’altra tecnica utilizzata in ambito JavaScript è AJAX (Asynchronous JavaScript And XML), molto utilizzata per caricare contenuti in background, e che per questo consente alla pagina di aggiornarsi senza la necessità di doverla ricaricare (è quello usato per esempio quando usi i filtri di ricerca in un e-commerce o un portale di ricerca immobili).

Backend development

Se il sito ha funzionalità complesse, entrano in gioco i programmatori veri e propri o gli sviluppatori di backend nel gergo del web design.

Questi sviluppatori hanno dimestichezza con uno o più linguaggi come PHP, Ruby, .NET (o ASP.NET), Python o JSP ed entrano in gioco quando il tuo sito web ha funzionalità come l’elaborazione dei moduli, i sistemi di gestione dei contenuti (CMS) e gli acquisti online.

Inoltre, gli sviluppatori backend devono essere familiari con la configurazione e la manutenzione dei database che memorizzano tutti i dati di un sito, come il contenuto, gli account utenti, gli inventari dei prodotti e altro ancora. Alcuni linguaggi di database comuni includono MySQL, Oracle e SQL Server.

Full-Stack Developers

Con questo termine omnicomprensivo si individua una persona che è competente sia nei linguaggi frontend (HTML, CSS, JavaScript) che nei linguaggi backend (applicazioni server, database). È una specie rara: se ne trovate qualcuna, tenetevela stretta.

Altre figure coinvolte nello sviluppo di un sito web

Oltre al personale con competenze più strettamente tecniche, per siti dalle dimensioni importanti, possono ruotare intorno al progetto anche altri ruoli come i seguenti.

Product manager e Project manager

Il product manager di un sito web guida il suo sviluppo in modo che raggiunga gli obiettivi aziendali.

Il project manager invece è colui che coordina i designer, gli sviluppatori e tutti le altre persone che sono coinvolte a qualche titolo nel progetto. Il project manager lavora con il product manager per assicurarsi che il progetto venga completato entro i tempi e il budget previsti.

SEO specialist

Lo specialista SEO è colui che si occupa di integrare nel progetto web tutti quegli accorgimenti che agevolino l’inserimento delle pagine del sito tra i risultati di un motore di ricerca, come Google o altri.

Produttore di multimedia

Il produttore multimediale è colui che si occupa della produzione di elementi multimediali per un sito, tra cui audio, video, animazioni e persino giochi interattivi.

Soft skill

Finora ci siamo concentrati sulle diverse abilità tecniche che sono utili nella costruzione dei siti web.

Tuttavia, qualunque sia la capacità richiesta, sarebbe bene che le persone del team, oltre alle specifiche competenze tecniche, risultino in possesso anche di quelle che vengono chiamate abilità interpersonali o soft skill.

Vorrei menzionarne alcune altre, spesso trascurate, ma altrettanto cruciali per il successo del tuo progetto web.

Eccellenti capacità di comunicazione

Ci sarà bisogno di comunicare di persona, al telefono, via e-mail e tramite strumenti di messaggistica testuale con clienti, membri del team e superiori.

Il modo di comunicare dovrebbe essere chiaro, proattivo e diretto. Ricorda che una buona comunicazione richiede non solo di esprimerti chiaramente, ma anche di essere un buon ascoltatore. Assicurati di capire i problemi in discussione e non avere paura di chiedere chiarimenti se necessario.

Un’ottima attitudine al lavoro di gruppo

Creare siti significa far parte di un team. L’atteggiamento con cui affronti il tuo lavoro è contagioso: cerca di essere un membro del team positivo e amichevole. Abbasso i musoni!

Conclusioni sulla progettazione di un sito web

Con questo termina l’excursus sulle figure coinvolte e sulle competenze richieste per la creazione di un sito web. Come ho detto nel corso dell’articolo, più grande sarà il sito, più probabile che ogni membro del team debba avere una specializzazione specifica. Per progetti medio piccoli è comune trovare risorse della squadra di lavoro che possiedano un insieme di competenze e che le linee i confini tra le diverse discipline si confondano. Per esempio, puoi trovare una persona che si occupa di progettazione dell’interazione e dell’interfaccia utente, della progettazione grafica, di HTML e CSS, ma non scriva JavaScript, né lavori sul server o si occupi dell’organizzazione dei contenuti.

Con questo articolo di aver chiarito l’importanza e la varietà delle competenze necessarie per lo sviluppo di un sito web efficace. Collaborando insieme, ogni professionista contribuisce in modo unico alla creazione di un prodotto finale di successo, che soddisfi le esigenze del cliente e superi le aspettative degli utenti.