Il mondo della grafica è un mondo vasto e molto più complesso di quello che può sembrare. Con la nascita delle nuove tecnologie anche la grafica si è adeguata alle nuove tendenze tecnologiche e non solo di design. Possiamo quindi dire che la grafica pubblicitaria è una parte essenziale del content marketing da sempre.
Ma conosciamo la sua storia? Iniziamo a conoscere le sue origini riportando alcune curiosità che, probabilmente, molti non conoscono.
Il concetto di logo
Sembra che la nascita del design del logo sia iniziato nell’antico Egitto tra il 2686 e il 2181 a.C.
Infatti, in questo periodo gli antichi iniziarono a marchiare con geroglifici gli animali per segnalarne la proprietà.
Anche in Grecia era frequente l’utilizzo di loghi. Si pensi infatti alle prime monete greche e romane che avevano dei monogrammi di cui il più famoso è il monogramma sacro.
Dal XIII secolo il concetto di logo inizia a diffondersi e ad essere utilizzato dai commercianti e orefici.
Le prime tipografie
La prima tappa della storia della tipografia risale, tra il 1448 e il 1454, all’invenzione della stampa attribuita a Johann Gutenberg.
In Italia il primo libro stampato a caratteri mobili risale al 1464 nel monastero di Subiaco. Questo libro si trova ancora oggi conservato a Napoli, nella Biblioteca di Storia Paritaria.
La categoria degli “stampatori” nasce e si sviluppa proprio sul suolo italico, precisamente a Venezia, dove si ebbe un incredibile sviluppo della stampa e delle tipografie.
I font usati nella grafica pubblicitaria
Oggi siamo sommersi da font si ogni genere, ma uno dei più antichi font del mondo è il Garamond. Questo font deve il suo nome al francese Claude Garamond (1500-1567), il creatore di caratteri più famoso dei suoi anni.
Tra il XVII e XVIII secolo vennero alla luce anche il Baskerville, il Caslon e l’italianissimo Bodoni, ideato da Giovanbattista Bodoni nel 1798.
Quest’ultimo è considerato ancora oggi uno dei caratteri con maggiore eleganza della storia.
Le prime stampe pubblicitarie
Le prime stampe pubblicitarie risalgono al 1600. A questi tempi esisteva il coranto, ovvero un precursore del giornale, all’interno dei quali trovavano spazio le prime pubblicità create da grafici.
I progressi tecnologici successivi portarono poi alla produzione di stampe a colori con la nascita della cromolitografia nella pubblicità.
La cromolitografia permetteva la stampa di pubblicità a colori attraverso una lastra litografica e una matrice di pietra che rilasciava il colore. Questa tecnica continuò sorprendentemente ad essere usata in alcune rare stamperie litografiche artigianali fino agli anni ’60 dello scorso secolo.
La prima agenzia di design grafico
La prima agenzia di design grafico al mondo fu austriaca: Wiener Werkstätte.
Il nome significa solo Officina di Vienna ed è stata la prima organizzazione di artisti visivi sotto forma di agenzia. Era l’inizio di un movimento che avrebbe dato vita al più celebre Staatliches Bauhaus.
La “Desktop Revolution”
Con la diffusione dei computer nel 1985 avviene la digitalizzazione della tipografia. Grazie ad aziende come Adobe, Apple e Aldus prese vita ciò che è passato alla storia come Desktop Revolution.
Ciò si verificògrazie all’introduzione di tre fattori fondamentali:
Il codice PostScript di Adobe;
Il primo programma di impaginazione digitale Aldus PageMaker;
La prima stampante laser economica a 300 dpi della Apple connessa ad un Apple Macintosh.
Queste sono solo alcune delle curiosità storiche sul mondo della grafica un mondo in continua evoluzione.
Chi ha un sito internet sa che prima o poi dovrà mettere mano al layout grafico per adattarlo al meglio alle proprie esigenze. Applicare le modifiche direttamente al tema principale potrebbe far si che al successivo aggiornamento di quest’ultimo tutte le migliori e personalizzazioni fatte vadano perse. Allora come si può ovviare al problema?
La risposta è molto semplice, basta usare i temi child – temi figlio – i ereditano tutte le funzionalità e lo stile del tema principale senza il rischio che vadano persi in un successivo aggiornamento.
In questo articolo parleremo dei child theme della piattaforma WordPress, elencando i pericoli delle modifiche direttamente ai temi, dei vantaggi che un tema child porta e di come è possibile crearli.
I pericoli nel modificare direttamente un tema
A meno che non abbiamo realizzato da noi l’interno tema può capitare di rendersi con che il tema acquistato non rispecchia a pieno le nostre aspettative e quindi è necessario mettervi mano per migliorarlo/adattarlo alle nostre esigenze. Modificare un tema WordPress può essere un’esperienza snervante, un semplice modifica può avere effetti a cascata la cui soluzione non è detto che sia sempre facile.
Inoltre, eventuali modifiche apportate al tema principale andranno perse man mano che vengono rilasciati gli aggiornamenti da parte degli sviluppatori del tema. L’idea di rimanere con il tema modificato tralasciando eventuali nuovi aggiornamenti comporta il possibile aumento della vulnerabilità di sicurezza dell’intero portale.
Ecco perchè i temi child sono la soluzione: possiamo apportare delle modifiche indipendentemente dal tema principale.
I vantaggi dell’utilizzo dei temi child
I vantaggi nell’uso dei child theme è facilmente intuibile da quanto scritto sopra. In primis, il loro utilizzo consente di personalizzare direttamente il sito internet senza preoccuparsi del template usato; consentono di estendere le funzionalità del sito e consentono di accedere in modo più semplice alle modifiche apportate.
Gli svantaggi dell’utilizzo dei temi child
Per poter realizzare un tema child con tutte le nostre personalizzazioni bisogna conosce a pieno le varie funzioni e hook del tema principale. Per fare ciò bisogna dedicare molto tempo a capire i vari meccanismi e a leggere l’eventuale documentazione del tema genitore.
Cercare di apporre delle modifiche senza aver prima capito il funzionamento del tema parent può, anche in questo caso, generare errori a cascata.
Creare un tema child
Prima di iniziare a dire come creare un tema child è bene ricordare che prima di qualsiasi modifica è necessario, più che altro per una sicurezza maggiore, effettuare una copia di backup dell’intero portale. La sicurezza, come sempre, non è mai troppa.
Di cosa abbbiamo bisogno per creare un child theme
Per poter iniziare a creare il nostro tema figlio abbiamo semplicemente bisogno di un client FTP e di un editor di testo. Consigliamo, per la loro facilità d’uso e perchè sono gratuiti, FileZilla come client FTP e Notepad++ come editor di testo. Ovviamente sono necessari i dati di configurazione per il nostro client FTP, dati che sono stati di certo fornite all’atto dell’acquisto del hosting.
Iniziamo
Creare una directory all’interno della directory dei temi (wp-content/themes) che conterrà il tema child. Il nome della directory non deve contenere alcuno spazio ed è una pratica comune usare il nome del tema genitore aggiungendo alla fine “-child”.
Quindi, se ad esempio, si sta creando un tema child per il tema twentythirteen, il nome della cartella sarà “twentythirteen-child”.
All’interno di questa cartella creiamo un file denomitato style.css. Questo file è l’unico richiesto per la creazione del nostro thema child.
All’interno di questo file dobbiamo inserire il seguente testo
/* Theme Name: Twenty Thirteen Child Theme URI: http://example.com/ Description: Tema Child per il tema Twenty Thirteen Author: Qui il vostro nome Author URI: http://example.com/about/ Template: twentythirteen Version: 0.1.0 */
Ciascuna di queste righe può essere cambiata secondo le necessità del nostro tema.Solo due righe sono obbligatorie: Theme Name e Template.
Theme Name e Template
Theme Name è ovviamente il nome che vogliamo dare al nostro tema child; possiamo scrivere il nome che più desideriamo. Il Template, invece, è il nome della directory del tema genitore. Nel nostro esempio il tema genitore è TwentyThirteen quindi la voce Template è twentythirteen, che è il nome della directory dove risiede il tema TwentyThirteen.
Il foglio di stile del tema child sovrascriverà il foglio stile del tema genitore. È probabile però che si voglia includere il foglio di stile principale in modo da sfruttarlo al meglio.
Ci sono due metodi per fare ciò: l’uso della funzione @import nel foglio di stile del tema child o una piccola modifica al file functions.php.
È sempre consigliato sfruttare la funzione wp_enqueue_style() nel file functions.php.
Cos’è functions.php
Prima di procedere indicando la modifica da fare al file functions.php è bene spiegare che cos’è questo file.
Il file functions.php è un file di WordPress che racchiude al suo interno delle funzioni specifiche in uso dal tema che si utilizza.
Ogni tema ha il suo file function.php e se si cambia tema si andranno ad utilizzare funzioni diverse. In genere in questo file si inseriscono funzioni personalizzate, per modificare il comportamento del tema in uso.
I riferimenti al file function.php si possono trovare sul sito ufficiale di WordPress.
La modifica al nostro functions.php
Andiamo ora a creare questo file nella cartella principale del vostro tema child. Una volta creato inseriamo il seguente codice al suo interno:
Prima di concludere questo articolo, per chi non ama mettere mano al codice, diciamo che sono disponibili numerosi plug-in di WordPress che consentono di generare temi child in automatico. Siamo sempre dell’avviso però che troppi automatismi fanno male e che bisogno consocere almeno le basi per evitare spiacevoli problemi.
Dopo aver letto questo articolo si è capita l’importanza di un tema child WordPress e si sa come realizzarne uno senza troppa fatica. Un tema child è molto utile per fare esperienza e testare funzionalità e opzioni su di un portale oltre che a risparmiare tempo e lavoro al momento degli aggiornamenti del template.
Oggigiorno, grazie alla tecnologia fotografica presente ovunque, siamo letteralmente sommersi da fotografie di ogni tipo e risoluzione. Ma siamo sicuri che le foto che vengono così realizzate siano riutilizzabili anche per scopi di marketing?
Prima di proseguire premettiamo che in questo articolo non parleremo dei soggetti fotografati, nè di come realizzare fotografie accattivanti e nè tanto meno parleremo di tecniche fotografiche. Diremo soltanto il perchè è utile realizzare fotografie in orizzontale per scopi di marketing e non solo.
Iniziamo quindi a spiegare il perchè le fotografie devono essere realizzate in orizzontale e con un rapporto d’aspetto pari a 4:3.
Fotografie orizzontale con un rapporto di 4:3
Scattare fotografie in orizzontale con un rapporto di 4:3 è la base per la qualità e il riutilizzo delle stesse. Grazie agli smartphone molti utilizatori realizzano scatti fotografici in verticale inconsapevoli del danno per la qualità fotografica che creano.
Le fotografie in orizzontale possono essere utilizzate, senza la necessità di essere “tagliate” per adattarle ad esempio per condividerle sui social, per le immagini ad esempio di copertina di Facebook, LinkedIn, gli eventi di Facebook o Google My Business, Twitter e molto altro.
Rapporto d’aspetto ed orientamento orizzontale
Prima di proseguire specifichiamo cosa si intende con il termine “rapporto di aspetto” di una fotografia. Il rapporto di aspetto di una fotografia è il rapporto matematico che c’è tra le proporzioni di un lato ed un altro della fotografia stessa.
Per capirci: se il lato lungo della fotografia è pari 4000 pixel e quello corto è di 3000 pixel il rapporto d’aspetto è di 4:3.
La maggior parte degli smartphone attuali e le macchine fotografiche permettono di impostare il rapporto d’aspetto delle fotografie scattate tramite la propria configurazione.
Va detto che, molto probabilmente, il rapporto d’aspetto preimpostato sarà a 4:3 in quanto è usato in modo predefinito in fotografia.
C’è differenza tra scattare una foto in orizzontale ed una in verticale?
La risposta è si, c’è una notevole diversità e non solo per il formato dell’immagine.
La scelta dell’orietamento, se in verticale o in orizzontale, gioca un ruolo fondamentale nel modo in cui si presenta il soggetto. Presentazione che può far variare quelle emozioni che si spera di suscitare in chi vede la foto.
Le fotografie in orizzontale sono da preferire alle foto in verticale in questi casi:
quando il soggetto è orizzontale – se il soggetto è più largo di quanto sia alto, un’immagine orizzontale valorizza la composizione
se il soggetto è in movimento da un lato all’altro della foto, l’immagine in orizzontale amplifica il senso di movimento del soggetto principale più di quanto sia possibile con una foto in verticale
dare un senso di spazio – le immagini orizzontali possono essere utilizzate per suggerire un senso di grandezza nei paesaggi
accentuare le emozioni – ad esempio se un soggetto piccolo viene posizionato in un campo ampio, può suggerire un senso si solitudine
Da non sottovalutare, per le foto in orizzontale, i vantaggi pratici, alcuni dei quali già detti, che ai molti passano inosservati.
quasi tutti i dispositivi odierni informatici sono creati per mostrare al meglio il formato orizzontale. Una immagine verticale si vedrà al centro di bande laterali ed avrà una risoluzione nettamente più bassa
le fotografie orizzontali sono più ampie e creano, ma dipende molto dalla foto, una percezione panoramica per chi le guarda
Da quanto detto risulta evidente che scattare le fotografie in orizzontale risulta obbligatorio se devono essere pubblicate su siti internet o social network (facebook, instagram, etc).
Ma anche le fotografie in verticale presentano dei vantaggi in alcune situazioni:
se il soggetto da fotografare è verticale
se il soggetto è più alto che largo
se il soggetto si sposta verso l’alto o verso il basso. In tale situazione il formato verticale con la regola dei terzi amplifica il senso di movimento nell’immagine
quando nella foto si vuole dare un senso di profondità, soprattutto se parliamo di strade e/o binari
È bene ricordare che se le foto devono essere usate per presentazioni professionali o essere usate in siti internet o social network è bene usare immagini orizzontali.
In conclusione
Quando si scatta una foto la nostra mente mostra l’immagine artistica, la composizione, gli elementi da inquadrare… Una persona creativa dovrebbe sperimentare tutti e due i formati e infrangere tutte le regole della fotografia per un’immagine “fuori dal comune”. Ma se l’uso delle foto deve essere su dispositivi informatici l’uso del formato orizzontale è vivamente consigliato.
Quando presentiamo le bozze grafiche dei nostri lavori capita di utilizzare, per diversi motivi, il testo segnaposto conosciuto come “lorem ipsum”. Ma che cos’è e cosa vuol dire?
Come già detto con il termine lorem ipsum si indica un testo segnaposto utilizzato da grafici, designer, programmatori e tipografi a modo riempitivo per bozzetti e prove grafiche. Questo testo stravagante non vuol dire assolutamente nulla anche se è tratto da uno scritto di Cicerone di oltre 2000 anni fa.
Le origini di Lorem ipsum
Questo testo, composto da parole fra loro slegate, deve la sua esistenza a Marco Tullio Cicerone e ad alcuni passi del suo De finibus bonorum et malorum (Il sommo bene e il sommo male) scritto nel 45 a.C, un classico della letteratura latina risalente a più di 2000 anni fa.
La scoperta fu fatta da Richard McClintock, professore di latino al Hampden-Sydney College in Virginia, che di fronte al ricorrere impetuoso dell’oscura parola consectetur nel testo Lorem ipsum ne ricercò le origini fino a individuarle nelle sezioni 1.10.32 e 1.10.33 della succitata opera filosofica ciceroniana.
Le parole pescate da uno dei dialoghi contenuti nel De finibus sono dunque i tasselli del testo insensato più famoso del mondo.
Una scoperta che ha conferito maggiore importanza al Lorem ipsum che resta sulla cresta dell’onda sin dal 500, ovvero da quando, secondo il professor Richard McClintock, il suo utilizzo si diffuse fra i tipografi dell’epoca.
Di certo sappiamo che a renderlo noto ai più fu una pubblicità degli anni Sessanta, quella dei fogli di caratteri trasferibili Letraset: fogli adesivi trasparenti su cui era impresso il testo Lorem ipsum facilmente trasferibile sui prodotti editoriali prima dell’avvento del computer.
Perchè si usa Lorem ipsum
Il testo, seppur vanti origini così illustri, resta privo di senso perché composto da spezzoni combinati arbitrariamente fra loro. Ciò nonostante ha una tale capacità di distribuirsi perfettamente all’interno di un layout grafico stampato o digitale, da consentire di non farsi distrarre dalle parole e di concentrarsi sull’aspetto grafico.
Infatti, la sua insensatezza permette all’occhio di concentrarsi solo sul layout grafico valutando oggettivamente le scelte stilistiche di un progetto, per questo lo si trova installato su molti programmi di grafica su molte piattaforme software di personal publishing e content management system.
Per questo motivo il suo utilizzo è ampiamente diffuso nel campo dell’editoria, del giornalismo digitale e stampato, nello sviluppo di siti internet e nell’ambito della comunicazione in generale.
Un altro aspetto interessante di questo testo segnaposto è che la sua notorietà ha stimolato la fantasia di numerose persone, addetti della comunicazione e di nerd, che hanno sviluppato testi alternativi, ugualmente adatti alla funzione dell’originale, dando vita a una serie di sequenze no sense – senza senso – davvero creative.
Le alternative “moderne”
Se siete fan del mitico Lino Banfi, ad esempio, potete usare il Lino Ipsum Generator, costola del più famoso Lorem Ipzum, che permette di creare il proprio testo segnaposto combinando le frasi più celebri del grande attore barese. Entrambi questi generatori garantiscono testi originalissimi di cui si possono definire contenuto, lunghezza e altri aspetti attraverso l’inserimento di elementi HTML.
Conclusioni
Lorem ipsum dolor sit amet. Aut laborum laboriosam cum culpa quia id illum repudiandae est nemo vero aut enim iste in voluptas ullam quo sunt fugit. In beatae praesentium At esse laudantium cum obcaecati sint ea dolor minus.
Chiunque ha avuto a che fare con la grafica o con uno dei tanti software di grafica di certo si sarà trovato a sentir parlare del formato vettoriale. In questo articolo cerchiamo di fare un po’ di chiarezza sul che cos’è il formato vettoriale e quali sono i suoi utilizzi.
Quali sono le differenze tra formato raster e il formato vettoriale
Prima di procedere con il che cos’è il formato vettoriale dobbiamo precisare che esistono due formati di immagini digitali: formato raster e formato vettoriale.
Che cos’è una immagine raster?
Per immagini raster, conosciute anche come immagini bitmap, si intendono le immagini fotografiche che possono essere in uno dei formati conosciuti quali JPG, PNG, GIF oppure TIFF. Queste immagini sono composte da pixel colorati, ovvero milioni di singoli puntini invisibili che compongono una figura.
Le immagini raster hanno una dimensione e risoluzione propria. Nel momento in cui vengono ingrandite oltre le loro dimensioni originali, subiscono perdite di dettagli e appaiono sgranate o dentellate, si viene a creare fastidioso effetto chiamato pixellatura.
Il vantaggio di un’immagine raster però è che grazie ai milioni di pixel che la compongono, può rappresentare svariati dettagli.
Che cos’è una immagine vettoriale?
Le immagini vettoriali, a differenza delle immagini raster, sono descritte mediante un insieme di primitive geometriche che definiscono punti, linee, curve e poligoni. Il formato vettoriale è definito attraverso equazioni matematiche ed è indipendente dalla risoluzione. Una immagine vettoriale, infatti, può essere ingrandita all’infinito senza subire perdite di qualità e definizione.
Ad esempio un logo in vettoriale può essere utilizzato sia su un biglietto da visita, sia su un cartellone pubblicitario mantenendo i dettagli invariati.
Il formato vettoriale presenta anche un’alta efficienza nella dimensione del file, infatti il peso di un documento è inferiore rispetto ad uno raster.
I vantaggi del formato vettoriale
Non è sempre possibile o conveniente lavorare con la grafica vettoriale ma ci sono alcuni casi in cui il suo utilizzo è necessario. Vediamo quali sono:
La grafica vettoriale è scalabile all’infinito. La grafica vettoriale è priva di pixel quindi è indipendente dalla risoluzione. Gli oggetti possono essere scalati all’infinito e stampati in qualsiasi grandezza senza perdite di qualità o definizione. Un logo in formato vettoriale può essere stampato sia su un foglio A4, sia su un cartellone di 3 metri mantenendo inalterata la definizione. Ecco perchè quando realizziamo loghi lo facciamo in vettoriale.
La grafica vettoriale permette di modificare i colori in modo semplice e veloce. All’interno di un software di elaborazione di immagini vettoriali come Illustrator è possibile cambiare in modo rapido i colori che compongono un logo o una grafica. È possibile per esempio modificare il colore di un oggetto passando da un metodo colore RGB ad un colore Pantone (particolarmente utilizzato in alcuni processi di stampa).
Il vettoriale offre la possibilità di visualizzare i contorni di un disegno. Un altro vantaggio del formato vettoriale è la possibilità di visualizzare solo i contorni che compongono una immagine. Questa modalità di visualizzazione è molto importante in fase di progettazione perché consente di trovare eventuali elementi nascosti oppure invisibili nell’anteprima. Il contorno inoltre è funzionale ad aziende specializzate in stampa digitale perché permette di guidare le attrezzature per ottenere incisioni o tagli.
In che ambito viene utilizzato il formato vettoriale?
La grafica vettoriale è comunemente usata dai professionisti della grafica per moltissimi ambiti quali:
creazione di loghi e immagine coordinata
illustrazioni vettoriali e icone
preparazione di file di stampa (flyer, manifesti, biglietti da visita)
interfacce utente di app, siti internet e altro
disegni tecnici, grafica CAD, ingegneria, e 3D
Quanto conviene usare la grafica vettoriale al posto della grafica raster?
Non è facile dare una risposta a questa domanda, dipende tutto dal tipo di progetto. Se all’interno di un lavoro si devono gestire elementi fotografici con diverse tonalità, sfumature, effetti e miscele di colore è meglio lavorare con immagini raster.
Se invece il progetto è più simile ad un disegno o ad un illustrazione è d’obbligo lavorare con un formato immagine vettoriale.
Quali sono i formati vettoriali esistenti?
Prima di iniziare a lavorare con la grafica vettoriale occorre conoscere i più comuni formati immagine vettoriali. Potrebbe sembrare una sciocchezza ma conoscerli permette già di prevenire l’invio e la ricezione di file non conformi al lavoro da fare. Vediamo ora quali sono i formati esistenti:
AI: Adobe Illustrator è il formato di salvataggio standard di Adobe Illustrator. Il formato AI è compatibile con i software della Creative Cloud di Adobe (Photoshop, InDesign, After Effects) e con alcuni programmi di grafica 3D (Cinema 4D).
EPS: Encapsulated PostScript è un formato standard per l’elaborazione di immagini e disegni vettoriali o bitmap. Il formato è compatibile con Adobe Illustrator, CorelDraw, Freehand, Photoshop, InDesign e QuarkXPress.
SVG: Scalable Vector Graphics è un formato di immagine per la grafica vettoriale ottenibile mediante Illustrator. È possibile utilizzare il formato SVG anche sul web per creare elementi scalabili ed adattabili a qualsiasi pagina web.
PDF: Portable Document Format è un formato sviluppato da Adobe. È il più diffuso per condividere documenti di testo ed immagini. Per la visualizzazione è necessario un lettore specifico quale, ad esempio, Acrobat Reader, distribuito gratuitamente. Un file vettoriale può essere salvato in PDF ed elaborato con i principali software di grafica come Illustrator, Photoshop e InDesign.
Per concludere
Per concludere facciamo un riassunto delle caratteristiche principali dei due formati.
File vettoriale – Formato vettoriale
è definito attraverso equazioni matematiche che danno vita a forme;
è l’ideale per creare loghi, disegni, illustrazioni, disegni tecnici e immagini che verranno stampate su prodotti;
può essere scalato a qualsiasi dimensione senza perdere qualità;
è indipendente dalla risoluzione e può essere stampato in qualsiasi dimensione e risoluzione;
anche se l’immagine è di grandi dimensioni, il peso del file risulta comunque contenuto;
il numero dei colori può essere facilmente aumentato o ridotto in base ai budget di stampa;
può essere facilmente convertito in formato raster;
può essere salvato in diversi formato grafici: AI, SVG, EPS e PDF.
File Raster (bitmap) – Formato raster
è un immagine composta da pixel;
è un formato utilizzato per l’editing di foto e la creazione di immagini a tono continuo e con miscele di colore morbide;
non è un formato scalabile in modo ottimale. Quando un immagine raster viene ingrandita oltre le dimensioni originali, appare pixellata;
più l’immagine è grande e più il peso del file è elevato;
è più difficile stampare immagini raster utilizzando una quantità ridotta di colori;
alcuni processi di stampa non possono utilizzare formati raster;
a seconda della complessità dell’immagine, la conversione in vettoriale può richiedere molto tempo;
le immagini raster sono i formati di immagine più comuni, tra cui: JPG, GIF, PNG, TIFF, BMP e PSD.
Chi pensa che la matematica non c’entri nulla con il mondo reale si sbaglia di grosso. Con buona pace di chi proprio non sopporta numeri, operazioni e figure geometriche, tutto ciò che ci circonda ha a che fare con la matematica. Persino l’arte.
Non ci credete? Allora andiamo alla scoperta della sezione aurea, un rapporto numerico che, anche se non avete mai sentito prima, è intorno a noi.
Che cos’è la sezione aurea?
Sostanzialmente la sezione aurea è un rapporto tra due numeri. In particolare, è un rapporto tra due numeri che dà come risultato il numero irrazionale 1,618033… (per comodità di lettura il numero è volutamente troncato).
Questo numero, essendo veramente unico e particolare, prende il nome di Phi.
Un altro modo per definire la sezione aurea è prendere un numero a e un numero b, e dire che a+b sta ad a come a sta a b.
I famosissimi numeri della successione di Fibonacci (1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, …), il cui ultimo numero viene calcolato sommando i due precedenti (chiediamo venia ai matematici puri per una così banale spiegazione) sono strettamente legati alla sezione aurea.
Infatti i rapporti tra due numeri qualsiasi, tra quelli affiancati, della successione danno come risultato la costante Phi della sezione aurea (1,62…).
In pratica si può anche dire che la sezione aurea è la relazione tra due numeri consecutivi della successione di Fibonacci.
Ma cosa rende così speciale la sezione aurea?
Il rapporto aureo è alla base di molte delle forme più armoniose della natura. Lo stesso nome, “aureo”, indica il senso di armonia e di perfezione generato dalle forme che si basano su questo numero nel nostro cervello.
La sezione aurea in natura
La sezione aurea in natura assume spesso la forma della spirale costruita su rettangoli che seguono il rapporto 1,618:1. La spirale aurea è infatti una spirale di tipo logaritmico che cresce seguendo un cosiddetto fattore di accrescimento pari a Phi.
Alcuni esempi della spirale aurea in natura possono essere alcune forme di conchiglie, la disposizione degli stami dei fiori, la forma delle galassie e dei cicloni e tantissime altre.
Ecco alcuni esempi:
La sezione aurea nell’architettura e nell’arte
La bellezza della natura è sempre stata di esempio per le opere realizzate dall’uomo. Per tale ragione l’uomo ha sempre utilizzato la sezione aurea per calcolare le proporzioni armoniose tra le varie parti degli edifici o delle statue rappresentanti le figure umane.
In particolare, nell’essere umano, il rapporto tra l’altezza totale e l’altezza dall’ombelico a terra è 1,618. Lo sapevano bene Vitruvio prima e Leonardo Da Vinci con il suo famoso “Uomo Vitruviano“.
In architettura, il Partenone di Atene, ad esempio, presenta una facciata perfettamente inscrivibile nelle proporzioni di un rettangolo aureo (ossia un rettangolo costruito in base alle “regole” della sezione aurea).
Usare la sezione aurea per il design
L’applicazione nel design della “ezione aurea può apparire molto più difficile di quello che è in realtà. Esistono alcuni trucchetti che possono migliorare i progetti senza dover passare molte ore ad effettuare calcoli. Vediamo quali sono.
La regola dei terzi
La regola dei terzi consiste nel suddividere la pagina, la foto o il layout su cui si sta lavorando in tre parti verticali e in tre parti orizzontali.
I 4 punti in cui queste linee si incontreranno saranno quelli su cui andrà focalizzata l’attenzione.
Il motico di tale operazione è dato dal fatto che così ragiona il cervello umano. Inconsciamente siamo abituati a suddividere quello che vediamo in aree di interesse in base a come sono strutturate e a concentrarci sui punti focali posizionati nell’area centrale di quello che vediamo.
Usare la griglia della spirale aurea
Un altro metodo per implementare la sezione aurea è utilizzare le forme e le griglie della stessa.
Ad esempio costruire delle grafiche basandosi sulla spirale aurea vista prima o sulla divisione dell’area di lavoro in base ai rettangoli e alle proporzioni del rapporto aureo.
La sezione aurea nel logo design
Una delle applicazioni più comuni e più utilizzate è all’interno del graphic design, e in particolare nella costruzione dei loghi. Creare un logo non è una cosa semplice, esistono delle regole, ed esistono pure delle possibili applicazioni di formule geometriche come appunto quella del rapporto aureo.
Di esempi di loghi costruiti seguendo i principi e le forme del rapporto aureo ce ne sono moltissimi. Prendiamo in esame un logo che tutti conoscono: il logo dell’Apple.
Il logo della Apple è composto interamente da cerchi i cui raggi danno i numeri della successione di Fibonacci.
La sezione aurea nella fotografia
Anche nella fotografia si possono applicare le stesse regole che si applicano alla grafica e al design. In particolare è molto utile la regola dei terzi. Ad esempio una regola non scritta per quando si fotografa frontalmente un viso è quella di far stare gli occhi all’altezza dei due punti di incrocio superiori.
Le forme, in particolar modo la spirale aurea, possono anche essere utilizzate per creare fotografie dalle proporzioni fortemente armoniche.
La sezione aurea nel web design
Le proporzioni della sezione aurea sono largamente utilizzate anche nella costruzione dei layout dei siti web.
Ad esempio si segue molto spesso il rapporto 1,618:1 tra la colonna dei contenuti e la sidebar (la barra laterale di un sito).
Qui un esempio di come può essere trovata una giusta proporzione all’interno di un sito web:
In qualsiasi momento, se avete una larghezza totale di un layout potete utilizzare la formula scritta nell’immagine qui sopra per ricavare le proporzioni auree.
Molto spesso, quando si parla di creare e gestire un sito web, si cita la figura del “webmaster”, termine usato fin troppo impropriamente. Il perchè di tale affermazione è semplice e ci vediamo costretti a sfatare un primo mito: un sito internet non viene sviluppato e realizzato da una singola persona.
La mitica figura del webmaster che appare nell’immaginario collettivo in realtà non esiste. Cerchiamo di capire il motivo.
Forse, fino a quando si realizzavano delle semplici pagine in HTML con qualche immagine qui e lì, con risoluzioni dei monitor molto standardizzate si poteva parlare di questa figura… ma oggi le cose sono molto cambiate.
Come tutti i settori legati alla tecnologia anche il web ha avuto un impennata nello sviluppo con una forte spinta verso il futuro. Prenderemo ad esame la creazione di uno shop on-line, ecommerce, per spiegare tutti i passaggi e le figure necessarie per la sua realizzazione.
Riuscire a creare un e-commerce di qualità oggi richiede il lavoro di un team ben affiatato. Diversi professionisti ognuno dei quali con una propria mansione e specializzazione.
Per comprendere il concetto è meglio iniziare a dividere la vita di un sito in cicli o fasi.
Il ciclo di vita di un sito web
In mondo molto sintetico creare e gesire un sito web prevede un prima fase di progettazione. Ogni portale internet va pirma pensato come si deve e poi sviluppato.
Una volta superate queste fasi il sito viene reso pubblico e quindi inizia a diventare produttivo. Si parla, quindi, di deploying, fase durante la quale ci si assicura che il sito e il suo shopping cart – carrello – realmente funzionino correttamente. Già in questa fase gli utenti iniziano a navigare il sito, i motori ad indicizzarlo, si continua ad inserire contenuti e a gestire i clienti. Le figure che intervengono in questa fase sono ovviamente diverse da quelle che sono intervenute nelle fasi precedenti.
Quando si è certi che il sito funziona correttamente e che tutti gli “ingranaggi” sono ben oliati si può anche procedere alla fase di marketing. In questa fase si comunica al mondo della presenza di questo nuovo shop on-line e si cerca di attrarre quante più persone possibile, mantenendo il target e cercando di raggiungere gli scopi per i quali il sito è stato realizzato.
Leggendo questa sintesi di come nasce un sito è evidente che le figure richieste sono diverse. Andiamo ora a specificare quali sono le figure che intervengono nelle varie fasi e quali sono i ruoli che ricoprono e le mansioni che svolgono.
Progettazione e sviluppo di un e-commerce
La fase più importante di tutte. Una cattiva progettazione porta quasi certamente a creare un cattivo sito e-commerce. È in questa fase, infatti, che si tracciano le linee guida di quello che sarà il frutto di tutto il lavoro che si andrà ad eseguire.
In questa importante fase intervengono diverse figure professionali:
Project Manager
Il suo compito è di organizzare, controllare ed indirizzare il lavoro degli altri componenti del team.
Marketer
Si occupa di delineare lo “stile” del sito e dell’azienda sul web. È lui che decide come deve apparire l’azienda all’esterno, l’immagine che deve trasmettere al cliente in relazione al target di riferimento. In base al tipo di target cerca di comprendere qual è il cliente tipo e si delinea lo stile della comunicazione (formale, informale, giocosa, sbarazzina, ecc.), quindi si cerca di capire come attrarre i visitatori e quali canali utilizzare.
Web Designer
E arriviamo a quella che forse è la figura più “mal” conosciuta: il webdesigner. In relazione a questa figura è necessario sfatare un mito duro a morire, causato dagli strascichi degli albori del web: il web designer non è un grafico!
Il webdesigner è colui il quale si occupa di design web e secondo la definizione che ne dà Wikipedia: “Il webdesign o web design, letteralmente progettazione per il world wide web, è un’espressione inglese utilizzata anche nella lingua italiana per indicare la progettazione tecnica, strutturale e grafica di un sito web.
La figura professionale dell’addetto alla progettazione per il web, il web designer, nata con lo svilupparsi del World Wide Web, presenta varie analogie teoriche con quella dell’architetto: così come per la costruzione di un palazzo, il webdesigner deve avere varie competenze che vanno dallo studio del singolo elemento alla complessità del progetto (il cosiddetto “zoom in e zoom out”), ed avere competenze di usabilità ed accessibilità.“
Il webdesigner, quindi, studierà la struttura dell’interfaccia (navigazione, schede prodotto, colori, ecc.) e andrà a realizzarla (magari con l’ausilio di un grafico) utilizzando linguaggi come l’HTML, CSS e JavaScript e nel farlo seguirà le indicazioni fornitegli dal marketer, dal cliente e dagli altri membri del team di sviluppo. Insieme contribuiranno a costruire un’ottima user experience per soddisfare al meglio i clienti e farli tornare. Tutto per evitare che il sito sia troppo complicato e gli utenti abbandonino gli acquisti a metà.
Web Developer o programmatore
Altra figura che interviene in questa fase è il developer, web developer, o programmatore. La sua funzione “volgarmente” – non me ne vogliamo i colleghi – è di scrivere il codice necessario per il portale da realizzare. Ogni portale ha le sue peculiarità tecniche o funzionali che lo rendono differente da molti altri.
A seconda della complessità del sito ci potranno essere uno o più sviluppatori. Va anche considerato che un progetto può richiedere anche più linguaggi di programmazione, è possibile, infatti, che un sito venga sviluppato in più linguaggi diversi, ognuno con finalità diverse.
Copywriter
Per la redazione dei testi c’è il copywriter, che non è semplicemente una persona che sa scrivere bene in italiano ma una persona che conosce la comunicazione sul web, ha rudimenti di SEO (Search Engine Optimization, Ottimizzazione – dei testi – per i motori di ricerca) e che nel redigere le pagine del sito segue le linee editoriali stabilite in fase di progettazione.
I computer sanno contare solo da 0 ad 1, il resto è professionalità.
Paola Pomi
Deploying, rodaggio e regime di un ecommerce
A questo punto il sito è pronto e va testato sul campo per verificarne il corretto funzionamento.
Durante il deploying si eliminano le eventuali imperfezioni, si apportano migliorie, si correggono gli ultimi eventuali errori. In genere si corregge tutto ciò che può essere rilevato solo con un test sul campo.
In questa fase (ma talvolta già in quelle precedenti) si inizia a riempire il catalogo dei prodotti da esporre e vendere.
Intervengono in questa fase altre figure come gli addetti al catalogo, chi si occupa del magazzino, il servizio clienti, ecc. Terminata questa fase il sito è a regime ed è produttivo.
Marketing per l’ecommerce
Forse questa è la fase che stimola di più la mente… una sfida costante contro il mercato. Abbiamo il nostro e-commerce, pronto per essere sfruttato, ma non abbiamo i clienti.
Bisogna trovare il modo di attirarli e non è detto che il modo usato per un portale vada bene per tutti.
Le tecniche sono tante e i modus operandi altrettanti. Possiamo pensare a fare pubblicità online con Google AdWords, su Facebook, attraverso altri siti di social networking, sui comparatori di prezzo, si può decidere di posizionare il sito con attività di SEO e molto altro. Le possibilità sono molte e limitate solamente dal budget disponibile.
Una buona parte dell’attività di marketing inoltre è dedicata all’ottimizzazione del sito e-commerce studiando accorgimenti che aiutino a vendere di più.
L’argomento è davvero molto vasto e cercare di parlarne in un poche righe non avrebbe senso. Cercheremo di rimprendere questo argomento in modo più dettagliato negli articoli futuri.
In conclusione
È bene, per completezza di idee, dire che non tutte le figure sopra citate servono per tutti i progetti. Creare e gesire un sito web necessita di coinvolgere tutte le professionalità citate ma comportano delle spese non indifferenti e non è detto che il budget a disposizione consenta di interperlarle.
Certamente, però, per creare e gestire un sito web non si potrà fare a meno di un webdesigner e di un developer, soprattutto nelle prime fasi, e di qualcuno che si occupi delle attività di SEO e di promozione. Quest’ultima figura in generale serve quando il sito è pronto per essere aperto al pubblico.
CloudFlare è un servizio di ottimizzazione e distribuzione del traffico fornito da CloudFlare Inc. L'integrazione di CloudFlare permette che questo filtri tutto il traffico di questa Applicazione, ovvero le comunicazioni fra questa Applicazione ed il browser dell’Utente, raccogliendo dati statistici su di esso.
Quali dati persoanli vengono raccolti: Struento di Tracciamento e varie tipologie di Dati secondo quanto specificato dalla privacy policy del servizio.
Google Maps è un servizio di visualizzazione di mappe gestito da Google Ireland Limited. Questo servizio serve ad integrare tali contenuti all’interno delle proprie pagine.
Quali dati personali vengono raccolti: Dati di utilizzo; Strumento di Tracciamento.
Google Fonts è un servizio per visualizzare gli stili dei caratteri di scrittura gestito da Google Ireland Limited e serve ad integrare tali contenuti all’interno delle proprie pagine.
Dati Personali che vengono trattati: Dati di utilizzo; Strumento di Tracciamento.
Google Analytics è un servizio di analisi web fornito da Google Ireland Limited (“Google”). Google utilizza i Dati Personali raccolti per tracciare ed esaminare l’uso di questa Applicazione, compilare report sulle sue attività e condividerli con gli altri servizi sviluppati da Google. Google può utilizzare i tuoi Dati Personali per contestualizzare e personalizzare gli annunci del proprio network pubblicitario. Questa integrazione di Google Analytics rende anonimo il tuo indirizzo IP. L'anonimizzazione funziona abbreviando entro i confini degli stati membri dell'Unione Europea o in altri Paesi aderenti all'accordo sullo Spazio Economico Europeo l'indirizzo IP degli Utenti. Solo in casi eccezionali, l'indirizzo IP sarà inviato ai server di Google ed abbreviato all'interno degli Stati Uniti.
Dati Personali raccolti: Dati di utilizzo; Strumento di Tracciamento.
