Guarda il webinar qui: https://youtu.be/WpxuDepDDbg
Come si può fare a dare un aspetto chiaro e professionale al proprio sito WordPress senza avere competenze specifiche di design?
WordPress è ormai il CMS più utilizzato al mondo per la realizzazione e gestione di blog, siti web ed eCommerce: è quindi importante conoscerlo e rimanere aggiornati su tutte le novità che offre.
Con Laura Lonighi, web designer e brand stylist freelance, vediamo:
- L’importanza di una buona Visual Identity per il proprio progetto web
- I 3 livelli di design attraverso i quali realizzare un’interfaccia web
- Come può venirci in aiuto WordPress per realizzare in maniera più semplice il design del nostro sito
- Alcuni strumenti utili per lavorare meglio
3. CHI SONO
#SGwebinar
@siteground_it
it.siteground.com
Mi occupo di fornire tutti gli
strumenti necessari per presentare
al meglio un brand online.
Nel mio lavoro studio i colori e i
caratteri tipografici, disegno la
personalità visiva di un marchio e
progetto siti web attorno agli obiettivi
di business dei miei clienti.
4. Qual è l’obiettivo di questa nostra
ora insieme?
#SGwebinar
@siteground_it
it.siteground.com
Fornire le basi per realizzare con semplicità un sito web facile da
navigare, che rifletta chi siamo e cosa facciamo, pur non avendo
conoscenze approfondite di web design.
5. Sommario
#SGwebinar
@siteground_it
it.siteground.com
● L’importanza di una buona Visual Identity
● I 3 livelli di design attraverso i quali progettare
un’interfaccia web
● Come WordPress può essere un nostro
prezioso alleato nella creazione di un semplice
sito web
● Strumenti utili per lavorare meglio
7. Che cos’è la Visual Identity?
#SGwebinar
@siteground_it
it.siteground.com
È l’aspetto visivo di un brand: include tutto ciò che
visivamente viene usato per comunicare le caratteristiche di un
marchio, dal logo al sito web.
Brand Identity Visual Identity
≠
8. Perché è importante avere una
buona Visual Identity?
#SGwebinar
@siteground_it
it.siteground.com
● Rende riconoscibile un brand
● Rende coerente un brand su varie piattaforme
(sito web, newsletter, social network) e
materiali (dal biglietto da visita al manifesto)
● Differenzia il brand dalla concorrenza
● Aiuta a fidelizzare i clienti e a fidarsi del brand
9. Gli elementi principali
Logo Color Palette Typography
#SGwebinar
@siteground_it
it.siteground.com
Photo
Reference
11. Perché partire prima dal design
e solo poi dal codice del sito?
#SGwebinar
@siteground_it
it.siteground.com
● Perché ci permette di avere un quadro più preciso su
ciò a cui stiamo lavorando (board d’ispirazione)
● Per riuscire a portare avanti il concetto di coerenza
● Perché abbiamo pieno controllo dell’aspetto mobile
● Perché la prima proposta che mostriamo al cliente
non è mai quella definitiva
24. #SGwebinar
@siteground_it
it.siteground.com
Sketch - https://www.sketch.com/
Pro
● Puoi progettare elementi come
icone e riutilizzarli
● Piattaforma di collaborazione
● Salvataggio automatico
● Mirroring dei dispositivi (puoi
testare i tuoi progetti su più
dispositivi)
● Comprato una volta, è tuo per
sempre (99 $)
● 30 giorni di prova gratuita
Contro
● È solo per utenti Apple
● A volte è un po’ lento
● Se vuoi disporre di tutti gli
aggiornamenti devi pagare la
licenza tutti gli anni (99 $ ogni
anno)
● Non permette l’uso dei commenti
da parte dei collaboratori
26. #SGwebinar
@siteground_it
it.siteground.com
Pro
● Facile e semplice da usare
● Ottimo strumento per
wireframing e prototipazione
● Archiviazione in cloud
● Modifica vettoriale
● Ha quasi tutti gli strumenti di
Adobe XD
● È gratuito fino a 3 progetti
Contro
● L'app si blocca durante attività
sostenute
● Hai bisogno di una buona RAM
per farlo lavorare a pieno regime
● Non puoi usarlo in modalità
offline
● La versione a pagamento è più
costosa rispetto a Sketch (120$
all’anno)
Figma - https://www.figma.com
28. #SGwebinar
@siteground_it
it.siteground.com
Pro
● Interfaccia pulita
● Se dimestichezza con altri
programmi Adobe probabilmente
l’interfaccia ti risulterà semplice
da usare
● Funziona al meglio su PC
Contro
● L’abbonamento (146 € all’anno) è
più costoso rispetto ai suoi
competitor
● Aggiornamenti costanti, spesso
non privi di bug
Adobe XD - https://www.adobe.com/it/products/xd.html
30. A fine 2018 WordPress lancia Gutenberg, un
editor a blocchi.
Altri erano già presenti sul mercato.
#SGwebinar
@siteground_it
it.siteground.com
31. PRO degli editor a blocchi
#SGwebinar
@siteground_it
it.siteground.com
● Non è necessario conoscere una riga di codice per iniziare subito a
usarli
● Permette di concentrarsi di più sui contenuti, dando più autonomia al
cliente
● Possibilità di creare design personalizzati per post, landing page, call to
action senza alcuna codifica
● Possibilità di usare template precostruiti
● Puoi integrare form di contatto, popup, bottoni, etc, senza dover ricorrere
a plugin di terze parti
32. Designer e Sviluppatore si fondono in una figura
sempre più ibrida
Design Tool Development Tool
#SGwebinar
@siteground_it
it.siteground.com
● Carta & penna
● Sketch
● Figma
● Adobe XD
● Divi
● Elementor
● Gutenberg
● Stackable
33. Development Tool
#SGwebinar
@siteground_it
it.siteground.com
Divi - https://www.elegantthemes.com/gallery/divi/
Caratteristiche principali
● Drag & Drop: non è necessario conoscere una riga di codice per usarlo
● Editing live-view per progettare la tua pagina in tempo reale
● Responsive: dà il pieno controllo su come appare il sito web su mobile
● Tanti wireframe già pronti: usa moduli già pronti o integra i template
realizzati da Divi
35. Development Tool
#SGwebinar
@siteground_it
it.siteground.com
Elementor - https://elementor.com/
Caratteristiche principali
● Progetta facilmente le parti del sito - intestazione, piè di pagina,
main content - direttamente dall’editor
● Popup builder: crea popup coerenti con il resto del design del tuo
sito
● Più di 80 elementi di design: un set completo di strumenti che ti
aiutano a generare più traffico, lead e conversioni. Non hai più
bisogno di dozzine di plugin.
37. Development Tool
#SGwebinar
@siteground_it
it.siteground.com
Gutenberg - (già integrato a WordPress)
https://it.wordpress.org/plugins/gutenberg/
Caratteristiche principali
● Editor a blocchi: integra gli elementi di design (titoli, bottoni,
immagini, etc) direttamente nel tuo editor WordPress
● È estremamente facile e veloce da usare (sia backend che
frontend)
● È gratuito
39. BONUS — Development Tool
#SGwebinar
@siteground_it
it.siteground.com
Stackable - https://wpstackable.com/
Caratteristiche principali
● Editor a blocchi: integra gli elementi di design (titoli, bottoni,
immagini, etc) direttamente nel tuo editor WordPress
● È estremamente intuitivo da usare
● Ha una versione a pagamento, ma quella free ha tutto quello di
cui hai bisogno