Ti ricordi i due banner per le categorie del commercio che avevamo iniziato adesso li andiamo a completare.

Questo sarà il prodotto completo, quindi banner, una categoria gelato alla frutta e banner due stecchi alla frutta.

Noi eravamo arrivati più o meno a questo passaggio qua, quindi senza contare i testi e senza contare l'elemento.

Quindi abbiamo definito l'immagine lo stile dell'immagine.

Quello che andremo fare adesso appunto, è inserire il testo perché non vogliamo aggiungere in questo banner di categoria troppi elementi in quanto il significato deve essere abbastanza immediato.

Quindi vedo questo gelato qua e dico Ok un gelato alla fragola fragola appunto una brutta vicino trovo la scritta gelato alla frutta che mi conferma quanto pensavo, quindi una una cosa molto semplice.

Tieni anche presente che noi in questo momento stiamo lavorando senza alcuna brand identity, ma chiaramente nel caso migliore é come dovrebbe essere fatto questo e-commerce avrà un suo brand book, una sua brand identity dove all'interno troverai fond colori, eccetera eccetera che riguardano il brand.

Okay, naturalmente questo qua è un esempio, però quello che andremo a decidere quali bello styling, proprio come è successo per l'immagine questa immagine andremo a farlo anche per questa immagine qua, infatti vedi che appunto queste scritte sono uguali a quelle di questo banner qui la stessa cosa adesso partiamo da uno dei principi dei testi che è quello fondamentale, ovvero la leggibilità.

Dobbiamo creare un tè testo che sia del civile.

Io dalla tastiera uso la shark, quindi la scorciatoia premendo dalla tastiera il tasto oppure lo puoi fare tranquillamente andando anche qua.

Quindi sul menu di sinistra a premere testo e scegli su un'intestazione un sottotitolo eccetera eccetera.

Vedi che è di default, ma mi dice hai gia' usato questo font che è questo qua e ii goccia e che avevo appunto utilizzato anche in questa grafica in questa grafica.

Quindi me lo ripropone.

Se stai seguendo il mio esercizio, può decidere di utilizzare questo font oppure sceglierne anche un altro.

Io a priori avevo scelto questo qui perché secondo me si sposava molto bene con il concetto del gelato.

È un sans serif, però comunque un po' giocoso, un po' divertente non è molto, troppo semplice, ma nemmeno troppo serioso.

Ok, quindi quello che voglio fare è scrivere appunto gelato alla frutta, gelato alla frutta è una frase abbastanza lunga, anzi sono tre parole abbastanza lunga.

Vediamo le scritte sulla stessa linea.

Prima gelato, palla, frutta.

Ok, la scritta è leggibile, quello sì, perché è grande.

Però vedi che se voglio tenere questa grandezza che diciamo che mi piace, perché comunque non non posso fare una scritta piccola, così non si leggerebbe.

Già faccio fatica qui, figuriamoci su su un e-commerce dove non sappiamo se il nostro utente sta visitando da mobile oppure da ex top.

Quindi, ecco, per essere sicuri, io faccio comunque la scritta grande faccio in questo caso contro Z per tornare a questa grandezza qua.

Ok, diciamo che questa queste tre parole sulla stessa linea sono troppo lunga.

Quindi quello che voglio fare è mandarla in qualche modo a capo questa scritta secondo il concetto dell'allineamento.

Diciamo che lo potrei mettere così.

Quindi allineato al centro.

Oppure, dato che questa immagine è allineata tutta sinistra, potrei mettere questo testo allineato tutto a destra, il che avrebbe senso.

Ok, quindi ci provo.

Faccio così va bene.

Diciamo che è gelato alla e nella seconda linea frutta spezza un po' troppo.

Quindi quello che vado a fare è mettere sulla stessa linea alla frutta.

Vedi che non riesco a farlo.

In questo caso vado qua e premo invio per mandare alla nella seconda linea.

Ok, diciamo che così già ci piace di più una cosa un po' che mi stona eh l'inter linea.

Quindi tra questa riga e questa riga diciamo che vorrei queste due righe un po' più vicina perché appunto così il concetto mi sembra troppo staccato.

Ricordati che per l'inter linea quindi la spaziatura tra le righe questa qui io non voglio fare una cosa di questo tipo perché andrebbe a compromettere quella che è la leggibilità.

