SHADOWPLAYSTUDIO

Glossario Web Design

Account: un account è il profilo di un utente, accessibile tramite delle Credenziali Personali, generalmente user e password da inserire attraverso un pannello di login.
Ogni account è singolo ed indipendente. In WordPress esistono diversi tipi di account con più o meno privilegi a seconda dei casi.



Anchor text:  è un sistema utilizzato per creare un collegamento tra due o più elementi generalmente nella medesima pagina.
L’anchor text viene spesso usata negli indici o nei menu dei siti one page o in pagine molto lunghe in modo che si possa raggiungere velocemente.

Avatar: è una piccola immagine tonda o quadrata, utilizzata per rappresentare la propria identità nel web.

Backlink: I backlink sono link provenienti da altri siti web che puntano verso il nostro sito.
Sono utilizzati nell’ambito Seo per accrescere la notorietà di un sito web agli occhi di Google e degli altri motori di ricerca.

Banner: è un elemento caratteristico di una pagina web e viene spesso utilizzato per mettere in rilievo contenuti importanti che possono essere pubblicitari o meno.
Generalmente sono quadrati o rettangolari con un testo breve ma incisivo ed un bottone che rimanda ad una pagina.

Blog: è un termine utilizzato nel web per indicare un sito web nel quale vengono pubblicate periodicamente notizie ed informazioni all’interno delle quali l’autore detto Blogger, affronta diversi argomenti ruotando attorno ad un tema principale come ad esempio: ricette, informatica, siti web, consigli, tutorial, medicina etc. Gli argomenti sono praticamente infiniti considerando che al mondo ci sono milioni di siti web con un Blog.

Body: generalmente indica i contenuti web (testi e immagini generalmente) all’interno di una pagina web e sta nel mezzo tra l’header (parte alta) ed il Footer (parte bassa).
In ambito web font “body” indica il corpo del testo della pagina.

Bold: indica il carattere tipografico grassetto. In linguaggio HTML il testo in grassetto deve essere compreso tra i tag < b > e < /b >, può essere sostituito dal tag < strong > preferito in ambito seo.

Cache: Si tratta di una piccola quantità di memoria più veloce e più costosa utilizzata per migliorare le prestazioni dei dati a cui si accede di recente o di frequente.
Una ottimizzazione in tal senso rende i siti web molto più veloci dato che non devono essere ricaricati ogni volta, ma vengono restituiti in base ad una versione già memorizzata.
Per recuperare una pagina visitata in precedenza, il browser ottiene la maggior parte dei file di cui ha bisogno dalla cache invece di riceverli nuovamente dal server web.

Call to action (CTA): di solito si tratta di un banner o di un testo con un bottone che richiama l’utente ad un azione.
Contiene un testo persuasivo elaborato da un copywriter e deve avere un aspetto grafico attrattivo.

Carousel o carosello: sono un elemento popolare nel moderno web design. Sono utilizzati per mostrare molti banner, immagini, recensioni, senza occupare molto spazio e rovinare il layout della tua home page grazie alo scorrimento laterale. Possono avere un’ automazione “autoplay” o essere azionati a mano tramite pulsanti.

Categorie: sono degli utili strumenti per organizzare ed evidenziare i contenuti tematici del blog (o prodotti). Generalmente, per categorie si intendono dei macro argomenti dal significato più ampio, come ad esempio “Siti Web” e “Web Design”, ben diversi dai tag che possono essere moltissime.

Checkbox: è un piccolo quadratino bianco dentro il quale bisogna cliccare per accettare o esprimere un consenso: un esempio conosciuto da tutti è quello presente nei moduli contatto dove prima di inviare un messaggio dobbiamo accettare la Privacy Policy.

CMS: “Content Management System“, letteralmente sono sistemi di gestione dei contenuti. Sono piattaforme create per facilitare la gestione dei contenuti di un sito web, utilizzabili senza particolari conoscenze di programmazione. Il CMS più famoso la mondo è WordPress, seguito da Joomla, Magento etc.
Spesso l’utente medio è convinto che grazie ai CMS occuparsi di realizzazione siti web diventi un gioco da ragazzi, ma in realtà anche i CMS nascondono le loro insidie e vanno studiati a fondo per essere utilizzati in modo professionale.

