Archivi categoria: Web Project

eCommerce

eCommerce

 

Un sito o portale di eCommerce è pensato appositamente per la vendita in Internet di articoli, prodotti e servizi, bypassando il contatto diretto fra venditore e acquirente. Nei siti di commercio elettronico tutto il processo, dalla ricerca del prodotto e delle informazioni, fino al pagamento e alla spedizione della merce, avviene online.

 

Esempi di celebri portali di eCommerce internazionali sono i vari eBay e Amazon, capaci di vendere prodotti di qualsiasi tipo a utenti collocati geograficamente su tutto il territorio mondiale. Credere, tuttavia, che il commercio elettronico sia esclusiva prerogativa delle grandi multinazionali è un errore che, a onor del vero, è sempre meno comune.

 

Vendere online con un sito di eCommerce è una soluzione adatta anche a realtà aziendali locali e nazionali. Ciò è ampiamente dimostrato dal grande numero di eShop sorti negli ultimi anni.

 

Come funziona un sito di eCommerce? Forse è superfluo rispondere a una domanda simile, probabilmente oggi chiunque ha comprato, almeno una volta in vita sua, su Internet. Per completezza, facciamo una piccola panoramica, lato utentelato commerciante.

 

Lato utente: dopo essersi registrati sul sito dove si intende effettuare l’acquisto e aver navigato fra le categorie in cerca del prodotto desiderato, quest’ultimo viene selezionato e spostato nel carrello degli acquisti. Una volta raggiunto il carrello, con un semplice clic è possibile procedere all’acquisto dei prodotti selezionati, pagare con carte di credito, prepagate o con uno dei vari sistemi di pagamenti online (vedi paypal, ad esempio), e concordare i dettagli della spedizione.

 

Lato commerciante: gestire un sito di eCommerce, in presenza di una struttura ben fatta da grafico e programmatore, è piuttosto semplice. Generalmente, un eCommerce ha un pannello di amministrazione (sia se viene programmato partendo da un CMS, sia se nasce da programmazione pura), a cui è possibile accedere tramite Username e Password e tramite cui è possibile accedere e apportare modifiche: inserire o rimuovere articoli, intervenire sui prezzi, modificare la quantità di giacenza, controllare gli acquisti e le spedizioni, definire eventuali sconti e gestire la fatturazione. Una volta inseriti articoli, prezzi e le informazioni necessarie alla clientela per procedere all’acquisto, l’eCommerce lavora praticamente da solo.

 

Tre cose importanti da sapere, quando si commissiona un portale di eCommerce:

 

1) Considerata la forte crescita della tendenza di navigazione da dispositivi mobile, è importante che il sito abbia un layout responsive;

 

2) Sull’eCommerce vengono inseriti dati sensibili e delicati, come le informazioni delle carte di credito per i pagamenti: è importante siano accuratamente protetti, tramite i protocolli di sicurezza applicati ai dati sensibili e alle transazioni;

 

3) La creazione di un sito di commercio elettronico non è, di per sè, garanzia di successo. Gli utenti non finiranno automaticamente sul sito per fare acquisti. Veicolare il traffico sul proprio portale è importante. A tal proposito, attenzione all’ottimizzazione SEO del sito e alle possibili campagne AdWords o di online advertising per la promozione dei prodotti in vendita.

 

Font

Font

 

Parlando di font, in web design e brand identity, si fa riferimento al tipo di carattere tipografico utilizzato. Un esempio per chi mastica, anche a livello basilare, qualcosa di informatica. Se avete mai utilizzato programmi di scrittura per computer ne avrete incontrati: Word o Open Office, ad esempio, danno la possibilità di modificare carattere: quelli sono font. Parliamo di times new romanarial e cambria, fra gli altri.

 

I font sono molto importanti in differenti settori, sia per il web che nella grafica e pubblicità tradizionali. Ad esempio, nelle lavorazioni di brand identity, l’insieme dei font utilizzati contribuisce a rafforzare l’immagine aziendale e, generalmente, è condiviso fra logo, immagine coordinata e tutto il complesso delle grafiche aziendali. La scelta del font giusto, naturalmente, è molto importante anche nella grafica pubblicitaria e nella creazione di locandine, manifesti e, in generale, materiale promozionale cartaceo e non.

 

