KUMBE · BLOG


MORENO: Dietro le quinte del sito web 3 - Wireframe


Vai alla lista Leggi l'articolo

nuove tecnologie software web portal web service

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.





Preview Prossimo articolo


Kumbe blog



instagram-cell-phone-tablet-device-163148,1439.jpg?WebbinsCacheCounter=1
1-brcj-syuyum9acqwugxtta,1424.jpeg?WebbinsCacheCounter=1
web_design,1279.png?WebbinsCacheCounter=1

Courmayeur Mont-Blanc, Official website
Dolomiti Paganella, Azienda per il Turismo
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
Borgo Salute, Le Terme in Val Rendena
Trentino Volley, Official website
Discover Saint Vincent & Châtillon, Consorzio Turistico

Discover Saint Vincent & Châtillon, Consorzio Turistico
Saint Vincent & Châtillon (AO)


Dettagli   Visita il Sito


Kumbe Tribu


I guerriglieri del Web

Il nostro totem: la zwebra!

Tre capostipiti e tanti sciamani con un'unica guerra da combattere: la qualità sul web!
Tutti guerriglieri 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 ... e tutti con un fattor comune: il web!



Davide Aldrighetti

Davide Aldrighetti
WEB CONSULTANT & PROJECT MANAGER

Nicola Mosca

Nicola Mosca
Web App Consultant, Senior Software Developer

Marco Parolari

Marco Parolari
web designer, consultant & PROJECT MANAGER

Mirian Molina

Mirian Molina
Account manager, Seo & Advertising

Marta Sufaru

Marta Sufaru
Sales & Webmarketing Consultant

Niccolò Pennestre

Niccolò Pennestre
Sales & Administrative manager

Claudia Martinello

Claudia Martinello
Graphic Design

Philipp Matz

Philipp Matz
Art director / Web design & developer

Massimo Malacarne

Massimo Malacarne
Senior Software Developer

Moreno Trainini

Moreno Trainini
Junior Software developer

Marco Aldegheri

Marco Aldegheri
Senior Software Developer

Andrea Bernardi

Andrea Bernardi
Senior Project Developer


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
Unox
Carioca
Adler
Trentino Charme
3tre Campiglio
Trentino Fishing
Diatec Group
Castelli
Sportsul
Trentino
Trentino Volley
Cantine Lunelli
Comano Valle Salus
Courmayeur Mont Blanc CSC
Azienda per il Turismo S.p.A. Madonna di Campiglio Pinzolo Val Rendena

Kumbe Location Tione

Contattaci:

Hai raggiunto il limite

Invia richiesta

Iscriviti alla newsletter


Annulla