Please enable JavaScript.
Coggle requires JavaScript to display documents.
WEB DESIGN - Coggle Diagram
WEB DESIGN
Progetti Web
-
-
-
Contenuti, struttura, modalità accesso, presentazione visiva, operazioni, gestione
Analisi tramite interviste, questionari, concorrenza
Risponde a scopo, target, budget, tempi, SEO, aggiornamenti, strategia, risorse
Confluisce in documento di progettazione: obiettivi, utenti, scenari, concorrenza, infrastruttura, dominio/hosting
-
-
-
Obiettivo: aspetto visivo, prototipo a media fedeltà
Creazione layout, design system/guida stile
-
-
Figure: redattori, content manager
Piano editoriale, guida stile, inserimento contenuti → prototipo alta fedeltà
Controlli finali: contenuti, link, funzionalità, usabilità, accessibilità
-
Gestione sito: manutenzione, aggiornamenti, sicurezza, formazione personale
-
-
- Usabilità: efficacia, efficienza, soddisfazione utente
Micro caratteristiche: checklist per struttura, grafica, sicurezza, SEO, tempi accesso, facilità d’uso
-
- Architettura: struttura e navigazione
- Comunicazione: chiarezza scopo, coerenza brand, attrattiva grafica
- Funzionalità: adeguatezza, affidabilità, sicurezza
- Contenuto: qualità, chiarezza, aggiornamento, affidabilità
- Gestione: mantenimento, aggiornamento, operatività
- Accessibilità: facilità di accesso, compatibilità, utenti disabili
-
UX (User Experience)
-
-
- Strategia: bisogni utenti, obiettivi business
- Scopo: funzionalità e contenuti
- Struttura: organizzazione contenuti e interazioni
- Scheletro: disposizione elementi, navigazione, interfaccia
- Superficie: aspetto visivo e grafico
Header
Logo, menu, titolo, barra ricerca, CTA, informazioni aggiuntive
Menu: gerarchia chiara, sottomenù
-
-
Barra ricerca: campo query, filtri, categorie
Body
-
Hero section: immagine/video, titolo, sottotitolo, CTA
Strutturazione contenuti: schema “F”, titoli, elenchi, spazi bianchi, media, heatmap
Pagine: statiche, gerarchia, raramente aggiornate
Articoli: dinamici, cronologici, interazione, SEO contenuti freschi
Footer
Informazioni secondarie: contatti, link, legali, social, CTA, copyright
Buone pratiche: semplice, coerente, responsive, accessibile
Gabbia logica
Elementi principali: header, body, sidebar, footer
Sidebar
Contenuti aggiuntivi: link, articoli correlati, widget social, banner, info utili, ricerca personalizzata
Estetica
Layout: header, main content, sidebar, footer; responsive; mobile first
Colore: principale (brand), secondario, accento
Font: principale, secondario, accento
Conversioni e CTA: primaria, secondaria, terziaria; linguaggio persuasivo, test A/B
Portfolio: presentazione lavori, biografia, testimonianze, blog, link social; layout one-page o ibrido
Web Designer
-
Attività principali: progettazione grafica, UI, responsive design, prototipazione, collaborazione con altri professionisti
Strumenti: Photoshop, Figma, Adobe XD
Conoscenze base: HTML, CSS, JavaScript
Usabilità
Comportamento utenti: ricerca veloce, “satisficing”, uso come mezzo
Qualità: convenzioni, gerarchia visiva, click chiari, chiarezza, essenzialità, minima distrazione
Compatibilità e responsive design: desktop, tablet, mobile, accessibilità
Navigazione: home come punto di riferimento, strumenti “indietro”, preferiti
-
Web Design
Definizione: progettazione e realizzazione siti web, unendo aspetto visivo, funzionalità ed esperienza utente.
Competenze incluse: layout, grafica, usabilità, responsive design, accessibilità.
Obiettivi: siti belli, intuitivi, efficaci, adatti a tutti i dispositivi.
-
Tipi di siti web
One-page: unico contenuto, scroll verticale, mobile-friendly, landing page, portfolio
Multi-page: più pagine, navigazione tramite menu, migliore SEO, aziendali, e-commerce, blog
Testing e Usabilità
Test con utenti reali, test case, test scenario
Evitare supposizioni, osservare differenze tra utenti
Fiducia
Riduce: bugie, ostacoli, dati inutili, design dilettante
Aumenta: azioni chiare, info importanti, correzione errori, FAQ accurate
Accessibilità
Principi WCAG: percepibili, operabili, comprensibili, robusti
Linee guida pratiche: alt immagini, titoli logici, form compatibili screen reader, contrasto, navigazione chiara