Allo stesso tempo però voglio dare un po' di spazio, un po' di respiro all'occhio che non si ritrovi appunto in questa situazione.

Però nemmeno in questa qui dove c'e' troppo spazio tra le due linee ed è uno spazio tutto inutile.

Ok, quindi diciamo che ha imposto in questo modo adesso così potrebbe anche piacermi.

Magari nella mia brand identity è previsto il colore nero oppure se voglio smorzare un po' di più, magari renderlo un po' piu' dolce.

Potrei optare per marroncino, diciamo una cosa del genere che potrebbe aiutarmi di più anche a livello di leggibilità, affaticamento l'occhio no, questo qua ero molto intenso.

Okay, adesso diciamo che questa grafica mi piace il banner è bello.

Secondo me è anche efficace perché stiamo appunto applicando tutti i principi di design l'unica.

Cosa? Probabilmente è un po' monotono, no? Quindi, come vedi, io qui appunto avevo fatto la parola frutta in script, quindi con un fonte corsi vato che effettivamente potremmo replicare anche qua, perché secondo me da un bell'effetto particolare, eppure molto il focus sulla parola frutta, che è quella che distingue questo banner da un banner di un gelato alla crema, ad esempio.

Quindi stiamo applicando anche la regola del focus.

Ok, quindi una cosa che vada a fare sicuramente è eliminare quindi la parola frutta e a questo punto posso fare diverse cose.

La prima cosa è lasciare qua dello spazio in questo modo, ma io non te lo consiglio.

Quello che ti consiglio di fare è cancellare tutta la seconda riga in questo modo, ok, andare a riposizionare tutto a sinistra Si, è tutto a sinistra, però cioè ancora dello spazio qua che vado ad eliminare in questo modo la casella del testo.

Mi raccomando, cerca di fare sempre questo lavoro, quindi ridurla quasi al minimo, altrimenti davvero? Si, quando è una grafica con molti elementi, un design con tanti elementi rischi di trovarti caselle che si sovrappongono su elementi su altre caselle.

Quindi questa questo è un buon modo di lavorare su gamma.

Quello che vado a fare a Rick Clicco gelato.

Faccio duplica.

Vado a metterlo qua sotto.

Abbiamo detto che vogliamo dare un po' di interlinea e lo posso fare anche con il pudding.

Quindi le frecce della tastiera.

Ok, quindi scrivo alla In questo caso lo posso anche spostare a destra, perché, come vedi qua alla fine è spostato un po' più a sinistra.

Scusami, non a destra.

Diciamo che così va bene adesso.

Quello che mi serve però, è capire frutta.

Come si fa allora Frutta? Abbiamo detto che è un font diverso.

Beh, sicuramente si parte dallo stesso concetto della casella di testo.

Voglio ascrivere frutta, quindi frutta.

Ok.

E vado a scegliere il font script.

Io per scegliere il font script posso fare diverse cose.

Una di queste è, ad esempio, scrivere qua script oppure corsi vato più corsivo.

Io non avevo già selezionato questo fonte per questo esercizio.

Quindi quello che vado a fare adesso è o cercare qua intro scritte su questo fronte? Appunto.

Oppure, dato che ce l'ho già qua.

E questo vale per tutti gli elementi dello stesso tipo.

Quindi in questo caso la casella di testo, la casella di testo.

Vado a premere questo qua questo rullo qua che copia lo stile da questa casella di testo qua a questa casella di testo qua Ok, mi ha copiato lo stile mi piace.

Vedi che questa é l'altezza che il fronte appunto, è quello di sopra.

Lo vado anche a mettere un po' meglio.

Vedi che così è un po' troppo attaccato al a bordo ed è una cosa che noi non vogliamo perché vogliamo che il margine sia rispettato.

Vedete, ci sono delle linee come questa qui tratteggiata che sta a destra, che ci aiuta a delineare due elementi e questo è molto utile.

Allah lo vado a sistemare anche questo.

Diciamo che lo mettiamo così potrebbe starci.

Sì, ti faccio anche notare che frutta ha applicato un effetto.

Eccolo qua.

L'avevo già fatto nella grafica di prima questa qui vedi che l'effetto ombreggiatura ed è una ombreggiatura leggerissima.

Vedi che se la vado a esasperare, ottengo una cosa del genere? Ma io non voglio.

