Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Denim, disegno a mano libera per il web design

Concepire mappe, definire strutture, disegnare layout: grazie a Denim si coniugano i vantaggi della progettazione 'a mano libera' con l'efficienza degli strumenti interattivi digitali
Concepire mappe, definire strutture, disegnare layout: grazie a Denim si coniugano i vantaggi della progettazione 'a mano libera' con l'efficienza degli strumenti interattivi digitali
Link copiato negli appunti

Molto spesso si è portati a ritenere che le prime fasi progettuali della macrostruttura di un sito, così come i passi successivi di definizione dell'architettura dell'informazione e, ancora più nel dettaglio, del layout delle pagine, siano processi necessariamente molto macchinosi e lunghi. In realtà chi progetta e disegna siti da tempo si sarà accorto come l'aspetto creativo legato all'impulso del momento venga troppo spesso smorzato dalla lentezza con cui gli strumenti elettronici e i software solitamente usati ci permettono di rendere visualizzabili le nostre idee.

Quante volte, per esempio, abbiamo sprecato ore e ore per trasferire qualche idea di navigazione in un file Power Point o in un software di grafica che hanno poi generato risultati di non facile interpretazione? E, allo stesso modo, non ci è mai capitato di aver deciso di progettare prima tutto su carta effettuando decine di schizzi che, tuttavia, una volta annotati di getto non ci hanno permesso di effettuare modifiche se a patto di ridisegnarli svariate volte? Che dire poi della difficoltà di tracciare collegamenti tra "foglietti volanti" o di stabilire relazioni tra supporti cartacei che siano in grado di trasferire visivamente la complessità di un sito?

Fortunatamente esistono strumenti che permettono di conciliare i vantaggi della creazione d'impulso a mano libera con alcune delle funzionalità elettroniche più apprezzate come, per esempio, il copia/incolla, lo spostamento di elementi all'interno degli spazi di lavoro, il collegamento dinamico tra elementi e molti altri ancora.

Uno di questi strumenti è Denim, programma Open Source scritto in Java (richiede quindi un qualsiasi sistema operativo su cui sia installata la Java Virtual Machine) espressamente studiato per essere impiegato in abbinamento a una tavoletta grafica o a un tablet PC e per assistere il progettista Web nella realizzazione di schemi progettuali che svariano dalla definizione della macrostruttura del sito al più piccolo dettaglio presente all'interno della pagina.

Interfaccia "manuale"

Figura 1 - Screenshot: interfaccia di Denim (click per ingrandire)
Screenshot: interfaccia di Denim

Per quanto a prima vista Denim possa sembra un software dall'interfaccia poco curata (in effetti non si è prestata grande attenzione all'estetica di alcuni suoi elementi…), in realtà ogni minimo dettaglio legato all'interazione con l'utente risulta assolutamente adeguato alle più ambiziose esigenze operative.

Innanzi tutto Denim consente, se utilizzato con una tavoletta grafica, di utilizzare speciali gesti per controllare la creazione di pagine, la cancellazione di elementi e diverse altre operazioni. La possibilità di disegnare rapidamente e inserire elementi in maniera intuitiva, o meglio, senza quasi pensare al "come" ottenere il risultato desiderato, rende così molto più rapido il processo creativo.

Per esempio, basta tratteggiare un riquadro perché questo venga automaticamente trasformato in una pagina, mentre agendo sulla barra di scorrimento a sinistra si possono applicare gli ingrandimenti dell'area di lavoro passando in pochi istanti dalla visione verticale della macrostruttura del progetto al più accurato livello di dettaglio relativo alla composizione e alla collocazione dei contenuti all'interno del layout delle singole pagine. Altrettanto utile e funzionale è l'aspetto della dinamicità dell'interfaccia che consente di effettuare modifiche relazionali tra cui lo spostamento degli elementi, semplicemente trascinandoli da un punto all'altro dello schermo, o l'instaurazione di link non solo tra pagine ma anche tra gli elementi interni del singolo layout verso le altre pagine.

Parola chiave di Denim è l'intuitività delle operazioni da svolgere. Una volta disegnate le pagine, basta infatti disegnare una linea che le unisce perché questa linea venga riconosciuta come iperlink che seguirà la pagina di destinazione ovunque questa venga trasportata.

Dall'idea alla rifinitura

Figura 2 - Screenshot: un'altra vista dell'interfaccia di Denim (click per ingrandire)
Screenshot: un'altra vista dell'interfaccia di Denim

Come già accennato, Denim prevede diversi livelli di dettaglio, resi accessibili attraverso la barra di scorrimento posta sulla sinistra della pagina.

Il primo e più ampio livello di zoom è quello definito come Overview (visione globale). A questo livello di zoom, il progettista riesce a visualizzare la macrostruttura del sito, individuando con un solo colpo d'occhio le relazioni tra le sezioni del sito e potendo così capire se esistono eventuali incoerenze o collegamenti mancanti. Questo livello di dettaglio risulta utile soprattutto per portali molto strutturati e con un elevatissimo numero di pagine.

Per progetti di media portata, la visione di dettaglio "Site Map" (mappa del sito) risulta sicuramente molto efficace nella prima fase di programmazione. Qui è infatti possibile effettuare il primo brain storming, disegnando di getto tutte le pagine e i gruppi di pagine che faranno parte del sito. In un secondo momento, si procederà a un card sorting elettronico delle pagine create, collocandole nello spazio più corretto e tratteggiando i collegamenti tra di esse.

Il livello Storyboard è quello che consente di controllare con maggiore precisione l'inserimento dei collegamenti ipertestuali tra le pagine poiché, con questo tipo di ingrandimento, si riescono a inserire link che partono direttamente da uno specifico elemento della pagina. Quando poi si arriva a voler definire il layout vero e proprio della singola pagina, l'ingrandimento ulteriore ci permette di visualizzare ogni scheda a grandezza tale da inserirvi ulteriori schizzi, sezioni testuali e segnaposto per elementi grafici o multimediali. Questa modalità di schematizzazione vettoriale della pagina consente di disegnare molto velocemente le gabbie del layout, lasciando a successive fasi prettamente grafiche la definizione specifica dell'estetica del layout.

Un ultimo livello operativo è quello di massimo dettaglio (Detail), zoom grazie al quale possiamo davvero identificare graficamente uno svariato numero di elementi e riportare indicazioni talmente precise da poter guidare con la massima rigorosità chi realizzerà l'implementazione finale del sito.

Gli output

Tra i diversi vantaggi di Denim uno di quelli sicuramente più apprezzati è la possibilità di esportare la progettazione effettuata in formati facilmente distribuibili. Se, infatti, il file originale viene salvato in un formato specifico introdotto dagli sviluppatori di Denim che non risulta compatibile con altri software (in ogni caso, essendo un programma gratuito si può sempre scaricarlo e installarlo), per quanto riguarda l'esportazione vera e propria Denim permette di generare file HTML e tutti gli elementi grafici necessari per rendere "trasportabile" o pubblicabile on line la bozza di progettazione realizzata. Da sottolineare come attraverso il sistema di anteprima o l'esportazione in HTML del file, Denim consenta di farsi un'idea alquanto precisa delle possibilità di interazione del modello realizzato, interazioni che, dopo aver implementato il sito, sarebbe probabilmente troppo tardi per ridiscutere e modificare.

Daniele Cerra Ë giornalista pubblicista, Content Manager, Progettista e-learning e web e Concept Designer. Il suo sito personale è http://www.danielecerra.it

Ti consigliamo anche