Scoprite come creare i prototipi o i wireframe dei siti Web in Adobe Muse.

Nota:

Non verranno più aggiunte ulteriori funzioni ad Adobe Muse, e il supporto verrà sospeso a partire dal giovedì 26 marzo 2020. Per ulteriori informazioni e assistenza, consultate la pagina dedicata alla fine del ciclo di vita di Adobe Muse.

Oltre a essere molto intuitivo, Adobe Muse consente di creare rapidamente dei prototipi di progetti Web da visualizzare online. La possibilità di creare dei siti di prova consente di condividerne i collegamenti con potenziali clienti, che potranno vedere i prototipi online con gli stessi browser utilizzati per visualizzare la versione finale del sito. I clienti potranno così meglio comprendere come si presenterà il sito finale.

fig01.wireframe.b720
I wireframe contengono dei segnaposti che indicano la posizione degli elementi delle pagine.

Leggete di seguito per scoprire come progettare i wireframe, creare una vista di pianificazione strutturata e creare gli elementi segnaposto per il sito. Una volta finalizzati i contenuti, potrete sostituire gli elementi segnaposto con gli elementi effettivi per la pagina.

Utilizzo dei wireframe

I wireframe mostrano i layout di pagina del sito e consentono di fare clic sui collegamenti per vedere come scorre il sito. Dopo aver interagito con i wireframe, visitate il sito pubblicato finale per confrontare i wireframe con la versione completa. Osservate come gli elementi segnaposto nei wireframe sono stati sostituiti con la grafica della versione finale del sito.

Per vedere come sono stati realizzati i wireframe, scaricate i file di esempio (ZIP, 4,5 MB). Decomprimete il file .zip, aprite la cartella e individuate il file KevinsKoffeeKartWire.muse. Fate doppio clic su di esso per aprire i wireframe in Adobe Muse. Passate alla vista Pianificazione per vedere come le pagine sono organizzate in diversi livelli per creare la mappa del sito. Fate doppio clic sulle singole pagine per aprirle nella vista Progettazione e vedere come sono state progettate.

Adobe Muse offre numerose funzioni per la creazione di wireframe:

  • La vista Progettazione contiene una griglia a colonne opzionale con cui allineare gli elementi di layout.
  • Con gli strumenti di disegno flessibili è possibile creare forme segnaposto per i grafici.
  • Il pannello Risorse offre funzioni per l’aggiornamento delle immagini segnaposto.
  • Quando pubblicate o esportate un sito, Adobe Muse ottimizza, divide in sezioni ed esporta tutti i file immagine.
  • Gli stili per titoli e paragrafi consentono di creare pagine strutturate e modificare facilmente la formattazione del testo.
  • Il comando Inserisci consente di salvare il logo del cliente direttamente dal browser e di inserirlo nel file Adobe Muse.
fig02.wireframe.b720
Scegliete File > Inserisci per aggiungere rapidamente gli elementi del marchio ai wireframe.

Progettazione di wireframe per l’approvazione dei clienti

Dopo una riunione iniziale con il cliente, potete creare una bozza wireframe del sito che mostri il posizionamento e la funzionalità dei vari elementi di pagina, senza la grafica e la formattazione del testo finale del sito. Lo scopo di un wireframe consiste nel replicare la struttura di base delle pagine, simulando il modo in cui si presenteranno sul Web ma senza la distrazione di colori o contenuti visivi. Dei rettangoli vengono utilizzati come segnaposto per contrassegnare la posizione delle immagini e dei font generici o di scrittura a mano vengono usati per le aree della pagina in cui verranno inseriti i contenuti di testo.

I wireframe offrono i seguenti vantaggi:

  • Consentono ai clienti di concentrarsi sulla struttura del sito e comprenderne il layout.
  • Offrono un’esperienza online interattiva e permettono ai clienti di rivedere e approvare la progettazione dei siti.
  • Fungono da strumento di comunicazione per chiarire il design e le funzionalità del sito.