Cookie: un cookie è un piccolo file di testo, ache viene memorizzato nel dispositivo del visitatore, include informazioni sulle visite ad un sito Web. Questi dati sono utili per memorizzare le preferenze del visitatore come lingua o ricerche effettuate in precedenza.
Possono dividervi in Cookie Tecnici o Cookie di profilazione, o Cookie di terze parti.
Oggi i Cookies sono al centro della nuova Gdpr.

Contact Form:“modulo di contatto“, non è altro che il modulo presente sui siti per contattare via e-mail il proprietario o l’amministratore del sito web.
Contiene diversi campi che possono essere personalizzati come ad esempio: nome, cognome, indirizzo, telefono, email etc. Una volta cliccato su “invia” il sistema manderà una email all’amministratore del sito. I più famosi tools per WordPress: Contact form e WpForms.

Database: Un database è una raccolta organizzata di dati, in modo che sia facilmente accessibile e gestibile.
Puoi organizzare i dati in tabelle, righe, colonne e indicizzarli per trovare più facilmente le informazioni pertinenti.
I gestori di database creano un database in modo tale che un solo set di programmi software fornisca l’accesso ai dati a tutti gli utenti.
Lo scopo principale del database è gestire una grande quantità di informazioni archiviando, recuperando e gestendo i dati.

Dominio: è l’indirizzo del tuo sito web che si digita nella barra degli URL del browser per visitare un sito web.
In parole povere, se il tuo sito web avesse una casa, il tuo nome di dominio sarebbe il suo indirizzo.

E-commerce: il significato letterale è “commercio elettronico.” In parole povere, significa gestire un’attività online. Si riferisce alla vendita e all’acquisto di beni e servizi su Internet in cui lo scambio di denaro e dati avviene tramite connessioni protette al fine di eseguire una transazione. I pagamenti possono avvenire con Carte di Credito, bonifici, o pagamenti alla consegna.

Embed: significa “incluso”, “inserito”; in informatica può assumere diversi significati, per quanto riguarda la realizzazione di siti web l’embed è generalmente un codice generato da un sito esterno, che una volta inserito in una pagina web consente la visualizzazione di uno specifico contenuto. Ad esempio un video di youtube o la sezione “mi piace” su facebook possono essere inclusi in una pagina web mediante l’inserimento del codice embed.

Favicon: Le favicon, che significano “icone preferite”, sono piccole immagini visualizzate accanto agli URL nelle schede del browser, nei risultati di ricerca, negli archivi cronologici e negli elenchi di segnalibri. Le favicon sono spesso loghi di dimensioni ridotte e, sebbene minuscole, aumentano la consapevolezza del marchio e migliorano l’esperienza dell’utente. Continua a leggere per saperne di più su cosa sono le favicon, dove vengono utilizzate, esempi, consigli sulle dimensioni e come crearne una gratuitamente per il tuo marchio.

Font: è una raccolta di caratteri con un design simile.
Questi caratteri includono lettere minuscole e maiuscole, numeri, segni di punteggiatura e simboli. La modifica del carattere può alterare l’aspetto di un blocco di testo in modo sostanziale o rendere una pagina web poco leggibile.
Alcuni font sono progettati per essere semplici e facili da leggere, mentre altri sono progettati per aggiungere uno stile unico al testo. Ad esempio, Helvetica ha un aspetto semplice e moderno, mentre Times ha un aspetto più antico e tradizionale.
Nel web design moderno I Font rappresentano un vero e proprio elemento di design detto “design tipografico”.

Le due categorie più basilari di caratteri sono “serif” e “sans-serif”. Le piccole estensioni sui bordi dei caratteri, come la linea orizzontale sul fondo di una ” T ” maiuscola , sono chiamate grazie. I caratteri che includono queste piccole linee sono chiamati caratteri serif. La parola “sans” significa “senza”, quindi i caratteri sans-serif non hanno queste righe extra.

Footer: termine inglese per “piè di pagina”; è la sezione della pagina web posizionata sotto il corpo (body), ossia la parte bassa di una pagina che appare subito sotto la parte centrale. In genere nel footer vengono riassunti i dati e le informazioni più importanti, come ad esempio indirizzi, recapiti, numero di partita iva, copyright, etc per una più facile consultazione del sito stesso. È generalmente uguale e comune in tutte le pagine che compongono il sito.

