Come usare Google Web Designer per creare siti e banner AdWords

Come funziona Google Web Designer per creare siti web, oggetti HTML, banner pubblicitari e altri progetti da web designer.

Google Web Designer è un programma gratuito per Windows, Mac e Linux per progettare siti web e pubblicità su AdWords e DoubleClick. È disponibile anche nella lingua italiana, però è un progetto ancora in Beta benché sia stato rilasciato diversi anni fa, ultimamente però ha ricevuto un importante aggiornamento.

Sotto certi aspetti è un Editor HTML, CSS e Javascript con cui creare pagine web, ma anche singoli elementi, come appunto dei banner da usare con il programma AdWords. Ricordo che AdWords è l'alter ego di Adsense ed è lo strumento che usano gli inserzionisti per creare delle campagne pubblicitarie.

In questo articolo vedremo quali sono gli strumenti principali di Google Web Designer mentre in un prossimo post  realizzeremo un annuncio secondo le regole HTML5. Si tratta di un tool piuttosto evoluto da usare come alternativa gratuita a programmi costosi e non altrettanti performanti.

Le pagine web, o il singolo elemento HTML che intendiamo realizzare, mostreranno in tempo reale la variazione di aspetto dopo la modifica del codice. Evidentemente per un utilizzo ottimale del Web Designer di Google, occorre avere almeno una conoscenza propedeutica dei linguaggi di markup HTML e CSS. Chi ancora non la avesse può scaricare gratuitamente il mio ebook Guida all'HTML e al CSS.

Si può scrivere il codice manualmente oppure usare il trascinamento per inserire nella pagina web o nel banner gli elementi che vogliamo mostrare. Si apre la pagina del progetto Google Web Designer, per poi cliccare sul pulsante Download Web Designer Beta. In un PC Windows 7, 8 o 10 verrà scaricato un file .exe su cui fare un doppio click per iniziare l'installazione. Saranno scaricati automaticamente anche gli aggiornamenti disponibili.

Nella Home potremo scegliere se Creare un nuovo File, aprirne uno esistente oppure iniziare da un modello

Si va su Crea nuovo file se siamo al primo utilizzo del software. Nella seconda finestra dovremo scegliere il tipo di elemento che intendiamo realizzare, p.e. Banner normale o  Estendibile o Interstitial in ambiente AdWords, DoubleClick, AdMob o Annuncio Non Google.

Si impostano le dimensioni, si dà il nome al progetto e si sceglie la cartella di destinazione dello stesso. Si può anche optare per il layout Responsive e scegliere tra animazione veloce e avanzata. Per progetti non finalizzati alla creazione di annunci pubblicitari, sulla colonna di sinistra si può scegliere HTML per un Editor offline o HTML con pagine per la realizzazione di un sito web. Le opzioni CSS, Javascript e XML sono più specifiche. Si va su OK.

Qualunque sia il progetto prescelto si visualizzerà una area di lavoro bianca con gli strumenti di Editing

Si possono trascinare immagini e aggiungere Testo formattato con la scelta dei colori. L'area di lavoro è contornata da strumenti nei tre lati. In alto a sinistra viene attivata di default la Vista Struttura per vedere gli elementi del progetto. Si può passare al codice HTML cliccando su Vista Codice. C'è pure il pulsante Anteprima per vedere come appare il progetto aperto con Chrome, Edge e Internet Explorer. Accanto è presente pure il pulsante Pubblica che serve per salvare il progetto in locale oppure per pubblicarlo su Google Drive.

Vediamo quali sono gli strumenti principali di Google Web Designer:

1. Strumenti della barra laterale di sinistra - Selezione, Percorso Animazione, Traslazione, Rotazione oggetti 3D, Strumento Tag, Strumento Penna, Testo, Riempimento, Mano, Zoom e Viewport. Si clicca sullo strumento che intendiamo utilizzare per iniziare a usarlo.
2. Strumenti del Menù in alto e della barra superiore - Il menù è formato dalle voci File, Modifica, Visualizza, Finestra, Guida e ciascuna di esse ha dei sottomenù. Quando si seleziona uno strumento della barra laterale, nella barra superiore appaiono le opzioni per la personalizzazione di tale strumento. Per esempio con il Testo si potrà scegliere Stile (Intestazione, testo normale, ecc), Famiglia di Font, Dimensione dei caratteri, Allineamento, Elenchi, Rientri e Collegamenti.
3. Strumenti del lato destro - Questi strumenti sono divisi in Colore, Proprietà, Componenti, CSS, Eventi e Raccolta. Si deve fare click sulla categoria prescelta per visualizzarne i tool.

Se siete sufficientemente esperti di codice non potete fare a meno di andare su Vista Codice

per visualizzare il codice generato dagli elementi inseriti o digitati e per eventualmente modificarlo. In definitiva Google Web Designer è uno strumento utile, non solo per chi voglia creare una campagna pubblicitaria, ma anche per altri utilizzi nel mondo del web. In un prossimo articolo vedremo come creare un banner in formato HTML5 anche a prescindere dal suo effettivo utilizzo per diventare inserzionisti su AdWords.