Oltre a essere uno strumento di progettazione Web, Adobe Muse è ideale per la realizzazione di prototipi. Potete immediatamente creare un URL di prova da inviare ai clienti in un messaggio e-mail, per un più semplice processo di approvazione. Ma la creazione di bozze wireframe con Adobe Muse offre anche altri vantaggi.

L’utilizzo di wireframe in Adobe Muse incrementa la produttività. Infatti la funzionalità di modifica delle immagini di tipo “roundtrip” e gli stili di paragrafo modificabili permettono ai designer Web di aggiornare rapidamente i file .muse e convertire la bozza wireframe in versione finale. Una volta ottenuta l’approvazione del cliente, non è necessario eliminare i wireframe e rincominciare da zero a creare il progetto, ma è possibile aggiornare i wireframe approvati aggiungendovi i contenuti Web effettivi. Strada facendo, poi, è possibile pubblicare un numero illimitato di siti di prova per condividere con i clienti varie versioni del lavoro in corso.

Per creare un sito con wireframe, seguite il seguente flusso di lavoro:

  • Realizzate una versione wireframe del sito e pubblicate una versione di prova gratuita.
  • Il cliente esamina il sito di prova online, facendo clic per passare alle varie pagine.
  • Il cliente richiede alcune modifiche o chiarimenti sul design.
  • Dopo tutte le revisioni necessarie, il cliente approva la versione wireframe.
  • Aggiornate il sito wireframe aggiungendovi gli elementi grafici e i colori desiderati.
  • Aggiornate gli stili di paragrafo per formattare il contenuto di testo esistente.
  • Il cliente esamina la versione aggiornata del sito e richiede ulteriori modifiche.
  • Apportate le modifiche necessarie.
  • Il cliente approva la versione completa.
  • Aggiornate il sito, impostate il dominio e pubblicate il sito finale online.

Analisi della struttura del sito nella vista Pianificazione in Adobe Muse

Per vedere in che modo le pagine del sito vengono collocate nella gerarchia che definisce i livelli superiori e i relativi sottolivelli dei collegamenti di navigazione, aprite il file .muse della bozza wireframe in Adobe Muse per analizzarlo. Il progetto si apre nella vista Pianificazione, che mostra tutte le pagine del sito.

fig03.wireframe.b720
Le pagine wireframe vengono visualizzate in vista Pianificazione.

Notate i due livelli: un livello principale e un sottolivello, che rappresentano la gerarchia della mappa del sito. In qualsiasi momento durante lo sviluppo o la manutenzione del sito, potete fare clic e trascinare le pagine per riposizionarle nella struttura del sito.

Per creare nuove pagine:

  1. Fate clic sul pulsante più (+) a destra o al di sotto di una pagina esistente, quindi fate clic sul campo del nome della pagina e assegnate un nome, quanto più descrittivo possibile.

  2. Fate clic con il pulsante destro del mouse su una miniatura di pagina e scegliete le opzioni di menu per duplicarla, eliminarla o rinominarla.

    In alternativa, per eliminarla, passate il puntatore su una pagina e fate clic sull’icona X che compare nell’angolo in alto a destra.

  3. Se state seguendo le procedure descritte, provate ad aggiungere, riposizionare ed eliminare delle pagine. Se necessario, scegliete Modifica > Annulla per annullare le modifiche apportate e ripristinare lo stato originale del sito wireframe.

    L’interfaccia della vista Pianificazione è intuitiva e Adobe Muse tiene traccia di tutti i nomi delle pagine e mantiene i collegamenti presenti nei widget di menu. Tutte le modifiche apportate vengono aggiornate automaticamente per assicurare che i collegamenti continuino a funzionare.

Utilizzo di stili grafici per creare elementi segnaposto con gli stessi attributi

