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.

CONTATTA ORA LA TRIBU'




Preview Prossimo articolo


Kumbe blog



web_design,1279.png
web_typography,1248.jpg
fb,1226.jpg

Madonna di Campiglio Pinzolo Val Rendena, Azienda per il Turismo S.p.a.

Madonna di Campiglio Pinzolo Val Rendena, Azienda per il Turismo S.p.a.
Madonna di Campiglio, Pinzolo, Val Rendena


Dettagli   Visita il Sito
Skirama Dolomiti Adamello Brenta, official website
Courmayeur Mont-Blanc, Official website
Monroc Hotel, There is more to explore
Il Sogno di Giulietta, Relais de Charme
Discover Saint Vincent & Châtillon, Consorzio Turistico

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


Dettagli   Visita il Sito
Chalet Alpenrose Bio Wellness Naturhotel
3Tre Campiglio FIS SKI World Cup, Official Website


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, e chi in Germania... 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.

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

Kumbe Location Tione

Contattaci:

Hai raggiunto il limite

Invia richiesta

Iscriviti alla newsletter


Annulla