Che cosa è veramente utile all'utente in questa pagina web In questa lezione ti mostro come avviare il tuo percorso di progettazione attraverso un wireframe.

Iniziamo innanzitutto con una definizione che cos'è un wireframe wireframe è una semplice bozza grezza delle tue pagine web e dell'intero sito web senza la grafica, quindi sostanzialmente una vera architettura è una mappa del tuo sito web.

Il Il Wireframe è un elemento molto importante perché ha lo scopo di rappresentare concentrarsi sull'usabilità, quindi capire che cosa mettere pagina per pagina, capire e comprendere come collegare pagine tra loro, dove posizionare le dove posizionare i link strategici e questo ti aiuterà a migliorare il percorso di navigazione dell'utente attraverso le tue pagine web.

Come si creano i wireframe? Ci sono sostanzialmente due modi quello online o quello offline.

Io personalmente sono un po' più tradizionale e preferisco approcciarmi in una fase iniziale disegnando direttamente tutto su carta il mio wireframe, perché mi consente di entrare un po' più nel dettaglio e entrare un po' più con tutti e due i piedi, diciamo e concentrarmi di più su quello che sto realmente iniziando a costruire.

In alternativa, quindi, semplicemente potete aprire dei fogli a quattro a quadretti o dei fogli bianchi e iniziate a scrivere degli schizzi del vostro sito web, ci saranno in una fase iniziale degli errori andrete a cancellare, andrete a modificare fino a trovare poi chiaramente il modello um che fa il vostro caso per raggiungere i vostri obiettivi di business del vostro sito web oppure, in alternativa potete utilizzare degli strumenti online come ad esempio mockup punto com, wireframe punto c C oppure frame box punto Sono dei tool molto semplici da utilizzare.

Come vedete funzionano con i classici potete selezionare vari elementi e poi infine esportare in formato di un'immagine o di una di un PD F.

Lo stesso per frame box.

Quindi, um, funzionano tutti alla stessa logica vi consentono di inserire i classici elementi, quindi come porzioni che raccolgono campi di testo, campi, d'immagine linee e quant'altro per poi alla fine.

Quindi andare a costruire il vostro wireframe e quindi tutta l'architettura pagina dopo pagina e in linea generale, questo wireframe um va costruito per tutte le pagine del vostro sito web, in modo tale da avere una visione globale completa di come poi andrà strutturato il sito web e questo avviene molto prima rispetto alla all'installazione e alla configurazione di tutta la parte grafica e di design, che ovviamente sarà una parte successiva.

Vi dicevo io personalmente preferisco approcciarmi in una fase iniziale su un progetto di carta, quindi prendo semplicemente un foglio bianco, ve li farò vedere.

Eccoli qua e e inizio a disegnare il wireframe in base a chiaramente tutte le analisi e le informazioni che ho raccolto in una fase precedente.

In questo caso stiamo sviluppando un sito web per un consulente freelance settore digital e si occupa di consulenza appunto di social media marketing.

Vi mostro in questa fase tre schermate di wireframe che ho creato su carta e come ho ragionato in base all'analisi che ho fatto prima di disegnare appunto questo schizzo.

Allora questa questa è l'homepage.

Siamo partiti, sono partito da da leader, quindi ho disegnato la testata del sito con il logo allineato a sinistra, un menù orizzontale chiaro ed essenziale e una che viene mostrata attraverso un pulsante.

Quindi ho voglio voglio metterla in evidenza rispetto a tutto il resto, poi partendo da sinistra una line, quindi un messaggio forte.

Questo è un campo di testo che poi andrà popolato chiaramente con un copy su misura e una action uno e tw action due.

In questo caso in offrirò l'opportunità al mio utente di um cliccare um e dargli due possibilità diverse probabilmente um una legata ai servizi e una direttamente alla per entrare in contatto e poi sotto un box per inserire delle recensioni e quindi attivare il social prof e tutto quello che riguarda la riprova sociale per entrare subito nella mente dell'utente ed essere subito convincente e poi rimanendo sempre nella action.

Quindi la copertina del sito ho inserito un box dove andrò ad inserire un video, probabilmente un video.

Di solito si può utilizzare o un video o un'immagine, ma secondo me è molto interessante oggi sfruttare le potenzialità dei video, magari video brevi un minuto sotto un minuto, un minuto e mezzo più o meno di questa durata, ma sono molto più potenti rispetto a una immagine semplice e statica.

Chiaramente, ripeto, dipende sempre dal vostro obiettivo è per farvi vedere un po' quello che c'è dietro a livello di ragionamento poi ho inserito un carosello con dei loghi.

Ho lavorato per quindi delle delle partnership e delle collaborazioni.

Anche queste sono delle sono delle armi molto potenti per entrare meglio ed essere più convincenti.

E poi il box dei servizi che svilupperò in questo modo sicuramente ci sarà un'immagine legata al servizio un'immagine o un'infografica.

Poi sulla parte grafica ci arriveremo um breve descrizione e che poi rimanderà al singolo servizio.