Gallery: “galleria”; è una sezione di un sito web o una pagina appositamente dedicata ad accogliere una galleria fotografica o di altri elementi multimediali come Youtube video.

Può avere diversi aspetti di design come ad esempio: a griglia regolare o casuale detta “Masonry” dove ogni elemento ha dimensioni e proporzioni diverse.

Header: letteralmente significa “intestazione”; è la sezione iniziale di una pagina web e posizionata sopra il corpo (body). È la parte più alta di un sito web, la prima quindi ad essere visualizzata dall’utente, per questo ritenuta molto importante durante la realizzazione della User Experience e delle voci menu. Contiene generalmente gli elementi distintivi del sito stesso, come il logo, il motto aziendale, elementi grafici, ma anche il menu di navigazione. Come per il footer, indicativamente anche l’header è uguale e comune a tutte le pagine che compongono il sito.

Home page: “pagina iniziale“ rappresenta la prima pagina di un sito web. Dato che è la pagina più visitata del sito e quella sulla quale gli utenti atterreranno con più frequenza è importante che la home page sia ben realizzata, con un design pulito, graficamente accattivante e che dia una buona visione d’insieme del sito al visitatore, indirizzandolo poi nelle altre pagine coi contenuti specifici.

Rappresenta un pò quello che rappresenta la copertina per una rivista è quindi molto importante che anche a livello di contenuti e di Copy sia chiaro dopo pochi secondi quale sia l’argomento del sito web.

Italic: termine inglese che identifica il carattere tipografico corsivo. In linguaggio HTML il testo in grassetto viene realizzato con tag e



Hosting Web: è un servizio che consente alle organizzazioni e agli individui di pubblicare un sito Web o una pagina Web su Internet. 
Tutti i siti hanno bisogno di uno spazio web per poter esistere.
Un host web, o provider di servizi di web hosting, è un’azienda che fornisce le tecnologie e i servizi necessari per la visualizzazione del sito Web o della pagina Web in Internet. I siti Web sono ospitati o archiviati su computer speciali chiamati server. Quando gli utenti Internet desiderano visualizzare il tuo sito Web, tutto ciò che devono fare è digitare l’indirizzo del tuo sito Web o il dominio nel proprio browser. Il loro computer si collegherà quindi al tuo server e le tue pagine web verranno consegnate a loro tramite il browser.




Https: è la versione sicura di http. La S del protocollo indica che il sito utilizza un certificato SSL per crittografare tutte le comunicazioni per una maggiore sicurezza.
Molto importante per l’ottimizzazione Seo in quanto Google penalizza i siti non sicuri.



Keywords: letteralmente ‘parole chiave’, nel web si utilizza per definire una breve stringa di parole che l’utente web utilizza per effettuare ricerche sui motori come Google.Le Keywords sono molto importanti per l’ottimizzazione Seo. Uno studio approfondito ci aiuterà a creare contenuti testuali pertinenti che siamo ricercati dagli utenti.

Landing page: letteralmente significa “pagina di atterraggio”, è una pagina realizzata ad hoc in genere per campagne pubblicitarie (Facebook Ads, Google) in cui l’utente appunto “atterra” dopo aver cliccato su uno specifico link.
Viene realizzata su misura in modo che il messaggio sia molto chiaro. Molto importante il design, i testi (che devono essere scritti in modo sintetico e d’impatto) e una o più call to action.
La landing page non va confusa con una normale pagina presente in un sito web o con un sito da una sola pagina detto One Page.

Layout: è il design di una pagina web o di un suo elemento, in generale l’insieme delle caratteristiche grafiche-estetiche di una pagina/sito web.

Menu: situato nella parte alta del sito (header) contiene tutte le voci relative alle pagine principali del sito web. Cliccando su una di queste voci si raggiunge tramite un link la pagina richiesta.