Il font è anche una delle principali componenti visive all’interno di un sito internet: deve essere leggibile, prevedere la possibilità di variare in grassettocorsivo, risultare gradevole anche se utilizzato a differenti dimensioni.

 

Esistono due famiglie principali di font: serif e sans serif.

 

font serif (detti anche caratteri con grazie), presentano, appunto, le grazie, ovvero elementi visivi che contribuiscono a modificare l’aspetto estetico delle lettere tramite prolungamenti ortogonali delle estremità. Fa parte della famiglia, ad esempio, il ben noto Times New Roman.

 

I font sans serif (detti anche caratteri senza grazie), non presentano le grazie, i tratti terminali tipici dei serif. Un esempio piuttosto noto è l’Arial.

 

Bozza Grafica

Bozza Grafica

 

Durante le fasi che portano alla creazione di siti internet, di loghi o di qualsiasi prodotto che contempli interventi di grafica, generalmente si tende a fornire al cliente, prima della stesura definitiva del lavoro, una o bozza grafica, o più d’una se previsto, che riassuma il layout ipotizzato per il prodotto in costruzione, così da ottenere un riscontro prima della realizzazione della versione definitiva.

 
La bozza grafica è un’immagine, spesso un file .jpg (il formato di salvataggio più utilizzato) in bassa risoluzione di un .psd, di un .ai o di un .indd (formati nativi di Photoshop, Illustrator o InDesign, software di Adobe utilizzati dai grafici per creare layout grafici di siti web, cataloghi o ritocchi fotografici), che il cliente può aprire, così da poter verificare con mano l’anteprima o la proposta visiva del prodotto che in via di definizione.

 

Lato brand identity: chi si occupa di creazione loghi, immagine coordinata e supporti, utilizza le bozze grafiche per mostrare ai clienti le prime proposte realizzate, ad esempio, per un logo. Dalla proposta accettata, generalmente, si prosegue con le modifiche e le revisioni, fino ad arrivare al logo definitivo.

 

Lato web project: quando un graphic designer progetta la veste grafica di un sito web, crea generalmente più possibili varianti della forma visiva del futuro sito (disposizione degli elementi, colori, font e via dicendo). Sulla bozza grafica più vicina al gusto del cliente, si procede con lo sviluppo e le eventuali modifiche.

 

Lato grafica pubblicitaria: nella realizzazione, ad esempio, di un volantino, la bozza grafica è un file di immagine con le prime proposte realizzate, sottoposte al cliente per approvazione e, in seguito ad essa, definite e revisionate fino ad arrivare al risultato finale.

 

Landing Page

Landing Page

 

Un termine molto utilizzato, specie quando si parla di campagne pubblicitarie online, è landing page. Si tratta di pagine web create per il soddisfacimento di uno scopo ultimo definito e preciso come, ad esempio, la promozione di un servizio o di un prodotto.
Sono pagine che, tecnicamente, non differiscono da quelle che compongono un sito web: generalmente, tuttavia, non fanno parte del menù principale del sito, ovvero non sono raggiungibili navigando nel sito stesso. Vengono raggiunte in particolari occasioni e possono essere usate per differenti obiettivi. Ad esempio, nelle campagne AdWords, le landing page sono visualizzate dopo che un cliente ha cliccato su un annuncio presente nella SERP, e spiegano nel dettaglio l’offerta presentata in poche righe nell’annuncio stesso. Possono essere utilizzate, ai fini dell’ottimizzazione per motori di ricerca di un sito, per essere visualizzate se il cliente ricerca una determinata parola chiave, con lo scopo ultimo di attirare il visitatore sul sito o fargli effettuare un’azione (sia un acquisto diretto o una richiesta di preventivo).
Possono essere pensate, per facilità di comprensione, come fossero un volantino digitale, in cui viene presentato un prodotto/servizio, le sue caratteristiche e come ottenerlo.
Un esempio: se un utente fa click su un annuncio pubblicitario che promette la vendita di “scarpe sportive al 50%”, la landing page mostrerà, con tutta probabilità, una pagina che spieghi chiaramente quali scarpe sono scontate, ne mostri degli esempi fotografici, come aggiudicarsi lo sconto e come contattare il venditore o effettuare direttamente l’acquisto.

 