Come Adobe Photoshop e Adobe Illustrator, Adobe Muse consente di creare stili grafici da applicare a vari elementi per mantenere un aspetto coerente. Questo è utile per la realizzazione dei wireframe e la creazione delle pagine, perché è possibile modificare uno stile di grafica esistente e aggiornare all’istante tutti gli elementi a cui tale stile è stato applicato. Potete anche copiare gli stili esistenti per crearne delle variazioni.

Per applicare specifici attributi alle forme mediante gli stili grafici e creare dei segnaposto per i file di immagine in un sito wireframe, effettuate le seguenti operazioni:

  1. Con lo strumento rettangolo disegnate tre rettangoli su una pagina nella vista Progettazione.

  2. Selezionate un rettangolo e modificatelo per impostarne il colore del tratto, il colore di riempimento e le impostazioni di opacità e per aggiungere effetti grafici, come ombre esterne.

  3. Con il rettangolo selezionato, fate clic su Crea nuovo stile grafico nella parte inferiore del pannello Stili grafica. Lo stile viene basato sulla formattazione del rettangolo selezionato. Fate doppio clic sul nuovo stile grafico per assegnarvi un nome descrittivo.

  4. Selezionate uno degli altri rettangoli e applicategli lo stesso stile grafico facendo clic sul nome dello stile. Ripetete questo passaggio per applicare lo stile al terzo rettangolo, in modo che tutti e tre usino lo stesso stile.

  5. Selezionate un rettangolo e modificatene lo stile leggermente. Notate il segno più (+) che viene visualizzato nel pannello Stili grafica accanto al nome dello stile modificato.

  6. Fate clic con il pulsante destro del mouse sul nome dello stile nel pannello Stili grafica e scegliete Ridefinisci stile. Gli altri due rettangoli vengono automaticamente aggiornati in base alla nuova definizione dello stile e il pulsante più (+) scompare.

  7. Con gli stili grafici potete formattare rapidamente le forme per creare wireframe dall’aspetto coerenti e aggiornare un set di risorse del sito in base alle modifiche richieste dal cliente.

Creazione di pagine Web strutturate e formattazione del testo con stili di paragrafo

Quando create di un sito di bozza wireframe, potete usare lo strumento Testo per creare delle cornici di testo e aggiungere del testo segnaposto (lorem ipsum) che potrete sostituire in un secondo tempo con testo effettivo. Se invece il client ha già un sito Web, potete copiare il testo direttamente dal browser e incollarlo nelle cornici di testo. Dopo aver creato gli elementi di testo, potete formattare il testo con il pannello Testo.

Utilizzando gli stili di paragrafo, potete strutturare il contenuto testuale della pagina definendo i tag per titoli e paragrafi:

  1. Nella vista Progettazione, usate lo strumento testo per delimitare una cornice di testo sulla pagina. Digitate o incollate del testo nella cornice di testo.

  2. Con il pannello testo o le opzioni del pannello di controllo nella parte superiore dell’area di lavoro della vista Progettazione, impostate le opzioni di formattazione selezionando font, dimensione, colore e altre proprietà.

  3. Fate clic su Crea nuovo stile di paragrafo in fondo al pannello Stili di paragrafo per creare un nuovo stile di paragrafo. Fate doppio clic sul nome del nuovo stile e digitate un nuovo nome descrittivo.

  4. Fate clic con il pulsante destro del mouse sullo stile e scegliete Opzioni stile. Dal menu Tag paragrafo, impostate come destinazione dello stile di paragrafo uno specifico tag HTML, ad esempio P, H1, H2 o H3.

    fig04.wireframe.b720
    Fate clic con il pulsante destro del mouse sul nome di uno stile nel pannello Stili di paragrafo e nella finestra di dialogo Opzioni stile impostate lo stile su un particolare tag di titolo o paragrafo.

  5. Create altre cornici con testo. Se fate clic sul nome di uno stile di paragrafo mentre è selezionata una cornice di testo, la formattazione dello stile di paragrafo viene applicata alla cornice di testo selezionata. Se successivamente selezionate una delle cornici di testo a cui è stato applicato uno stile e la modificate, nel pannello Stili di paragrafo viene visualizzato il pulsante più (+) accanto al nome dello stile. Questo indica che per questa cornice lo stile è stato modificato, in modo analogo agli stili di grafica.

  6. Per aggiornare automaticamente tutte le cornici di testo con lo stesso stile, fate clic con il pulsante destro del mouse sul nome dello stile in Stili di paragrafo e scegliete Ridefinisci stile.

    Come illustrato da questo esempio, potete creare diversi contenitori di testo e impostarli su stili specifici per creare una struttura dall’aspetto uniforme. Quando poi aggiornate i wireframe per ottenere la versione finale del sito, sarà possibile aggiornare facilmente gli stili in basa alle modifiche richieste dal cliente. La creazione di pagine Web strutturate con contenitori di testo rappresenta una procedura ottimale in quanto consente di migliorare la classificazione del sito in base all’ottimizzazione per i motori di ricerca.