Meta Tag: Si tratta di informazioni aggiuntive, utilizzate soprattutto dai motori di ricerca, per e contengono informazioni su una pagina web, come la sua descrizione, autore, titolo, ecc.
I motori di ricerca utilizzano queste informazioni per visualizzare le informazioni nelle pagine dei risultati dei motori di ricerca (detta SERP). Il Meta Title ad esempio viene anche visualizzato nella linguetta della scheda sul Browser.

Sito One page: sta per “una pagina”; si intendono i moderni siti web che si presentano, come dice la definizione stessa, tutti in una pagina. Ciò non significa assolutamente che siano composti da una singola pagina, ma piuttosto che per passare da una pagina a quella successiva non è necessario selezionarla cliccando sul menu ma semplicemente scorrere verso il basso il sito stesso. Poter visualizzare tutto il sito in un’unica pagina facilita notevolmente la consultazione su mobile.

Palette: una tavolozza (in lingua inglese palette), nella computer grafica indica un insieme dei colori disponibili in un programma di grafica o di disegno.[1]

Ogni colore della tavolozza è associato ad un indice, cioè ad un ordinale che identifica il colore nella tavolozza stessa (è possibile comunque che lo stesso colore si ripeta con indici diversi). La rappresentazione dei pixel di un’immagine attraverso indici nella tavolozza permette un drastico risparmio memoria e tempo computazionale rispetto ad altre tecniche, ma limita la gamma di colori utilizzabili a quelli presenti nella tavolozza.

Permalink: è la contrazione di permanent link, ossia “collegamento permanente”, rappresenta semplicemente il link di una specifica pagina, sezione o post. Ad eccezione dei siti one-page (composti da un’unica pagina) tutti gli altri siti web sono composti da più pagine/sezioni, ciascuna di esse identificata da uno specifico permalink.

Plugin: è un componente aggiuntivo non autonomo che interagisce con un altro programma principale allo scopo per ampliarne le funzioni. Ad esempio, un plugin per un software di grafica permette l’utilizzo di nuove funzioni non presenti nel software principale.

Popup/modal: è un componente, che permette di visualizzare, in una schermata sovrapposta, una comunicazione urgente e/o un messaggio promozionale. Può essere attivato automaticamente in base al tempo o al tipo di interazione oppure manualmente tramite il click su un link. Bisogna fare attenzione nell’utilizzarlo perché risulta molto fastidioso agli occhi dell’utente e anche a quelli di Google.

Portfolio: è l’elenco dei lavori svolti da un professionista (ad esempio un architetto), eventualmente corredato di immagini esplicative. Qui un esempio>

Privacy policy: è un documento che informa gli utenti di un sito web circa il trattamento dei loro dati personali. Quando un sito web raccoglie dati personali (nome, cognome, e-mail per esempio) o un soggetto terzo (Google, Facebook, etc) è coinvolto nel trattamento dei dati personali, la privacy policy deve informare gli utenti del sito in questione circa la modalità e la finalità della raccolta dei dati, designare un responsabile ed eventualmente gli altri soggetti coinvolti.

Redirect: è un “rinvio”, cioè una pagina che contiene un rimando automatico ad un’altra pagina differente. La pagina di redirect non ha quindi un contenuto autonomo, ma solo il codice che permette al software di reindirizzare l’utente alla pagina desiderata aprendola automaticamente

Restyling sito web: è l’operazione che compie un web designer quando interviene su un sito web obsoleto creando un design grafico completamente nuovo.

Responsive: con questo termine, traducibile con “che reagisce”, viene indicata una tecnica di web design per la realizzazione di siti web che permette alle pagine di riadattare automaticamente il proprio layout per fornire una visualizzazione ottimale in funzione dell’ambiente nei quali vengono visualizzati (pc su desktop con diverse risoluzioni, tablet, smartphone, cellulari di vecchia generazione, web tv) riducendo al minimo all’utente la necessità di ridimensionamento e scorrimento, in particolare quello orizzontale. Il nostro sito Sopra le Righe è di tipo responsive, in quanto lo abbiamo realizzato in modo da riadattare automaticamente tutti gli elementi di cui è composto in funzione della risoluzione con la quale viene visualizzato.

Restricted area: è una particolare sezione di un sito web il cui accesso è limitato e possibile solo a specifici utenti. I contenuti dell’area riservata possono essere accessibili in seguito a iscrizione al sito web ad esempio, talvolta sono anche a pagamento. In genere per poter accedere a tale sezione viene fornita all’utente una password o un codice identificativo di riconoscimento.

