✅ Introduzione al layout web

Sommario

Il layout è legato alla distribuzione degli elementi in un determinato spazio della pagina, mentre il design editoriale comprende altri elementi che vanno dal progetto grafico ai processi di produzione chiamati anche preparazione alla stampa. Tuttavia per questo processo è noto come layout.
Per iniziare a progettare un sito web È necessario disporre di 3 programmi come PhotoShop, Fireworks e Dreamweaver. A sua volta, è essenziale avere una conoscenza preliminare del codice HTML. L'HTML descrive la struttura e il contenuto di un sito sotto forma di testo. Gli elementi in HTML sono costituiti da un tag iniziale e da un tag finale, tra di loro viene inserito un contenuto.

Quando i contenuti multimediali hanno iniziato a essere utilizzati in modo massiccio sul web, sono apparsi in codice HTML 5 per facilitare questa inclusione. HTML5 ha le seguenti caratteristiche.

Non essere da mani private
Flessibile
Standard utilizzati

Prima di iniziare a lavorare con il layout, il designer deve aver lavorato con un progetto in cui riflette le esigenze dei suoi clienti:

Successivamente, il programma PhotoShop (PSD) si aprirà per visualizzare il progetto:

Successivamente, inizieremo ad analizzare gli elementi comuni, ovvero organizzare la pagina come gruppi.
Si vede che il corpo della pagina sarà il totale del progetto dove i diversi elementi inizieranno poi ad essere raggruppati, ad esempio: all'interno del contenuto i due loghi che si trovano nella parte superiore:

Una volta che il progetto di base è stato analizzato in PhotoShop, inizierà il lavoro con Fireworks:
Apri il progetto con Fireworks:

Con lo strumento di divisione Fireworks, ciascuno degli elementi del disegno inizierà a essere inquadrato:

Una volta effettuate le divisioni degli elementi, questi vengono selezionati insieme ed esportati come HTML e immagini. In questo modo verranno generati file per ciascuna delle divisioni.