Nota:

se progettate delle pagine con colori di sfondo in tinta unita, impostate gli stessi colori per il riempimento di sfondo delle cornici di testo, affinché Adobe Muse possa pubblicare i contenuti testuali in modo più efficiente. Se il riempimento di sfondo non è noto, il testo pubblicato avrà bordi più irregolari perché Adobe Muse imposta il colore di sfondo della cornice di testo come trasparente. Tuttavia, se lo sfondo della pagina contiene sfumature o immagini, lasciate il colore di riempimento delle cornici di testo impostato su Nessuno.

Aggiornamento delle immagini segnaposto con la grafica finale del sito

Dopo che il cliente avrà approvato la versione wireframe, potete aggiornare rapidamente con i file immagini effettivi.

  1. Selezionate un segnaposto immagine sulla pagina.

  2. Aprite il pannello Risorse per individuare l’elemento selezionato.

  3. Fate clic con il pulsante destro sull’elemento. Nel menu risultante, sono disponibili due opzioni per aggiornare il file di immagine, a seconda di come è stato assemblato il sito wireframe.

    Se avete creato un file in Adobe Photoshop o Adobe Fireworks e lo avete inserito sulla pagina, potete scegliere Modifica originale per modificare il file originale nell’applicazione con cui era stato creato. Quando salvate il file originale e tornate ad Adobe Muse, le istanze inserite del file vengono automaticamente aggiornate.

    Se invece avevate creato dei segnaposto per file immagine con lo strumento rettangolo di Adobe Muse, scegliete Ricollega tutte le istanze e individuate un file esistente sul computer per sostituire il segnaposto con l’immagine finale.

    fig05.wireframe.b720
    Fate clic con il pulsante destro del mouse sul nome di una risorsa e scegliete Modifica originale per aprire il file segnaposto originale nell’applicazione con cui era stato creato.

  4. Ripetete questi passaggi per sostituire con le immagini effettive tutte le immagini segnaposto sulla pagina.

    Nota:

    quando fate clic con il pulsante destro del mouse sul nome di una risorsa nel pannello Risorse, potete anche scegliere Vai a risorsa. In questo modo Adobe Muse apre la pagina contenente la risorsa selezionata, che potrete aggiornare rapidamente.

Accesso ai file immagine ottimizzati generati da Adobe Muse

Oltre a pubblicare i siti creati in Adobe Muse sul server di hosting, potete esportare l’intero sito per ottenere una cartella con i file di immagine suddivisi in sezioni ed esportati:

  1. Scegliete File > Esporta come HTML.

    Si apre la finestra di dialogo Esporta come HTML.

  2. Selezionate il percorso sul computer in cui esportare i file del sito e fate clic su OK.

Al termine, Adobe Muse esporta i file e li salva nella cartella locale specificata. Passate alla cartella e aprite la cartella delle immagini per accedere ai file immagine ottimizzati. Potete elaborarli per creare newsletter, app per dispositivi mobili, pagine di social network e altri progetti correlati.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online