KUMBE · BLOG


Dietro le quinte del sito web 3 - Wireframe



nuove tecnologie software web portal web service
06 gen 2017

Moreno Trainini
Posted by:
Moreno Trainini

In questa terza parte andremo a trattare nello specifico la tecnica del wireframing e tutto quello che si cela dietro la stessa, ciò che consente di fatto di concepire e progettare la struttura di quello che sarà il sito web finale.

Un wireframe, conosciuto anche come schematica ma meglio definito come blueprint (dall’inglese), è una guida visuale che è rappresentativa dello scheletro del sito web che verrà creato. Questo viene realizzato per poter disporre gli elementi nel miglior modo possibile e per poter rispettare al meglio la volontà del cliente richiedente.

Il wireframe va a definire nel dettaglio il layout della pagina web e la disposizione precisa degli elementi di contenuto, includendo elementi di interfaccia e sistemi di navigazione, così come il funzionamento degli stessi. Solitamente quando si va a rappresentare un wireframe questo manca di stile, caratteri, colori ed in generale grafica dettagliata perché il focus principale e la priorità è data ai contenuti e alla disposizione degli stessi all’interno della pagina ed a livello più generico all’interno del sito web. Questi possono essere disegnati a mano, tramite l’utilizzo di sketch su delle lavagnette, oppure con dei programmi appositi direttamente da PC. Solitamente le figure professionali che procedono a creare questi schemi sono designer di user experience, sviluppatori, designer visuali e altri esperti che concorrono alla ricerca del design interazionale e della migliore esperienza utente.

Questa introduzione porta a definire per bene qual è lo scopo di questa tecnica, rappresentare ciò che qualcosa fa e non come questo risulterà graficamente.

I punti fondamentali su cui i wireframe si concentrano sono: l’elenco delle funzionalità disponibili, le relative priorità delle informazioni e delle funzioni, le regole che definiscono la visualizzazione di certi tipi di informazioni e l’effetto di differenti scenari a schermo.

Il wireframe del sito web di fatto collega la struttura concettuale sottostante (chiamata anche architettura dell’informazione) con la superfice dettata dal design visuale del sito. Questo aiuta a stabilire le funzionalità e le relazioni tra i vari template dello stesso sito web. Normalmente viene utilizzata una tecnica di tipo iterativo per creare i wireframe, che consente in modo effettivo e rapido di designare prototipi di pagine contemporaneamente a valutare di volta in volta la praticità del design concepito.

Questa tecnica viene inoltre utilizzata anche per la prototipizzazione di siti ed applicazioni mobili, software ed in generale di prodotti che coinvolgono l’utilizzo di tecniche di interazione uomo-macchina.

Ma andiamo ora a discernere nel dettaglio i tipi di wireframe che esistono e vengono utilizzati da una vasta gamma di professionisti, questi vengono divisi in due macro-categorie: a bassa fedeltà e ad alta fedeltà.

BASSA FEDELTA’

Sono di solito dei veri e propri sketch e semplici mock-up a bassa fedeltà che hanno pochi dettagli e sono facili da riprodurre. Questi consentono ad un team di persone di collaborare in modo più effettivo perché più astratti di quelli ad alta fedeltà e che rappresentano di fatto il contenuto e le funzionalità richieste.

ALTA FEDELTA’

Vengono utilizzati molto spesso anche a livello documentativo perché incorporano un livello di dettaglio notevole e che si avvicina di molto al design effettivo della pagina web. Questi richiedono (ovviamente) molto più tempo per essere realizzati ma rappresentano in modo più rigoroso e preciso il contenuto così come il layout di come potrà essere la pagina web finale.

Normalmente questi vengono creati con dei software appositi che consentono un livello di rappresentazione professionale del wireframe stesso.


Per quanto invece riguarda la costituzione dello scheletro del sito web e del wireframe stesso, questa può essere divisa in tre parti fondamentali: design informazionale, design navigazionale e design d’interfaccia. Il layout della pagina si basa fortemente su queste tre componenti legate tra di loro mentre il wireframing è proprio ciò che rappresenta la relazione tra queste parti.

DESIGN INFORMAZIONALE

Definisce la presentazione, il posizionamento e la prioritizzazione dell’informazione in modo da facilitarne la comprensione. Questo fa parte della user experience (Dietro le quinte del sito web 1 - User Experience) e consente di visualizzare l’informazione in modo effettivo per una chiara comunicazione. Specificamente per i siti web gli elementi informativi dovrebbero essere disposti in modo da riflettere gli obiettivi e le funzionalità dell’utente.

DESIGN NAVIGAZIONALE

