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



hospitality-day,2141.jpg?WebbinsCacheCounter=1
web-developer-kumbe,2045.jpg?WebbinsCacheCounter=1
full-stack-senior-web-developer_kumbe,2043.jpg?WebbinsCacheCounter=1

Azienda per il Turismo Dolomiti Paganella
Prosecco Hills
Andalo Life, Family Activity Park
Ski Area Campiglio Dolomiti
Pretzhof Selection
Dolomiti Paganella Bike
Breg Adventure Park
Regole Spinale Manez


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 | Software Consultant

Davide Aldrighetti

Davide Aldrighetti
DIGITAL STRATEGIST

Marco Parolari

Marco Parolari
PM | web consultant

Ernesto Baruzzi

Ernesto Baruzzi
IT consultant

Mirian Molina

Mirian Molina
Digital account

Francesca Novali

Francesca Novali
Digital Media - Content Curator

Niccolò Pennestre

Niccolò Pennestre
Sales account

Marta Sufaru

Marta Sufaru
Sales Account

Philipp Matz

Philipp Matz
Art director - UX/UI designer

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

Ion Turcan

Ion Turcan
JUNIOR WEB DEVELOPER

Mattia Malfatti

Mattia Malfatti
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.

Courmayeur Mont Blanc CSC
Azienda per il Turismo S.p.A. Madonna di Campiglio Pinzolo Val Rendena
Dolomiti Paganella Bike
logo-ski
Andalo Life
Val di Non
Prosecco Hills
Skirama Dolomiti Adamello-Brenta
3tre Campiglio
Trentino
Mieli thun
Unox
Adler
Trentino Fishing
Diatec Group
Castelli
Sportsul
Apt dolomiti paganella
Cantine Lunelli
Comano Valle Salus

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

Contattaci:

Hai raggiunto il limite

Invia richiesta

Grazie

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

Iscriviti alla newsletter