Template

Template


Un template, parlando in termini generici, è un documento precompilato, una sorta di struttura base, personalizzabile volta per volta in base alle singole esigenze. I template sono strumenti molto utilizzati sia nella brand identity che nell’ambito dei web project, comprendenti sia grafica che sviluppo web, perchè costituiscono un’ossatura di base su cui è possibile inserire innesti diversificati, realizzando un prodotto finale che, in molti casi, non è riconducibile a quello di partenza.

– lato brand identity: nella creazione di loghi, i template sono strumenti molto utilizzati, specie per chi è attratto da offerte a basso costo e tempistiche realizzative ultrarapide. In questo settore, i template sono delle strutture grafiche (simboli, disegni, illustrazioni) molto elementari, su cui è possibile impostare nomi di aziende, tagline e payoff, così da personalizzare il risultato finale per la propria necessità.
In realtà, se è vero che il risparmio economico a breve tempo è innegabile, va considerato anche che il risultato finale sarà un logo molto simile a decine o centinaia d’altri, e non rappresenterà l’identità aziendale in maniera unica, essendo utilizzato non soltanto da altri clienti ma, probabilmente, anche dagli stessi competitors della propria azienda.

– lato web project: nel web design e nello sviluppo web, il termine template è spesso associato alla creazione di siti internet basati su CMS. In questo caso, il template è installato sul CMS da utilizzare (sia esso Joomla, WordPress o quant’altro), fornendo al grafico e al programmatore una bozza di sito. Tramite la personalizzazione del template (leggasi realizzazione di una bozza grafica) e l’intervento sui codici di programmazione, è possibile modificare il template stesso fino a ottenere una grafica completamente diversa rispetto all’originale. Il template è comodo perchè fornisce un impianto precompilato e permette di risparmiare tempo in fase di realizzazione. Tuttavia, se non vengono eseguiti interventi di modifica e adattamento professionali, il risultato può essere lo stesso che occorre nella brand identity: una serie di siti tutti molto, troppo simili l’un l’altro.

Sistema Operativo

Per la definizione di sistema operativo, ci rifacciamo alla definizione fornita da Wikipedia, ritenuto sufficientemente esaustiva e comprensibile:

“[…] è un insieme di componenti software, che consente l’utilizzo di varie apparecchiature informatiche (ad esempio di un computer) da parte di un utente […]”

Facciamo qualche esempio per rendere il concetto più chiaro: sono sistemi operativi le varie versioni di windows firmati microsoft, come windows xp, windows 7 e l’ultimo windows 8; OS X o Mac OS X, sistema operativo firmato Macintosh; oppure IoS, sistema operativo Apple per tutti i dispositivi iPhone, iPod e iPad.
Un sistema operativo è, in ultima analisi, un insieme di programmi in grado di far funzionare tutte le parti che compongono un dispositivo, sia esso un personal computer, un notebook, un tablet o un smartphone fornendo, al tempo stesso, un’interfaccia per l’utente, di utilizzo dei programmi, software e app.

Siti Internet

Siti Internet

 

Un sito internet è un’insieme di pagine web, strettamente collegate fra loro, ospitate su un server web e raggiungibili tramite indirizzo IP o nome di dominio.
La definizione, che può risultare complessa, nasconde una realtà molto più nota e familiare agli utenti. I siti internet sono un prodotto digitale ampiamente utilizzato da chi naviga sul web: basti pensare che le pagine in cui navigate in questo momento, la nostra Wiki, fanno parte del nostro sito web ufficiale. Wikipedia, il fratello maggiore della nostra Wiki aziendale e enciclopedia onnisciente del web, è anch’esso un sito web. Rientrano nella categoria anche i siti internet aziendali, utilizzati dalle attività o dai liberi professionisti per presentare i loro prodotti o servizi.
La principale distinzione fra siti web è definita in base alla possibilità di aggiungere o rimuovere pagine e contenuti dalla loro struttura.

 

Siti internet statici: non sono pensati per permettere all’utente di interagire con gli elementi che compongono il sito web stesso: inserimento/eliminazione pagine, testi, immagini e/o file multimediali;

 