Perché altrimenti una cosa così o così va ad appesantire mi l'effetto di questo design è molto allegro, molto leggero.

Non voglio fare questo mi appunto la vado a resettare a uno e così mi piace.

A questo punto ti chiederai ma come mai ha inserito questo elemento qua la leggibilità è già perfetta in questo modo diciamo che ci piace magari la parola alla in questo modo ha aggiunto questo elemento in quanto secondo me da un po' di dinamicità e riprende anche un po' lo stile di queste fragole messe quasi a spruzzo diciamo.

Quindi quello che vado a fare adesso è prendere questo elemento qua faccio copia, vado in giù e lui un collo vedi che mi si incolla sopra la grafica, quindi io quello che vado a fare è posiziona e vado a spostarlo di layer, quindi di livello lo vado a mettere sotto.

Se cerchi questo elemento qua lo puoi trovare nella sezione questa qua almeno due elementi, digitando purtroppo oppure gocce, quindi lo puoi trovare tranquillamente.

Quello che ho fatto una volta che avevo questo elemento è tagliarlo a metà.

Ti faccio vedere praticamente quando ho trovato questo elemento l'ho selezionato l'elemento mi è comparso in questo modo, però io sapevo che lo volevo collocare da questa parte perché se l'avessi collocato qua vedi che andava a finire sopra le coppette di gelato e non è una cosa che volevo.

Quindi quello che ho fatto è sistemarlo qua, giusto? All'angolo in qualche modo diciamo, diciamo così sono andata a cliccare questa selezione due volte, quindi vedi che ha già selezionato questo riquadro? Lo vado ari cliccare e con le frecce vado a tagliarlo in questo modo, una volta che ho fatto primo fuori dalla selezione e voilà questo risultato finale, stessa cosa io l'ho fatto per questo per questa grafica qua di stecchi alla frutta vedi che gli elementi sono sempre questi.

Questo qua è l'elemento di prima, quindi questo questo qui solo in semi trasparenza, quindi è bianco in origine e messo in semi trasparenza in questo modo qua.

Quindi tirando giù la trasparenza, credo trenta quindi è questo quello che ti invito a fare.

Vedi che ad esempio questa grafica qua questo design è leggermente diverso rispetto a questo, perché mentre qua l'immagine si trova a sinistra, qua si trova in alto a destra, quindi ho dovuto cambiare un po' il mio orientamento però questo, come anche questo qui, è un esercizio che ti invita a fare.

Ci eravamo lasciati a questo punto con la nostra Facebook ad, quindi abbiamo scelto lo sfondo.

Avevamo impostato il prodotto di riferimento e inserito un elemento di contrasto rispetto allo sfondo e a tinta più o meno unita in cui andare a inserire del testo.

Ti faccio subito vedere qual è il risultato finale.

Questo è il risultato finale, quindi la nostra Facebook ad che andremo a promuovere tramite Facebook Instagram.

Quindi vedi appunto che le informazioni testuali che ha inserito sono tre quindi l'intestazione, che in questo caso è il nome del nostro prodotto e ti faccio notare che è in cm sansa ed è soldato quindi in grassetto, proprio come il prezzo.

Quindi vedi anche il prezzo è in cm sans ed è in grassetto, mentre invece la nostra informazione più secondaria, ma che allo stesso tempo va spiegare qualcosa di più riguardo questo prodotto è questo piccolo elenco fondato vedi che è comunque leggibile, ben visibile.

Anche potrebbe essere un po' piccolo a seconda del device che utilizzerà.

Non lo so, ad esempio la nostra Bayer persona, ovvero colei che ama questo tipo di creme o comunque sta cercando però questo lo scopriremo solo dopo alcuni test con le Facebook.

Quindi vedi come l'elenco puntato, ad esempio è di un font diverso.

Non è assolutamente soldato perché non è un'informazione primaria.

Però, come dicevo, è un'informazione che spiega comunque qualcosa in più.

Io avrei potuto fare questo elenco tramite è l'elenco puntato che questa opzione qua gamba.

In questo modo però vedi che questo modo qui è meno accattivante rispetto a quello prima, dove vado a costruirmi l'elenco puntato con queste figure con questi piccoli amici, quindi mira, mi raccomando, quando si tratta di elenchi puntati, valuta bene da che punto partire se utilizzare questa opzione di gamba oppure ricorrere a un'opzione piu' manuale come ho fatto io.