Sem: o Search Engine Marketing, è un insieme di attività svolte online sui motori di ricerca per incrementare la visibilità di un sito. Include SEO e SEA (Annunci a pagamento sui motori di ricerca).

Seo: è l’acronimo di Search Engine Optimization, ovvero “ottimizzazione dei motori di ricerca”; si intendono tutte quelle attività finalizzate ad ottenere la migliore rilevazione, analisi e lettura del sito web da parte dei motori di ricerca grazie ad un migliore posizionamento.

Sidebar: la “barra laterale” o sidebar è una colonna verticale, di dimensioni più o meno ridotte, presente in molti siti web e che racchiude contenuti di vario tipo, come news, link, pulsanti, banner, etc. E’ possibile posizionare una sidebar sulla destra oppure a sinistra rispetto al corpo (body) del sito, così come è possibile posizionare contemporaneamente due sidebar oppure nessuna.

Slider: spesso confuso con il carosello, uno slider è un pannello orizzontale che contiene immagini scorrevoli. Avendo un forte impatto visivo ed estetico, è un ottimo modo di presentazione per il sito stesso ed efficace metodo per catturare l’attenzione del visitatore attraverso la visualizzazione di immagini che scorrono automaticamente.
Il plugin più famoso utilizzato con WordPress è Revolution Slider. (link)

Slider Revolution: plugin utilizzato in WordPress per realizzare stupendi Slider.

Sticky: rappresenta un elemento, spesso il menu o l’intero header, che rimane visibile anche scorrendo la pagina come se letteralmente fosse “appiccicato” in uno specifico punto dello schermo.

Tab: è un elemento che permette di raggruppare graficamente dei contenuti in diverse aree raggiungibili da una barra di titolo. Permette di risparmiare spazio e al testo stesso raggruppare logicamente contenuti diversi.

Tag cloud: traducibile in “nuvola di etichette”, è una rappresentazione visiva delle etichette (tag) o parole-chiave maggiormente usate in un sito web. Generalmente questa lista è presentata in ordine alfabetico, con la peculiare caratteristica di attribuire un font più grande alle parole più importanti o maggiormente ricercate.

Tema WordPress: è un template facilmente installabile in WordPress che contiene l’intero design di un sito web. Pagine, immagini e testi. Utilizzati da molti principianti spesso rappresentano un limite, dato che, difficilmente verranno lasciati così come sono e dovendo sostituire le bellissime immagini del demo con le proprie, alla fine il risultato sarà comunque molto scarso. Si possono trovare su Themeforest.

Template: nel caso di un sito web rappresenta un modello, una struttura di base che andrà a definire i diversi contenuti che compongono il sito stesso. Le diverse tipologie di template forniscono anche lo stile, la veste grafica del sito, attraverso l’uso di font, maschere, sezioni, bottoni, banner e molto altro. Possono essere personalizzati nei colori e nei font.

Thumbnail: significa “miniatura” (talvolta abbreviato in thumb) è il termine utilizzato per definire l’anteprima di un’immagine più grande, che quindi viene presentata in formato ridotto. Solitamente cliccando sulla thumbnail, grazie ad un link verso l’immagine più grande, questa verrà visualizzata nelle sue dimensioni reali.

Toggle: assomiglia a tutti gli effetti ad un “interruttore”. Un toggle non è altro che un pulsante che, al click, apre una sezione più ampia sotto di se, contenente testo, immagini, link, etc. E’ un sistema molto pratico perché consente contemporaneamente di non riempire eccessivamente di dettagli una pagina, mostrandoli solo a seguito dell’interazione (click) dell’utente sul toggle stesso.

Url: è l’acronimo di Uniform Resource Locator ed è un riferimento (un indirizzo) a una risorsa su Internet. Abbreviato come URL , un Local Resource Locator è un modo per identificare la posizione di un file su Internet. Sono ciò che utilizziamo non solo per aprire siti Web, ma anche per scaricare immagini, video, programmi software e altri tipi di file ospitati su un server.