Siti internet dinamici: sono dotati di un pannello di amministrazione o di una qualsiasi struttura di backend, che permette interazione e modifiche fra il sito web e l’utente.

 

Browser

Un browser è un software che, installato su un dispositivo informatico come un personal computer, uno smartphone o un tablet, permette all’utente di navigare in Internet.

Non lasciatevi spaventare da nomi che non conoscete: in realtà, fate utilizzo di browser per la navigazione web praticamente ogni giorno, senza saperlo. Infatti, rientrano nella categoria dei principali browser di navigazione web “Internet Explorer” di casa Microsoft, “Chrome” di Google, “Firefox” di Mozilla e “Safari” di Apple.

Ogni browser ha caratteristiche di visualizzazione e funzionamento proprie, possibilità di personalizzazione e potenzialità che variano, sia su dispositivi fissi che mobile, in base alla versione del browser in utilizzo. Ognuno di essi, infatti, è periodicamente aggiornato dal fornitore che ne migliora volta per volta capacità e performance. Questo comporta che non tutte le pagine web siano navigabili con tutte le versioni del browser utilizzato dagli utenti. Per garantire una corretta e universale navigazione del proprio sito internet su tutti i browser (o almeno sui più utilizzati), buona pratica è quella di effettuare test di compatibilità, per garantire il funzionamento sulla versione attuale di un browser e sulle versioni più recenti più vicine a quella attualmente disponibile.

Design Responsive

design responsive

 

Facciamo un esempio pratico: in questo momento, voi che leggete state navigando sul nostro sito web ufficiale, www.designo.net. Proviamo a ipotizzare che stiate navigando dal vostro personal computer o, nella peggiore delle ipotesi (peggiore ai fini della spiegazione, ovviamente) da un notebook. Sulla pagina di navigazione del browser, la scheda della wiki appare chiaramente leggibile, occupando pienamente la pagina web e premettendo una lettura chiara e agevole dei contenuti, in uno spazio dove ogni elemento (foto, testi, menù di navigazione), occupa una posizione definita.

Ora, pensate a questo: cosa succederebbe se voi decideste di navigare da uno smartphone o un tablet? La pagina sarebbe comprensibile ed esteticamente piacevole anche guardandola da uno schermo di dimensioni molto ridotte?

Se volete sapere la risposta, provate pure a farlo con un iPhone, un iPad o qualsiasi dispositivo di questo tipo.

Il design responsive è una tecnica di web design e sviluppo web che permette ad un sito web di essere accessibile e navigabile in modo ottimale da qualsiasi dispositivo, dai grandi schermi dei computer fino a quelli, di dimensioni molto ridotte, degli smartphone. Considerando che la tendenza di navigazione dei siti internet, oggi, si è spostata verso i device mobile, non serve certo ascoltare il nostro parere per capire l’importanza di avere un sito responsive, per qualsiasi categoria: dal classico sito statico aziendale al portale di eCommerce.

 

Dominio

Dominio

La definizione tecnica di Domain Name System, ovvero Sistema dei nomi di dominio, ci interessa poco. A voi, probabilmente, interesserà ancora meno. Citiamo Wikipedia:

 

“Il sistema dei nomi di dominio (in inglese: Domain Name System, DNS), è un sistema utilizzato per la risoluzione di nomi dei nodi della rete […] in indirizzi IP e viceversa. Il servizio è realizzato tramite un database distribuito, costituito dai server DNS”.

 

 

Immaginiamo non sia molto chiaro ma non vi preoccupate: per comprendere a pieno una definizione simile è necessario possedere specifiche competenze di programmazione web e programmazione in generale.
Semplifichiamo all’estremo: il dominio è, in ultima analisi, il nome del vostro sito internet, l’indirizzo a cui il sito è raggiungibile dal browser di navigazione.

Un esempio: designo.net è il nostro dominio.
Se la vostra azienda si chiama “Azienda Mario Rossi”, è probabile che il vostro nome sarà aziendamariorossi.it, o .com, o qualsiasi altra estensione vogliate acquistare.

