Come strutturare un design semplice ed efficace per WordPress
0 likes324 views
Il webinar di SiteGround, condotto da Laura Lonighi, si concentra sulla creazione di un design efficace per siti WordPress, enfatizzando l'importanza di una buona identità visiva e la progettazione intuitiva. Vengono presentati strumenti utili per il design e lo sviluppo web, come Sketch, Figma e WordPress Gutenberg, sottolineando che non è necessario avere competenze avanzate di codice. L'obiettivo è fornire le basi per realizzare siti web semplici, rappresentativi del brand e facili da navigare.
Come strutturare un design semplice ed efficace per WordPress
- 1. #SGwebinar @siteground_it SITEGROUND WEBINAR Come strutturare un design semplice ed efficace per WordPress it.siteground.com
- 2. OSPITE SPECIALE Laura Lonighi https://twitter.com/lauau WEB DESIGNER E BRAND STYLIST FREELANCE #SGwebinar @siteground_it it.siteground.com https://www.facebook.com/yunikondesign/
- 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
- 6. L’importanza di una buona Visual Identity #SGwebinar @siteground_it it.siteground.com
- 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
- 10. Brand Style Guide #SGwebinar @siteground_it it.siteground.com Scarica la risorsa gratuita
- 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
- 15. #SGwebinar @siteground_it it.siteground.com Dalla prima proposta a quella definitiva 1 2
- 16. I 3 livelli di design di un sito web #SGwebinar @siteground_it it.siteground.com
- 17. Web Design a 3 livelli Architettura delle informazioni Wireframe Mockup #SGwebinar @siteground_it it.siteground.com
- 22. #SGwebinar @siteground_it it.siteground.com Sketch Figma Adobe XD Design Tool
- 23. Design Tool #SGwebinar @siteground_it it.siteground.com Sketch https://www.sketch.com/ Caratteristiche principali ● Griglie e guide (consentono di posizionare e spostare gli oggetti) ● Simboli (per creare icone, avatar e altri elementi di design) ● Modifica vettoriale ● Tonnellate di Plug-in
- 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
- 25. Design Tool #SGwebinar @siteground_it it.siteground.com Figma https://www.figma.com Caratteristiche principali ● La prototipazione avviene da browser ● Real time collaboration ● Gratuito per i primi 3 progetti ● Wireframe e illustrazioni presenti in libreria
- 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
- 27. Design Tool #SGwebinar @siteground_it it.siteground.com Adobe XD https://www.adobe.com/it/ products/xd.html Caratteristiche principali ● Offre la prototipazione vocale ● Consente di condividere e fornire feedback sui progetti ● Si integra con Creative Cloud di Adobe
- 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
- 40. #SGwebinar @siteground_it it.siteground.com Stackable - https://wpstackable.com/
- 41. Ricapitolando… #SGwebinar @siteground_it it.siteground.com Caratteristiche Editing live-view Progettazione Responsive Elementi e layout già pronti Popup builder Prezzo Gratuito Gratis o 49$/annui Gratis o 89$/annui Gratis o 49$/annui
- 43. Strumenti utili #SGwebinar @siteground_it it.siteground.com Ispirazione Architettura ● Pinterest ● Dribble ● Behance ● Awwwards ● MindMesteir ● Procreate ● Concepts App Design Tool Development Tool ● Sketch ● Figma ● Adobe XD ● Divi ● Elementor ● Gutenberg Font ● Google Fonts ● MyFonts (a pagamento) Color Palette ● Paletton ● Adobe Color ● Canva CPG
- 44. Laura Lonighi Web designer e Brand stylist freelance https://www.yunikondesign.com Grazie! #SGwebinar @siteground_it it.siteground.com www