User Experience (UX): l’interazione che un utente ha con un’interfaccia web e come questa influisce sulla propria esperienza di navigazione. È fondamentale nel web design dato che rappresenterà la struttura del sito web. Realizzata male può compromettere la navigabilità di un sito web.



User Interface (UI): Le User Interface (UI) sono i punti di accesso dove gli utenti interagiscono con i progetti. L’UI sono gli elementi fisici e tecnici che permettono all’utente di interagire con la tecnologia o con il prodotto, cioè i controlli, i pulsanti, ecc. L’UI ritrae visivamente gli elementi della UX che sono stati stabiliti per fornire un’interazione sensata e piacevole con l’utente. Sono disponibili in tre formati:
Interfacce grafiche (GUI) – Gli utenti interagiscono con rappresentazioni visive su pannelli di controllo digitali. Il desktop di un computer è una GUI.
Interfacce a controllo vocale (VUIs) – Gli utenti interagiscono con queste attraverso la loro voce. La maggior parte degli assistenti intelligenti – per esempio, Siri su iPhone e Alexa sui dispositivi Amazon – sono VUI.
Interfacce basate sui gesti – Gli utenti si impegnano con gli spazi di progettazione 3D attraverso i movimenti del corpo: per esempio, nei giochi di realtà virtuale (VR)

Web Designer: letteralmente disegnatore di pagine web è un’espressione inglese utilizzata anche nella lingua italiana per indicare chi progetta e sviluppa graficamente un sito web.
 I web designer sono esperti di estetica in cui l’obiettivo finale è guidare i risultati aziendali.
Gli obiettivi che in genere influirà su un designer sono la generazione di lead, la conversione all’iscrizione, la consapevolezza del marchio e nuovi clienti.
I web designer mettono in gioco una serie di competenze che utilizzano per raggiungere questi obiettivi. Alcune di queste abilità includono:
Grafica (immagini, loghi e diagrammi)
Design della pagina (il layout di una pagina web)
Design del prodotto (flussi di onboarding, design del modulo, funzionalità)
Ricerca sul comportamento dei consumatori (come il consumatore risponde effettivamente al prodotto)
Ricerca e progettazione UX/UI
Reportistica sugli obiettivi aziendali
Pianificazione per obiettivi aziendali

Il web designer è colui che progetta e crea le singole pagine web: in generale è il responsabile del funzionamento tecnico del sito, della comunicazione in esso presente, dell’aspetto grafico e del coinvolgimento degli utenti che visitano il sito (user experience). Il web designer è anche il responsabile finale della qualità di un sito web e garantisce che i siti siano accattivanti dal punto di vista grafico, abbiano un buon impatto visivo, siano semplici da navigare, compatibili con le esigenze dei visitatori e accessibili utilizzando browser e dispositivi diversi: a lui spetta il compito di coniugare design e navigazione mediante l’utilizzo delle tecnologie digitali disponibili.

Widget: deriva dalla contrazione di “window” e “gadget” in quanto è il componente grafico dell’interfaccia utente di un programma, che ha lo scopo di facilitare all’utente l’interazione con il programma stesso.

Wireframe: i wireframe sono illustrazioni organizzative schematiche dei contenuti presenti nel progetto che stiamo realizzando. La funziona principale dei wireframe è di comunicare l’idea del progetto, focalizzando l’attenzione sull’architettura piuttosto che il design. Rappresenta una base per il prototipo da sviluppare e rende bene l’idea della consistenza del progetto.

WordPress: WordPress è una piattaforma software di “blog” e content management system (CMS) open source ovvero un programma che, girando lato server, consente la creazione e distribuzione di un sito Internet formato da contenuti testuali o multimediali, gestibili ed aggiornabili in maniera dinamica. Inizialmente fu creato da Matt Mullenweg e distribuito con la licenza GNU General Public License. È sviluppato in PHP con appoggio al gestore di database MySQL.
È il CMS più utilizzato al mondo.

Ricevi il tuo preventivo entro 24 ore!

Compila il form e raccontaci quali sono le tue esigenze. Devi creare un sito web da zero ed hai solo un’idea in testa? Non preoccuparti, è il nostro lavoro, ti aiuteremo a rendere realtà i tuoi sogni.