Il dominio si acquista online presso specifici fornitori del servizio. I costi variano in base a determinati fattori (brevità del nome di dominio, nomi di dominio particolarmente creativi, e altre caratteristiche), oscillando da pochi euro fino (si parla di 5-10€/anno), fino ad arrivare a diverse centinaia/migliaia di euro.

Hosting

Con il termine hosting, si fa riferimento alla fornitura di un determinato spazio web, dove è possibile allocare le pagine di un sito internet.


L’acquisto dell’hosting, insieme al dominio, è una delle operazioni imprescindibili nel processo di creazione del sito internet perché, in assenza dell’hosting stesso, sarebbe impossibile caricare il sito online e renderlo disponibile agli utenti.


Per fare un esempio chiarificatore, acquistare un hosting equivale ad affittare le mura di un esercizio pubblico.



Hosting Studio Grafico Roma Designo



In rete esistono decine di centinaia di fornitori di hosting, con prezzi che oscillano dai 3/5€ al mese fino ad arrivare a cifre decisamente più sostanziose. Il costo dell’hosting varia, ovviamente, in base alle necessità del sito web.


Per un sito aziendale che non preveda particolari funzionalità (ad ex: vendita online, caricamento di numerosi video o materiale multimediale, ecc.), esistono numerosi fornitori che permettono un server ben funzionante e rapido a 30/50€ l’anno. Se l’obiettivo dell’utente è, invece, un sito dinamico e complesso, ad esempio un eCommerce, il costo della fornitura si alzerà in base, ad esempio, alla quantità di articoli presenti, al numero di utenti previsti simultaneamente sul sito e via dicendo.


Una volta acquistato l’hosting da un fornitore, questo va impostato secondo le specifiche caratteristiche del sito web e, in base ai tempi di propagazione del DNS, il sito risulterà disponibile alla navigazione all’indirizzo IP assegnato in fase di acquisto.



CMS

CMS - Content Management System


Il termine CMS è acronimo di Content Management System, in italiano Sistema di Gestione dei Contenuti. Si tratta di un software il cui scopo è rendere semplice e (tendenzialmente) intuitiva la creazione e la gestione di un sito web.

Un CMS fornisce all’utente un pannello di controllo gestionale, dal quale è possibile modificare gli elementi del sito: menù di navigazione, basilari aspetti grafici, layout delle pagine, contenuti e immagini delle pagine di navigazione e via dicendo.

Tecnicamente, costruire un sito web tramite un CMS libera il webmaster dalla necessità di conoscere approfonditamente i linguaggi di programmazione (HTML, XHTML e simili), altrimenti imprescindibili per la realizzazione del sito stesso. Tramite i pannelli di controllo è possibile modificare, aggiungere, eliminare e intervenire sui contenuti delle varie pagine web.

Tuttavia, per creare un sito web completo e personalizzato secondo le necessità dell’utente, è comunque necessario possedere competenze di programmazione almeno basilari: in caso contrario, anche soltanto modificare la collocazione di un elemento in una pagina potrebbe risultare proibitivo.

Alcuni fra i più noti CMS disponibili online sono Joomla, WordPress, Magento e PrestaShop.

Esperienza Utente

Parlando di esperienza utente, si fa riferimento a tutti gli accorgimenti messi in atto, lato graphic design e lato programmazione web, affinchè l’esperienza di navigazione di un utente su un sito web sia la migliore possibile.
Cosa s’intende con questo? Lo studio di tutti i piccoli dettagli che, messi insieme, possono determinare (e lo fanno, nella maggior parte dei casi) il successo di un sito internet.
Alcuni fattori che rientrano nello studio dell’esperienza utente:

– soddisfazione dell’aspettativa: sul sito sono presenti tutte le informazioni necessarie?
– navigazione semplice e intuitiva: l’utente riesce a reperire facilmente le informazioni necessarie?
– percezione del valore: il sito trasmette esattamente il messaggio che voglio sia percepito dai miei clienti/utenti?
– affettività: l’esperienza di navigazione dell’utente sul sito è stata così positiva da spingere l’utente a tornare nuovamente sul sito?

Lo studio dell’esperienza utente precede la realizzazione della grafica di un sito internet e la sua applicazione va di pari passo con la programmazione del sito stesso.