CORSO DI WEB DESIGN DIGITAL HUMANITIES - COMUNICAZIONE E NUOVI MEDIA - Gabriele Carbone - Mastery
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
CORSO DI WEB DESIGN
DIGITAL HUMANITIES - COMUNICAZIONE E NUOVI MEDIA
Gabriele Carbone
s4489575@studenti.unige.it
BRIEF DEL TEMA - MASTERY
Mastery è un argomento molto
PROGETTO interessante da trattare in quanto
parla dei processi mentali delle
persone più influenti della storia.
Tutto i contenuti derivano da un
precedente lavoro, per cui non è stato
necessario scriverli da zero,
risparmiando parecchio tempo.
La combinazione utilizzata, dal punto
di vista tecnico, è la classica
WordPress + Elementor
OBIETTIVI
LATO UX
1 ALMENO 3 PAGINE VISITATE
L'utente medio deve visitare almeno 3 pagine a
visita. Idealmente queste dovrebbero essere
Home → Mastery → Caso Studio
LATO TECNICO
2 PUNTEGGIO SEO > 80
Il punteggio SEO deve essere maggiore di 80,
indicando una buona qualità di sviluppo del sito
LATO ACCESSIBILITÀ
3 COLORI CON RATIO > 3.0
Tutti i contrasti devono avere un rateo maggiore
di 3.0 per rispettare gli standard di accessibilità
METODI E WORDPRESS +
ELEMENTOR
G SITE KIT PER
ANALYTICS
Flessibilità e Velocità Plugin integrato al
APPROCCI di Realizzazione,
senza scordare i
100% con la Suite di
Google
ritocchi in CSS
WORDFENCE YOAST SEO E
PER SICUREZZA HUMMINGBIRD
Con l'impostazione Garantiscono un
corretta permette di elevato livello di
difendere il sistema e ottimizzazione in
di effettuare check maniera semi-
periodici automatica
COMPETITORS
CRITERIO:
Gruppi di utenti che potrebbero SAMLEARNING.COM
visitare sia il Sito del Progetto che Slider iniziale pieno di scritte enormi
quelli citati. (così come il resto del sito). Pagine
molto pesanti. Non hanno rispettato
i principi base del web design (es.
chiarezza e pulizia).
THELEARNINGSCIENTISTS.ORG CENGAGE.CO.UK
Sito molto spoglio. Utilizzano serif Sito pulito in toni di blu/azzurro.
per la tipografia. Hamburgher Menù. Slider iniziale interessante. Icone
Molti contenuti, tuttavia l'usabilità particolari. Il menù è navigabile con
non è elevata a causa dell'utilizzo di facilità. Animazioni presenti ma
immagini e contrasti non idonei. (fortunatamente) in moderazione.
ANALISI DELL'UTENZA
RISULTATI INTERVISTE
QUAL È L'ASPETTO QUANTO TEMPO QUANTE PAGINE
PIÙ IMPORTANTE RIMANI IN MEDIA VISITI IN MEDIA SU
SECONDO TE? SU UN SITO WEB? UN SITO WEB?
0-5 s 4+
40+ s 4
7.1% 5%
Velocità 14.3% 5%
26.3% 20-40 s
Contenuto 7.1% 3
42.1% 20%
1
5-10 s 50%
42.9%
Accessibilità
10-20 s
15.8%
28.6% 2
Design 20%
15.8%
KEY PERSONAS
ANNA ROSSI CARLA BIANCHI MARCO VERDI
Social User Blogger Geek
Interessata all'argomento. In costante ricerca di Esplora a fondo ogni sito
Abituata ai ritmi frenetici materiale per il suo sito. che reputa interessante
dei social Frequenza elevata sul web
USER
1. COME UTENTE VOGLIO TROVARE
SUBITO LE INFORMAZIONI CHE MI
SERVONO
2. COME UTENTE VOGLIO AVERE BEN
CHIARO LO SCOPO DELLA PAGINA
STORIES
3. COME UTENTE VOGLIO CHE LA
PAGINA SI CARICHI VELOCEMENTE
4. COME UTENTE VOGLIO POTER
ACCEDERE AL SITO CON
QUALUNQUE DISPOSITIVO
5. COME UTENTE VOGLIO AVERE LA
POSSIBILITÀ DI APPROFONDIRE GLI
ARGOMENTI
CONCLUSIONI
SEZIONE RICERCA SUGLI UTENTI
STRUTTURA DA PERFORMANCE
UX DESIDERATA
PROGETTARE RICHIESTE
Sitemap semplice con Contenuti semplici e Sito molto rapido nel
una buona struttura di dritti al punto. Uno caricamento per richiesta
link interni. studio dei colori non degli utenti (e per ragioni
Possibilità di accedere sia invasivo ma comunque di SEO). Obiettivo
da Desktop che da interessante. raggiungibile considerati i
Mobile. Numero di parole due punti precedenti.
contenuto con possibilità Andrà scelto con
di rimandare a fonti attenzione il Template ed
esterne i relativi contenutiCONCEPT
Esagono: scelto per il richiamo alla natura
(alveari), alla scienza (molecole) e
all'efficienza che questa forma comporta
→ LOGO Triangolo: scelto perchè esattamente un
sesto di esagono, a simboleggiare
l'incompletezza di visione da parte del
singolo individuo
Il nome è tratto direttamente dal
→ NOME titolo del libro da cui si sono
ispirati gli articoliFUNZIONALITÀ
SNIPPET
GOOGLE E MOBILE BLOG
FACEBOOK RESPONSIVE INTEGRATO GDPR READY
Installati e Scrolling, Bottone Possibilità di Consenso Cookie e
completamente Back-to-Top, Design espandere i contenuti Pagina dedicata alla
integrati all'interno Lineare, Template e di interagire con gli Privacy pubblicate
del Sito Responsive utenti online
SEO SOCIAL
OPTIMIZED READY ADS READY INTEGRABILE
Tramite Yoast SEO e Iscrizione già Google Ads e Grazie alla popolarità
Checker esterni. Il effettuata sui FaceBook Ads già dell'accoppiata WP +
tutto abbinato a maggiori player (IG, impostati e pronti Elementor si possono
perfomance high-end. FB, YT e LN) a partire aggiungere funzionalitàUSER FLOW
DIAGRAMMA
ATTERRAGGIO LETTURA LETTURA
SULLA HOME PAGINA PRIMO CASO
PAGE DEDICATA STUDIO
→ →
Qui l'utente troverà Lettura del In fondo alla pagina sono
un'unico bottone funzionamento di presenti gli altri due
colorato che lo guiderà Mastery. Anche qui c'è tramite dei collegamenti
alla pagina successiva un solo bottone colorato. rapidi.ELEMENTI GRAFICI
STILE
COLORE PRIMARIO TIPOGRAFIA
#1AAB43
Forest Green Titoli
COLORE SECONDARIO Lato, 40pt, Peso 900
#431AAB
Daisy Bush SottoTitoli
COLORE TERZIARIO
Lato, 30pt, Peso 600
#AB431A Corpo Testo
Cognac Lato, 20pt, Peso 300ELEMENTI GRAFICI
LAYOUT
Struttura Struttura Struttura Struttura
HOME PAGE MASTERY CASO STUDIO INFO
Immagine Statica Immagine Statica Immagine Statica Testo Introduttivo
con Citazione con Citazione con Citazione
Testo Introduttivo Testo Introduttivo Bottoni Download
Testo Introduttivo +
Bottone Contenuto Grafico
Spiegazione 4 Fasi FAQs
Testo di
Link Casi Studio Link Primo Caso Approfondimento
Link FAQs Link FAQs Contenuto Grafico
Link FAQsPROGETTAZIONE CARATTERISTICHE GRAFICA • Ripetizione di Layout simili in STILE ED ELEMENTI GRAFICI tutto il sito per dare un senso di familiarità all'utente • Utilizzo di Bottoni Monocromatici per focalizzare l'attenzione dell'utente sul DETTAGLI TECNICI percorso corretto Stile Layout: Boxed, MonoColonna • Utilizzo di Elementi Grafici di Stile Menù: Logo SX e Menù DX vario tipo (slideshow, accordion, Stile Footer: Copyright SX e Privacy DX citazioni) per rompere la Set Icone: Default WordPress/Elementor monotonia del testo Border-Radius: 5-10px
TEMPLATE
PAGE BUILDER FRAMEWORK
CARATTERISTICHE
Altamente Flessibile
Permette di modificare a proprio
piacimento la configurazione di una pagina
attraverso un editor WYSIWYG
UltraLeggero
Il template di per sè è molto spoglio,
puntando tutto sulla personalizzazione e sul
mobile responsive
Integrabile con Altri Sistemi
Perfettamente integrabile con Plugin e
Software terzi per espandere le potenzialitàMOCKUPS
PROTOTIPO MASTERY.GABRIELECARBONE.IT
CONCLUSIONI
LE SFIDE PIÙ GRANDI
Logo Risorse Grafiche Accessibilità SEO
Ideare e creare il logo Trovare delle In fase di Seguire le linee guida
giusto è stato un immagini e dei video progettazione sono SEO si è dimostrato
processo lungo e che si adattassero alla stati fatti numerosi essere un compito
faticoso. palette scelta ed al accorgimenti per piuttosto lungo, ma
Specialmente nel caso tono del sito è stato garantire la massima nella maggior parte
in cui per un singolo più complesso di accessibilità del sito a dei casi non
logo si vogliono quanto preventivato tutte le fasce di utenti complessi.
veicolare differenti
messaggi
GRAZIE PER L'ATTENZIONE!Puoi anche leggere