Ovviamente non possono mancare dei caroselli legati alle opinioni, quindi andrò ad inserire uno slider che che riporta tre o quattro cinque recensioni ed eventualmente una un pulsante che manda alla possibilità di leggerne altre, magari all'interno di una pagina web o su un profilo tra ad esempio o magari anche in un profilo Google Review e ed infine la parte di um um finale dell'homepage si conclude con una parte relativa ai contenuti che elaboreremo ogni giorno ogni giorno un contenuto nuovo.

Ho intenzione di inserire uno screen di un profilo instagram dove pubblico giornalmente dei dei, dei dei contenuti utili, video e articoli di blog e vari canali.

Quindi rimane aggiornato su youtube, Instagram, facebook, TikTok e quant'altro e questo diciamo era quello che riguardava un po', la homepage che ho pensato di realizzare.

Subito dopo ho creato l'architettura della pagina del singolo servizio, in questo caso l'ho chiamata consulenza social.

Ovviamente ho riportato la l'ade che ho sviluppato a anche nella homepage.

Quindi, sempre per avere una visione globale dell'intera pagina web um e nella euro action ho inserito più o meno il format della homepage.

Sempre in questo caso inizio con un'icona che sarà collegata alla tipologia di servizio, quindi legata in questo caso alla consulenza una breve descrizione e un titolo iniziale col tuo action uno col tuo action due e poi un'immagine del professionista che sarei io in questo caso in questo esempio e questo per quanto riguarda la copertina.

Poi sotto ho inserito un box per identificare subito il target.

Ho inserito questo titolo fa per te se in modo tale che, um il mio potenziale cliente cerca di immaginarsi se può essere un mio potenziale cliente, se possiamo collaborare insieme.

Quindi se non si sente incluso in questi contenuti, probabilmente non non mi contatterà.

Quindi qui diciamo che già vai a fare una sorta di selezione di quello che può essere il tuo potenziale cliente.

Poi ovviamente una come avete visto non sono andato subito a parlare del servizio e di che cosa c'è all'interno del servizio.

Quello lo possiamo tranquillamente mostrare in una fase successiva e quindi magari anche direttamente sotto o in fine in fine pagina è il e quindi ho ho inserito un box con dove metterò delle schermate di risultati raggiunti di un determinato cliente con un titolo e una descrizione e poi eventualmente anche un link per andare a visualizzare anche altri progetti di portfoglio in una pagina dedicata.

Dettaglio offerta ed eccola qui quindi che cosa ottieni se acquisti questo servizio e decidi di collaborare con me? Chi ha già scelto la mia consulenza? Anche qui ho inserito il social prof, quindi tutto quello che riguarda la sfera della a riprova sociale per far vedere che ci sono altre persone che hanno acquistato e usufruito dei miei servizi.

Ovviamente la pagina del singolo servizio non può non finire con una.

Quindi inserirò un titolo, un sottotitolo e una che invita ad eseguire una determinata azione.

In questo caso probabilmente andrò ad inserire una un link verso la pagina contatti o verso una pagina per richiedere un preventivo o aprire una chat.

Poi ho realizzato anche un wireframe per definire quella che è più o meno l'architettura del singolo portfolio perché essendo un freelance consulente nel settore digital, una delle cose più importanti da mostrare è quello che abbiamo fatto per altre persone.

Quindi in questo caso ho inserito il logo del cliente una breve descrizione con un titolo, un un valore in percentuale di quello del valore che ho realmente portato al cliente.

Ad esempio, il cliente in sei mesi ha aumentato il trenta percento del suo fatturato nella vendita del determinato prodotto o servizio.

Oppure in sette mesi il cliente ha incrementato i suoi follower su Instagram del trenta per cento.

Quindi di di cerchiamo di dare delle delle metriche precise, e questo sempre per quanto riguarda la reception.

Quindi la la copertina l'anteprima che il nostro potenziale il visitatore vede appena atterra su questa pagina web.

Poi ho inserito anche un prima e dopo, quindi quella che poteva essere la situazione iniziale, quella che era la situazione iniziale del cliente e quello che è successo dopo, e quindi tutto il cambiamento che c'è stato dopo che il cliente ha deciso di collaborare e lavorare insieme a me.

Opinione del cliente feedback Questo è molto importante.

Ogni volta che ho consegnato un progetto, cercate di ricevere un feedback.

Che poi sia un semplice feedback testuale sulla vostra pagina Facebook, sul vostro account Google, sul vostro profilo tra Spit L'importante è che ci sia ben vengano anche recensioni con video.

Poi ho inserito i servizi, i servizi che il cliente ha comprato con me, quindi quello che ho fatto concretamente per lui ed infine, ovviamente, anche la pagina del portfoglio non può non finire con una buona.

Quindi in questo caso lo manderò alla pagina per richiedere informazioni o comunque entrare in contatto con me.

Quindi questo più o meno è quello che riguarda il mondo del wireframe.

Ripeto, in linea generale è una parte che serve per definire l'architettura e la posizione di determinati blocchi.

Quindi immagini qui mettiamo i partner qui mettiamo le opinioni qui mettiamo la reception qui mettiamo i servizi, eccetera, eccetera.

Quindi è una parte molto importante e senza di questa non potete proseguire poi nella definizione di tutto il resto, a partire dal design