Provvede un set di elementi di interfaccia che consentono all’utente di navigare tra le pagina del sito web. Questo tipo di design consente di comunicare la relazione presente tra i collegamenti presenti nel sito web di modo che l’utente abbia concezione di tutti quelli presenti tra le pagine e di conseguenza le varie opzioni di navigazione definite. Solitamente i siti web presentano più di un percorso per raggiungere una risorsa di interesse, si può pertanto rappresentare il sito web come un grafo dove ogni pagina è un nodo che può essere collegato in multipli modi alle altre pagine presenti.

DESIGN D’INTERFACCIA

Include la selezione e la disposizione degli elementi di interfaccia per consentire all’utente di interagire con le funzionalità implementate nel sistema. Lo scopo di questo tipo di design è di facilitare l’usabilità e l’efficienza del sito web per l’utente. Elementi presenti di frequente in questo tipo di design sono bottoni, campi di testo, menu a tendina, caselle di controllo e bottoni a scelta multipla.


Questa analisi dettagliata delle tecniche di wireframing ci ha quindi consentito di capire che il wireframe rappresenta la spina dorsale nella creazione di un sito web, e senza di essa non si potrebbe ottenere una disposizione ottimale dell’informazione e l’utente non trarrebbe il massimo vantaggio dall’utilizzo del sito.





Precedente Prossimo articolo


Kumbe blog



web-developer-kumbe,2045.jpg?WebbinsCacheCounter=1
full-stack-senior-web-developer_kumbe,2043.jpg?WebbinsCacheCounter=1
newsletter-email-marketing-per-hotel,1912.jpg?WebbinsCacheCounter=1

Azienda per il Turismo Dolomiti Paganella
Prosecco Hills
Andalo Life, Family Activity Park
Pretzhof Selection
Courmayeur Mont-Blanc
Madonna di Campiglio Pinzolo-Val Rendena, Azienda per il Turismo

Madonna di Campiglio Pinzolo-Val Rendena, Azienda per il Turismo
Madonna di Campiglio, Pinzolo-Val Rendena (TN)


Dettagli   Visita il Sito
Terme di Comano Dolomiti di Brenta, Azienda per il Turismo
Skirama Dolomiti Adamello Brenta, official website


Kumbe Tribu


I guerriglieri del Web

Il nostro totem: la zwebra!

Tre capostipiti e tanti sciamani con un'unica battaglia da combattere: la qualità sul web!
Tutti battaglieri giovani e professionali pronti per affrontare qualsiasi sfida nella comunicazione sul web, la strategia digitale, il web marketing online, i social media e le applicazioni informatiche.
Ciascuno con mille passioni e dedito a numerose attività: chi fa pesca subacquea, chi canta e suona la chitarra, chi è sempre in sella alla propria mountain bike, chi scrive e chi legge, chi kazzeggia, chi ama il buon vino, chi la birra, chi camminare in montagna, chi crogiolarsi al sole, chi arrampicarsi sui pendii innevati, chi farsi del male, chi si sposa, si fidanza, chi si lascia e chi s'innamora. Chi ama il mare e chi la montagna, chi vive d'adrenalina e chi di tranquillità. Chi è nato sul lago, chi in Svizzera, in Spagna, in Germania, in Transilvania, in Brasile ... e tutti con un fattor comune: la passione per il web!



Nicola Mosca

Nicola Mosca
CEO | Web App Consultant | Senior Software Developer

Davide Aldrighetti

Davide Aldrighetti
WEB CONSULTANT

Marco Parolari

Marco Parolari
web designer | web consultant

Ernesto Baruzzi

Ernesto Baruzzi
IT CONSULTANT

Mirian Molina

Mirian Molina
Account manager | Seo & Advertising

Francesca Novali

Francesca Novali
DIGITAL MARKETING MANAGER

Niccolò Pennestre

Niccolò Pennestre
Sales & Administrative manager

Marta Sufaru

Marta Sufaru
Sales & Webmarketing Consultant

Philipp Matz

Philipp Matz
Art director | Web design & developer

Luciano Favilla

Luciano Favilla
Front end web developer

Massimo Malacarne

Massimo Malacarne
Senior Software Developer

Marco Aldegheri

Marco Aldegheri
Senior Software Developer

Fabrizio Leonardi

Fabrizio Leonardi
SENIOR SOFTWARE DEVELOPER

Moreno Trainini

Moreno Trainini
Junior Software developer

Daniele Salvini

Daniele Salvini
JUNIOR SOFTWARE DEVELOPER

Mattia Malfatti

Mattia Malfatti
PROGRAM & PROJECT MANAGER

«WE ARE HIRING»<br> Senior Software Development Manager

«WE ARE HIRING»
Senior Software Development Manager
Inviaci il tuo curriculum

MI CANDIDO!
«WE ARE HIRING»<br> Full Stack Senior WEB Developer

«WE ARE HIRING»
Full Stack Senior WEB Developer
Inviaci il tuo curriculum

MI CANDIDO!
Vuoi far parte della tribù?

Vuoi far parte della tribù?
Inviaci il tuo curriculum


Ecco chi ha dato fiducia alla tribù...

In groppa alla zebra! Loro galoppano, combattono e vivono il web al nostro fianco.

Skirama Dolomiti Adamello-Brenta
Courmayeur Mont Blanc CSC
Azienda per il Turismo S.p.A. Madonna di Campiglio Pinzolo Val Rendena
Carioca
Unox
Adler
Trentino Charme
3tre Campiglio
Trentino Fishing
Diatec Group
Castelli
Sportsul
Trentino
Trentino Volley
Cantine Lunelli
Comano Valle Salus

KUMBE Web e Nuove Tecnologie
Via Fabbrica 52/B, 38079 Tione di Trento TN
38079 Tione di Trento (Trento) IT
tel +39 0465 322204
info@kumbe.it

Contattaci:

Hai raggiunto il limite

Dichiarazione in merito al GDPR (Regolamento Generale Protezione dei Dati)

Il titolare del trattamento dati è KUMBE SRL e dichiara che il dato acquisito tramite il presente form verrà trattato nel seguente modo:

  • Sarà utilizzato per l’evasione dell’attuale richiesta di informazioni/acquisto/iscrizione fino al suo espletamento e per nessuna ulteriore attività.
  • Viene conservato presso gli archivi aziendali senza data limite, fino a cancellazione autonomamente da parte dell’utente, volontaria da parte del Titolare o su esplicita richiesta di cancellazione da parte dell’utente.
  • Viene conservato per conto del Titolare da KUMBE, mantainer del Titolare per i servizi digitali, negli archivi cloud e relativi backup a loro volta gestiti in ottemperanza al GDPR per tutta la durata contrattuale con il Titolare -che ne può disporre in ogni momento- e fino a successiva cancellazione.
  • Non verrà venduto ad altri terzi, non verrà utilizzato per campagne di marketing salvo non sia contestualmente autorizzata tale opportunità.
  • L’utente verrà profilato in base alle informazioni contenute e il dato potrà essere utilizzato per elaborazione statistica.
  • la policy privacy completa puoi trovarla al link www.kumbe.it/privacy. Per ogni informazione o richiesta puoi scriverci all'indirizzo privacy@kumbe.it.

Dichiarazione in merito al GDPR (Regolamento Generale Protezione dei Dati)

In caso di sottoscrizione Newsletter l’utente dovrà confermare l’iscrizione per mezzo di mail di conferma inviata all’indirizzo inserito. In tal caso il trattamento prevede:

  • la profilazione dell’utente in gruppi, status, preferenze secondo quanto indicato e dedotto dalle informazioni inviate tramite il form o successiva autonoma profilazione.
  • l’utilizzo del dato per l’invio di comunicazione a mezzo digitale (email, whatsapp) e non (cartaceo) avente scopo informativo/commerciale.
  • l'utilizzo della mail per la generazione di campagne marketing e informative personalizzate, digitali e non.
  • la policy privacy completa puoi trovarla al link www.kumbe.it/privacy. Per ogni informazione o richiesta puoi scriverci all'indirizzo privacy@kumbe.it.
Invia richiesta

Grazie

Ti abbiamo inviato una email. Per attivare la newsletter clicca sul link che troverai nel messaggio, grazie!

Iscriviti alla newsletter


Dichiarazione in merito al GDPR (Regolamento Generale Protezione dei Dati)

In caso di sottoscrizione Newsletter l’utente dovrà confermare l’iscrizione per mezzo di mail di conferma inviata all’indirizzo inserito. In tal caso il trattamento prevede:

  • la profilazione dell’utente in gruppi, status, preferenze secondo quanto indicato e dedotto dalle informazioni inviate tramite il form o successiva autonoma profilazione.
  • l’utilizzo del dato per l’invio di comunicazione a mezzo digitale (email, whatsapp) e non (cartaceo) avente scopo informativo/commerciale.
  • l'utilizzo della mail per la generazione di campagne marketing e informative personalizzate, digitali e non.
  • la policy privacy completa puoi trovarla al link www.kumbe.it/privacy. Per ogni informazione o richiesta puoi scriverci all'indirizzo privacy@kumbe.it.
Annulla